Upcoming CSS3 support in Opera
Monday, January 22, 2007 1:44:15 PM
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.
Comments
Alexis DeveriaFyrd # Monday, January 22, 2007 3:23:56 PM
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
Alexis DeveriaFyrd # Monday, January 22, 2007 3:44:47 PM
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
+1
Unregistered user # Monday, January 22, 2007 4:23:18 PM
Unregistered user # Monday, January 22, 2007 4:24:18 PM
Joost de Valkjdevalk # Monday, January 22, 2007 4:28:18 PM
David Storeydstorey # Monday, January 22, 2007 4:48:32 PM
David Storeydstorey # Monday, January 22, 2007 5:09:40 PM
Opera:
Firefox:
Safari:
IE7 (this is a bit unfair as I don't have access to the latest builds):
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
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
Robert Błautquiris # Monday, January 22, 2007 7:05:00 PM
Try PNG format for it. Much better results.
BTW. It's a really great news
Unregistered user # Monday, January 22, 2007 7:27:05 PM
Steve DarkenDarken # Monday, January 22, 2007 7:34:12 PM
Yahia # Monday, January 22, 2007 7:44:14 PM
Unregistered user # Monday, January 22, 2007 10:30:21 PM
David Storeydstorey # Monday, January 22, 2007 11:21:30 PM
Rijk # Monday, January 22, 2007 11:27:52 PM
Rafał MiłeckiZajec # Tuesday, January 23, 2007 6:59:20 AM
Unregistered user # Tuesday, January 23, 2007 2:29:46 PM
David Storeydstorey # Tuesday, January 23, 2007 2:55:29 PM
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
(where width:50.9% equal width: 50%)
_Grey_ # Tuesday, January 23, 2007 7:29:06 PM
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
Unregistered user # Wednesday, January 24, 2007 10:35:12 AM
David Storeydstorey # Wednesday, January 24, 2007 12:54:39 PM
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
http://xhtml.ru/experiment/browser_day/ — in russian.
http://kildor.gorodok.net/Opera/divbug.htm — is right code
http://kildor.gorodok.net/Opera/ieVSopera.png — my screenshot (O9/12 and IE6)
FataL # Wednesday, January 24, 2007 5:55:36 PM
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
FataL # Wednesday, January 24, 2007 11:12:51 PM
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
João EirasxErath # Tuesday, February 6, 2007 11:03:54 PM
Why can't I find info about this one at w3c ?
_Grey_ # Wednesday, February 7, 2007 12:10:01 AM
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
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:
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
João EirasxErath # Saturday, February 17, 2007 9:07:47 AM
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
p:matches(ins,del)
and this one cover all use cases and much more
amphi # Tuesday, April 17, 2007 9:01:54 PM
: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. )
I'm really looking forward using that stuff.
deborahwebb # Tuesday, February 12, 2008 11:58:28 AM
annmacgiff # Tuesday, February 12, 2008 12:57:19 PM
TinRam # Monday, September 27, 2010 9:45:55 AM
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?