CSS Selector Test: One year later…

It’s been a year since my last update about the CSS selector test. A lot has happened during that year. Browser vendors have released new versions and we’re finally getting close to having proper selector support in all but one browser.

In the last update there were two vendors that passed the test using beta versions or development builds. It’s now one year later and both vendors have released updated versions to the public that pass the test. Safari 3.2 and Opera 9.5 pass the test. That means that CSS selectors are finally becoming useful for real users, and not only people brave enough to run beta versions.

We also saw Google enter the browser arena with Chrome. The rendering engine that Google chose for Chrome is the same as Safari: Webkit. Given that Safari passes the test, it’s not a surprise that Chrome also passes the selector test without any problems.

During the last year we’ve also seen the final release of Firefox 3.0, which did fix some bugs in their selector support. It came close, but did not pass the test. The good news is that the upcoming Firefox 3.5 will pass the test. In fact the current beta, which is still named Firefox 3.1 beta 3, already passes the test.

It’s not easy to guess who is lacking behind. Microsoft has always been a poor performer in this test and continues to be the black sheep. Even though I am disappointed that Microsoft still does not support the selectors that are part of the CSS3 Selector specification, I am glad that they kept their promise to fully support the CSS 2.1 standard, including all selectors defined in that standard.

Compared to the first beta of Internet Explorer 8, Microsoft fixed the missing :first-child and :first-letter selectors. This means that all CSS 2.1 selectors are present. Unfortunately they also introduced a new bug in the E[attribute] selector. So even if we ignore all of the missing CSS 3 selectors, Microsoft still does not pass the test.

The E[attribute] selector checks if a specific attribute is present in a tag. For example if you want to select all images with an align attribute you would use something like this:

img[align] {
	...
}

This will match the first image below, but not the second, because that one does not have an align attribute.

<img align='left' src='…' alt='' />

<img src='…' alt='' />

Unfortunately IE 8 does not check the whole name of the attribute. It also matches attributes that merely contain the string of the selector. This means that the following image will also match the selector above.

<img valign='top' src='…' alt='' />

Fortunately all of the other attribute selectors do not exhibit the same problem.

When running in Compatibility mode, IE 8 performs exactly the same as IE 7. That also means that the bug discussed above is not present.