Modernizr detects which HTML5 and CSS3 features user’s browser supports and reports them in a very convenient way: it adds classes to the body tag. The supported features can be checked with javascript, but reporting features with CSS classes is ingenious! Developer don’t have to write if…else -conditions all over javascript because validation can be done in the stylesheet.
Example:
div.box {
border:1px solid #222;
}
/* to create rounded borders in supporting browsers */
.borderradius div.box {
-moz-border-radius:10px 10px 10px 10px;
}
That’s it, no javascript required. And if I want add a drop shadow, I’ll add a style for ”.boxshadow”.
For Firefox 3.6.12 the Modernizr adds following classes to the body tag: js flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths.