Search code examples
javascripthtmltwitter-bootstrapinternet-explorerhtml5shiv

How to use HTML5shiv correctly... how work on IE 9, Firefox, Safari?

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.

stat counter

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.

Solution

  • 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.