Getting HTML 5 styles in IE 7+
Date : 2008 01 24 Category : Tech & Development
AjaxianBtw, 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:
PLAIN TEXT HTML:<html> <head> <style>blah { color: red; }</style> <script>document.createElement("blah")</script> </head> <body> <blah>Hello!</blah> </body> </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.