Work
SubscribeHTML5 enabling script
Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as <article>, is to use the HTML5 shiv, I've quickly put together a mini script that enables all the new elements.
Usage & Download
The html5.js and must be inserted in the head element (this is because IE needs to know about the element before it comes to render them - so it can't sit in the footer of the page, i.e. below the elements in question).
It's conditional within the code, so Firefox et al won't run the code - but it doesn't hurt to wrap it in an IE conditional call to reduce the http pulls for other browsers:
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->I've also minified the file, so it's a matter of bytes to download.
You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D62894735.-%3B)
Hello
I've been running this on a site and it works superbly, just wondering if it works with IE8 or not as it doesn't seem too unless it's running in compatibility (IE7) mode.
Rich
[...] id="header"></div>. Also, if HTML5 is chosen, the output automatically includes Remy Sharp’s JavaScript fix which enables Internet Explorer to style these elements [...]
[...] was also getting an odd error with Remy Sharp’s groovy HTML 5 enabling script, which I’d surrounded by a conditional comment as only Internet Explorer needs it. Part of [...]
How about an accompanying html5.css to provide the default values?
As far as I've read:
That's the content of my html5.css (localhost testing). I update it when I continue reading HTML5 :p Right now, I'm more into testing stuff, I might try to convert an existing b2evolution theme into HTML5 (and probably CSS Level 3) some time later when I get the time.
I've played around with this stuff too and noticed a few limitations; if you've found a way to get around these thats great:
* Can you use CSS on nested child elements of the unknown element?
* Have you tested how well the CSS actually works against unknown elements? I remember seeing issues in terms of CSS 'visibility', 'dispay', etc. acting funky. Good to test that.
* Do nested children in the unknown element show up in the DOM correctly? It sounds like they don't from the comments above.
I ran into the above issues when prototyping these things against IE 7 in the past, trying to see if a general HTML 5 shim was possible.
There _is_ a way to solve these things on IE, but you have to delve into the realm of HTCs/Microsoft Behaviors to do so. It would be great to find a non-HTC solution but I haven't seen it yet. HTCs are fine though, especially if you use some of the tricks I've found with the SVG shim I'm working on in order to solve various memory, performance, etc. issues with HTCs.
[...] putting the modified site live I have discovered the work Remy Sharp has been doing with javascript to get over IE’s little problem. The principle is to use [...]
[...] problem that I have to be comfortable to say that IE users must have JavaScript enabled to get the html5 enabling script to work, but I think you have to justify this on a case by case [...]
Just beeing curious: What ist this?
if(!/*@cc_on!@*/0)@Michael - all is explained by Dean's sniff post. Awesome little snippet.
[...] be styled with CSS, even if the browser does not understand what the element is (but it requires a JavaScript hack). With the JS doing its thing, it can make adoption of HTML5 more palatable.” Ian has even added [...]
How do I give recommendations to W3 on HTML5. Can somebody help?!
[...] read John Resig’s “HTML5 Shiv” article and Remy Sharp’s “HTML5 enabling script”, it felt like the right time to begin the full fledged migration from XHTML to a cross [...]
[...] but besides that the layout works. I’ve chosen to ignore Internet Explorer as it requires a bit of hacking to get HTML 5 to work. You could also define some more rules and get everything working across [...]
Just what I needed. Thank you so much for putting this out there! (I'm in the process of converting my site to html5)
Any chance you can add the [source] element in there (for [video] and [audio])
@John - you shouldn't need it because source is a hidden element, thus doesn't need to be styled (which is what the script is for). Get back to me if I'm wrong though!
Thanks, I just started building a new website (watchdog247.com.mx) in HTML5 and this script has already saved me loads of time. There are still some obstacles to overcome. IE8 displays the main content from within the article tag in one single column instead of two columns in some of the more decent browsers.
Adding my new site to the list of web sites viewed in IE8's Compatibility Mode makes it look a lot worse, like it will most likely be in IE7,6 and 5. I haven't checked how it looks in those yet.
If you want the code a little bit smaller, try:
(function(){if(!/*@cc_on!@*/0)return;('abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video').replace(/[^,]+/,function(e){document.createElement(e)})})()
Greetings, LX
[...] HTML5 enabling script which shows a method that enables HTML5 tags on IE6 to be styled. [...]