Menu
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?
820
HTML5 Modernizr: It is a JavaScript library that detects which next-generation web technologies feature our web browser supports. There are many new features that are being introduced in HTML and CSS but many browsers do not support these new features.
Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor's browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them.
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
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
