Feature Support & Polyfills

HTML5 Shiv

The HTML5 Shiv was created by Remy Sharp to provide the ability to use HTML5 elements within versions of Internet Explorer 8 and below.

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

Additionally, once the new HTML5 elements are created using the shiv, any block level elements need to be identified and updated using the display: block; declaration.

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

Lastly, Internet Explorer 8 and 9 do not correctly define styles for a few HTML5 inline-block level elements. As before, these styles will need to be explicitly stated. After which, all versions of Internet Explorer should be good to go using any new HTML5 elements.

audio,
canvas,
video {
  display: inline-block;
}

Detecting Browser Features

Feature detection, as provided by Modernizr, provides a way to write conditional CSS and JavaScript based on whether or not a browser supports a specific feature. For example, if a browser supports rounded corners Modernizr will add the class of borderradius to the html element. If the browser doesn’t support rounded corners, Modernizr will add the class of no-borderradius to the html element.

Conditionally Applying CSS Styles

Once Modernizr is up and running CSS styles may be conditionally applied based on the features a given browser supports.

Conditionally Loading Based on Media Queries

One interesting condition Modernizr can test against is media queries. Doing so provides the ability to only load files based on different media query conditions. Not loading unnecessary files can be extremely beneficial for performance.

Modernizr.load({
  test:  Modernizr.mq('screen and (min-width: 640px)'),
  nope: [
    'jquery.js',
    'tabs.js'
  ]
});

Conditionally Running Scripts

On top of conditionally loading files, Modernizr also helps to conditionally run JavaScript

For example, it may be worth disabling tooltips on mobile devices due to not having hover capabilities, and instead showing the tooltip in plain text on the screen. The script for calling these tooltips could be wrapped in a Modernizr condition, preventing the script from loading on smaller screens.

$(document).ready(function() {
  if (Modernizr.mq('screen and (max-width: 400px)')) {
    $('.size').text('small');
  }
});