The Story of the HTML5 Shiv
Heard of Sjoerd Visscher? I would venture to guess you have not; however, what he considered a minor discovery of his is at the foundation of our ability to use HTML5 today.
Back in 2002, In The Hague, Netherlands, Mr. Visscher was attempting to improve the performance of his XSL output. He switched from createElement calls to setting the innerHTML property, and then realized all the unknown non-HTML elements were no longer styleable by CSS.
Fast forward to 2008, HTML5 is gaining momentum. New elements have been specified, however in practice, Internet Explorer 6-8 pose a problem as they do not recognize unknown elements; the new elements cannot hold children and are unaffected by CSS. This sad fact was posing quite a big hinderance to HTML5 adoption.
And it's now, half a decade after his discovery that Sjoerd innocently mentions this trick in a comment on the blog of the W3C HTML WG co-chair, Sam Ruby:
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
Ian Hickson, lead editor of the HTML5 spec, stood surprised, along the rest of the web, that he had never heard this trick before and was happy to report: "This piece of information makes building an HTML5 compatibility shim for IE7 far easier than had previously been assumed."
John Resig, one day later, wrote the post that coined the term "HTML5 Shiv". While it technically is a "shim" and John admitted this later, the proliferation of assorted HTML5 shims nowadays makes a good case for us to continue using "shiv" for this solution. Chris Wilson, then of the IE Team, said “I want to jam standards support into (this and future versions of) Internet Explorer. If a shiv is the only pragmatic tool I can use to do so, shouldn’t I be using it?”
Now, from here, a quick timeline:
- January 2009: Remy Sharp creates the first distributable script for enabling HTML5 element use in IE.
- June 2009: Faruk Ateş includes the html5shiv in Modernizr's initial release.
- February 2010: A ragtag team of superstar JavaScript developers including Remy, Kangax, John-David Dalton, and PorneL collaborate and drop the filesize of the script.
- March 2010: Mathias Bynens and others notice the shiv doesn't affect pages printed from IE. It was a sad day.
- April 2010: Jonathan Neal answers the challenge with the IE Print Protector (IEPP), which captured the scope of the html5shiv but also added in support for printing the elements as well, through clever use of the
onbeforeprint&onafterprintevents, along with a faux DOM reconstruction. - April 2010: Remy replaces the legacy html5shiv solution with the new IEPP.
- August 2010: JD Bartlett introduced the innerShiv, which is necessary for shiv'ing content going in via
innerHTML. - February 2011: Alexander Farkas carries the torch, moving the IEPP project to github, adding a test suite, fixing bugs, and improving performance.
- April 2011: IEPP v2 comes out. Modernizr and the html5shiv inherit the latest code. Meanwhile developers everywhere continue to use HTML5 elements in a cross-browser fashion without worry.
This is what the HTML5 community is all about to me: distributed folks, working collaboratively, to bring the promise and potential of HTML5 into reality.
Just for emphasis on all the bright minds that engaged on this one.. Here are the people who worked on the HTML5 Shiv: Sjoerd Visscher, Sam Ruby, John Resig, Remy Sharp, JD Bartlett, Faruk Ateş, Kangax, John-David Dalton, PorneL, Mathias Bynens, me and last but certainly not least, Jonathan Neal and Alexander Farkas.
The narrative above appears in my foreword for the book HTML5 & CSS3 for The Real World by Estelle Weyl, Louis Lazaris, and Alexis Goldstein.
It's a very good book on practical HTML5 and CSS3 development with a lovely learning curve. Buy it if you like. ;)
Thanks for writing this Paul, it’s all to easy to forget that people have made the tools we use everyday. Nice to see the history and original discovery on how to trick IE into allowing new elements to be styled.
I just bought the Kindle version. I believe that it will be awesome. :)
Great timeline. Thanks.
title says shiv… you mean shim, right? shim… like in the article… or was this meaning to be cheeky like ie authors shiv'ed html5? :)
*keeps reading*
oh, you meant shiv. weird. never heard that before.
Man, love the way the history of html5-shiv evolved. Beautifully written, Paul. Thanks.
Now Sjoerd Visscher will not be forgotten! All this started by a simple comment on a blog. Internet is truly remarkable.
Mr. Visscher should clearly have patented his innovation: Method and Process For Applying Styles To Unknown Elements. As we all know, it's the system of software patents that drives true innovation, and such discoveries would be impossible without the incentive patents provide. This work should be covered by a 14-20 year monopoly, which is a fairly small, reasonable timeframe – just the timeframe between dial-in BBSes and Ebay, or between Netscape 1.0 and Bittorrent.
You're all a bunch of criminals for freely using the technology of others.
I have one question: How other older browsers are dealing with html5 elements and does the createElement trick works also for them?
@Micha? Czernow
This trick only worked for IE. I believe FF2 had a problem with unknown elements. the potential fixes for those are detailed here: http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/
Hang on, the print problems in IE6-8 have been fixed? And it’s bundled in html5shiv? Why did no-one tell me?! Happy day :)
move your cursor to left right gray area..
@Paul Irish
Thanks, I know Mr. Zakas' approach. I must admit – the tag soup, that this solution involves, is far from what I want to achieve in my HTML code. At some point it's the matter of aesthetics, so maybe not so very important (there is also page size issue).
I love a great story. Thanks
I can't believe that I've been on this coding journey for so long and haven't run across this yet. Thanks for the history lesson.
This should clean up an extra few unnecessary divs. Time to go implement!
Hey
Thanks for the article. I feel a bit Luddite saying this…
If I understand correctly, the only viable way to use HTML5-specific tags like footer or aside in IE6-8 is with JavaScript or Chrome Frame. (someone please correct me if I'm wrong!)
The sites I develop probably get most views from people who might well be put off by a prompt to install Chrome Frame, and I'm trying to bear in mind the non-trivial numbers of those with JS disabled.
(As I'm making sites whose visitor numbers will, relatively speaking, be peanuts perhaps I'm just being OCD, but anyhow…)
Given this, my adoption of anything HTML5 so far really consists only of a shorter doctype! -I'm playing it too safe to take advantage of shims ):
Ah! You've placed harmony js in the background. You're married to HTML5, Paul. Awesome work, I am loving it all at boilerplate too…:-)
I couldn't believe you were serious… in fact I still can't. So this is how history is made. I think I must go and some myself. Wish me good luck everybody.
@confused fellow
Hi
There are other "tricks" like
content
then you would have to style div not footer element and footer element would be inline
html is missing :)
grrr
<div>
<foooter>
CONTENT
</footer>
</div>
//Can someone fix my comments?
Hi,
Does "unaffected by CSS" mean by pre-existing/already loaded stylesheet or js scripts not being able to apply some styling to newly created elements?
Can 'event delegation' be a solution to where new elements and its child element are created?
I have tried event delegation method http://insteps.net/pr/a/pmwiki/QNotes/Notes1 ,
though I have not tested if it works in IE.
Regards.
V.Krishn
Ahh… to 'unknown non-HTML elements'.
I guess my previous comment might not be applicable.
Regards.
V.Krishn
@ajumac thanks, but I'm too lazy for this! But it's good to know.
When I way up OCD vs. lazyness, lazyness wins by a slim margin, epecially as I age. So I'm going to go with: JS assumed always to be enabled, but still use ideas from Progressive Enhancement in general.
Just read http://www.viget.com/inspire/html5-elements-irresponsible-choice-right-now/ after which my head is spinning and I need a pie. But I'm going to stick to lazy.
(That said, can't we server-side browser-sniff and send different markup for IE6-8? Server-side sniffing seems to be back in fashion).
This is the second time I've come here from the jQuery 1.7 release notes, and it's still fun to read through history that I was actually around for! *smiles*
Thanks for sharing. I didn't know about this trick previously.
There is one "but": the fancy painting tool around the article is aggressively distractive :) I couldn't take my mouse of it :)
awesome, thanks for your effort Paul…
Thank you, Sir. What would we do without people like you. Cheers.
Has anybody a source for paying back with zombies for every cent they stole.
I mean that shit site Dealcent.