Menu
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?
325
asked Dec 28 '14 08:12
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.
23
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
186
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
