The Future of the Web: CSS3 and HTML5

An article appeared today on IBM’s website concerning the new elements available in HTML5 – currently under development. To put it mildly, I find this exciting. These elements allow for simplification of page layout – while the advancements in CSS3, which has been under development for years, allow for more complex and dynamic page design.
Within a couple of years, with any luck, CSS3 and HTML5 will be in wide use. I intend for this site to be one of the first to be redesigned to take advantage of the new possibilities these standards offer.
Already, the KHTML layout engine, which powers the open-source Konqueror browser, is compatible with much of the CSS3 standards. Opera’s Presto engine is following suit, and will be a major improvement with Opera 9.5, due out very soon.
It might be too much to hope Firefox 3 keeps pace, but I remain confident it will not be far behind.
Here’s a look at how HTML5 compatibility currently sits in the major layout engines (excluding KHTML). As you can see, Opera is the most advanced browser currently available with regards to HTML5.
Here’s a test anyone can take for their browser’s CSS3 compatibility (click “Start Testing…”). When I took this test in Konqueror, it passed all 578 tests, the only browser which currently does so. Opera 9.5 is next.
In real-world, plain language, what does CSS3 give us the ability to do? The most obvious advantage is text-shadows and box-shadows. A box-shadow is a text container which casts a shadow, completely controllable by the web designer using only code, no graphics. This website uses text-shadows in post titles. Apple’s Safari and Linux’s Konqueror are the only browsers that currently support text-shadows. Opera is next. Firefox, and all of the other browsers that use the Gecko layout engine (Epiphany, Galeon, Flock, Swiftfox et al.) will follow.
In plain language, HTML5 gives us a number of new containers designed for such things as blog articles, and text-chat style conversations. Page layout should be simplified, which will improve page load times.
With HTML5, we can have a container that holds a blog post, and with CSS3, we can create a coloured box with rounded corners and a drop-shadow, exactly like the one that surrounds this post, completely graphics-free.
And what about Internet Exploder? I’m sure Microsoft will implement CSS3 and HTML5 in its crummy browser on or about the year 2763.
If you want to use Opera, be my guest. This site was designed for standards-compliant browsers, and will display exactly the same in all of them, except Safari and Konq, which will show the text-shadows. Opera is free, and will soon display the text-shadows as well.