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)
Introducing HTML5%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D11385074.-%3B)
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 [...]