Introducing “mini”

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
  • > * 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)

A graph showing "mini" as the fastest library among Sizzle, Sly and Peppy!

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!