Making Your Mark [.net Issue 212]


Published on

It’s time designers and developers began crafting their own vision of the future for CSS, says Aaron Gustafson.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Making Your Mark [.net Issue 212]

  1. 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 ‘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 ( will affect them. Clearly, the example is a bit Aaron Gustafson ( 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 2011NET212.tech_gustafson 100 1/14/11 10:41:40 AM