DHTML5: Not Quite There Yet

June 3, 2011

Meet ME and MBMS. They both want to be really excited about the possibility of using HTMl5 in Javascript frameworks. But there are still some issues that need to be worked out, such as HTML5’s dislike for certain containers and a few complications with Javascript libraries.

But we think they can work it out. We think these two can find a way to still be excited for DHTML5, even if they must temper that excitement with caution.

And now their story begins…

Me, excited (ME): These Javascript frameworks are really cool. I love all the work we can push down to the browser. I’m really excited to use some HTML5 awesomeness in this application!

Me, but much sadder (MBMS): Not so fast! Internet Explorer1 6, 7, and 8 don’t like HTML5 containers like <header>, <footer>, and <section>.

ME: I thought Modernizr and html5shiv took care of that problem. You put some Javascript in the <head> that creates dummy versions of all of the new elements and that teaches IE how to style them.

MBMS: You’re right. Those libraries work great… for static content and dynamic content added with appendChild(). Unfortunately, even those libraries don’t add in support for content added by setting innerHTML, which is exactly how Handlebars and all those other Javascript templating libraries work.

ME: [Searches the Googles] Oh! Oh! Oh! I found this: innershiv. When you want to set the innerHTML, you wrap the call with innershiv(). That library creates a dummy document element, inserts the content there, and then copies it back into the real element with appendChild().

MBMS: Good find, ME,2 but there are a number of problems. First, you would have to call innershiv() around every insertion call. That’s annoying for your code and next-to-impossible when you have to also consider frameworks and plugins. Imagine trying to monkey-patch jQuery-UI to wrap every DOM insertion with innershiv(). Second, even if you did wrap every call, you still couldn’t use the HTML5 containers. If you try to insert any elements into a <section>, for example, you get the following error in IE 8: “SCRIPT65535: Unexpected call to method or property access.” You can try it here. The problem is that those elements return false for canHaveHTML, and thus cannot contain HTML elements.

ME:So what you’re saying, MBMS, is "choose two: HTML5, dynamic content, IE < 9 support."

MBMS:That’s precisely what I’m saying, m’colleague.

Footnotes

  • Of course it’s Internet Explorer. How often do you see a blog post about WebKit not supporting some great feature that IE does?
  • Big tip of the hat to Paul Irish for pointing out innershiv and discussing this topic ad nauseam with me.