Making Your Mark [.net Issue 212]

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 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. jQuery-based physics library that handles the actual animation. Here’s a simplified overview: 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. 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. ● Getting creative Assuming 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: Aaron Gustafson (aaron-gustafson.com) is founder of Easy! Designs, a web development consultancy, and manager of the Web Standards Project (WaSP). “You can use pretty much any browser for crafting a vision for CSS” Aaron Gustafson img { -easy-physics-fill: helium; } Then I register an extension with eCSStender that looks for that property and passes it along to a 100.net march 2011 NET212.tech_gustafson 100 1/14/11 10:41:40 AM