Three ways to use Modernizr

Last Updated on December 29, 2021

In the CSS:

.no-cssgradients .header {
  background: url("images/gradient.png");
}
.cssgradients .header {
  background-image: linear-gradient(blue, purple);
}

As a JavaScript object:

if (Modernizr.csstransforms) {
    newBrowsersDoThis();
  } else {
    oldBrowsersDoThis();
  }

Check for HTML element class:

 
// Modernizr adds the feature detected classes to the html element
function animateThing() {
  if ($("html").hasClass("lt-ie9")) {
     // Do IE8 jQuery animation 
  }
   else  {  
     $(".progressivelyEnhancedAnimation").addClass("translateTransformClass");
     // Do modern browser translate-ed animation
  }
}