Tag Archives: Modernizr

How Modernizr Works

Posted on by

Modernizr is pretty neat. If the browser supports a feature, it tags it with a css class at the base root level, basically appending to the html class attribute.
example:

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

And then in your CSS you leverage that hierarchy
example:

.cssgradients .searchResultItem 
{
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 0%, #e0e0e0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e0e0e0));
background: -webkit-linear-gradient(top, #f4f4f4 0%,#e0e0e0 100%);
background: -o-linear-gradient(top, #f4f4f4 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top, #f4f4f4 0%,#e0e0e0 100%);
background: linear-gradient(top, #f4f4f4 0%,#e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e0e0e0',GradientType=0 );
}
.borderradius .searchResultItem {	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

If CSS Gradients aren’t supported by the browser it doesn’t get added to the root HTML CSS class and there for won’t get styled as the CSS hierarchy is broken.