My Opera is closing 1st of March

Slightly ajar

Upcoming CSS3 support in Opera

, ,

CSS3 development work is going full steam ahead for most browsers. At Opera this is no exception. Most people don't have the privilege of testing out our latest internal builds, which will go into a future release of our browser, so I thought I'd share with you some of the great work our developers have been up to in regards to CSS3.

A lot of work is going into selectors, and there is a quite extensive list of extra support added to those already implemented in Opera 9.1. New in the latest builds include:

  • :root
  • :not()
  • :nth-child()
  • :nth-of-type()
  • :first-of-type
  • :target (still buggy at present)

As well as those above, the following are implemented in our core engine, but not currently enabled due to various issues:

  • :empty
  • :nth-last-child
  • :nth-last-of-type
  • :last-child
  • :last-of-type
  • :only-child
  • :only-of-type

It is planned that these will be enabled by the time the other selectors are included in a release version of Opera. Having all these selectors supported will allow designers to be able to have much more control over their designs without adding extra class attributes to the HTML or using JavaScript to allow certain effects.

One example is :nth-child. With this it is possible to add alternating style using :nth-child(odd) and nth-child(even). This can be useful on data tables, so that each row has an alternating background colour, making it easier to scan through the information. A lot of blogs use a similar approach (currently using extra mark-up) to make alternating rows of comments styled differently. Using different values in the parentheses allows endless options to be used. nth-child(4) will match the 4th child of the element it is applied to, while something more complex like nth-child(4n) will match every 4th child (such as a row in a table), and nth-child(4n+6) will do the same, but has an offset of 6, which means it wont be applied until the 6th child has been reached.

Another example is :first-of-type. This could be used to slim down the CSS code that is used on this blog. Instead of using all sorts of selectors to apply the drops cap to the first paragraph in a post, using p:first-of-type would enable the first p element to be matched in a blog post, then first-letter could be chained to this, such as p:first-of-type:first-letter. It wouldn't matter if a Div element was before the first paragraph, it would ignore everything until it reaches the first p tag.

With all these changes, where does this leave selector support in Opera once the new additions get released in an official build? Well apart from bugs in any of the implementations, all the selectors will be supported, and the only thing currently lacking is support for the ::selection pseudo-element. Of course there is still a lot of work to do on the other CSS3 goodies that aren't currently supported.

For a much more comprehensive look at CSS3 selectors, take a look at Roger Johansson's excellent article on the subject. Away from selectors, I can also confirm that text-shadow has been implemented in internal builds. As the name suggests, this allows shadows to be applied to text, allowing some nice effects.

Multi column layout using CSSWeb chat with yours truly


Alexis DeveriaFyrd Monday, January 22, 2007 3:23:56 PM

Wow, excellent news! Can't wait to see some of this in action.

I take it "New in the latest builds" does not actually refer to the weekly builds that are publicly available?

David Storeydstorey Monday, January 22, 2007 3:34:59 PM

No, The weekly builds are on the Merlin branch of our code. These are developed on the code branch code named Peregrine. This is where most of the new development takes place.

Alexis DeveriaFyrd Monday, January 22, 2007 3:44:47 PM

Aah, very interesting. So I guess we (the web developing public) will have to start looking forward to upcoming 9.5 or 10 alphas. smile

Kostia RomanovKildor Monday, January 22, 2007 3:54:38 PM

Excellent news ;-)
And, what`s about border-radius?

Mihai Sucanrobodesign Monday, January 22, 2007 4:08:18 PM

Great guys! Keep up the good work!
+1 smile

Unregistered user Monday, January 22, 2007 4:23:18 PM

Peter Gasston writes: Great news! I look forward to getting my hands on a build. BTW, did you know your RSS feed is behaving strangely? It's fine when I use Opera, but not on Firefox; when I click on the link in the address bar to subscribe, the name of the feed comes up as this: Slightly ajar And all the latest post is from Aug 26, 2006. Is this done on purpose so non-Opera users don't get the latest content?!

Unregistered user Monday, January 22, 2007 4:24:18 PM

Peter Gasston writes: Sorry; the name of the feed comes up like this: <div xmlns="" lang="en" dir="ltr">Slightly ajar

Joost de Valkjdevalk Monday, January 22, 2007 4:28:18 PM

Great news David, looking forward to seeing those build!!

David Storeydstorey Monday, January 22, 2007 4:48:32 PM

Peter: No, the feed issue isn't done on purpose, and I wasn't aware of it. I'll report it to our web guys to see what the issue is.

David Storeydstorey Monday, January 22, 2007 5:09:40 PM

Joost: I've downloaded the latest (as of today) builds of both Firefox (version 3.0a2pre) and WebKit (Revision 19024), and used your selector test. The results are as follows:


From the 43 selectors 34 have passed, 2 are buggy and 7 are unsupported (Passed 460 out of 578 tests)


From the 43 selectors 32 have passed, 4 are buggy and 7 are unsupported (Passed 369 out of 578 tests)


From the 43 selectors 25 have passed, 9 are buggy and 9 are unsupported (Passed 355 out of 578 tests)

IE7 (this is a bit unfair as I don't have access to the latest builds):

From the 43 selectors 13 have passed, 4 are buggy and 26 are unsupported (Passed 355 out of 578 tests)

The seven that fail in Opera are the ones that are implemented but not enabled. For Firefox and Safari, I'm not aware if there are any later builds that fix further issues or if they have features disabled like we do. IE7 is obviously behind here, but we all had a head start on them so I don't expect comprehensive CSS selectors support until later versions.

For those that are interested I've made a screen shots of how the test is shown in Opera (the poor rendering is because of the JPEG compression, not how Opera displays the page). First half of the page, and below the fold.

Lars AnderssonDaedalus Monday, January 22, 2007 5:11:02 PM

Yay for :nth-child, just what I wanted bigsmile

The other stuff is very nice too, of course. Can't wait to see Peregrine.

Unregistered user Monday, January 22, 2007 6:58:17 PM

Anonymous writes: This is great, but like Kildor, I'm wondering about border-radius... I've heard a few websites talking about -o-broder-radius, and -opera-border-radius, but from what I understood, it is not supported anymore...? Round corners really are nice, and there is no simple alternative, which works for all designs... I don't care much about having IE users seeing square corners, so it would be great if Opera supported it, just like Gecko supports it from quite some time now... (and while it is a recent addition, and still not present in the latest release of Konqueror -it's in Safari, though-, KHTML supports it too). Keep up the good job!

Robert Błautquiris Monday, January 22, 2007 7:05:00 PM

(the poor rendering is because of the JPEG compression, not how Opera displays the page)

Try PNG format for it. Much better results.

BTW. It's a really great news smile

Unregistered user Monday, January 22, 2007 7:27:05 PM

pauldwaite writes: Great stuff. I have wondered whether XPath could be brought in wholesale to replace the current selector syntax in CSS, rather than extending the current syntax. I guess the CSS syntax is a bit nicer than XPath.

Steve DarkenDarken Monday, January 22, 2007 7:34:12 PM

Wow, great news! up

Yahia Monday, January 22, 2007 7:44:14 PM

Excellent! These are giant steps towards standard and pure CSS web design!!

Unregistered user Monday, January 22, 2007 10:30:21 PM

Seamus writes: nth-child(4+6) Is that suppose to be, "nth-child(4n+6)" ?

David Storeydstorey Monday, January 22, 2007 11:21:30 PM

Seamus: Yes, it was a typo when I was editing the post. It has been corrected now.

Rijk Monday, January 22, 2007 11:27:52 PM

For completeness, here are the 'supported' numbers for the Opera 9.1x releases that are currently available:

From the 43 selectors 25 have passed, 3 are buggy and 15 are unsupported (Passed 346 out of 578 tests)

Rafał MiłeckiZajec Tuesday, January 23, 2007 6:59:20 AM

Great news, it is quite everything I asked for on wish-list =) Thank you!

Unregistered user Tuesday, January 23, 2007 2:29:46 PM

johnoyler writes: Impressive. I'd be curious to know whether box-shadow has also made the cut or not...

David Storeydstorey Tuesday, January 23, 2007 2:55:29 PM

box-shadow is not supported yet, but as these are fairly early development builds, there will be a while before the finally supported features will be set in stone.

As these features are included in our browser core, any extra standards support will also eventually end up in a number of our other products, not just Opera Desktop.

Kostia RomanovKildor Tuesday, January 23, 2007 5:53:42 PM

BTW, how about old CSS1 (sic) bug, with rounding of fractional percent numbers?
(where width:50.9% equal width: 50%)

_Grey_ Tuesday, January 23, 2007 7:29:06 PM

Wonderful! More than I ever expected.

Even the (imho important) :not() and the (imho not too useful) :target selectors are in! That's absolutely great!

Also, I seen you have fixed bugs with the already implemented selectors, which is even more fantastic. Kildor is refering to this bug as far as I can tell.

One question though: Is full CSS2.1 implementation a goal for Peregrine? Including bug-smashing etc. ?

Kostia RomanovKildor Wednesday, January 24, 2007 5:13:52 AM

_Grey_, no, I tell about other bug, easy to repeating
width: 509px;
width: 50.9%;
First div (width:509px) must be equal with second (width: 50.9%wink
This bug only affect width, not margin, i/e/
show correct behaviour.

Unregistered user Wednesday, January 24, 2007 10:35:12 AM

Anonymous writes: I did the CSS3 selector test in Konqueror, it reported that... From the 43 selectors 37 have passed, 6 are buggy and 0 are unsupported (Passed 570 out of 578 tests)

David Storeydstorey Wednesday, January 24, 2007 12:54:39 PM

Kildor : That renders the same for me in opera 9.10, our internal build, Firefox and Safari.

Anonymous: I don't run Linux so couldn't test KHTML/Konqueror, but I know they've been doing some great work on selectors too. There results are probably around where ours are when the rest are enabled in the code. I heard the KHTML team is thinking of moving over to WebKit, so I wonder if they'll be able to merge these changes upstream or if the difference between WebKit and KHTML has grown too big to make the changes easy.

Kostia RomanovKildor Wednesday, January 24, 2007 1:33:50 PM

dstorey, there are something strange with my code. — in russian. — is right code — my screenshot (O9/12 and IE6)

FataL Wednesday, January 24, 2007 5:55:36 PM

Kildor, I think that's famous Opera long standing rounding error.
That's why Opera still doesn't pass (in other words doesn't render correctly) ACID 1 test.

Unregistered user Wednesday, January 24, 2007 10:37:06 PM

arzafen writes: Konqueror 3.5.5 fully pasts this css3 test. From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)ç It is cool.

FataL Wednesday, January 24, 2007 11:12:51 PM

Konqueror's progress is cool indeed.
I wish next Opera supports all this without bugs too. Also I would like that current Opera 9 has fixed 3 buggy selectors: E[attribute=value], :first-child, :lang().

Unregistered user Wednesday, January 24, 2007 11:16:28 PM

Anonymous writes: I'm happy with just the math operators for width:100px+10px; because it makes dynamic generation work well with static css. Fractional percentage rounding is also quite an issue.

João EirasxErath Tuesday, February 6, 2007 11:03:54 PM

David, does Opera supports the :contains selector ?!?
Why can't I find info about this one at w3c ?

_Grey_ Wednesday, February 7, 2007 12:10:01 AM

@xErath: An older version of the selectors module features the pseudo-class. And I think this mailing list post could give a clue as to the "why" (although it seems Bjoern suffers from Schizophrenia on this one)...

What we really want is a "<" combinator or ":parent" (":hasDescendants()") pseudo-class, which would allow us to select parent elements that contain certain child elements. At the moment, that is imho the biggest limitation of CSS.

E.g. to select a <p> with both <del> and <ins> somewhere in the descendant chain...

p:parent(del):parent(ins) { color: green; }

I even would suggest to make things like that possible (<p> that have direct children <del> and <ins>):

p:parent(> del):parent(> ins) { color: green; }

johnoyler Friday, February 9, 2007 3:28:07 PM

A parent selector has been talked about before, and all the old arguments against it still apply. Basically it breaks incremental rendering or some such.

More to the point, it shows (in most cases) that you just haven't designed the markup and style all that well, anything that you think requires a parent selector can usually be turned around to only require descendant or sibling selectors.

_Grey_ Friday, February 9, 2007 8:14:51 PM

Originally posted by johnoyler:

Basically it breaks incremental rendering [...]

I have to admit, that's a valid point. Probably the experience wouldn't be all too good if you were to heavily rely on ":parent()" selectors...

I do not think, though, that I like the idea of adding classes server-side in order to achieve the same effect too much...

Unregistered user Sunday, February 11, 2007 6:41:41 PM

Anonymous writes: I'm not sure this would 'break' incremental rendering. It could only cause the rendering to change due to new content coming in on a slow connection. But that's already how Opera works, and to a lesser extent every browser exhibits this behaviour when rendering some css or table structures. It's an inherent consequence of the design choice to use a parent selector and not necessarily detrimental, nor would it be a bug. BTW, wouldn't the 'only-child' and 'only-of-type' break incremental rendering in the same way? I mean: if your page loads slowly, it may well be that a div first contains only one paragraph, a second later it contains two. How does Opera 10 solve this with these selectors?

João EirasxErath Saturday, February 17, 2007 9:07:47 AM

parent and previous sibling selectors where reject due to the incremental rendering thing, but the anonymous poster above made a good point with only-child and so forth.

However, some people suggested the :matches() selector, which is evaluated in a context element, and matches the complex selector it has, although it does not navigate to it. So the p ins del problem would be done like this
and this one cover all use cases and much more smile

amphi Tuesday, April 17, 2007 9:01:54 PM

:nth-child() and :target are really neat imo.

:target is already used on a few sites. Over at Wikipedia for example. It's one of the few things that really make it (noticeably) nicer for the user. Well, if it's supported.

:nth-child() appears to be great for data tables. Even with compact markup (a single letter class for 1 out of 5 columns) you can easily gain a ~7% markup reduction. It's surely possible that it could even peel over 25% off in extreme cases. (Yea, I know... it's just a nice side effect. wink)

I'm really looking forward using that stuff.

deborahwebb Tuesday, February 12, 2008 11:58:28 AM

That's really some great news to hear. I can't wait to see it finally released and to try and test it in real action. Thanks for the interesting article, it sure did come in handy.

annmacgiff Tuesday, February 12, 2008 12:57:19 PM

The new CSS3 is definitelly something I'm looking forward to. Thanks for giving us a small insight into what is waiting for web designers in near future. I'd really like to be able to see what CSS3 is able to do.

TinRam Monday, September 27, 2010 9:45:55 AM

All good things. Any ideas roughy when the public can expect an update?

I'm also very interested in when you plan to have 'column-rule' under way, which direction will you take with gradients, the web-kit way or the mozilla way? Mozilla actually offers slightly more control but either would be good.

Will you be doing transitions anytime soon?

Why are your UTF-8 characters different from the others?

Write a comment

New comments have been disabled for this post.