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?
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"
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.
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.