Changing how CSS works: Hitch

One of the most popular technologies in web development today is CSS. It’s a language that controls the presentation of HTML pages to browsers. It’s also one of the most complicated languages to truly master. CSS has a deceivingly easy syntax and rule construction, but is as close to any imperative/declarative language as can be in its execution.

To further complicate things, web browers (Chrome / Firefox / Opera / Internet Explorer) all treat the rules of CSS differently. Even though there are standards written on what should happen for certain features and constructs, they still each have their own nuances. Seemingly simple things like rounded-corners are handled differently by a few of these browsers.

Now you can reverse that paradigm: Hitch

Right now browser vendors (Google / Microsoft / Mozilla / Apple) control how CSS works in the browser you’re using. There are utilities out there that make writing CSS easier and better, while trying to minimize these vendor differences. For example, Sass is a CSS superset in which you can write CSS with certain syntactical features and Sass will re-compile your Sass into standard CSS and specifically for each vendor’s nuances. It does not however change how CSS works, and relies on the browser’s current functionality for CSS features. There is also LESS – very similar to Sass. (These are both wonderful utilities and you should use them.)

Hitch switches the control of the web page from the vendor to the developer. It provides true functional changes via CSS, not just syntactical extensions. The way Hitch does this is through a JavaScript API that hitches onto the execution of CSS, intercept it, change it and then let it continue. Specifically it’s designed to extend the CSS pseudo elements and pseudo classes by making them more like filters.

An Example

Imagine you need to style the links in your web page according to an information architecture where the nested level of the link’s URL path is important. For example the URL path /2012/05 is important because it represents a month and /2012/05/05 is important because it represents a day. The markup for these is very simple:

<a href="/2012">View 2012</a> 
<a href="/2012/05">View May</a> 
<a href="/2012/05/05">View May 5th</a>

With standard CSS there is no way to apply a style based on the path nesting. But with Hitch there is:

/* links with /-- should be black */ 
a:-links-local(0) { 
    color: #000000; 
/* links with /--/-- should be blue */ 
a:-links-local(1) { 
    color: #336699; 
/* links with /--/--/-- should be gray */ 
    color: #333333; 

With the Link Pseudo Class filters you can specify a style for any number of nested paths and even base the style on whether the path is local to your web page or external. The CSS rules are subtly different (but still very standard) while the functionality is extremely new and currently not doable without Hitch.

Not only does Hitch come with a few built-in features like filters, widgets and constants – it is also extensible by you. And this is where it breaks the current paradigm:

Now you can control your CSS functionality and not be bound to a vendor.

Note: Hitch is a rather new project. It has amazing potential and also a few things yet to be built. It’s open sourced and available on Github: Fork it. Change how CSS works!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: