Slightly ajar

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 4^th child of the element it is applied to, while something more complex like nth-child(4n) will match every 4^th 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 6^th 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.