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.

Answer 1

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

Answer 2

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.

Answer 3

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.