Home

CSS3 - The new Frontier

May 13, 2004 - 23:00 — DanteCubed

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.

Comments

May 17, 2004 - 17:10 — DanteCubed

Error

Several members of the www-style mailing list pointed out an error that Safari 1.2 supported :selection not ::selection (as ::selection is a pseudo element) and the Safari accepting the single colon syntax was a bug.
May 18, 2004 - 07:33 — Xanadu

Good article

A good article Dante! A shame you felt A List Apart wouldn't have liked it - this is miles better than some recent pieces on there I could mention. A little short, but I have yet to check out your links. I rated this "4".
May 19, 2004 - 16:55 — DanteCubed

Longer one coming soon

I know it's short. My research has just begun, I just wrote this as a brief summary after about 1 and a half months of research. I'll be gone in Ireland all summer, but when I come back I'll write a longer article that's more detailed.
June 27, 2004 - 00:52 — Toman

Media queries

I thought I should add that Opera 7.5 has support for some CSS3 media queries as well. eg. 
@media projection and (min-width:600px){
body {
font-size:8pt;
}
}
@media projection and (min-width:800px) {
body {
font-size:12pt;
}
This code is only applicable to Opera in its OperaShow modus, but kinda interesting nevertheless.
June 27, 2004 - 11:42 — Xanadu

Media queries

Media queries also work in other modes beside projection. See a demo here:

http://www.literarymoose.info/=/synopsis/stretch.xhtml

June 27, 2004 - 17:24 — UnitedScripters

Looks like a prologue without the play

I can't understand from this article what CSS3 could do, except the desultory hint at opacity and selectors. It is also not clear what type of support CSS3 actually has, if any, though a significant part of the article hinges on this issue; and even the mention to CSS2 support doesn't show in a substantial way what such support is.
A suggestion could be to do more digging and providing the readers for instance with a link to a complete diagram of CSS2 supports and maybe also to some documentation where all the CSS3 new properties are listed.
The article seems inconclusive, that is. Can be read and is pleasant, it raises the expectation you're going to know something, but when it ends, it does so giving to you it has done it all of a sudden; you are left with a disappointment sort of "already ended? I didn't expect, looked like a premise".
Anyway, well written, I mean the style is fashionable, interesting. A more solid research work on the topic would have enhanced the whole. If I would have not found it interesting and I would not sensed there was a promise of quality, I would have not bothered posting a relatively "negative" comment.
ciao
Alberto
June 27, 2004 - 17:35 — UnitedScripters

Yet there is the play too

Mmmh I am sorry I noticed now there are indeed links to comparative tables. I think then that the issue is mainly, along with my scarce attention, the coloros here at evolt: believe me I didn't notice at first there were links, they just seemed flowing speech with underlining used as a way to add stress. We probably have a mere usability "issue" (along as I said my n ot too keen attention arguably) whose price got paid by the author. It's rare that I make such gross an error. Really, the links do not appear immediately as links, perhaps because the speech is so flowing that a brighter colour would be needed: differences tend to be skipped when the lead is taken by a stronger stream, like readability.
As already said the article is extremely readable and the style is good. But that risks making a black coloured underlined string appear just like an emphasis among analogously black text.
Very well done then. I stabd corrected and revise my opinion.
ciao
Alberto
July 9, 2004 - 19:53 — magazine

Previously

Hi,

Previously, I too felt that the article wasn't worth a good rating. But if you consider the Governing Dynamics indicated in the article by means of CSS3 is highly appreciatable. [Nice Work !!!].

Thank You.
Magazine.

Editor's note: Please do not try to hide links in punctuation. It does not serve your search engine ranking and it's not respectful for the site you post on. Thank you.

August 17, 2004 - 17:11 — DanteCubed

Not my fault :)

The fact that United missed the links is not my fault, but Evolt's for having the links the same colour as the surrounding text. Bad design/usability desicion, imho.