Using Modernizr library, why does it add classes to the html tag

问题

Can anyone explain (because the github page doesn't) why Modernizr feels the need to add all of those classnames to the HTML tag ? After loading Modernizr, it looks like this:

<!doctype html>
<html class=" js flexbox canvas canvastext webgl ~~~~ etc etc

I see no explanation at all why it wants to do that. Modernizr provides properties to let me know whether for example canvas is supported (Modernizr.canvas == true?). Are those html classnames added for a test that's easier than that?

回答1:

These class names are meant to be used in your CSS code, so you can add fallback styles in case a feature is unsupported. Example from modernizr docs page:

/* Simulated box shadow using borders: */
.box {
   border-bottom: 1px solid #666;
   border-right:  1px solid #777;
}
.boxshadow div.box {
   border: none;
   -webkit-box-shadow: #666 1px 1px 1px;
      -moz-box-shadow: #666 1px 1px 1px;
           box-shadow: #666 1px 1px 1px;
}

回答2:

I may be wrong (and please correct me if I am), the classes here indicate the features that Modernizr has detected that are (or indeed are NOT) supported in the given browser.

Look at the docs here: http://modernizr.com/docs/

Take this example:

<html class="no-js">

if JavaScript is disabled, then modernizr cannot run, and therefore the class will remain "no-js" but if JavaScript is enabled, Modernizr will replace "no-js" with "js", and similarly will tell you what other features are supported

来源：https://stackoverflow.com/questions/13914931/using-modernizr-library-why-does-it-add-classes-to-the-html-tag

标签

html5

modernizr