The HTML5 Shiv (2011)

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 & onafterprint events, 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.

Another list of similar projects and their merges can be found in the html5shiv readme along with project changelog and documentation.

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. ;)

2013.01.12 - Link to current html5repo with latest readme added.

from Hacker News https://ift.tt/mbvoRZK