“You can use pretty much any browser for crafting a vision for CSS” Aaron Gustafson

Since its debut late in 2009, eCSStender

has been known primarily as a JavaScript

library for patching CSS support in

browsers. But its talents go far beyond its ability

to make older browsers play nicely with fancy

new CSS3 features. In fact, I built it for an entirely

different purpose: to empower designers and

developers to be more intimately involved in

the evolution of CSS. That the tools needed to

accomplish this goal also made it relatively easy to

‘fix’ problem browsers was just a welcome bonus.

So how exactly does eCSStender enable you to

participate in the ongoing development of CSS?

It’s simple: if you have an idea for a new property,

value or concept, you can use the library to build a

functional implementation of it. The W3C created

a mechanism by which vendors could create

custom CSS properties and constructs by using

vendor-specific prefixes (-moz-, -webkit- and so

on). As Eric Meyer explains in his excellent A

List Apart article on vendor prefixes (netm.ag/

h0wkXI), browser-makers use these prefixes to

isolate properties that are in the process of being

developed. Prefixes give vendors the leeway they

need to play with and augment these experimental

properties until they match the spec. The prefix also

enables these properties and constructs to be used

in a CSS file without causing it to become invalid.

It was through the vendor prefix mechanism

that we first got border-radius and box-shadow.

If you started using them early enough, you no

doubt noticed the evolution of each browser’s

implementation of these properties as the spec

developed and their implementations were refined.

But why should browser-makers have all the

fun? Traditionally, the answer was, “Because they

have their own browsers in which to build and

refine their ideas,” but with eCSStender, designers

and developers can use pretty much any browser as

a sandbox for crafting their own vision for the CSS

of the future. All they need is a good concept and

a basic understanding of JavaScript.

Getting creativeAssuming you have a great idea in your back

pocket, start by defining your CSS syntax,

remembering to create a vendor prefix for yourself.

My company is Easy! Designs, so I’ll use the prefix

-easy- in the following example.

To show off eCSStender’s capabilities, I’ll

implement physics in CSS by allowing any element

to be filled with one of three predefined substances

(helium, rubber and lead). When the page loads,

the physical properties imbued upon the elements

will affect them. Clearly, the example is a bit

contrived and doesn’t really serve any practical

purpose, but it’s a good demonstration of how

we can use eCSStender to realise our dreams, no

matter how misguided they are.

In my proof-of-concept page, I assign my

experimental property (-easy-physics-fill) to three

elements, with each receiving one of the three

available options, like this:

img { -easy-physics-fill: helium; }

Then I register an extension with eCSStender

that looks for that property and passes it along to a

jQuery-based physics library that handles the actual

animation. Here’s a simplified overview:

eCSStender.register( { property: ‘-easy-physics-

fill’ }, false, function( selector, properties )

{ // Find the element on the page and pass it

to JavaScript for animation });

You can see this extension in action at

ecsstender.org/demos/physics.

If you’ve been working on the web for a while,

you’ve probably identified countless things you’d

love to see implemented in CSS. Now’s your chance

to join in the process. Armed with eCSStender, you

can start a discussion around your idea, play with

your proposed syntax and make changes on the fly

as you refine your concept. Who knows, your work

may end up finding its way into the CSS spec, giving

you serious bragging rights. ●

Aaron Gustafson (aaron-gustafson.com) is founder of

Easy! Designs, a web development consultancy, and

manager of the Web Standards Project (WaSP).

.net/technique/opinion

100 .net march 2011

Making your mark It’s time designers and developers began crafting their

own vision of the future for CSS, says Aaron Gustafson

Aaron Gustafson on…

NET212.tech_gustafson 100 1/14/11 10:41:40 AM