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 lt IE 9]>
<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%3D99177559.-%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 [...]
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. [...]
Made it here from smashing mag...love you background!
You are a lifesaver. Thanks a lot! Now every new website will be powered by html5. Cheers
I'm working on a HTML 5 enabling script that goes a lot further (which you already know about). I believe you have some more complex scripts to enable various parts of HTML 5 in current browsers too, right? I want to gather all these little scripts that everyone is making into something that could (without getting too huge) make HTML 5 work somewhat decently in all current browsers (except for Web Forms 2.0; I think that should be a seperate module).
One gotcha I've discovered so far has to do with wildcards in CSS. I haven't had time to boil this down to a precise test case, but in a current project I'm working on, IE7 refused to honor a block like this:
article * { ... }
...even though it correctly styled blocks such as these:
article { ... }
article h2, article h3 { ... }
...etc...
I doubt there's anything that can be done via javascript to correct this?
This is the *only* problem I've encountered thus far, though, on two new projects. Nice work!
- jason
Has anyone tested this on IE8, because it is not working on my computer
The script has been tested in IE8 and does work. Make sure you're including the shiv script in the head element.
Yes, the shiv script is in the head element... It is working (on my computer) in IE7, in IE8 as IE7, but not in IE8 as IE8!
Can you drop the markup you're using online, perhaps using http://jsbin.com/#html - I've definitely tested it under IE8 as IE8, so I'll try to help with what ever the problem is.
Here is the markup: http://jsbin.com/olaxi
I've just tried it out in IE8, and I got the nav element to style just fine: http://jsbin.com/uneji
I'm not sure if you are or not, but remember you need to give block style to the block elements such as nav, header, etc.
I get my example showing the nav as red and width 100 as specified in my conditional style sheet.