Monday, February 11th, 2008
Native CSS selectors with querySelector
Category: Browsers
, CSS, Safari
David Smith of WebKit posted about their native implementation of querySelector and querySelectorAll from the W3C Selectors API.
Native CSS selectors in the browsers is going to be a huge boon for us and the Ajax libraries that will be able to use them.
You can use the standard via:
JAVASCRIPT:
-
-
/*
-
* Get all the elements with class "hot" (duplicating getElementsByClassName)
-
* A common use for this is as a toggle;
-
* for example, a search feature might tag results with a class
-
*/
-
document.querySelectorAll(".hot");
-
-
/*
-
* Get the currently hovered element
-
*/
-
document.querySelector(":hover");
-
-
/*
-
* Get every other element in the <li> with id "large"
-
* This is mostly useful for doing "zebra stripe" alternating rows.
-
* Once CSS3 becomes more widespread, doing this directly via CSS will be more practical
-
*/
-
document.querySelectorAll("#large:nth-child(even)");
-
Our favourite libraries can implement the same API and do the hard work in JavaScript if the browser doesn't support it.
Point your new Webkit build at the performance test that they use (based on the mootools one) to see how fast you can be if you are native. Vroom vroom.
4.1 rating from 20 votes
who will query elements 250 times without evaluating results into a cache?
Evaluating it 250 times is meant to avoid difference in performance due to other things happening on the system (garbage collection, other programs, etc.). If it only ran it once you may not be getting an accurate result. Plus the test would run so fast you may also encounter slight errors in the timing. Running it 250 times magnifies the results making those slight errors somewhat negligible.
It looks like your “Native” library is missing in the performance test page. Shouldn’t it be instead of dummy.js?
…and Dojo is updated to support it, although it does seem to make the nightly crash on our test pages.
http://trac.dojotoolkit.org/ticket/5832
Regards
Just out of curiosity…. what does document.querySelector(”:hover”); actually return? I mean, not only can links be hovered, but also the body node … which means that you should end up with the body node whenever the mouse is inside the window. But I’ve got the strange suspicion that the result will be different….
Ticket and patch submitted for Prototype 1.6.0.2 as well:
http://dev.rubyonrails.org/ticket/11085