Uncategorized

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.

8 Comments

• Bob Bogus says:

  August 8, 2007 at 3:52 pm

  Thanks for this info, Oz.
• vineyardsaker says:

  August 8, 2007 at 8:32 pm

  Here is what I got with my favorite browser, Epiphany:
  From the 43 selectors 26 have passed, 10 are buggy and 7 are unsupported (Passed 357 out of 578 tests), so I suppose its slowly getting there. And, again, Opera is *not* free.
• Ozymandias says:

  August 8, 2007 at 9:41 pm

  Opera is not open-source, but it is in the commercial sense, free. Epiphany uses Gecko as its layout engine. Gecko is due for a major update when FF3 is released, which is due in FQ3 or FQ4. It is currently in Alpha6, having missed the public Beta due date of late July. I would expect a much better performance out of the new Gecko. It is known that it passes the ACID2 CSS test, finally. IE7 is the lone holdout on that front. I’m sure it will pass that test, possibly before the Earth explodes from old age.
• vineyardsaker says:

  August 9, 2007 at 6:53 am

  what browser do you use? konqueror? (Its a good browser, but I found it to be slower that epiphany and its choppy when scrolling down a page. and I don’t really like the shaded letters I see)
• Ozymandias says:

  August 9, 2007 at 8:43 am

  I use a combination of Swiftfox, which is a stripped-down Firefox resulting in greater speed, and Konq for certain tasks. There is no one browser that can do everything.
• vineyardsaker says:

  August 9, 2007 at 10:23 am

  yep. same here. I do my blogging with firefox and my browsing with epiphany even though I still use “link2 -g” when I am in a hurry. I like my browsers to be simple, solid and fast and all in all the best one so far is, IMHO, epiphany which has a couple of decent plugins (adlocker without which I could not live), but still is fast and displays stuff well.
• vineyardsaker says:

  August 9, 2007 at 10:30 am

  thanks for the swiftfox reccommendation. I am testing it right now and it looks good to me
• Ozymandias says:

  August 9, 2007 at 11:18 am

  I would recommend using the Flashblock and Adblock Plus extensions with Swifty. It makes the web much quicker.

© 2007 Stress.