Tuesday, April 3rd, 2007

Cruiser Behaviors Library

Category: CSS, JavaScript, Library, Unobtrusive JS


Dan Yoder has created the Cruiser Behaviors Library, extensible stylesheets for decorating
DOM elements with interfaces and event handlers.

Cruiser uses Prototype, and is inspired by the Behaviour library itself.

A simple example shows the library in action. A new behaviour of “strike out a link with the special class of ‘demo'” is added to the page by doing:

Creating a strikable class


  1. Strikeable = Class.create();
  2. Strikeable.prototype = {
  3.   strike : function() {
  4.     var html = this.innerHTML;
  5.     this.innerHTML =
  6.       html.tagify('del');
  7.   }
  8. }

Creating an ESS file

An ESS file is extended CSS and this sample looks like:

  1. a.demo { mixin: Strikeable; click: strike; }

Tie in the ESS

To link in this ESS file you need to use a link tag similar to CSS:

  1. <link rel="extended-stylesheet" type="text/ess" href="/stylesheets/demo.ess"/>

Read more details on Cruiser.

Posted by Dion Almaer at 7:47 am

3.6 rating from 31 votes


Comments feed TrackBack URI

Its great adding of behaviours is gaining in popularity – good to see inline events being put back were they belong (1995 ;) ).

However, there is a difference between having unused css classes attached to elements, and to ess which is sudo css with javascript mixed in. It seems to complicate the behaviour model by having two points of abstraction and seems dirty to me!

I look forward to seeing more uses of this library to see it used as it was designed to be (the example is too basic for me – it seems it would be achieved just as cleanly with the original behaviour rules)

Comment by Ross — April 3, 2007

Silly question:
Is ESS a standard? It’s not something I’ve heard of before.

I really like the example. I just don’t like the connector’s sitting in a CSS file. Like Ross says, a bit messy.

Comment by Richard Kimber — April 3, 2007

Good job !

Comment by James — April 3, 2007

I think this is an interesting idea – why not have behaviors that affect the “style” of an element reside in a glorified CSS file? …somehow seems logical… We’ve already got “:hover” – sort of a behavior, right? I’m not completely convinced, but I’d like to see more.

Comment by Daniel — April 3, 2007

Just to briefly address some of the comments / questions.

First, ESS is not a standard. It does allow for standard CSS attributes, plus “extended” attributes that affect the behavior of an Element. Thus, I called it an “extended” stylesheet; but I am open to suggestions.

To Ross’s point about having two points of abstraction, this is a concern. That is why I designed it to support CSS as well, so that they could both in a single file. That said, I am also intrigued by the idea that the “paint” (CSS) and the “wiring” (ESS) are really two different things and are perhaps better off in two different places.

Finally, I will continue to introduce more interesting examples. This one was intentionally brain-dead to make it clear what ESS actually does. I myself am interested to see how this is applied. I have my own ideas, but don’t have firm opinions on “best practices” yet. To Daniel’s point, I do think that ESS should be limited to mapping behaviors that are essentially stylistic, like :hover is for anchors.

Comment by Dan Yoder — April 3, 2007

This is very similar to something I’m building myself. I love behaviors.

Comment by Dean Edwards — April 3, 2007


Comment by ordinarygirl — April 3, 2007

I love the idea if ESS is restricted to behaviors. I was just a little unclear on where the lines should be drawn.

Comment by Richard Kimber — April 3, 2007

Leave a comment

You must be logged in to post a comment.