Home » Tutorials » JavaScript » JavaScript Library: Modernizr

JavaScript Library: Modernizr

JavaScript Library: Modernizr

Introduction To Modernizr

Modernizr is an open source JavaScript library that allow web designers and web developers to take advantages of HTML5 and CSS3 based on capability of the user’s browser. The Modernizr used to detect the user’s browser, whether the browser supports the CSS3 ad HTML5 features such as border-radius, box-shadow, @font-face, video, audio, local storage that required in rendering your page and allow you to create fallback of the page in the browsers that couldn’t support. Additionally, it allows you to use semantic HTML5 elements such as <header>, <footer> without having worry about any problem in Internet Explorer. Please note that, Modernizr does not add missing functionality to the browser instead it detect the capability and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities.

Example of Usage

It’s quite simple and easy, first of all, you have to go to download the latest release of Modernizr at http://www.modernizr.com/. Once you have the latest version, include the JavaScript file in your page and add a class of “no-js” to your <html> element as shown below:

<html class="no-js">

The no-js class has been used to detect whether the user’s browser is JavaScript enabled. If yes, it will start checking every single features and prefixing the feature with ‘no-‘ if the certain feature doesn’t support by the browser. Example:

.boxshadow div p {
  /* properties for browsers that
     support multiple box-shadow*/
}
.no-boxshadow div p {
  /* optional fallback properties
     for browsers that don't */
}

As you can see the code above, Modernizr prefix the ‘no-‘ in your CSS stylesheet if the current browser is not supported the box-shadow property. That’s it! Quite simple right? 🙂

Learn More

Modernizr is a very useful JavaScript Library, it was solved a lot of headache problems that faced by web designers and developers, especially the one occured in Internet Explorer. For more information and documentation, please visit the official website of Modernizr. 🙂


Android, iOS Development Tutorials