FAQ

FAQ

What is Hitch?

Hitch is a lightweight JavaScript engine (about 5.5k minified/gzipped) that allows definition and use of new CSS selectors.

Rules using these selectors are hashed and managed by the engine (live) which simply attaches and detaches vanilla CSS classes (the rule's hash) as they gain or lose relevance, thereby allowing a common usage pattern which provides authors greater expressive abilities and helps keep presentation related rules in CSS.

Er... Can you say that in English?

Let's use a comparison: jQuery adds additional selectors and also provides a plugin model for people to add new selector plugins, thereby extending the expressive power of selectors. For example, you could write something like:

$('.car:has(.powerwindows)').addClass('.carWithPowerWindows')

and then in your CSS you could write a rule which uses the .carWithPowerWindows class to write a rule like:

.carWithPowerWindows{ color: blue; }.

We see people do things like this all the time, sometimes accompanied by similar server logic and sometimes with more JavaScript to make sure that this rule stays appropriately applicable. That seems antithetical to larger the goals of CSS. Hitch just provides an engine and employs some design patterns to let you express all that in your CSS and take care of all of that for you. With Hitch, you'd just say (right in your CSS):

.car:-hitch-has(.powerwindows){ color: blue; }.

Hitch also provides a selector plugin model as well as a @-hitch-requires rule that lets you effectively import new selector powers to your sheet. This means you can take advantage of new selectors way early (think "I am testing concepts of selectors level 4 or 5 - right now), or even create and share your own ideas for useful selectors.

Why the prefixing?

In order to abide by CSS' forward-compatible parsing rules (see http://www.w3.org/TR/CSS21/syndata.html#syntax).

Are there any known limitations?

Why, yes there are. What a great question!

Err... What are they?

We're not telling... If you find one submit it as a bug.

That's not funny.

We disagree.. It is a little funny.

Seriously: what are the limitations.

Ok, ok... The parser is currently not perfect. It doesn't follow @imports and it might puke on some obscure cases we haven't yet considered. Currently it only runs on "modern" browsers.

Isn't that limiting?

Maybe.

Do you plan to correct that?

In all likelihood no. We have less than 0 interest in trying to make this work in IE6. I have IE7 and 70% of websites I visit have clear errors. The uptake on IE8 has already exceeded IE7. IE9 is going strong and IE10 is actually looking like it might be a pretty decent browser. So what's the point? IE8+, probably. Choose to use it or don't. You don't need to wait for FF 27 or Chome 32 or IE 52... that's the point.

Any limitations/things to know about speed? How fast is it?

The engine used at runtime is pretty quick... we've tested it with some fairly big trees and it performs really well... But look - it's still running a part of the evaluation as script, so please don't add 1,000 really complex filters and 1,000 uses of those filters which are all based on * and throw it on your crazy page with 100,000 elements and then say "it's really slow". If you have a few dozen rules based on decent selectors (a few * are ok) that employ semi-efficient hitches and your page is within even a few times as big as "average" it will be 'beyond human comprehension' kind of fast - and isn't that what really matters? We recommend that you keep a separate sheet for your hitch-based rules and keep them reasonably sane.

Can I add new tokens for use in selectors? For example, I would like to say something like "div < .x".

No. Not now, not ever. Forget it. We are uninterested in breaking the forward compatibility rules in CSS... We agree with them and we think they are sane.

Can I add new modules?

No, not now at least...

Why not?

Modules in CSS are (currently at least) all about rendering pretty specific kinds of things and they involve very specific cascade and calculation semantics which make them considerably more difficult to extend in this manner.

So I never will be able to?

Never say never. There might be some possibilities... If you have some suggestions or ideas, send them our way.

Can I add new types/functions?

No, not now at least - for most of the same reasons as above. In all likelihood this would be even more difficult to add with the current APIs available to us. Hopefully changes in CSSOM will make this things more plausible... It seems as if this would be an ideal extension point, however, it's not nearly as difficult add a mechanism for that from the browser's perspective as it is from outside the browser. Again, if you have some ideas - we're all ears.