Thursday, January 24th, 2008

Getting HTML 5 styles in IE 7+

Category: HTML, IE, JavaScript

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.

This was uttered by Sjoerd Visscher innocently on a Sam Ruby thread, and it sent ripples of “huh? really? How come I never know that!” through all of the experts.

This fact means that you the following will show up as red in IE 7:

  1. <html>
  2. <head>
  3. <style>blah { color: red; }</style>
  4. <script>document.createElement("blah")</script>
  5. </head>
  6. <body>
  7. <blah>Hello!</blah>
  8. </body>
  9. </html>

This is an example from John Resig as he discusses a HTML 5 shiv. You can see how a JavaScript shim can “implement” some of HTML 5 for us.

We have also gone down this route for some of the HTML 5 spec, and you can indeed do a lot with JavaScript. There are a couple of places where you kinda have to be in the browser to do the right thing…. but these are few and far between.

Sjoerd Visscher just blogged about this and told us how he found it out (back in 2002-ish!):

As far as I can remember we found out about this when we converted the first rendering of the XSL output from a lot of createElement calls to one innerHTML change for performance. This caused our custom elements to no longer be affected by CSS.

Posted by Dion Almaer at 8:46 am

4 rating from 23 votes


Comments feed TrackBack URI

This suddenly sheds a lot of new light on how they’re transferring from IE7 to IE8…

Comment by SchizoDuckie — January 24, 2008

I think creating a javascript file that parses the css, and adds a document.createElement(unknownTag) for all tags not in some array of standard elements that could be defined. Sure someone’s already done it :) But maybe not

Comment by MadeByChad — January 24, 2008

Leave a comment

You must be logged in to post a comment.