Tuesday, April 3rd, 2007
Cruiser Behaviors Library
Category: JavaScript
, Library, CSS, 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
JAVASCRIPT:
-
-
Strikeable = Class.create();
-
Strikeable.prototype = {
-
strike : function() {
-
var html = this.innerHTML;
-
this.innerHTML =
-
html.tagify('del');
-
}
-
}
-
Creating an ESS file
An ESS file is extended CSS and this sample looks like:
CSS:
-
-
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:
Read more details on Cruiser.
3.6 rating from 25 votes
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)
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.
Good job !
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.
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.
This is very similar to something I’m building myself. I love behaviors.
Interesting.
I love the idea if ESS is restricted to behaviors. I was just a little unclear on where the lines should be drawn.