Quantcast
Viewing latest article 2
Browse Latest Browse All 12

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:


Filed under: CSS3, HTML5, Javascript Tagged: Chrome, CSS3, HTML5, Internet Explorer, Javascript, Modernizr Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

Viewing latest article 2
Browse Latest Browse All 12

Trending Articles