Work
Subscribe7 Jan
HTML5 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="html5.js" type="text/javascript"></script>
<![endif]-->I've also minified the file, so it's a matter of bytes to download.
That code will do the wrong thing for empty elements I'm afraid. E.g. <event-source> should be parsed just like <img>.
It looks to work just fine in IE6 + 7: http://jsbin.com/inune
Obviously the actual element isn't going to have any meaning until the browser understands it, but the shiv is just to enable styling to work in IE.
Did you have something else in mind?
The second sentence is a little confusing... just to be clear, this must be placed in the
HEAD.Thanks, Remi!
@David L. - Ha! Indeed it is confusing! I've completely contradicted myself - thanks for the spot, I'll fix that
[...] convenience, Remy Sharp has written and published a simple script that provides this enhancement for all new elements in the current draft of HTML5, which you can [...]
@remy http://jsbin.com/usufi is better with proper doctype and still works in IE6
@Marin - you're right, the demo should have been using the
<!DOCTYPE html>doctype - I've fixed my demo link - cheers.Two things:
1.
<event-source>became<eventsource>(I don't have the revision number handy, but you can see it for yourself in the current draft.)2. Anne's right, elements that have an
Emptycontent model have different rules than your stock non-emptyFlow&Phrasingelements.<eventsource>happens to be one of them, there are a handful of others like<area>,<base>,<br>,<col>,<command>,<embed>,<hr>,<input>,<link>,<param>, and<source>.[...] Remy Sharp’s HTML 5 script reminds me of IE7.js - it teaches IE HTML5 [...]
Yes, if you have e.g.
<eventsource><img>the elements should be siblings and the img element should not be nested inside the eventsource element.(I see I wrote event-source in my first comment, that was a typo.)
@Shawn - no problem - I've fixed the script to remove the hyphen.
@Anne - I finally get what you mean. I've plugged it in to Hixie's DOM view and can see the img element should not be nested: http://tr.im/eventsource
However, this is happening in Safari and Firefox (let alone IE), since they don't support HTML5 elements as yet.
I'm not sure (as yet) what to suggest. Obviously the point of all this is that we can start using HTML5 elements and it's backward compatible with older browsers for styling. However, if these elements break the DOM, until there's a solution, and I'm sure there will be one, I'll be avoiding these specific elements for the very short term.
Not a great answer, but it needs investigating and hacking around to see what can be done.
Remy, thanks for this! Might I suggest hosting this on Google code or something so that any updates to HTML5 / the script spill through automagically?
I think if you do not include those elements in your list the DOM in Internet Explorer will at least be correct. As for the other browsers, they'll just have to quickly start adding support for them
These should not be in the list:
datatemplate, embed, eventsource, list, nest, rb, rt, ruby, rule, source
since IE already supports embed and ruby, eventsource and source should be empty anyway, and datatemplates were dropped from the spec.
Also you could consider adding abbr to the list since some versions of IE don't support it.
[...] Diese Prozedur kann man mit jedem HTML5-Element durchführen das man braucht, oder direkt zum HTML5 enabling script greifen, das das komplette Programm an HTML5-Elementen für den Internet Explorer aktiviert. Klingt [...]
I've updated the list based on feedback - and also noting that the source page I used to get the new elements was actually out of date.
Going by the page Shawn gave and the WHATWG working page I've recompiled the list (and included
abbr) to this:abbr, article, aside, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, figure, footer, header, mark, menu, meter, nav, output, progress, section, time, videoI've excluded the following tags since they're not rendered (but please correct me if I'm wrong):
eventsource, source, commandAnd the following have been excluded as per zcorpan's recommendation:
rp, rt, rubyReminder that this script only allows IE to style the elements!
dfn is not new -- IE supports it fine. Also, as I said in my previous comment, IE already supports ruby, rt and rp, so no need to list those.
@zcorpan - cheers - I've updated the comment that includes the list too.
[...] http://remysharp.com/2009/01/07/html5-enabling-script/ : un javascript qui devrait permettre l’utilisation d’HTML5 avec internet explorer. [...]
[...] alcuni visitatori. Il modo più veloce per implementare questa soluzione è includere nella pagina questo script, tenendo presente i problemi di [...]
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 [...]