Index of CSS selector tests

querySelector can be dangerous

The introduction of querySelector API in most of the popular framework's selectors engines have two faces. One is the improvement it brings to selector engine speed, which is very good, the other is the challenge for vendors to be consistent with the results obtained from older browsers missing these new powerful APIs.

The objective of frameworks developers is to hide away the details of these complex operations and fix browser bugs in their native implementations of the DOM API. Most browsers have bugs in their implementation of getElementById, getElementsByName, getElementsByTagName, getElementsByClassName and querySelector. Further, some of the W3C Selectors specifications are very recent and some browser implementations are not completely covering all of the CSS3 selectors (especially with dynamic pseudo-classes and with of-type selectors).

Most frameworks implement two branches of the selector engine. One for browsers having querySelector and one for browsers not supporting it. The two branches should return exactly the same results but this doesn't happen for most selectors engines as shown by the tests above.

To test for cross-browsers inconsistencies:

  1. Execute these tests in a browsers without support for querySelector (Opera < 10, Firefox <= 3.1, IE6/7)
  2. Compare the results obtained from different browsers, also, test different versions of the same browser
  3. Finally compare the results above with results from browsers having support for querySelector

How to mitigate the problem

If you are a developer writing complex WEB applications and you absolutely need a framework:

  1. use FuseJS framework written by John David Dalton (still in Alpha testing)
  2. use base2 framework written by Dean Edwards (v1.0 is OK, 2.0 is Alpha)
  3. use Prototype with the NWMacther adapter (any version >= 1.6.1)

If you are a developer using complex selectors and you don't need a full fledge framework:

  1. use the standalone NWMatcher selector engine

If none of the above apply to you and you cannot replace your current framework:

  1. avoid using the broken selectors