CODEWITHSUNDEEP
html
Jason Twu
Jason Twu

Reputation: 69

Using Firebug, under <DOCTYPE> why is the first line <html class= "bunch of tags inserted here">

I wanted to view how other people code their websites, but got stuck trying to understand what this does:

<html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange
             history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity
             cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent
             video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"
      lang="en" style="">

What is the purpose of this and can someone please explain it to me?

Upvotes: 6

Views: 5747

Answers (3)

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

Because they are using modernizr

Modernizr detects features which are supported and which are not supported by the browser. In response to it appends different classes HTML element. Which are then can be written as to fix cross browsers compatibility issues.

As <html> is document entry point or main container therefor it adds classes to HTML tag.

Similar Question

Upvotes: 6

Ashish Panchal
Ashish Panchal

Reputation: 504

The classes in html tag is because of the Modernizr js included in the project.

Modernizr is a javascript plugin which on the fly identifies browser capabilities and respected classes on the html tag. For instance if the browser which supports border-radius property of CSS Modernizr adds a class named borderradius and if the browser does not supports border-radius it adds a class named no-borderradius, like wise for all other properties.

So when we working on project we can add a fall back design by targeting no-borderradius class for the browsers' not supported by border-radius feature of CSS3.

Upvotes: 3

Todd
Todd

Reputation: 5454

They're using modernizr for feature detection.

As a contrived example, if a browser didn't support CSS3 transitions, you could choose to add graceful alternatives. For example, you might check if the HTML element had the csstransitions class before adding any programmatically w/ js.

Modernizr also has a great set of useful javascript methods. For instance, theres a method to test which vendor prefix you will need to use if any.

very useful, so you should

CHECK IT OUT

Upvotes: 1

Related Questions