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