Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming

Having problem on HTML5 and CSS3 with Internet Explorer? The Modernizr library could help you to tackle the problem. It checks the HTML5 and CSS3 features supported by the browser and developers could determine them by checking the classes of the <html> tag.

Download Modernizr and create the following index.html.

<html class="no-js">
  <head>
    <title>Eureka - Modernizr</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type='text/javascript' src='modernizr-2.5.3.js'></script>
  </head>
  <body>
    <h3>Hello Eureka!</h3>
  </body>
</html>

 

View the code in Chrome control panel, you could find the newly added classes.

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

 

Developers can make use of the above classes for frontend programming.

Done =)

Reference:

Advertisement

3 thoughts on “Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.