Question

How does html5shiv work on IE9 when the conditional comment used [if lt IE 9] is for IE8 and below AND do Safari 4.x and Firefox 3.x read IE conditional comments? If not how could html5shiv POSSIBLY work on these browsers using the conditional comments as suggested in their Github Instructions?

There was a question here asking if it can be used in every browser without conditional comments and what the side effects would be, but that was not my question. That question was asked 4 years ago. HTML5 is now standard and Microsoft no longer provides support for legacy browsers so loading it in every browser would be insane at this point and I wouldn't consider that. My question has to do with the documentation on Github, what html5shiv provides out of the box using that documentation, and how to use it today to support the browsers it claims to support.

Quoting the readme on Github in regards to the html5shiv script:

"It also applies basic styling for HTML5 elements for IE6-9, Safari 4.x and FF 3.x."

Useage:

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

In the past year IE 8 and 9 combined have dropped from about 4% to about 2% in global useage according to Stat Counter. Since Microsoft dropped support for legacy browsers on January 12th it seems like html5shiv might now or soon be a thing of the past. It will be interesting to see how much these legacy IE browsers drop in year to come.

However, depending on what you are developing you may still want to support these browsers. When you include Safari 4.x and Firefox 3 in the above stats, the total browser share that html5shiv supports is 2.3%. For most people that is nothing, but if you own an ecommerce site, 2.3% could be HUGE.

In regards to my actual question, I'm thinking I either overlooked something in the documentation or don't understand IE conditional comments well enough.

Logically I would think this would be the best way to do it. Conditional comments in IE work through versions 5 to 9 so we shouldn't have the script load in IE5 for no reason.

<!--[if !(IE 5)]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

However, in the past 5 years I've never actually seen anyone doing it this way so I'm obviously missing something. Plus I still don't see how this would work for FF 3 and Safari 4 unless there's a bug or something that causes them not to read the comments. I opened this topic on html5shiv github regarding this issue as well, but haven't been able to get an answer.

HTML5shiv is easily being used on millions of websites with most developers and site owners assuming it supports IE9 Safari 4 and FF 3 out of the box.

Also, as far as I'm aware in regards to IE9, this is all that html5shiv does to support it.

article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}

If that's true, it may be another reason for many to stop using it considering when you take that out the equation and include it in your css (or a css reset), you're down to 1.39% of browsers that html5shiv would actually have an impact on.

Question

How does html5shiv work on IE9 when the conditional comment used [if lt IE 9] is for IE8 and below AND do Safari 4.x and Firefox 3.x read IE conditional comments? If not how could html5shiv POSSIBLY work on these browsers using the conditional comments as suggested in their Github Instructions?

There was a question here asking if it can be used in every browser without conditional comments and what the side effects would be, but that was not my question. That question was asked 4 years ago. HTML5 is now standard and Microsoft no longer provides support for legacy browsers so loading it in every browser would be insane at this point and I wouldn't consider that. My question has to do with the documentation on Github, what html5shiv provides out of the box using that documentation, and how to use it today to support the browsers it claims to support.

Quoting the readme on Github in regards to the html5shiv script:

"It also applies basic styling for HTML5 elements for IE6-9, Safari 4.x and FF 3.x."

Useage:

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

In the past year IE 8 and 9 combined have dropped from about 4% to about 2% in global useage according to Stat Counter. Since Microsoft dropped support for legacy browsers on January 12th it seems like html5shiv might now or soon be a thing of the past. It will be interesting to see how much these legacy IE browsers drop in year to come.

However, depending on what you are developing you may still want to support these browsers. When you include Safari 4.x and Firefox 3 in the above stats, the total browser share that html5shiv supports is 2.3%. For most people that is nothing, but if you own an ecommerce site, 2.3% could be HUGE.

In regards to my actual question, I'm thinking I either overlooked something in the documentation or don't understand IE conditional comments well enough.

Logically I would think this would be the best way to do it. Conditional comments in IE work through versions 5 to 9 so we shouldn't have the script load in IE5 for no reason.

<!--[if !(IE 5)]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

However, in the past 5 years I've never actually seen anyone doing it this way so I'm obviously missing something. Plus I still don't see how this would work for FF 3 and Safari 4 unless there's a bug or something that causes them not to read the comments. I opened this topic on html5shiv github regarding this issue as well, but haven't been able to get an answer.

HTML5shiv is easily being used on millions of websites with most developers and site owners assuming it supports IE9 Safari 4 and FF 3 out of the box.

Also, as far as I'm aware in regards to IE9, this is all that html5shiv does to support it.

article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}

If that's true, it may be another reason for many to stop using it considering when you take that out the equation and include it in your css (or a css reset), you're down to 1.39% of browsers that html5shiv would actually have an impact on.

• javascript
• html
• twitter-bootstrap
• internet-explorer
• html5shiv

• IMHO, I find it bad practice, to summarize all the answer into an answer of your own, especially as you more less don't add anything new, just write out the text a little. – Asons Commented Jan 23, 2016 at 12:04
• Possible duplicate of Are there any adverse side effects to loading html5shiv in every browser? – Chuck Le Butt Commented Jan 25, 2016 at 12:36
• @LGSon give it a rest man... In my bounty I asked for "Authoritative reference needed" (the developers answer of html5shiv that I pointed to). Chuck had a good answer, but it only seemed to answer half the question and most of the answers simply repeated things I asked in my question. – Bryan Willis Commented Jan 25, 2016 at 19:41
• Regardless @LGSon you HAD a solid answer, but changed it 13 times and then deleted it to only add a community wiki and give an example that doesn't come close to your first one. End of the day... question is done with, please stop obsessing over it because it doesn't matter. – Bryan Willis Commented Jan 25, 2016 at 19:44

5 Answers 5

Side note: You should only take browser stats like that as a very loose guide. The stats on such sites are far from gospel, and will change from country to country, from market to market, from demographic to demographic. You should look at your own site's analytics and see how many of YOUR users are falling into the Safari 4, FireFox 3, Internet Explorer 6-8 category (my guess is that it will be a LOT less than 2.3%).

(Also remember that FireFox automatically updates itself and is currently on version 43(!), and that Safari is automatically updated with OSX, and is on version 9. The chances of people still using older versions are extremely slight. I checked a very popular site of mine's analytics: Out of 20,000 sessions in the past month, only 1 used FF3, 1 used IE7, 1 used IE8, and none used Safari 4 or IE6.)

However, if you're keen to target those outliers, here's the answers to your questions:

How does html5shiv work on IE9 when the conditional comment used [if lt IE 9] is for IE8 and below

HTML5shiv does not work with IE9 because it doesn't need to. Internet Explorer 9 already correctly supports nearly all HTML5 elements:

do Safari 4.x and Firefox 3.x read IE conditional comments?

Safari and FireFox does NOT support IE Conditional Comments, but they CAN be targeted like so:

FF3:

/* FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default { color: lime; }

Safari:

/* Safari only override */     
::i-block-chrome,.myClass {      color: lime;     }

But this isn't what HTML5shiv does and you are right: The conditional statement presented on HTML5shiv's homepage would not be picked up by FF3 or Safari 4 in its current state. I'm guessing this is because they consider those browsers to be so rare that it's not worth it for the average user. Additionally any CSS reset/normalize will probably include the necessary CSS for those browsers anyway.

So to go through how handle HTML5 elements in all the browsers mentioned:

IE6-8: Use HTML5shiv.js as described in their Github documentation.

IE9-11: Use Normalize.css or add main { display: block } to your HTML. (Thanks to LGSon.)

Safari 4: Use Normalize.css or the following CSS:

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

FireFox 3: Same as above.

(FireFox 4+ and Safari 5+ have much stronger HTML5 support and don't require the above CSS.)

The shiv script is only utilized in IE (in this case less than version 9 [...lt IE9...]), not used in other browsers, ignored by them. It's commented out after all

<!-- ... --> 

IE supports these and reads them. The shiv script augments functionality to make those old browsers work "better".

UPDATE: It looks like that "lt IE9" is also run in Safari 4.x and FF 3.x. from what I can find (all cloned from the GitHub project description).

Another UPDATE: I was confident this only works in IE, not old Safari or FireFox. I'll keep digging. Someone else correct me if I'm wrong.

I wrote a very detailed page dedicated to Internet Explorer Conditional Comments years ago. This is for lte = less than [or] equals IE9; I've documented numerous examples ready to copy and paste on the page I wrote.

<head>
<!--[if lte IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>

I'd recommend your visitors to upgrade from Vista which is the only Windows version that can run IE9 or lower with security support. As of January 2016 only the latest version of Internet Explorer per version of Windows is supported. See the Internet Explorer Versions Wiki page for which versions of IE run on which versions of Windows.

As of January 2010 only IE10+ should be given any meaningful attention. Proper policy is to full-page block IE9 or lower; if Microsoft isn't supporting it then you shouldn't be either unless you are being paid a minimum of twice what you would a year in a corporate job. Stand your ground devs, we're the ones who ultimately know what it will take to get the job done.

No, the sample on their github page how to load the shiv, will not work on any other than IE browsers from 8 and below, as it uses the "downlevel-hidden" conditional comment technique.

To make it work on both IE9 and below, and non IE browsers like Safari and Firefox, "downlevel-revealed" conditional comment technique needs to be used, which looks like this.

<!--[if lte IE 9]><!-->
<link href="ie98765_and_non_ie.css" rel="stylesheet">
<!--<![endif]-->

Side note worth to be noted is:

• IE10 and above don't support conditional comments any more, and will behave as non IE browsers in this use case.

• on browsers that does already support HTML5 elements, will the shiv do nothing.

To answer my own question...

The github docs for html5shiv are misleading... that's pretty much it. After doing some further digging I came across this old HTML5SHIV Github issue that answers this question.

There isn't any "browser quirk or hack" that causes conditional comments to be read in Firefox 3 or Safari 4 (here's a very extensive list of awesome browser hacks).

[if lt IE 9] works in in IE 5-8 just how it should... don't be fooled by the readme.

So to be clear if you're using the snippet below, expecting it to magically work for IE9, Safari 3, or Firefox 4, you're well out of luck.

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

So how should html5shiv be used?

As I mentioned in the question and others have mentioned in their answers, Microsoft dropped support for legacy browsers on Jan 12, 2016. Keeping that in mind and that these stats mentioned in my question are probably skewed as it is, my guess is that legacy useage will continue to drop at a solid pace over the next year or so. On top of that, the majority of the current usage is probably coming from older businesses that have been slow to update. For most people these aren't users that they'd be getting traffic from (especially since those computers would most likely be work only computers).

Personally I'm not going to use html5shiv anymore but that's neither here nor there. Since there are many of you who WILL probably still use HTML5 here's my suggestion based on some personal experience, research, and other answers on this page on how HTML5shiv will support different browsers...

If you want support for IE6-9, Safari 4, AND Firefox 3 using html5shiv without any additional changes, DON'T include the conditional comments:

<script src="bower_components/html5shiv/dist/html5shiv.js"></script>

If you want support for Internet Explorer use this. Since html5shiv DOESN'T work on IE 5, there's no point loading it in that miserable browser:

<!--[if !(IE 5)]>
       <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

If you only need support for Internet Explorer 8 or 9 use this:

<!--[if (IE 8)|(IE 9)]>
       <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

Option 4: While the above methods might be what you need, after some thought this is what I believe to be the most efficient way to use the script.

<style type="text/css">
    article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
    mark{background:#FF0;color:#000}
</style>
<!--[if (gt IE 5)&(lt IE 9)]>
    <script type="text/javascript">window.html5={shivCSS:!1};</script>
    <script type="text/javascript" src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

Option 4 1/2 : "Probably" the best way to use HTML5Shiv going forward:

Even better than the above we can drop the type attributes since we are specifying this is HTML5 and we can minify it. We can also use a popular cdn like jsdeliver or maxcdn to try and speed things up since hopefully they will already have the file cached on their computer. Do not, I repeat do not use Google for hosting html5shiv. This is a common mistake people make and it only caches for a few minutes. Google code is not meant to be a CDN.

We also disable the shiv css and include it ourselves. If you are using a css reset (here's a list of the most popular in 2016) you can drop the style part below all together.

Last we include it just before the closing head tag as recommended.

<!DOCTYPE html>
<html>
  <head>
    <!-- Meta, stylesheets, etc... -->
    <style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>
    <!--[if (gt IE 5)&(lt IE 9)]> <script>window.html5={shivCSS:!1};</script> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
</head>

This method will ensure you get the results you want from HTML5shiv supporting the browsers you expect it to.

Since legacy browsers aren't supported anymore in IE and Firefox and Safari have auto-updates), most likely you can get away not using shiv anymore and using a solution like @LGSon's or just a CSS styles/reset.