From http://www.modernizr.com/
“What is Modernizr?
Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:
body.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
body.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.
Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate TRUE and if not, it will be FALSE.
Lastly, Modernizr also adds support for styling HTML 5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.
Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities….
How to use Modernizr
First, you need to include Modernizr directly after the <body> element in your page‡ . Modernizr will then add classes to the body that indicate which features are and aren't supported in the current browser, allowing your CSS rules to trigger off of them. In essence, you can then write CSS rules like the example mentioned above.
Similarly, you can use the JavaScript object that gets created to do if-conditionals and fork your JS code to leverage native implementations where available.
For more information on how to use Modernizr, please look at the detailed tutorial.
- † Canvas and CSS Columns support is still very rudimentary and should be used with caution.
- ‡ The reason it is included in that exact spot is because first of all, the
<body> element must be present, but even more importantly, waiting for DOM readiness might result in a partial page rendering, which is undesirable since Modernizr will trigger style changes depending on the browser’s capabilities…
Modernizr detects support for:
- Canvas†
- rgba()
- hsla()
- border-image:
- border-radius:
- box-shadow:
- Multiple backgrounds
- opacity:
- CSS Animations
- CSS Columns†
- CSS Gradients
- CSS Reflections
- CSS Transforms
- CSS Transitions
Additionally, Modernizr will allow you to use elements from the HTML 5 spec and style them, even in Internet Explorer. Learn more about styling HTML5 elements and see below on how to use Modernizr in your website.
- Version: 0.9
- Compressed size: 6kb
Download 16kb uncompressed version
or go to http://modernizr.com
Modernizr.com in all browsers:
Safari 4 
Firefox 3.5 
Opera 10 beta 1 
IE8