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

Question

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.

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, Jan 23 '16 at 12:04
Possible duplicate of [Are there any adverse side effects to loading html5shiv in every browser?](http://stackoverflow.com/questions/12750035/are-there-any-adverse-side-effects-to-loading-html5shiv-in-every-browser) — Chuck Le Butt, Jan 25 '16 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, Jan 25 '16 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, Jan 25 '16 at 19:44

Chuck Le Butt · Answer 1 · 2016-01-25T12:29:04.747

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

Finally a real answer.... Didn't see this until now after spending 30 minutes writing out my own answer... UGH :) — Bryan Willis, Jan 21 '16 at 22:37
@BryanWillis Then I suggest you delete your own and accept this answer, which I think would be most appropiate. — Asons, Jan 22 '16 at 09:20
I awarded you the 50 for getting the main point across. Unfortunately, you never dove into how it should be used. — Bryan Willis, Jan 22 '16 at 12:13
@BryanWillis Thanks. How to use it is easily inferred from what I wrote: You should use it as described on the Github pages in conjunction with a CSS reset/normalizer (or manually enter the CSS I provided). Adding `gt IE 5` is pointless as your site won't render correctly in IE5 no matter what you do. — Chuck Le Butt, Jan 22 '16 at 13:09
@BryanWillis My answer tells why it does not work and how to make it work (1 sample), and a reference to a credible source, all which you asked for in your main question, and that source have all the samples you listed, and then some, on how to use conditional comments. — Asons, Jan 22 '16 at 13:14
@BryanWillis I've added details on how to support HTML5 in all the browsers you've listed. — Chuck Le Butt, Jan 25 '16 at 12:32

Christopher Stevens · Answer 2 · 2016-01-12T01:58:37.310

5

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.

edited Jan 12 '16 at 01:58

answered Jan 12 '16 at 01:31

Christopher Stevens

1,214
17
32

Here's a similar argument. People seem to be giving the thumbs up for IE only: http://stackoverflow.com/questions/6883010/if-im-already-using-modernizr-will-i-then-even-need-html5-shiv, which conflicts with the documentation located here: https://github.com/afarkas/html5shiv – Christopher Stevens Jan 12 '16 at 01:45
Another good discussion about html5shiv and IE: http://stackoverflow.com/questions/10407853/html5shiv-why-is-it-only-for-ie (where old IE is the only browser that won't stylize HTML5 tags properly) – Christopher Stevens Jan 12 '16 at 02:03
I was going to test with something like browserstack, but figured I'd ask here first. Maybe this is a better question to ask as a github issue... So assuming that Safari 4 and FF 3 read IE conditional comments that still leaves me baffled on how this does anything for IE9 unless changing the `[if lt IE9]` to `[if IE]`, `[if lte IE9]`, or `[if lt IE10]`. – Bryan Willis Jan 12 '16 at 03:22
Personally I use bootstrap anyway which supports the basic styling that this is suppose to add to IE9 so it doesn't really affect me, but I'm just wondering I guess. – Bryan Willis Jan 12 '16 at 03:23
Well, you have me interested. It's the non-IE browsers, "Safari 4.x and FF 3.x.", that make me think additional/other work is required to get them to work with HTML5 fully. – Christopher Stevens Jan 12 '16 at 03:25
@BryanWillis Small note, you can't use `[if lt IE10]` as conditional comments is not supported on versions above IE9. – Asons Jan 21 '16 at 08:36
Your answer **doesn't** answer the question _how_ it works. – Asons Jan 21 '16 at 08:57
@LGson `[if lt IE10]` works the same as `[if lte IE9]`... You're right that conditionals aren't supported in IE10 and above, but IE5-IE9 were designed to understand any newer version. So technically you could say `[if lte IE15]` although sticking with `[if lte IE9]` is probably less confusing for people. – Bryan Willis Jan 21 '16 at 21:20

John · Answer 3 · 2016-01-19T21:44:40.593

1

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.

edited Jan 19 '16 at 21:44

answered Jan 19 '16 at 20:43

John

1
13
98
177

Thanks John... yea Microsoft dropping support was actually what originally got me thinking about asking this question. I helped put together an source bootstrap-wordpress theme and we were trying to figure out whether to use [html5shiv][(https://github.com/salcode/bootstrap-genesis/issues/127). In regards to `if lte IE 9` suggestion, wouldn't `!(IE 5)` make the most sense? `lte IE 9` will load in IE5, however html5shiv only supports 6-9 (supposedly). – Bryan Willis Jan 19 '16 at 20:52
99.9% IE5 users are web developers who still think it's 2002 and 0.1% a guy in Siberia on dialup who is really in to Windows 2000. I only officially support IE10+ now and unofficially IE9 on rare occasion. When a user goes to my site using an obsolete browser I block them completely with a forceful upgrade message that they *can't* ignore. I've started using bootstrap for a client and it is *horrible*! They use `padding` everywhere (use `margin` on child elements instead) and it's really messy and disorganized (.pull-left should just be `.left`). Avoid it and WordPress like the plague. – John Jan 19 '16 at 21:40
Curious as to what you're referring to with the padding/margin issue... Do you have an example I could see? – Bryan Willis Jan 19 '16 at 23:14
I was just curious about the BS thing since I've never heard that complaint before... not really on topic for this discussion though. @LGSon that javascript function looks very handy if it works! Definitely a lot shorter than html5shiv... But the my main question still remains unanswered :( – Bryan Willis Jan 20 '16 at 01:11
1

@BryanWillis It's a drop-in solution; use IE9 and either open the dev tools, go to the network panel and ensure the request to the file was made *or* open your Apache access log and ensure the file is being requested there with an HTTP 200 request. – John Jan 20 '16 at 04:27
Your answer **doesn't** answer the question _how_ the shiv if/can work on Safari/Firefox. – Asons Jan 21 '16 at 09:02
Wordpress is fine for what it does, and makes development much easier for us devs, and is well liked by users. Bootstrap is also fine in the right circumstances (ie. for a temporary website).You don't need to avoid either like the plague. – Chuck Le Butt Jan 22 '16 at 11:12
@LGSon What part of "drop-in solution" doesn't work then? – John Jan 22 '16 at 15:04
Nowhere does it show how to make it work for both a specific IE **and** Safari 4.x / FF 3.x, nor do you explain _why_ it does or doesn't work. – Asons Jan 22 '16 at 15:45

score 0 · Answer 4 · answered Jan 23 '16 at 08:22

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.

score -2 · Accepted Answer · answered Jan 21 '16 at 22:33

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.

IMHO, I think your are wrong when you say the page misleads. If one do know what a _conditional comment_ is, then the github docs for html5shiv are **not** misleading, they explain exactly what the shiv does. Which simply means, one need to understand all the surrounding technology before take it into use. — Asons, Jan 22 '16 at 09:09
It is misleading hence why there was an [entire tread already started on this issue](https://github.com/aFarkas/html5shiv/issues/104), plus I wouldn't have gotten 18 upvotes for asking this question, Chiristopher Stevens woudn't have gotten 5 upvotes for saying that that he interpreted from the readme that "lt IE9" is also run in Safari 4.x and FF 3.x, and someone would have given a straght forward anwer a week and a half ago when I asked the dumb question if it was obvious. Not 1 person was able to answer if it works on those browsers and how it's actually suppose to be used to support them. — Bryan Willis, Jan 22 '16 at 12:09
18 is for the question, which is a good one, not for how its written at github ... 5 up votes for Christopher is because he is right when he say _it is only utilized in IE (in this case less than version 9 [...lt IE9...])_, he just don't know why. ... my first 2 paragraphs tells both what it does and why, now that can be said in many ways, like you did, still, it answered the question. — Asons, Jan 22 '16 at 12:22
Adding `gt IE 5` is pointless. The browser is dead (it would be like making sure than Fallout 4 ran on Windows 95), but, more conclusively, IE5 won't support your HTML/CSS with OR without *HTML5shiv* anyway. — Chuck Le Butt, Jan 22 '16 at 13:11

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

Question

5 Answers5

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.

So how should html5shiv be used?