Very handy HTML5 & CSS3 checker: Modernizr.js

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: {
 border:1px solid #222;

/* to create rounded borders in supporting browsers */

.borderradius {
 -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.

Go and try and love »