The advent of HTML5 and CSS3 and the ever-growing number of platforms trying to keep up with their standards has invoked unbridled enthusiasm among designers and developers alike. However, not many of them confidently use HTML5 and CSS3 at the production level, without any fallback options. This is primarily because of the slow transition to new and more supportive browsers by the users.
For designers, it has always been a pain to let go of those cool features available in newer web technologies, simply because some browsers don’t support them as expected!
Nevertheless, if you do feel the urge to show your creativity with HTML5 and CSS3, while ensuring that the users with older browsers don’t get left too far behind, Modernizr is here for you.
What is Modernizr?
Modernizr is a small JavaScript library that detects the availability of native support for individual CSS3 and HTML5 features in a web browser. Although Modernizr sounds like it’s out to ‘modernize’ every browser it runs on; that’s not entirely true.
Its primary job is to detect support for individual features for you, which you as the developer have to make use of. However, it does have some ‘modernizing powers’ as far as Internet Explorer is concerned. Keep reading to find more on that.
What other options do I have?
Unfortunately, there is no such perfect tool or trick, which can solve all your cross-browser compatibility issues automatically. However, there are a number of hacks, tools and design decisions that can help you partially mitigate certain issues. Most developers usually deploy the ‘Browser sniffer’ hack (user agent sniffing).
They include a special JavaScript or PHP based snippet, called a ‘sniffer’ in a particular webpage, which is usually meant to detect the client’s ‘user agent’ information. The ‘Browser sniffer’ hack is very unreliable and ambiguous, because a browser’s ‘user agent’ information is user-configurable.. Moreover, Modernizr was particularly built to replace ‘browser sniffing’ altogether, along with all the deception and ambiguity that comes with it.
A relatively saner decision would be to recognize a reasonable set of browsers that you are willing to support and then develop accordingly. This approach is widely used and you should consider using it if all the contents of your webpage are equally important and a strictly identical layout is expected across all the targeted browsers. However, it most probably eliminates any chance of using HTML5 and CSS3 features on the page.
Some developers opt for the graceful degradation design decision, which refers to the practice of building your webpage with the latest features and best browsers in mind. In addition, you add tools to detect the availability of support for those features. To prepare for ‘no support,’ you deploy alternative measures to scale down, but make sure a reasonable version is rendered. Now that you have Modernizr in your arsenal, we’ll tell you how it goes one-up!
What makes Modernizr so special?
Modernizr is a great tool when it comes to solving cross-browser compatibility issues, because of its power of feature detection. It is much more reliable and robust as compared to browser sniffing or any other hack. Browser sniffing means simply asking the browser a naïve “Who are you?”. Feature detection means telling the browser “Let me see what features you can support”! Now, you can’t hide much, if your mom herself starts looking out for the candies in your pocket, can you?
Modernizr is built upon the concept of progressive enhancement, which advocates rendering web pages progressively, based on characteristics of the client. It encourages you to build your projects in a bottom-up and layered way, in order to render individual ‘feature-specific’ layout and content on the fly. Modernizr expects you to understand that it is not always necessary to display things in an identical manner across every browser out there.
Developers use Modernizr mostly to accomplish two common motives. Some developers liberally use CSS3 in their projects, and use Modernizr to create ‘hackish’ CSS fallbacks to mimic the same effect in ‘non-supportive’ browsers. Others use it to render reasonably distinct content, layout and behaviour, based on the support available for a particular set of individual features in the browser.
How do I install Modernizr in a webpage?
To start using Modernizr in your projects, you first need to ‘build and download’ your preferred version of Modernizr from http://modernizr.com/download. You have an option to download the production version (small in size, loads fast) or the development version (large in size, good for learning).
Assuming that the downloaded file is modernizr.custom.34635.js and it is stored in the js folder of your website; install it on a webpage by using a script tag in the head area of your page. That’s it!
Your ‘Modernizr-ready’ source code will look something like:
<!doctype html>
<html><head>
<script src=’js/ modernizr.custom.34635’></script>
</head><!-- other stuff here... -->
</html>
Installed, what next?
Once the library is installed in a webpage, it is ready for feature test & detection.
Modernizr runs quickly on page load to test and detect features; it then creates a JavaScript object with the results, and also adds classes to the html element for you to key your CSS on.
The ‘live’ html element for the webpage, when viewed in the latest Chrome browser, might look something like:
<html class=” js flexbox no-touch hashchange history rgba multiplebgs backgroundsize borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface generatedcontent video” >
Google Chrome supports variable opacity, as prescribed by the CSS3 specification; hence, the class ‘opacity’ is dynamically inserted inside the html element. Chrome for desktops usually does not support ‘touch’, hence the prefix ‘no-’ is included with the term ‘touch’ here.
Assume that we have a ‘div’ element in the body with its id set to ‘mycoolbox’. We can write its CSS styling in the following manner:
#mycoolbox {
height : 252px;
width : 252px;
}
.no-opacity #mycoolbox {
/* used when browser doesn’t support opacity */
background-color : rgb(10, 87, 110);
}
.opacity #mycoolbox {
/* used when browser supports opacity */
background-color : rgb(60, 137, 160);
opacity : 0.2;
}
These CSS definitions will make the ‘opacity supporting browsers’ render the ‘mycoolbox’ div with 20% opacity. It might look similar to the image on the right. In browsers that don’t support opacity, the ‘no-opacity’ class will induce a new ‘mimicking’ colour! Check out the image on the left to get a feel of it.
In addition to modifying the html element, Modernizr also creates a JavaScript object, simply called ‘Modernizr’, which has a list of Boolean-valued properties for each individual tested feature.
For example, If the browser supports ‘touch’, the Modernizr object will contain a Modernizr.touch property with its Boolean value set to true. To make use of possible support for ‘touch’ in a browser, you can write conditional JavaScript statements like:
if (Modernizr.touch) {
//code that has something to do with touch capability
}
else {
//code to handle the unavailability of touch capability
}
Similarly, other browser capabilities can be harnessed using such JavaScript conditional statements. Have a look at Modernizr’s documentation at http://modernizr.com/docs/ to get the complete list of features tested by Modernizr.
Popular websites like css-tricks.com, about.com and posterous.com among many others use Modernizr to selectively deliver HTML5 and CSS3 content to its users. If you use a debugger like FireBug, you should take a sneak peek at their live source code to witness the ‘live Modernizr action’.
Is that it?
We apologize if we kept you waiting for the ‘Internet Explorer modernizing’ thing! Nevertheless, this feature is certainly worth the wait!
Modernizr comes bundled with something called HTML5 Shiv, which provides you the capability to render basic HTML5 elements in IE browsers! It will add HTML5 and CSS3 support in Internet explorer browsers, while you need to make sure that you do include HTML5 Shiv while building your Modernizr download package.
If it’s absolutely necessary for your webpage to have support for a particular HTML5 feature in every browser your webpage might render on, you can go for quick-fixes called ‘polyfills’. These are dirty but effective JavaScript workarounds that make up for the lack of a particular set of capabilities in browsers. Though polyfills might help you a lot, they usually have large footprints. You could possibly degrade user experience of the webpage, by littering your webpage with polyfills.
In case you make up your mind to use polyfills, something called yepnope.js can be your friend. It’s an asynchronous conditional resource loader that allows you to selectively load only the scripts that your users need. It has a very simple, self-explanatory and intuitive syntax:
Modernizr.load({
test: Modernizr.geolocation,
yep : ‘normal-geo.js’,
nope: [‘polyfill-geo.js’, ‘other-polyfill-geo.js’]
});
As you might imagine, this snippet looks out for the JavaScript object ‘Modernizr.geolocation’, which might have been created by Modernizr, if the browser supported geolocation capabilities. If the object is found, ‘normal-geo.js’ is used in the webpage, else your webpage will be hooked up with the polyfills ‘polyfill-geo.js’ and ‘other-polyfill-geo.js’.
For yepnope to function, you need to include ‘Modernizr.load’ in your download package. Drop in at yepnopejs.com to learn more about yepnope.
Modernizr teamed up with yepnope.js and polyfills, can be used to literally ‘Modernize’ any web browser, only if you know what you are up to!
So, should I use it?
If you choose to code your webpages in a layered manner, and you don’t intend very strict uniformity in the layout across every browser you wish to target, you should seriously consider using Modernizr in your projects.
When all is said and done, Modernizr is hands down the best tool out there, which can save you hundreds of geek-hours, if you do care to give your users the best of both the worlds with great browser-support and experience, without sacrificing the goodness of the new and shiny features of CSS3 and HTML5!
