rakaz

about standards, webdesign, usability and open source

How well do browsers support CSS Selectors?

Monday, 9 October 2006

The last couple of days have been busy for me. I’ve spend most of my weekend on tweaking and adding test cases for the CSS Selector compatibility tester. The test comprises of 513 different test cases for each of the 43 selectors. These selectors range from the simplest CSS 1 selectors to the latest CSS 3 selectors.

Before I reveal the results I must explain first that if a browser passes a test, it is not a guarantee that the browser is 100% compatible with the specification. There may be edge cases that are not covered by these test cases. I will continue to add more test cases in the future and I will also look into the ability to perform more dynamic tests. In a later version of the CSS Selector test it would also become possible to test if the browser correctly updates the selectors if the DOM is changed by Javascript.

Also I must note that even a single failed test case will result in a failure for a particular selector. This will skew the results a bit. For example: if you look the number of selectors that pass, Firefox may seem close to Konqueror, but in reality Firefox has not implemented 7 selectors at all, while Konqueror has implemented all, but fails 5 selectors because of a single bug.

The results

Browser Version CSS Selectors Testcases
Internet Explorer 6 10 / 43 243 / 513
Internet Explorer 7 13 / 43 271 / 513
Opera 8.5.4 19 / 43 273 / 513
Opera 9.0.2 26 / 43 292 / 513
Safari current 28 / 43 299 / 513
Firefox 1.0.8 32 / 43 308 / 513
Safari nightly 33 / 43 319 / 513
Firefox 1.5.0.7 36 / 43 314 / 513
Konqueror 3.5.4 38 / 43 508 / 513

As you can see there is currently not a single browser that fully supports the tested CSS selectors. Only Konqueror comes close, it only fails the last 5 selectors because of a bug. It should be no surprise that Internet Explorer 6 performs the worst in this test. It even fails one of the most basic CSS 1 selector: the class selector.

Internet Explorer 7, Opera and Safari seem to contain a couple of bugs in their CSS selector implementations. All three could score a lot better if they would solve these bugs. Firefox is the only browser in which I could not detect any bug in their implementations.

An overview of the bugs in the various browsers

Internet Explorer 7

E[attribute] Fails because it does not consider an empty attribute to be a proper match for the attribute existence selector
E[attribute~=value]
E[attribute!=value]		 Fails because it compares the value using a case sensitive comparison algorithm. In a HTML document most attributes values should be treated in a case insensitive way.
E[attribute^=value] Fails because it tries to do an exact match… It should look if the attribute value begins with the string specified in the selector.
E[attribute$=value] Fails because it tries to do an exact match… It should look if the attribute value ends with the string specified in the selector.
E[attribute*=value] Fails because it tries to do an exact match… It should look if the attribute value contains the string specified in the selector.
:first-child Fails because it considers comments as children. So if there is a comment before the first real child, it will not match the right element.

Opera 9

E[attribute=value] Fails because it does not do an exact match. Instead it will check if the attribute value contains the specified string.
E[attribute^=value] Fails because it does not try to match the specified string with the beginning of the attribute value. Instead it will check if the attribute value contains the specified string.
E[attribute$=value] Fails because it does not try to match the specified string with the end of the attribute value. Instead it will check if the attribute value contains the specified string.
:lang() Fails because it only looks at the first characters of the language. The language is either a regular string or two components separated by a dash. In the first case it should do a comparison with the whole string, in the second case it should do a comparison with the whole first component.

Konqueror 3.5.4

E[attribute~=value]
E[attribute!=value]
E[attribute^=value]
E[attribute$=value]
E[attribute*=value]		 Fails because it compares the value using a case sensitive comparison algorithm. In a HTML document most attributes values should be treated in a case insensitive way.

Safari

:last-child Fails because it also matches elements that are not the last child of a parent element. Apparently this selector is evaluated during the composition of the DOM tree. Every element is at one stage the last child of a parent element.
:only-child Fails because it also matches elements that are not the only child of a parent element Apparently this selector is evaluated during the composition of the DOM tree. Every first element is at one stage the only child of a parent element.
:lang() Fails because it does not detect the language property that is inherited from parent elements.

Want to test for yourself?

Well, you can head over to css3.info and test for yourself. Joost de Valk just opened up the test to the public.

16 Responses to “How well do browsers support CSS Selectors?”

  1. anonymous wrote on October 9th, 2006 at 6:23 pm

    Firefox 2.0rc2 (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061003 Firefox/2.0): Passed 36 out of 43 selectors and 314 out of 513 total tests

  2. dtamas wrote on October 10th, 2006 at 6:17 pm

    The result of Firefox 2.0rc2 doesn’t differ from the result of Firefox 1.5.0.7… :(

  3. rakaz wrote on October 10th, 2006 at 11:43 pm

    dtamas: That is correct. Firefox 1.5 and 2.0 both use the essentially the same rendering engine: Gecko 1.8. If you compare it with Firefox 1.0, which used Gecko 1.7 you will notice the step forward that Firefox made. Perhaps when Firefox 3 is released – based on Gecko 1.9 we will see another big change…

  4. Jarillon wrote on October 13th, 2006 at 3:19 pm

    Konqueror is the best! I am not surprised. The KDE team does a very good job.
    Konqueror, Safari and Opera run with success the ACID2 test http://www.webstandards.org/files/acid2/test.html

    Other navigators cannot. Perhaps is it to achieve a compatibility with the awful “Front Page” which was out of the standards and was a threat for the web.

  5. FredB wrote on October 14th, 2006 at 12:06 am

    A 2 hours old homemade trunk build :

    Passed 36 out of 43 selectors and 314 out of 513 total tests

    Jarillon : You forget iCab which is MacOS-X only.

    Safari is KHTML based, so…

    Konqueror the best… Well, let me think different !

  6. www.fairytells.net wrote on October 14th, 2006 at 9:35 am

    IE7, attention c’est pour bientôt!: Oyez! Oyez! Microsoft nous annonce la sortie imminente de IE7 pour la fin du mois et vous invite

  7. Anne van Kesteren wrote on October 16th, 2006 at 11:06 am

    What Konquerer and other browsers do is correct. You should compare case sensitive there. Just the attribute name itself should not be a case sensitive match.

  8. Anne van Kesteren wrote on October 16th, 2006 at 11:11 am

    You can see in the DOM inspector of Firefox for instance that several values are made lowercase. (Like LEFT for align=”" attribute.)

  9. rakaz wrote on October 16th, 2006 at 12:47 pm

    Hi Anne,

    Actually this is not completely true… It is a bit more complicated than the current testcase shows, the next update (later today) will solve that.

    Whether or not an attribute should be compared using a case-sensitive or a case-insensitive method is determined by the HTML specification. Some attributes are marked as case-insensitive, for example: align. Some are marked as case-sensitive, for example: title and id. Some are case-neutral, for example: width. And other are not defined at all, but depend on the value itself, for example: href. To be on the safe side, these should also be compared in a case-sensitive way.

    Basically, the browser needs to have a list of attributes. And based on that list it needs to determine what to do with which attribute.

  10. Thomas wrote on October 17th, 2006 at 9:42 am

    I just did the test with Opera 9.02 (build 8585), and the result was different from yours:

    “From the 43 selectors 25 have passed, 3 are buggy and 15 are unsupported (Passed 346 out of 578 tests)”

  11. Anne van Kesteren wrote on October 17th, 2006 at 10:23 am

    Yeah, I wonder if that’s really what browsers do, but I suppose that’s what HTML4 says. You could be right though, I don’t really recall.

    By the way, the reason Opera fails several attribute matching test is because we store the values known attributes in a special way which happens to be identical to the selector that shouldn’t match…

  12. rakaz wrote on October 17th, 2006 at 10:32 am

    Hi Thomas,

    We updated the test yesterday. It now has even more test cases and the result are a bit more refined. Read about it here: http://www.css3.info/blog/c…

  13. Sonic wrote on December 14th, 2006 at 3:56 am

    Note that xhtml must use lower case, so the case sensitive comparison of ie7 could be acceptable.

    By the way, anyone know a links to a table of comparison between crosbrowser support of css, updated to ie7 and ff2?

  14. Yeggstry wrote on January 22nd, 2007 at 10:37 am

    Just so you guys know, I’m using the latest Firefox 3.0 Nightlies and got the following from the test:

    From the 43 selectors 32 have passed, 4 are buggy and 7 are unsupported (Passed 369 out of 578 tests)

    Look likes its getting better, and its only a pre-alpha 2 :)

    Also it passes the ACID 2 test.

    Thanks for the blog and links to the css3.info site, I’m in the process of rewriting my site to use some of these CSS3 styles that you have explained so well :)

  15. wodka wrote on June 30th, 2007 at 12:39 am

    First of all the idea of the test, and the test itself is great! I’ve found it while looking for a solution for my problem in IE, i wanted to use the #id.class selector syntax.

    So my question is, that is it possible to add #id.class, and .class1.class2 testing to the test?

  16. guru wrote on September 2nd, 2008 at 8:51 pm

    On Opera 9.51 on WinXP
    From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)

    Same machine, IE 7.0.5730.13
    From the 43 selectors 13 have passed, 4 are buggy and 26 are unsupported (Passed 330 out of 578 tests)

    Same machine, Firefox 3.0.1
    From the 43 selectors 36 have passed, 0 are buggy and 7 are unsupported (Passed 373 out of 578 tests)

    Same machine, Safari 3.1.2 (525.21)
    From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)

    =)

Next:
Previous: