Question

We are writing site logic which its design was made by another company. (they sent us the html files)

However when we looked at their source code html we saw:

1) modernizr.js

2) creation of html5 element scripts :

<!--[if lt IE 9]>
       <script>
          document.createElement('header');
          document.createElement('nav');
          document.createElement('section');
          document.createElement('article');
          document.createElement('aside');
          document.createElement('footer');
       </script>
    <![endif]-->

3) Html5 shiv JS :

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

4) reference to css3-mediaqueries.js for media queries

5) Respond.js v1.1.0 min/max-width media query

I don’t know much about html5 integration , but I think there are a redundant components here.

For example I heard that modernizr already includes the solution which html5 shiv provides.

As an assumption which I want to use modernizr.js , What components should I keep ? ( I tagged each section with numbers so it will be easier to you to reference).

_{(p.s. this question didnt help much cause I have much more sections)}

Answer 1

Together all of these have the purpose to do two things:

1. Enable HTML5-elements to be rendered in legacy browsers (1, 2 and 3)
2. Enable CSS media-queries in older browser (4 and 5)

The way they are used today, in your example, you will have a lot of overlapping functionallity, which is unnecessary. My take on this is as follows.

HTML support

If you will be using Modernizer for other purposes than just enabeling HTML5-elements in older browser, then I suggest that you use only Modernizer and remove 2 and 3 as Modernizer include the HTML5 shiv.

If you won’t be using Modernizer, it might be unnecessary to load the entire library. Then you might be better off using HTML5 shiv only, with the conditional IE-comment.

Using no. 2 seems totally redundant, if you use either 1 or 3.

Media-query support

When it comes to 4 and 5, they both work to enable responsive web sites in older browser, by adding support for media queries in browser that lack native support.

I only have personal experience of Respond.js, which is very light-weight. The limit is that it will only add support for the min/max-width media queries. If that is enough for your design, then no. 5 will be sufficient.

If you need more extensive media queries support, I believe you need to look in to no. 4 instead, but then I guess you can get rid no. 5, as it will be redundant.