Modernizr

11 September 2012
Justyna Olszak
Frink_Cognifide_2016_HeaderImages_0117

Modernizr logo

One of the best practices while developing a website is to make sure it looks good in every browser. However, it can be a real pain to prepare a pixel perfect page both for the newest Firefox and IE6 browsers. In such situations Modernizr turns out to be a lifesaving tool - very simple, yet quite powerful. In this post I will briefly write a bit on Modernizr and how it works.

What is Modernizr?

Modernizr is an open-source JavaScript library, available to download right here. Although it doesn't magically make all browsers behave the same, it lets you easily identify what features a current browser has natively implemented. This allows to prepare proper web page rendering. The only thing you have to do is to include it in a <script> tag and you're ready to go. Modernizr will add some CSS classes to an <html> element on the page load, e.g.:
html class="js no-flexbox no-flexbox-legacy canvas canvastext no-webgl 
no-touch geolocation postmessage websqldatabase no-indexeddb hashchange 
history no-draganddrop no-websockets rgba sla multiplebgs backgroundsize
borderimage borderradius boxshadow textshadow opacity no-cssanimations 
csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d 
csstransitions fontface  eneratedcontent video audio localstorage 
sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"
This means that a given browser fully supports the HML5 canvas, video, CSS gradients and columns but lacks CSS transforms, animations and any other features prefixed with "no-". This is a starting point for a developer, who can directly create CSS rules describing both the desired default view and the one with a fallback for partially supported features. Moreover, Modernizr creates a JavaScript object which contains all the classes above stored as boolean properties. It may be very handy while developing some JavaScript solutions.

Advantages

The real advantage of using Modernizr is a faster web development process. Since you don't have to perform UserAgent sniffing, there is also no need to write separate stylesheets for various browsers and use CSS browser detecting hacks. Maintaining CSS files is also easier. All browser specific styles are transformed to feature specific ones. This improves writing code oriented more on graceful degradation and providing fallback solutions, which is an important issue in the era of continuously changing HTML and CSS specifications.

Modernizr is very useful when you want to enter the world of modern webdesign. Its main purpose is to recognize the state of CSS3 and HTML5 implementation provided by the browser. It allows developers to write code in compliance with the latest standards and trends, letting them explore new possibilities the web offers. It is not only about the visual enhancements meaning gradients, shadows etc. but also functional ones. With Modernizr you can use new HTML5 elements such as: <header><section><article><nav> and <footer> without any concern which browser is being used. It leads to a more semantic code but what's more important all styles will be applied even in older versions of Internet Explorer.

There is no need to worry about the performance of Modernizr. The JavaScript file is already minified, but you can reduce its size even more with decreasing the number of features it is ought to detect through the customizable download page. Such a personalized version loads very fast and performs feature tests within milliseconds. Modernizr also provides the asynchronous load script which is intended to upload polyfills fixing missing support parts in the older browsers. Since it works in parallel there is a chance you'll get some performance improvement.

Conclusion

Bearing in mind all these advantages, you may still be wondering whether to include Modernizr in your default toolkit.

The solution to this comes with an answer to the question: Are you going to use new HTML5 and CSS3 features with some fallback when they're not supported? If you assume users use the latest releases of browsers or you don't want to devote time to graceful degradation other than ignoring unimplemented features, then Modernizr is not necessary. Otherwise, if you're interested in providing better user experience in the older browsers with still taking advantage of new features, Modernizr is absolutely essential!

If, you would like to see Modernizr in action, please visit the haz.io website. It gives you valuable insight regarding the browser features that can be actually detected with Modernizr.