CSS3

Keith Clark, an independent web developer from the UK, has developed a JavaScript solution to IE’s CSS3 shortcomings in relation to CSS3 selectors. CSS3 selectors became the first W3C module to reach proposed recommendation status back in December 2009.

His ie-css3.js project (currently in beta) allows Internet Explorer, versions 5 through 8, to identify CSS3 pseudo-class selectors and render any style rules defined with them. All this is achieved by simply including the script, along with Robert Nyman’s DomAssistant, within the head element of your web pages.

Following on from the W3C TPAC 2009, held back in November, CSS3 Selectors was officially advanced to Proposed Recommendation by the W3C Director earlier this week.

The annual W3C Technical Plenary / Advisory Committee (TPAC) meetings week took place last month bringing together the CSS Working Group, amongst others, for a series of face to face meetings in Santa Clara, California. Minutes from the meeting have now been made available online and promise progress for a number of CSS3 modules including CSS3 Selectors, Multicolumn Layout, Transitions, Transforms and Animations.

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!

One of the interesting things about Acid 3 is that it tests parts of the CSS3 Colour and CSS3 Selectors modules, that are a part of the 2007 CSS snapshot. Now that both Opera and WebKit pass the standards part of the Acid 3 test, the support for the snapshot has now also improved. The CSS 2007 snapshot is the state of play in CSS at the end of 2007.

WebKit used to lack support for many CSS3 selectors, but now passes the CSS3 Selectors test on this site, and supports all of these selectors. Opera already supported these, but didn’t support HSLA, RGBA and the CSS3 values for transparent. These were added to pass Acid 3 in a post Kestrel build (which may or may not be back ported). Due to these improvements, support in these two browsers for the CSS 2007 snapshot looks healthy.

Ignoring CSS2.1 for now (which Opera has very good support for), both browsers fully support the Selectors Level 3 spec and the CSS Namespaces spec. For CSS3 Colour, the support isn’t quite as clear cut. Everything is supported in Opera, except the flavor keyword and the various related colour profile properties. These properties are at risk of being dropped by the spec however. WebKit has the same support except it doesn’t support currentColor yet, and has some bugs with allowing mixed values in RGB and RGBA. Firefox has had similar CSS3 Colour support to Opera for a while now

Away from the 2007 snapshot, ACID3 also tests Media Queries. These were already supported in Opera and WebKit, but are not yet supported in Gecko or the IE engine. Web Fonts (@font-face) are in the test and were already supported by WebKit, while Opera was developing support, but speeded up development to pass the test. Finally cursor from CSS3 Basic User Interface was added by Opera to pass Acid 3. I’m unsure if this was already supported by WebKit or not.

Although CSS3 UI is not part of the CSS 2007 snapshot, the spec is close to being complete–apart from lacking an editor or a test suite–and support in one or more browsers exists for many of the properties. The features supported by one or more browsers now includes box-sizing (Opera, Safari, Firefox and IE8), resize (Safari), outline-offset (Opera, Safari and Firefox), nav-up, nav-down, nav-right and nav-left (Opera) and cursor (Opera, Safari and Firefox).

For those of you that haven’t seen, Dev Opera has just published a two part article series on styling form controls, by Christopher Schmitt. The first part covers using attribute selectors (which work in IE7, Opera, Safari and Firefox) to slim down your markup by providing a way to identify certain form controls without the addition of a class value. An example of this is using input[type="text"] in the CSS, rather than adding class="text" to the HTML file. The second part takes this further, by taking advantage of the :enabled, :disabled and :checked pseudo-classes, and a dash of opacity. The browser support for these pseudo-classes are not as strong however. According to Christopher, Opera is the only browser that supports all three correctly.

If you are not aware of Dev Opera (known lovingly as Devo internally at Opera), it is Opera’s new developer site. Look out for a fantastic article on CSS3 from CSS3.info’s very own Peter Gasston in the near future.