CSS3

Dave Hyatt informs us that the latest Webkit nightlies now support an experimental implementation of CSS Variables.

The news comes only days after Daniel announced on his blog that he and Dave were in the process of finalizing a new version of the spec based on both feedback from readers and the Webkit implementation.

Nightlies can be downloaded from here and they’ve also provided a fair few test cases.

NOTE: Since mid-September, the Webkit implementation was discontinued for the time being.

Firefox 3 isn’t quite out yet, but already there are some exciting plans for CSS implementation in future versions.

FF3.1 should see all the selectors (test them here), @media queries, text-shadow, font-stretch, and downloadable web fonts with @font-face; FF4 should add calc() and attr() values, along with the Animation and Transitions modules proposed by the Webkit team.

You can see a list of other planned implementations on the Mozilla Wiki.

Opera have released version 9.5 of their browser today, and the good news for our readers (and web users in general) is that there are lots of CSS 3 features implemented. This article on dev.opera.com goes into more detail, but major improvements include:

• @media queries
• text-shadow
• -o-background-size
• opacity
• hsl colours
• overflow-x & overflow-y
• all css selectors
• form pseudo-classes

Download a copy today and take a look at some of the examples on our Preview pages. I’ve just noticed that the background-size example doesn’t work, but that seems to be our implementation at fault, not theirs.

I’ve just put a pre-Alpha build of Firefox 3.1 through its paces, and can confirm (following David Baron’s announcement) that it gets a score of 578/578 in our CSS3 Selectors Test, which means not only support for the new selectors, but some bugs fixed in existing ones. To put that score in perspective, Firefox 3 scores only 357/578.

There is an almost perfect score on Daniel Glazman’s Selectors Test too, with only one discrepancy showing up.

So Safari, Opera and now Firefox all pass the test; of the major browsers, that only leaves one Inevitable Exception…

Those brave enough to try pre-Alpha can download builds from Mozilla’s FTP server. The usual warnings and disclaimers apply!

News about developments in CSS 3 is hard to come by at the moment, so please forgive the slow rate of updates on the site in the last month. I attended the @media conference here in London last week and news on progress in CSS was noticeable by its absence, when even HTML 5 had its own session.

I see that Bert Bos has delivered a couple of presentations on the Template (formerly ‘Advanced’) Layout Module, but I can’t find slides of them anywhere. If anyone attended the talks and can send us copies, do please get in touch.

Other than that, the only news is that the CSS WG have released their list of expected module deliverables; the modules listed in the 2007 snapshot along with Media Queries look set to be Recommendations shortly, with many others to take on Candidate Recommendation status.

And that’s it. Sorry there isn’t more, or that it isn’t more exciting. I’m aiming to put together a load of new examples soon, so that should be more interesting!

Update: As mentioned in a comment below, no sooner do I say there’s not much going on than David Baron announces that the remaining CSS3 selectors have been implemented in a build of Mozilla (which will probably be seen in Firefox 3.1), and Media Queries are set to follow. That’s good news.

Over at Design Shack they’re four posts into the five-post Introduction to CSS3, which covers Borders, Text Effects, the User Interface and (coming soon) Multiple Columns. A nice intro to the subject if our own examples are too complicated for you :p

The new owners of the Fonts and Web Fonts modules, Jason Cranford Teague and John Daggett, say that only about 20% of the Web Fonts module is required for CSS (it is currently part of the SVG charter), and propose simplifying it before merging with the Fonts module. They hope to have a working draft of the new spec in August.

Shaun Inman did a very interesting post yesterday on what he describes as “CSS Qualified Selectors”. The idea is nice, he wants to be able to do:

a {
    text-decoration: none;
    color: #A10;
    border-bottom: 1px dashed #A10;
}

And then for images:

a < img { border: none; }

So if <img> has a parent <a>, the border isn’t there.

What’s most interesting about the post though is the comments. It seems, as Eric Meyer states there, that this kind of selector has been discussed quite a few times on the CSS mailing list, and isn’t doable. Dave Hyatt, one of the core WebKit developers, comments with a good explanation of why it can’t be done. It’s a nice read, and a good insight into the difficulties of developing a new standard.

Jason Cranford Teague has volunteered to edit the CSS Basic UI, CSS Hyperlink Presentation, CSS Fonts and CSS Web Fonts modules and is looking for feedback from users on the latter two. He asks:

Tell me what you think are some of the font styles and features missing from the current specification. What do you expect to be able to do with typography on your Web pages that you can not do now? What are you doing now with kludges that you would like to see simpler ways of doing?

Leave a comment on his blog if you have any ideas; and why not leave a comment here, too, to let us know what your opinions are? No deadline has been given, but I suppose it’s the sooner, the better.

Opera has one of the better levels of support for CSS3 (and other standards), making it an ideal platform for experimenting with future technologies and new techniques that these standards will offer. However, this has always been let down by the fact that Opera is very lacking in the web developer tools segment. To be frank, Firebug and the Web Developer Toolbar blow away anything Opera has offered in this realm.

This short coming is about to change soon. Opera has just announced today, with the release of Opera 95 beta 2, that Opera Dragonfly will be Opera’s web developer tools. These will be released as an alpha on the 6^th of May. In line with their alpha status, the tools will not be feature complete, but they will show a good foundation of Opera’s developer tool vision.

Once released, Opera is looking for feedback on the tools, to make sure they fit the needs of real world web developers and designers. I’m looking forward to web developers getting their hands on the Opera Dragonfly and finding out what the impressions are. If you are interested then go the the Opera Dragonfly website on the 6^th or just open the Web Developer menu item from the tools menu. In the mean time, Opera 9.5 beta 2 (Kestrel) has been released today, so it is a good time to check out what CSS3 properties it supports.

I don’t have time at the moment to write a good summary, but the link to the announcement is below which includes some examples

CSS Gradients in Webkit