CODEWITHSUNDEEP
htmlmodernizr
Dee2000
Dee2000

Reputation: 1641

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?

Upvotes: 5

Views: 4661

Answers (2)

pawel
pawel

Reputation: 36965

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

Upvotes: 9

Matthew Layton
Matthew Layton

Reputation: 42260

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

Upvotes: 1

Related Questions