A different kind of HTML5 shim
As I’m sure many of you are aware, in order to get older versions of Internet Explorer to recognise and apply styles to the new elements defined in HTML5, a JavaScript file known as a “shiv” or “shim” needs to be used.
The standard HTML5 shiv that tends to be used is html5shiv.js, by Alexander Farka and Remy Sharp (you can also read Paul Irish’s The Story of the HTML5 shiv for further information.)
Today however I came across another type of HTML5 shim that uses Internet Explorer’s HTML Components, or HTC, files. A HTC file is defined as:
… an HTML file that contains script and a set of HTC-specific elements that define the component.
This particular shim was written by Christopher Jeffrey, and he posted about it a year ago. I can’t believe it seems to have gone unnoticed.
Jeffrey mentions that such an approach:
… arguably saves more bandwidth in the long run because a .css and .htc file can be cached, whereas conditional comments will linger on every response served. It also seems much better looking than the ugly looking conditional comments which only pollute your markup.
I’ve decided to add this method to the ongoing tweaks that I make to this website, and as such, HTML5 specific element support for Internet Explorer, is now handled via Jeffrey’s HTC file.
7 Responses
Are you going to load the HTC even in other browsers or are you using some kind of trick which avoids conditional comments ?
Oh ! Got it know … you use the CSS “behavior” property, very nice …
Yeah, only IE browsers recognise that, other browsers ignore it. This does mean that IE9 (and I presume IE10) will also react to it though. It doesn’t seem to have any ill effects though.
This solution has a problem, but this is a big one. It fixes the DOM after page load, and leave the website unusable before that. Also, you may experience script bugs because of malformed DOM if some script runs before page load.
Have you proof of that François? I haven’t noticed any issues in my (albeit brief) testing.
I’ve avoided .HTC “fixes” in the past because the performance in IE browsers was just so darned slow. I’ve never tried this .HTC “fix” but I’d be interested in testing it. Thanks for making me reconsider an approach I’d already given up on.
Ian, it seems the HTC you linked to fixes a different problem with using unknown elements (in iE < 8).
Actually it fixes the DOM by removing the fake closing tag, which in those IE browser counts as extra elements. It also adjusts nesting of those nodes.
It doesn't fixes the CSS elements dictionary that allows applying style to new elements. This is what the original "shim.js" you mentioned does.
So the sum of the two processes get completely fixed both the DOM and the CSS, though the DOM clean up process will possibly slow down page loading in complex document (many elements).