Heard of Sjoerd Visscher? I’d venture to guess you haven’t, but what he considered a minor discovery 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 that all the
unknown, non-HTML elements were no longer able to be styled by CSS.
Fast forward to 2008, and HTML5 is gaining momentum. New elements have been specified, but in practice Internet Explorer versions 6-8 pose a problem, as they fail to recognize unknown elements; the new elements are unable to hold children and CSS has no effect on them. This depressing fact was posing quite a hindrance to HTML5 adoption.
Now, half a decade after his discovery, Sjoerd innocently mentions
this trick in a comment on the blog of the W3C HTML Working Group 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, was as surprised as the rest of the Web. Having never heard of this trick before, he was happy to report: “This piece of information makes building an HTML5 compatibility shim for IE7 far easier than had previously been assumed.”
A day later, John Resig wrote the post that coined the term “HTML5 shiv.” Here’s a quick timeline of what followed:
-
January 2009: Remy Sharp creates the first distributable script for enabling HTML5 element use in IE.
-
June 2009: Faruk Ateş includes the HTML5 shiv 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 file size of the script.
-
March 2010: Mathias Bynens and others notice that the shiv doesn’t affect pages printed from IE. It was a sad day. I issue an informal challenge to developers to find a solution.
-
April 2010: Jonathan Neal answers that challenge with the IE Print Protector (IEPP), which captured the scope of the HTML5 shiv but added in support for printing the elements as well.
-
April 2010: Remy replaces the legacy HTML5 shiv solution with the new IEPP.
-
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 HTML5 shiv inherit the latest code while developers everywhere continue to use HTML5 elements in a cross-browser fashion without worry.
The tale of the HTML5 shiv is just one example of community contribution that helps to progress the open web movement. It’s not just the W3C or the browsers who directly affect how we work on the Web, but people like you and me. I hope this book encourages you to contribute in a similar manner; the best way to further your craft is to actively share what you learn.
Adopting HTML5 and CSS3 today is easier than ever, and seriously fun. This book presents a wealth of practical information that gives you what you need to know to take advantage of HTML5 now. The authors—Alexis, Louis, and Estelle—are well-respected web developers who present a realistic learning curve for you to absorb the best practices of HTML5 development easily.
I trust this book is able to serve you well, and that you’ll be as excited about the next generation of the Web as I am.
—
Paul Irish
jQuery Dev Relations,
Lead Developer of Modernizr and HTML5 Boilerplate
April 2011