Sizzle – A Look at jQuery’s New CSS Selector Engine

By   |  Stashed in Reviews

sizzle

What is Sizzle Anyway?

John Resig and the jQuery team recently released Sizzle, a new CSS selector engine as a spin off from the jQuery project, announcing its release when jQuery 1.3 was made available for download.

The component is a standalone project, thus allowing other library’s owners and developers to collaborate and join the Sizzle development to eventually take advantage of its advanced options and ease of use and implementation. Sizzle supports CSS3 and unicode selectors as well as a number of regular expressions to match the desired element.

The Basics

There’s actually no reason you should learn how Internal or Extension APIs work unless, of course, you want to develop your own plugin, or add support for your library. Though, the Public API is what is really important, at least for now. It’s what you can use to retrieve elements that match a certain regular expression or simply a CSS sleector.

jQuery, including Sizzle from version 1.3 upwards, is one of the most common examples of the great help Sizzle can be for a developer.

The syntax goes something like this

  • jQuery (String selector, DOMElement|DOMDocument context)

While using Sizzle as a standalone, it would become

  • Sizzle (String selector, DOMElement|DOMDocument context, Array results)

Alternatively, Sizzle can be called passed to an existing array and the results will be appended to that array

  • Sizzle.matches (String selector, Array set)

It’s easy to see how helpful a couple of lines of code dropped into almost every package can lend a hand toward dealing with selectors and DOM elements.

Selectors for Dummies

That’s right, this is actually about both jQuery and Sizzle, but most importantly about Sizzle because in the future (since I don’t know any library that already does), there could be other libraries using Sizzle, as it’s open soruce, light-weight (3KB) and easily dropppable into different host libraries.

Apart from the well-known CSS selectors you can make use of, here are some others that struck my attention.

For example

  • Sizzle (‘li:nth-child(3)’) // selects li elements which are third child within their list
  • Sizzle (‘li:nth-child(odd)’) // selects all odd element within a list (‘even’ works the same way)
  • Sizzle (‘li:nth-child(3n)’) // slelects every third li element
  • Sizzle (‘li:nth-child(3n+1′) // selects the element after the third li element

A lot more can be done

  • Sizzle (‘:option:not(:selected)’) // selects all unselected option elements
  • Sizzle (‘select[name=list] :not(:selected)’) // selects all unselected options within the select element named ‘list’
  • Sizzle (‘select[name=list] :not(:selected):contains(hello)’) // selects all unselected options that contains the text ‘hello’ within the select element named ‘list’

What Now?

The extension API’s also worth a closer look.

A collection of regular expressions to be used for finding or filtering elements. The name of each of the regular expressions should correspond to the names specified in the Sizzle.selectors.find and Sizzle.selectors.filter objects.

— Sizzle documentation points out

So, in order to add a new find function, you’ll need to add a regexp to ‘match’, a function to ‘find’ and a hook to ‘order’.

Sizzle.selectors.match = { NAME: RegExp }
Sizzle.selectors.find = { NAME: function (Array results, DOMElement|DOMDocument context, bool isXML) }
Sizzle.selectors.order = [ 'NAME', 'NAME2', ... ]
  • ‘results’ is the array of results returned from matching your regular expression
  • ‘context’ is the DOM element in which you want to search (defaults to ‘document’)
  • ‘isXML’ is a boolean value letting you know whether you’re operating with an XML document or not

Basically, what you have to do is find a regular expression that works for your case and add it to ‘match’; create the function in ‘find’; specify the order in which ‘find’ functions should be tried (the typical having ID first, being the fastest and the one with the smallest amount of results — 0 or 1).

Filtering statements are somewhat different. You first need to add a regular expression to the ‘match’ object, a function to ‘filter’ and optionally another function to ‘preFilter’.

Sizzle.selectors.match = { NAME: RegExp }
Sizzle.selectors.preFilter = { NAME: function (match) }
Sizzle.selectors.filter = { NAME: function (element, match) }

An optional ‘preFilter’ function allows you to examine the matched array from the corresponding regular expression and returns a new matched array. This allows you to avoid some of the repetitive processing that might occur in a filter function. The result of the filter function should be true or false (element matches the selector or not); the regular expression passed to the filter function automatically takes into account the results of the preFilter process

Final Thoughts

Yup, this was just the tip of a much bigger iceberg and I invite you all, if interested, to check out some of the (scarce) Sizzle documentation, the (mostly inactive) discussion group, and the jQuery selectors cheatsheat, eventually trying out for yourself what Sizzle is and can do.

About the Author

Keen on geeky stuff, I tried everything from rocketry to weird game development adventures more than once. I love orange-colored things. I'd be a web developer with a passion for design but I find myself writing for some websites every now and then.

More posts by

Website

  • http://www.davebrownphotography.com Denver Engagement Photographer

    Hmm this is pretty interesting,… after writing lots of complex CSS for a lot of different websites, this looks like it could make things a lot easier. Although my only concern is that CSS is usually maintained by someone who didn’t write it. Meaning that usually a lower developer is the one who maintains it. And seeing as how they rarely know as much as the senior developers I worry about them being able to maintain something like this.

  • http://www.webdesignexpert.me Web Design Blog

    I think it may be makes things easier when compared to other css selector engines like Peppy?
    .-= Web Design Blog´s last blog ..illustrator patterns =-.

  • http://giulio.hewle.com Giulio

    Yeah, Peppy is another interesting CSS selector engine.
    While Peppy is rather fast in most cases, Sizzle claims to be fast mostly when dealing with the most common selectors. In my opinion, they’re to be monitored, both, as they are relatively recent and I’m pretty sure they’ll have some sort of future.
    The syntax is slightly different, but being Sizzle the CSS selector for the jQuery library, it comes natural to many going that way and get used to how jQuery (thus Sizzle) behaves.
    As a side note, I’m currently checking Peppy out (yeah, it’s CSS selectors time now :) and will let you know my final thoughts about this great engine soon.

    In the meantime, Peppy creator has set up a speed test page (http://jamesdonaghue.com/static/peppy/profile/slickspeed/) and the documentation is available here (http://jamesdonaghue.com/static/peppy/docs/).

  • http://www.pixmac.com Vitezslav Valka

    Thx, I’ll recommend this to our tech guys. They’re just working on refining the JS code on Pixmac because it’s getting heavier and heavier ;-)

  • http://www.crearecommunications.co.uk Damian Web

    Interesting… I might have to look more into this, I’ve only really just begun to learn jQuery and really getting into it. So adding this to my knowledge will hopefully get me far :]
    .-= Damian Web´s last blog ..How Can Videos Improve Your Website And Your SEO? =-.

  • http://blogcommenting.modwn.com/ Tennie Beneuento

    I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time

  • http://www.finaleforum.com/forums/profile.php?mode=viewprofile&u=11508&sid=186cb411c6bc3ca228f8958787f09ac7 Bettie Lerwill

    Really good post, this is very similar to a site that I have. Please check it out sometime and feel free to leave me a comenet on it and tell me what you think. Im always looking for feedback.

  • http://www.erage.nl Webdesign

    Thanks for the Sizzle tip! It kinda sounds good, but I don’t like the Javascript dependancy to be honest. I think I’ll sticky to me IE only stylesheets. Other browsers, like Opera, FF and Chrome have become really involved with CSS3 these days.

    It’s very refreshing to see this, Also, IE9 will get a LOT more CSS3 attention! Isn’t that great? ;D

  • http://www.sundaydrivestudios.com Denver Wedding Photographer

    I’ve tried JQuery a bit but don’t really know if I like it yet. In some ways its simpler in some ways not. I take it you’re a fan?