Tehais.ing

I’ve meshed up a HTML5 and CSS3 demo in the form of the New York Times. No JavaScript involved in the making.

HTML5 Video – I’m using a nice animated video called the Elephant Dream, the video is encoded in WebM. WebM is the newly announced royalty-free media file format. Google, Firefox, Opera and others have announced support for this new format. Currently WebM video works in Opera labs build, and a special Firefox nightly. Opera 10.6 beta will be having WebM support too.

Since Google is the main force behind the WebM project, we should see Chrome support soon as well. (They are the ones who bought a company called On2 Technologies, opened up On2’s video codec and made it into the WebM project).

Safari has not announced support for WebM, not yet at least. You can encode HTML5 Video in H.264 to get Safari working. For older versions of browsers that don’t support it, you’ll probably see an image placeholder.

CSS3 – Well, it’s mostly Transitions/2D Transform and Borders/Background/box-shadow. They make things such as sliding and shadow effect possible.

Transitions work in Safari, Chrome and Opera, but not Firefox. It is suggested that Firefox 4.x will support transitions. So for now, Firefox users will not see the “smooth” transitions of certain news item in the The New York Times.

The rest of the CSS3 stuff should work in all four browsers.

Web Fonts – The newspaper title uses Web Fonts. With Web Fonts, designers are not anymore limited to the font types available on a user’s computer. So now lots of funky fonts can be downloaded to the browser and displayed. It works on Safari, Firefox, Opera and Chrome. For some reasons though, Google Chrome has decided not to enable it by default (yet), you’ll need to either to turn Web Fonts on in Google Chrome or just look at plain fonts instead.

The fonts used is Old English taken from FontStruct, they have some nice creative commons licensed web fonts.

Note1: For all the CSS3/HTML5 stuff mentioned to work, best use Opera Video Labs build or Opera 10.6xbeta. Safari renders very nicely too, but without the video.

Note2: the original layout of the newspaper demo is adapted from Daniel Davis’ Japanese Web Fonts showcase.

Kudos to Microsoft for putting some real effort into bringing some exciting standards support into IE9, as announced yesterday in MIX.

It is however, not right to mislead.

IE’s test manager Jason Upton published a list of standards tables highlighting the achievements in the form of a comparison table. Way to go, everything passes in IE9!

First you create tests, then you submit your test. Lastly you make sure you pass all your tests (which you obviously will). Finally to make it all roses and rainbow, you create a table which shows all the tests you have submitted and passed, and plaster FAIL over those next to you.

You really thought that IE9 is from the future. that is until…….

The tabs below provide details and links to each of the tests we submitted to the various W3C working groups to help the web become more interoperable. Here is a summary of the current results across each of the major browsers running on Windows:

This clearly means that the table only shows test cases which Microsoft submitted, not all test cases in all the different suites.

For starters, according to Codedread’s SVG 1.1 test IE9 preview has less than 30% pass rate, as compared to Opera 10.50’s 94%. In other words, the 31 tests that IE9 passed only constitute (at most) 30% of the entire suite.

As for CSS3 Borders and Background, IE9 tested largely against border-radius, border-radius is one of many properties in CSS Borders & Background. There are many more to Borders & Background, such box-shadow, border-image, background-clip, background-clip and the likes. Microsoft also forgot the other CSS3 specsifications. Where is transitions, 2D transform and the likes?

We look forward seeing great standards supports from Microsoft, and also a more representative table of the standards spectrum.