Difference between html5shim, css3-mediaqueries.js and modernizr

Question

I am new to the responsive design world.

I am using http://www.responsivegridsystem.com/ in my design. It tells to add following markups

<!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->    
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements and feature detects -->
<script src="vendors/responsive/js/modernizr-2.5.3-min.js"></script>

Since media queries are not working in IE8, as per this question IE7, IE8 support for css3 media query I am using the following markup too

<!--[if lt IE 9]>
    <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->    

Do all these are needed? Whats the difference between html5shim, modernizr and the css3mediaqueiries?

Do i need to use modernizr? Because I am not doing anything with that in my js file like jQuery.

Answer 1

They serve three very separate purposes, all can be very important, but not all (if any) are always needed.

html5shiv aka html5shim

html5shiv is a script that allows you to properly use html5 elements in older browsers, Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x, at the time of this answer.

So, what does that actually mean? Its pretty simple. There are a number of new elements in html5 (like <section>, <aside>, <header>, and <footer> to name a couple), as well as the ability to create your own custom elements. That means that we can write more semantic (and clearer) code. All great things, but unfortunately, older browsers don't apply your css to elements that were not one of the ones that they shipped with support (<div>, <p>, <span>, the normies). Luckily @sjoerd-visscher dropped some knowledge and saved the day. He discovered that if you use document.createElement to create any new element, it sort of registers it as one of the supported elements, and the css works! This meant that you could actually use html5 elements in production. It was a huge deal at the time, and luckily becoming less and less important as those older browsers are dying off.

It has since expanded to add some basic styles for browsers, in addition to registering the elements.

If you don't have to support Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), or Firefox 3.x., then you DO NOT need to use html5shiv.

css3-mediaqueries-js

css3-mediaqueries-js adds support for a css feature called media queries in browsers that don't support them. If you aren't sure what that means, check out sites like The Boston Globe, Mitsubishi Australia, or techcrunch, and then resize your browser.

Media Queries allow you to apply css conditionally, based on some attribute or combination of attributes of the browser (width, height, etc). They are incredibly powerful, and power a lot of modern web design.

Now, the question is whether or not you actually need something like css3-mediaqueries-js. It was once in vogue to do so, but it is becoming more and more common for people (myself included) to recommend mobile first design. This means that the base styles should be a mobile site, with media queries adding to the base design, instead of hiding/removing some things. As a result, browsers that don't support media queries (the ones that css3-mediaqueries-js is intended for) get served the "mobile" design, rather than polyfilling and then applying the media query during every resize. Older browsers generally mean older, slower, and smaller computers. Not only do they lack support for media queries, their javascript engine is hundreds (sometimes thousands) of times slower than modern engines that power current Chrome, Firefox, and IE. All that extra work on something that isn't nearly as powerful to being with can easily result in a degraded experience for the users of those older browsers.

Whether or not you should use it is ultimately up to you, but make sure to ask yourself what is best for the user, not necessarily the designer :]

Modernizr

Modernizr is a feature-detection library, that allows you to check for new web features in a simple way. By default, ((you can build a custom version here)[http://modernizr.com/download/], changing anything you want) it adds classes the <html> element on the page, making it super easy to modify designs based on its results.

.css-gradients .background {
  background: linear-gradient(to bottom, black 0%, white 100%);
}
.no-css-gradients .background {
  background: url(gradient.jpg);
}

(of course that is a super trivial example, and you can accomplish the same thing using a basic fallback without modernizr, but it is just meant to serve as an easy to follow example)

It doesn't actively add or remove anything itself, but in combination with something like yepnope, you can test for a feature, and conditionally add a polyfill for that feature.

Something like this

yepnope({
  test : Modernizr.mediaqueries,
  nope : ['css3-mediaqueries.js']
});

would check to see if mediaqueries is support in the browser, and if it isn't, it would load css-mediaqueries-js to polyfill support for it.