Partial HTML5 support in IE8 without shims or javascript
Today, I stumbled across something strange in IE8 where it was able to identify and render HTML5 elements like
To illustrate my point, I'll use variations of the following HTML:
By default, the above HTML renders this way in IE8:
Now, this is what is expected because we all know that IE8 doesn't support HTML5 and naturally it wouldn't render
However, if I take the same HTML and add
I didn't quite expect it to show up like this, because in order to achieve that same result, I would usually add the HTML5-shiv or add something like
in the
Comparing the two, at least visually, there seems to be no difference between following the standard javascript based approach using
It affects the HTML5 element on which it is applied and all it's descendants. For e.g: we saw what happens when you apply it at the outermost
<section> and <article> without the use of the HTML5-shiv or even without having to use document.createElement(). I figured it had to do with an "xmlns" attributed which accidently landed up on one of the <section> tags in my html.To illustrate my point, I'll use variations of the following HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.outer,.middle,.inner {
padding: 20px;
}
.outer {
border: 1px solid black;
background: lightblue;
}
.middle {
border: 1px solid red;
background: yellow;
}
.inner {
border: 1px solid blue;
background: lightpink;
}
</style>
</head>
<body>
<section class="outer">
<section class="middle">
<section class="inner">
<span>This is some text</span>
</section>
</section>
</section>
</body>
</html>
By default, the above HTML renders this way in IE8:
<section> tags. If you look at the IE8 developer tools window, you'd understand that IE8 simply tried to close off all start tags of the <section> element, and for some weird reason even the </section> end tag! Stupid IE8.However, if I take the same HTML and add
xmlns="http://www.w3.org/1999/xhtml" as an attribute to the outermost <section> element, this is how IE8 renders it:<script>
document.createElement('section');
</script>in the
<head> of the HTML. Here's a screenshot of how it would render after adding the above <script> snippet in the same HTML:Comparing the two, at least visually, there seems to be no difference between following the standard javascript based approach using
document.createElement() and adding the xmlns attribute. So, I started experimenting more with the xmlns attribute, and here are a couple of my findings:It affects the HTML5 element on which it is applied and all it's descendants. For e.g: we saw what happens when you apply it at the outermost
<section>, but if you apply it at the middle and inner <section> elements, then this is what we get:
Adding the same attribute to the
<html>, <body> or any other element does not seem to have any effect at all. It somehow needs to be on the outermost HTML5 element only for it to work. This is how it renders when the attribute it added to the <html> element.
Another observation was that the CSS styles cannot be applied using the element tag names, for e.g: if I provide something like:
section {
padding: 20px;
} instead of the existing
.outer,.middle,.inner {
padding: 20px;
} Hence, to conclude, it's probably more practical to use the HTML5 shiv, because all of these other issues mentioned work flawlessly there, but before I finish off, the reason I was able to discover this was because I was using the HTML5 shiv and at the same time I had the xmlns attribute which accidently landed up there. This combination does not work well, for some reason, although both approaches make IE8 identify the new elements, when you use both of them together, IE8 refuses to identify any HTML5 elements! So, never use both of them in the same HTML!
Comments
Post a Comment