Home arrow JavaScript arrow Modenizr JavaScript Library for CSS3 and HTML5
JAVASCRIPT

Modenizr JavaScript Library for CSS3 and HTML5


It’s an undeniable fact that we need to face sooner or later: designing modern websites requires a bold attitude, which forces us to be in touch with some of the brand new, flashy technologies that are at our disposal, such as CSS3 and HTML5. Of course, the major drawback of this scenario is that the fruits of this brave behavior can quickly vanish in thin air, as soon as we start thinking about the browsers out there that still don’t offer solid support for the new specifications (I'm looking at you Internet Explorer).

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
March 23, 2011
TABLE OF CONTENTS:
  1. · Modenizr JavaScript Library for CSS3 and HTML5
  2. · Modernizr and the “text-shadow” CSS3 property
  3. · Styling Elements on non-compliant CSS3/HTML5 browsers

print this article
SEARCH DEVARTICLES

Modenizr JavaScript Library for CSS3 and HTML5
(Page 1 of 3 )

Does this mean that we have to give up using the goodies that CSS3 and HTML5 hide under the hood because of the rebel attitude of a few “bay boys”? Well, not really. In fact, in the last couple of years some JavaScript packages have emerged, which thanks to the use of progressive enhancement, make it easier to create websites that take advantage of the most popular features included in the new standards.     

Among these packages, there's a lightweight JavaScript library called Modernizr (http://www.modernizr.com/), which facilitates the whole design process, and best of all, you don’t need to climb a steep learning curve to grasp its inner workings.

Modernizr is a breeze to use, trust me. Its driving logic is amazingly simple, but at the same time powerful. In short terms, all that the library does is check to see if the browser supports a range of CSS3/HTML5 features (you can see the full list of tested features here: http://www.modernizr.com/docs/). If the browser does support a given feature, Modernizr adds it dynamically to the web page’s <html> element - a CSS class whose name resembles the feature in question; otherwise it appends a similar class, but it prefixes the name with the string “no-“. In addition, the library creates a JavaScript object called modernizr and adds to it some properties, following the same naming convention described above.

Seated on top of this handy rationale, Modernizr becomes a great tool that assists the web designer in the creation of cutting-edge websites, and as such, it deserves a deeper look. In line with this idea, in this article series I'm going to develop some easy-to-follow examples, which will show you how Modernizr does its thing and how you can take advantage of its capabilities when developing your own websites.

Getting Started: Seeing Modernizr in Action

To get started using Modernizr, the first step that I’m going to take will consist of creating a simple web page, which will naturaly include the library at the beginning. The source code corresponding to this page is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using Modernizr</title>
<script src="modernizr-1.7.min.js"></script>
</head>
<body>
<div id="wrapper">
    <h1>Using Modernizr</h1>
    <h2>This is a sample heading element</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <h2>This is a sample heading element</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <h2>This is a sample heading element</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
</body>
</html>

At first glance, nothing especially interesting is happening here. But this is a wrong impression, believe me. If you test the web page using a browser such as Firefox, and browse the source code with some utility, like Firebug, you’ll see that Modernizr has added the following <html> element CSS classes dynamically:

<html class="js flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths” xmlns="http://www.w3.org/1999/xhtml">

Effectively, the library has appended a set of CSS classes whose names are quite similar to the features supported (and not supported by the browser, along with some JavaScript properties of the “modernizr” object, which will be discussed later on). At this point, it’s easy to see that the library does nothing really "magic"; it simply generates a bunch of CSS classes as a result of the whole testing process that it performs behind the scenes.

At this point you're probably wondering how those classes can be employed in a truly useful fashion. Well, as you may have noticed, among these classes, there’s one called “textshadow”, which indicates that the browser effectively supports the “text-shadow” CSS3 property. With this class already available, it’s possible to decorate some of the elements of the previous web page using the pertaining property.

In line with this concept, in the following section I’m going to create an example for you which will demonstrate how to utilize Modernizr with the “text-shadow” property.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials