On Monday, Google made a big splash with a customized Arcade Fire video page that showed off all the cool things HTML5 can do, from video, animations and 3D rendering to gorgeous fonts and choreographed windows. It’s all cutting edge stuff as far as what is possible with a Web browser goes, but there is one very big problem. It doesn’t work so great in all browsers, even browsers that supposedly support HTML5. If you go to the landing page that launches the video in Firefox or even the forthcoming IE9 (which isn’t out yet, but is very HTML5-friendly), it detects your browser and suggests you use Chrome instead. I received the following message on Firefox:
This site was designed with Google Chrome in mind and is unable to render properly in your browser. For the best viewing experience, we recommend downloading Google Chrome and trying this site again.
But wait, isn’t Firefox one of those “modern browsers” that supports HTML5? This isn’t the first time there have been issues with HTML5 compatibility. The problem is that HTML5 is so young that the standards have not been hammered out yet across all browsers. The markup language required to produce the same effect is different for different browsers.
“The Arcade Fire thing . . . they are writing to the browser,” points out Dean Hachamovitch, the Microsoft general manager in charge of Internet Explorer. “They use proprietary Javascript.” HTML5 “done right,” he contends, would be using the same markup language across browsers. Seems reasonable. That is what the open Web is all about. It is why we have standards. But HTML5 is so new that we are getting flashbacks to the late 1990s with sites refusing to accept certain browsers.
To illustrate this point, Microsoft has an browser test page to show the difference between different browsers. Under one set of tests titled HTML5 Demos, there is a “Border Radius” test that changes the border around a block of text. Inside the block of text, it shows the markup code required to create different effects such as animating it or creating dots instead of a solid line. (Update: As pointed out in comments, this is technically CSS3, which is not exactly the same as HTML5, but both go hand in hand). Here is what the code looks like in Chrome:
And here is what it looks like in Firefox
What’s wrong with these pictures? One takes 16 lines of code, the other takes four, and they are completely different. Even the dots that are created don’t match (Chrome’s dots are square). A different set of code is required for IE9. “We want to make the same markup work everywhere,” says Hachamovitch. “If you have to write that differently for every browser it is kind of missing the point.”
Microsoft is working with the standards bodies, as are all the other browser makers, but what is really needed is better definitions and a thorough set of reference examples for every possible HTML5 feature. It’s a lot of work. Eventually, we will get there. But until then, expect to see grandstanding about which browser does HTML5 better. When you hear that, just ask yourself, which version of HTML5 are they talking about.
Update: As many readers in comments point out, the Radius Border example above is not technically HTML5. It is CSS3 (Cascading Style Sheets). It is, however, a related technology. Microsoft lists it under HTML5 Demos here (although it correctly identifies it as CSS3 on the actual demo page), Apple includes it in its HTML5 Showcase as a related modern Web standard, and Google includes it in its HTML5 Studio (“nine demos that show off some fanciful sides of HTML5, CSS3 and friends”). While CSS3 is a different specification than HTML5, it is part of the same family of modern Web technologies that should work in all browsers.
The CSS3 Border Radius test is a good example because it shows visually how something very simple requires different markup. The same is often true for HTML5: the same markup doesn’t produce the same results, and to get the same results, you need to write different markup.
This is the bigger issue. As Mozilla’s Christopher Blizzard put it in an instructive post back when Apple’s HTML5 Showcase only worked with Safari:
The most important aspect of HTML5 isn’t the new stuff like video and canvas (which Safari and Firefox have both been shipping for years) it’s actually the honest-to-god promise of interoperability. Even stodgy old Microsoft, who has been doing their best to hold back the web for nearly a decade, understands this and you’ll see it throughout their marketing for IE9. (Their marketing phrase is “same markup” – watch for it and you’ll see it everywhere in their messaging.) The idea that the same markup, even with mistakes, will be rendered exactly the same. HTML5 represents the chance for browsers to work together and find common ground.
The same argument applies to CSS3, Javascript, and everything else.