Today I’m releasing my first attempt at creating a “selector engine”; it’s called mini! I’m not sure if this really qualifies as a “selector engine” though; it does not entirely support any particular CSS specification; instead, I’ve built it to work with only the most commonly used selectors.

While the work done on engines such as Peppy, Sizzle and Sly (and others…) is commendable the CSS3-support aspect is totally lost on some users. Resig’s post on “Selectors that People Actually Use” attests to this.

mini has been built to support only the most frequently used CSS selectors. If you prefer CSS3-selector wizardry then you won’t like this, at all!

mini supports the following selectors (and variations):

div

.example

body div

div, p

div, p, .example

div p

div > p

div.example

ul .example

#title

h1#title

div #title

ul.foo > * span

Don’t try and do anything fancy with it! It doesn’t support pseudo-selectors, type selectors or any combinators (other than > ).

The entire script weighs in at about 1.5kb (minified) and only 850 bytes (minified and gzipped). It’s quite fast too:

Note: (This is just for comparison; I realise it’s quite unfair to be comparing mini to fully-featured CSS3 engines)

Speeds were measured using SlickSpeed across browsers (IE6, IE7, FF3, Opera 9) and then averaged. Yes, yes, I know, I could have tested more browsers, but I think those four give a pretty good picture.

In all honesty the task of creating an entirely CSS3-compliant selector engine is beyond daunting; I opted for the easy way out, creating something that is not “the best” but certainly has it’s place among the crowd. mini is the size of a tiny image; this makes it unique! The speed benefits weren’t intended but are certainly welcome!

To download mini please visit mini on Github!

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!