Css3 The New Frontier

Imagine this: overnight, the W3C makes CSS3 a standard, and the browsers end their differences (IE included) and support everything in CSS3. How will this affect you? What magical things that CSS3 offers will bring your webpages to life?

For instance, CSS3 gives us cross–browser opacity, standardized Image Replacement (via display: icon), and automatic box and text shadows, not to mention being able to control the resizing of a window through CSS. And there’s a lot more where that came from.

But then you wake up and realize that complete cross–browser support for CSS3 was still at the very least 4 years away. But all hope is not lost — there are some bits of CSS3 already supported (and some supported by more than one browser).

Current Support

I have done some research and set up a CSS3 Tests Site (which includes a compatibility table). I have been very strict in making only CSS3 Tests, since I feel if I cross over to CSS2 I’ll get distracted. The only CSS2 property I have tested is caption-side (Test page). I really would love to test more CSS2 things, but I simply don’t have the time. If you want CSS2 (with some CSS1 and CSS3) tests visit Peter–Paul Koch’s wonderful CSS2 Tests. I test in IE 6, Opera 7.50, Mozilla Firefox 0.8, Mozilla 1.7 RC 1 and Safari 1.2. The latter has amazing CSS3 support. So what are the most widely supported bits of CSS3?

• New Attribute Selectors (^, $, *) — Supported by Mozilla and Safari
• Opacity — Supported by Mozilla 1.7 RC 1 and Safari 1.2
• box-sizing — Supported by Opera 7 and IE 5 Mac
• :not — Supported by Mozilla and Safari

Proprietary Support

Safari 1.2 is the only browser to support the :selection pseudo–class and text-shadow. Adequate CSS3 support seems to be a major priority for the Safari Development team. Mozilla 1.7 RC 1 is the only browser to support the new ~ selector (first supported by 1.7 beta)*.

When can I use this?

This is the bad part. IE 6 (which is roughly 90% of the browser market) supports none of CSS3, and Opera 7 is suprisingly behind. Sure, Opera 7 supports list-style-type: box and box-sizing, but where’s the support for the new attribute selectors or pseudo-classes? I think the Opera developers are more interested in improving Opera 7’s W3C DOM support. Fair enough. IE7 on the other hand (no, not Dean Edward’s behaviour) is rumored to be released with the new OS around 2005 or 2006.

Just the beginning

Of course, research has only just begun. I still have loads more tests to make, more compatibility notes to take, more tables to create. The major problem is I only have access to Safari 1.2 once a week (also a long story). For Safari 1.2 users, feel free to comment if you know of some other CSS3 property that is supported by your wonderful browser.

Try experimenting with opacity and some other new CSS3 properties. Don’t use them in practice (as only 2% of your users will see the effects), but give them a spin — think of it as a “sneak peek” of great things to come.

*: This selector is not supported by the first few builds of 1.7b. Later builds support it.