How Modernizr Works

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s