html5shiv - why is it only for IE?

Question

I want to start using some HTML5 tags, but worried how it will render on browsers that do not support HTML5. It seems like html5shiv is a solution I can use for IE browsers <

Answer 1

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.

Answer 2

htmlshiv is an 'IE' thing, because some versions of IE [still] lack many HTML5 features. What works in chrome or other webkit browsers may not work in IE, so htmlshiv TRIES to give a javascript adaptation of the missing features. Its a polyfill, to be exact as well.

Answer 3

Other browsers support non-standard elements simply by setting their css display property:

header,
footer,
article,
section,
...etc... {
    display: block;
}

For old versions of Firefox and webkit based browsers (pre HTML5) this was all that was necessary.

Answer 4

The initial value for the display property of an element is inline (ref). The built-in user-agent stylesheet changes the properties to sensible values for known elements; for example, headings and paragraphs are changed to block.

HTML5 introduces new elements such as header, footer, article and section (the HTML5 sectioning elements). Since older browsers do not know about them, they treat these elements as inline. You must therefore add CSS rules for these elements manually:

header, footer, article, section { display: block; }

But as mentioned in the Story of the HTML5 Shiv:

...Internet Explorer 6-8 pose a problem as they do not recognize unknown elements; the new elements cannot hold children and are unaffected by CSS

The workaround for IE 6-8 is also mentioned in that article:

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist

Now, regarding your question: The html5shiv uses some JavaScript tricks to make the unknown elements styleable in IE 6-8. As for other browsers that do not support HTML5, the html5shiv, if necessary, adds the default styles required to render the HTML5 elements properly so that you don't have to define the CSS rules yourself (as mentioned above).

Note that html5shiv does not make the browser support HTML5. For example, it cannot make IE7 play videos embedded via HTML5 <video> tag.