HTML5Shiv - Why Is It Only for Ie

html5shiv - why is it only for IE?

First, to be clear, html5shiv just makes it so that you can style certain HTML5 tags (section, article, etc.) correctly. It does not give the browser "HTML5 support" in any more general sense of the term.

With that in mind, note that IE <9 are the only browsers that don't allow styling of these HTML5 tags correctly, so that's why html5shiv only applies to them.

Other browsers (even very old ones like Netscape Communicator 4) will still parse the unrecognized tags correctly and allow CSS to apply to them as you would expect.

As zzzzBov notes in his answer, they might not have the correct default styles (which in most (all?) cases are either display: block or nothing), so you'd need to add those even for non-oldIE browsers. But doing so works fine in non-oldIE browsers, whereas in oldIE, adding these default styles---or any styles whatsoever---only works if you use html5shiv.

html5shiv - why is it only for IE?

First, to be clear, html5shiv just makes it so that you can style certain HTML5 tags (section, article, etc.) correctly. It does not give the browser "HTML5 support" in any more general sense of the term.

With that in mind, note that IE <9 are the only browsers that don't allow styling of these HTML5 tags correctly, so that's why html5shiv only applies to them.

Other browsers (even very old ones like Netscape Communicator 4) will still parse the unrecognized tags correctly and allow CSS to apply to them as you would expect.

As zzzzBov notes in his answer, they might not have the correct default styles (which in most (all?) cases are either display: block or nothing), so you'd need to add those even for non-oldIE browsers. But doing so works fine in non-oldIE browsers, whereas in oldIE, adding these default styles---or any styles whatsoever---only works if you use html5shiv.

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

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.

html5shiv not working in IE8?

Move HTML5Shiv’s script element to head section, before all other style and script elements.

IE not loading CSS sheet, HTML5 and html5shiv not helping

Can you check the same thing on server cause respond.js works only on server.

Why is Chrome ignoring IE conditional tag?

--> ends a comment. So, the end of this comment:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

is also the end of the part that is a comment to the Chrome rendering engine.

The solution is easy: just move your comment tags outside of the IE conditional.

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

If I'm already using Modernizr, will I then even need HTML5 Shiv?

1) If I'm already using Modernizer then even will I need HTML5 Shiv to
enable HTML5 tag supports for IE.

You don't need to separately include html5shiv, because Modernizr includes it:

As of Modernizr 1.5, this script is identical to what is used in the
popular html5shim/html5shiv library.

http://www.modernizr.com/docs/#html5inie

---

2) and is HTML5 Shiv only for IE or for all browser who don't have
native HTML 5 support. like older version of Firefox, Safari, Chrome
etc.

It's only for Internet Explorer.

Older versions of other browsers don't need it: http://caniuse.com/html5semantic

And the recommended snippet to include it is:

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Which will only ever run for IE less than 9.

---

Related Topics