code development programming

HTML5 and the Beta Browsers

I’ve dug out my HTML5 talk again, as I’ve been invited to present at TechMeetup in Glasgow on Wednesday. As I now use FireFox 4 Beta as my main browser (App tabs and Panorama are too good to give up), I’ve been trying to get my presentation, written in HTML5, working on it, and on the Internet Explorer 9 beta. I also tried the it on the latest release versions of Chrome and Opera. Oddly, Opera is the only browser not to display anything, given that the S5 presentation framework I use is ultimately based on an Opera demo. This may be something I have broken in the template. Opera is stuck playing the loading screen.

The presentation (that I will upload after the talk) now validates according to the W3C validator. Chrome, Firefox and IE all display the content, and all hide content when moving to the next slide, but Chrome and FireFox format the content to fit on the screen whilst IE simply lists the content. The CSS3 demos do not work in IE, suggesting that CSS may be part of the problem, although the CSS support in IE9 is light years ahead of previous versions. Certainly it appears that the layout model on IE is different enough from that used by Chrome and Firefox to merit having to redesign any site for IE. Since the w3c does not publish a rendering validator, I will not comment on which one is most standards compliant. I will merely say that even in the brave new world of HTML5 and CSS3, where rendering is more strictly defined, web development will still need to be done to the lowest common denominator.

Of the new HTML5 features in my demo, FireFox 4 has some changes to svg handling which interferes with the inline svg in my presentation, and has tidied up the UI for features such as geolocation from the previous version. Other parts of my presentation are held back by the lack of FireFox 4 support for some of the extensions I use. In particular, certain aspects of FireBug and Web Developer I use for live editing either do not work at all or are unavailable for local pages (I’m not sure which). IE follows Chrome and FireFox in not offering support for the new form input types, in partcular date and datetime. Given the problems datepickers are giving me in my day job, this is a big disappointment to me. I notice that IE, like Chrome does not animate PNG files such as the ones here, but unlike Chrome, also has the wrong background colour. IE is also the only one of the 4 browsers not to support the Mozilla <video> demos – although youtube html5 does appear to work, so this could be a codec issue. I don’t currently have access to Safari to see how well that does – I suspect it too will fail.

IE9 does have some good debugging support through its F12 Developer Tools, and, whilst the add-ons catch up, IE9 is easier to use to debug web pages than FireFox 4. Browsing through remy’s html5 demos, it looks like content-editable is more persistent than in should be in IE, because editing that page seems to persist the lifetime of the tab. Still, that’s why it’s a beta. I’m also disappointed to see that the Offline Application Manifest is not supported, as that would seem to be the perfect partner to the pin-to-taskbar functionality. Still, I’m happy to see support for canvas and inline svg, particularly given FireFox’s problems, although I hoped for a higher score on the HTML5 test (where it gets less than 100 compared to 159 for Opera and over 200 for Firefox and Chrome) and the ACID3 test (where 95 beats FireFox on 91 but falls behind Chrome and Opera on 100).

Now that I’ve finally got my hands on IE9, I’m less excited by it than I am by Chrome and FireFox. It looks as if it will still need plugins (Silverlight?) for rich internet applications, meaning that developing a full cross-platform web application means either limiting functionality for certain browsers (which will need to be done for IE6 for a while yet anyway), or writing a plugin for IE to bring it up to the level of the other desktop and smartphone browsers.

Given the pace of releases, I’m surprised how little new I can add to my presentation. Whilst every browser is moving forward, the baseline standard still appears to be where it was, there’s no cross-browser video format, no cross-browser forms support (input types or validation), no cross-browser Web Application support, no cross-browser geolocation support and no cross-browser CSS transforms. In fact, the canvas and structural elements seem to the only features in my survey with cross-browser support, and given the poor showing of canvas in the results, it’s going to be a long road to adoption, unless you’re in the mobile space.