Leif Halvard explains further with demos. Pretty crazy, but you can easily avoid this by always using both the and tags in your markup. If you create the new element and don’t use a tag (which is perfectly valid HTML 5), IE will put all those created elements inside the tag. You can see in the second screenshot that the content isn’t perfect, but it’s still readable - it cascades down correctly, much as if CSS were disabled. Here’s a screenshot of the Full Frontal web site, written using HTML 5 elements, rendered in IE with and without JavaScript enabled: Personally, I feel that if you’ve used semantic markup for your site and the elements can’t be styled, the content is still completely readable. This obviously means that your design now depends on JavaScript. There are a couple of things to be aware of when using the HTML 5 shiv. It’s my hope that IE 9 and onwards will support HTML 5 elements, but when that day comes, make sure to double check the conditional! Conditions & Gotchas Note that I’ve used a conditional comment to only apply this to IE 8 and below. Include the script in your tag, and you’ll be able to style the elements appropriately in IE: Now after we’ve applied the fix, it’s correctly styled in IE:įor everyone’s convenience, I wrote a single JavaScript file that can be included to create all the HTML 5 elements (and the element) for IE. To apply the fix, add the indicated line of code: This screenshot shows the rendering in IE before we apply the fix: John Resig has also written about this HTML 5 shiv.įor example, say you wanted to style the element in italics: There is hope! The trick, discovered by Sjoerd Visscher, is simply to create the new element using JavaScript, and voilà, IE is able to style it: document.createElement('header') (Let me add that we’ll also fix the element while we convince IE to recognise HTML 5 elements). This is actually the same issue that we had before HTML 5, where the element couldn’t be styled in IE 6, resulting in all manner of workarounds.
Quite simply, IE doesn’t even see HTML 5 elements, much less style them. The problematic A-grade browsers include IE 8 and below, Firefox 2, and Camino 1 (these last two browsers both use the Gecko rendering engine, which is why they’re both affected). Let’s momentarily forget about the really sexy functionality, like full control over the element, and just focus on getting the elements rendered. HTML 5 may be the latest and greatest technology, but some browsers don’t have native support for the new semantic elements.
0 kommentar(er)
