Upcoming CSS3 support in Opera
Monday, 22. January 2007, 13:44:15
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.
WIDGETIZE
Fyrd # 22. January 2007, 15:23
I take it "New in the latest builds" does not actually refer to the weekly builds that are publicly available?
dstorey # 22. January 2007, 15:34
Fyrd # 22. January 2007, 15:44
Kildor # 22. January 2007, 15:54
Excellent news ;-)
And, what`s about border-radius?
robodesign # 22. January 2007, 16:08
+1
Anonymous # 22. January 2007, 16:23
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?!
Anonymous # 22. January 2007, 16:24
Sorry; the name of the feed comes up like this:
Slightly ajar
jdevalk # 22. January 2007, 16:28
dstorey # 22. January 2007, 16:48
dstorey # 22. January 2007, 17:09
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.
Daedalus # 22. January 2007, 17:11
The other stuff is very nice too, of course. Can't wait to see Peregrine.
Anonymous # 22. January 2007, 18:58
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!
quiris # 22. January 2007, 19:05
Try PNG format for it. Much better results.
BTW. It's a really great news
Anonymous # 22. January 2007, 19:27
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.
Darken # 22. January 2007, 19:34
Yahia # 22. January 2007, 19:44
Anonymous # 22. January 2007, 22:30
nth-child(4+6)
Is that suppose to be, "nth-child(4n+6)" ?
dstorey # 22. January 2007, 23:21
Rijk # 22. January 2007, 23:27
Zajec # 23. January 2007, 06:59
Anonymous # 23. January 2007, 14:29
Impressive. I'd be curious to know whether box-shadow has also made the cut or not...
dstorey # 23. January 2007, 14:55
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.
Kildor # 23. January 2007, 17:53
(where width:50.9% equal width: 50%)
_Grey_ # 23. January 2007, 19:29
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. ?
Kildor # 24. January 2007, 05:13
width:1000px
First div (width:509px) must be equal with second (width: 50.9%
This bug only affect width, not margin, i/e/
show correct behaviour.
Anonymous # 24. January 2007, 10:35
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)
dstorey # 24. January 2007, 12:54
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.
Kildor # 24. January 2007, 13:33
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 # 24. January 2007, 17:55
That's why Opera still doesn't pass (in other words doesn't render correctly) ACID 1 test.
Anonymous # 24. January 2007, 22:37
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 # 24. January 2007, 23:12
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().
Anonymous # 24. January 2007, 23:16
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.
xErath # 6. February 2007, 23:03
Why can't I find info about this one at w3c ?
_Grey_ # 7. February 2007, 00:10
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 # 9. February 2007, 15:28
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_ # 9. February 2007, 20:14
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...
Anonymous # 11. February 2007, 18:41
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?
xErath # 17. February 2007, 09:07
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 # 17. April 2007, 21:01
: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.
Profesjonalna # 20. January 2008, 01:39
deborahwebb # 12. February 2008, 11:58
annmacgiff # 12. February 2008, 12:57