I've just started to read "Introducing HTML5" book http://goo.gl/DDa9 (my first HTML5 tutorial) and it's simply wonderful. I enjoy its concise but very live language a lot.
On a page 11 http://goo.gl/IAi3 Bruce Lawson said, "The way to cajole IE into applying CSS to HTML5 is to use JavaScript. Why? This is an inscrutable secret, and if we told you we'd have to kill you. (Actually, we don't know.) If you add
the following JavaScript into the head of the page
<script>
document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘article’);
document.createElement(‘footer’);
</script>
IE will magically apply styles to those elements, provided that there is a <body> element in the markup"
I think I know - why.
Two years ago I found an article in a famous among .NET developers blog by Rick Strahl http://goo.gl/a4Cy about a very unfortunate Internet Explorer feature: it automatically creates matching global JavaScript objects for all DOM elements on the page based on their IDs. This clutters global space and often leads to clashes with user-defined JavaScript objects, which often leads to "Object doesn’t support this property or method" errors being displayed.
I bet these things are related: for IE to operate normally it needs all the DOM elements on the page to be in a global namespace. JavaScript snippet does just that - puts HTML5 'header', 'nav', etc. elements into a global namespace!
I already blogged http://goo.gl/ducY about this and another IE issue and tried desperately to notify IE staff... well, they don't like to be notified at all, they don't like bug reports.
An update of 10/19/2010: I got a nice message from Microsoft Connect Team saying that a bug was resolved in IE 9. They said, “This issue was resolved in Internet Explorer 9 Platform Preview Build 3 released on 6/23/2010… The fix prevents the error message. Note, IE still allows the DOM element to exist as a global javascript object. (Bold-italic mine, V.K.)”
Well, I’m not sure that keeping DOM elements in global JavaScript namespace is a good idea (other browsers don’t do it), but at least they found a workaround. It’s interesting to see how correctly it now supports HTML 5 and if document.createElement() trick described above is still necessary.
