eCSStender enables designers and developers to craft their own vision for CSS. It allows them to define new CSS properties and values using vendor prefixes. This gives them a way to experiment with new CSS ideas and potentially influence the evolution of CSS standards. The article describes how Aaron Gustafson used eCSStender to implement a proof-of-concept "physics" property that assigns elements different densities to demonstrate how new CSS concepts can be tested. Gustafson argues that eCSStender empowers the web community to get more involved in the ongoing development of CSS.

1. .net/technique/opinion
Aaron Gustafson on…
Making
your mark
It’s time designers and developers began crafting their
own vision of the future for CSS, says Aaron Gustafson
Since its debut late in 2009, eCSStender But why should browser-makers have all the jQuery-based physics library that handles the actual
has been known primarily as a JavaScript fun? Traditionally, the answer was, “Because they animation. Here’s a simplified overview:
library for patching CSS support in have their own browsers in which to build and
browsers. But its talents go far beyond its ability refine their ideas,” but with eCSStender, designers eCSStender.register( { property: ‘-easy-physics-
to make older browsers play nicely with fancy and developers can use pretty much any browser as fill’ }, false, function( selector, properties )
new CSS3 features. In fact, I built it for an entirely a sandbox for crafting their own vision for the CSS { // Find the element on the page and pass it
different purpose: to empower designers and of the future. All they need is a good concept and to JavaScript for animation });
developers to be more intimately involved in a basic understanding of JavaScript.
the evolution of CSS. That the tools needed to You can see this extension in action at
accomplish this goal also made it relatively easy to Getting creative ecsstender.org/demos/physics.
‘fix’ problem browsers was just a welcome bonus. Assuming you have a great idea in your back If you’ve been working on the web for a while,
So how exactly does eCSStender enable you to pocket, start by defining your CSS syntax, you’ve probably identified countless things you’d
participate in the ongoing development of CSS? remembering to create a vendor prefix for yourself. love to see implemented in CSS. Now’s your chance
It’s simple: if you have an idea for a new property, My company is Easy! Designs, so I’ll use the prefix to join in the process. Armed with eCSStender, you
value or concept, you can use the library to build a -easy- in the following example. can start a discussion around your idea, play with
functional implementation of it. The W3C created To show off eCSStender’s capabilities, I’ll your proposed syntax and make changes on the fly
a mechanism by which vendors could create implement physics in CSS by allowing any element as you refine your concept. Who knows, your work
custom CSS properties and constructs by using to be filled with one of three predefined substances may end up finding its way into the CSS spec, giving
vendor-specific prefixes (-moz-, -webkit- and so (helium, rubber and lead). When the page loads, you serious bragging rights.
on). As Eric Meyer explains in his excellent A the physical properties imbued upon the elements
List Apart article on vendor prefixes (netm.ag/ will affect them. Clearly, the example is a bit Aaron Gustafson (aaron-gustafson.com) is founder of
h0wkXI), browser-makers use these prefixes to contrived and doesn’t really serve any practical Easy! Designs, a web development consultancy, and
isolate properties that are in the process of being purpose, but it’s a good demonstration of how manager of the Web Standards Project (WaSP).
developed. Prefixes give vendors the leeway they we can use eCSStender to realise our dreams, no
need to play with and augment these experimental matter how misguided they are.
properties until they match the spec. The prefix also
enables these properties and constructs to be used
In my proof-of-concept page, I assign my
experimental property (-easy-physics-fill) to three
“You can use pretty
in a CSS file without causing it to become invalid.
It was through the vendor prefix mechanism
elements, with each receiving one of the three
available options, like this: much any browser
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
img { -easy-physics-fill: helium; } for crafting a vision
implementation of these properties as the spec
developed and their implementations were refined.
Then I register an extension with eCSStender
that looks for that property and passes it along to a
for CSS” Aaron Gustafson
100 .net march 2011
NET212.tech_gustafson 100 1/14/11 10:41:40 AM