Saturday, August 14, 2010

HTML5 and Web Browsers

I just finished watching several WWDC10 videos on HTML5. I am very impressed by the new features in HTML5, with CSS3 and JavaScript, to support interactions, animations, and offline data store. Apple claims that Safari is 100% compatible with HTML5, and provided some examples on the web. My understanding is that all those new features are just API gateways, and it will be up to the browser to provide support in its back-end engine.

Based on Wikipedia's List of Browsers, Safari and Chrome are based in Webkit, an open source project. Apple's Safari on Mac, Windows, iPhone, iTouch and iPad are based on Webkit. As a result, HTML5 is fully supported by Apple products. Here I say Apple products do not include Safari for Windows, see my comments later on.

It is very interesting to read the history section of W3C web document on HTML5. HTML was originally used as a standard web site design language in 1990. Then it was almost stopped its evolution to HTML4 in 1998, with the new direction towards an equivalent XHTML as replacement.

Mozila and Opera proposed form based features, later as HTML5, in 2004. Soon Apple joined the force to the effort to move to HTML5. Now it becomes the draft of W3C standard.

To verify if a browser supports HTML5, CSS and JavaScript, there are some web based test sites available. Acid3 and HTML5 tests are two well known ones. The following is the result I run on Aug 12, 2010 in my Windows XP box at work):

 Acid3Html5
IE612/10012 (scores)
IE820/10027
Firefox94/100139
Chrome100/100197
Safari (Windows)100/100207
Safari (Mac)100/100208


It seems that Safari has the best support. However, when I tried a well-known HTML video site (dart moor). Safari for Windows fails to play the video, while Both Chrome and FireFox for Windows play the video beautifully. I tried Safari for Mac at home, it plays the video without any issues.

Then, I created a simplified html file to test. The following is a simplified html file with the HTML5 video tag:

<!DOCTYPE html>
<html>
<head>
<title> Dartmoor - 1 </title>
<meta name="viewport" content="width-1400"/>
</head>
<body>
<video id="myVideo" width = "1280" height="544" controls
poster="http://assets1.jilion.com/08062010162347/images/embed/sublime/video/poster.jpg?1281111824">
<source type="video/mp4" src="http://medias.jilion.com/sublimevideo/dartmoor.mov"></source>
<source type="video/mp4" src="http://medias.jilion.com/sublimevideo/dartmoor.mp4"></source>
<source type="video/webm" src="http://medias.jilion.com/sublimevideo/dartmoor.webm"></source>
<source type="video/ogg" src="http://medias.jilion.com/sublimevideo/dartmoor.ogv"></source>
HTML5 videos support is required to play this video.
</video>
</body>
</html>


It is interesting to find out that the tests do not really guaranty browser's capability or supportability. The real site or html file says it all, at least for this test case. Not sure why Apple's Windows version of Safari is so behind to its Mac and other browsers. Does Apple intentionally do that or is there something else missing in my Windows XP?

I recall that one of Howcast podcasts (Tech & Gagdets) on iTunes: How to transfer contacts from your computer to your iPhone. It mentioned that PC users can only sync from one application at a time, while Mac users can sync from multiple applications. That may explain why many Apple applications for Windows, including Safari, are not as same as the Mac original ones.

0 comments: