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?
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;
}
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