CSS: A Little More on Less

Suck in a big lungful of sweet air, fellow CSS monkeys, because 2010 is a good time! After years of stuttering progress, scheming browser-makers, hidden agendas, and petrified standards bodies, things seem to be finally moving in the right direction.

Why? Well, here’s an overview:

• Lots of the most useful CSS3 properties are now supported by all the major non-IE browsers — although admittedly they do often require proprietary code (e.g. -moz or -webkit).
• New CSS3 properties are being introduced to each browser update.
• Though clearly IE8 doesn’t deal well with CSS3, it at least tends to render our plain CSS2 in a predictable manner.
• Although I wouldn’t rule out Microsoft’s ability to snatch fail from the jaws of victory (shout-out to the MS Outlook team), all the signs are
  promising for IE9.

Good times indeed.

There are some niggles, though. Currently CSS3 can be mighty ungainly to work with. Let’s take a typical CSS3 property such as “box-shadow.”

For Opera (and with any luck IE9), we need to use the standard CSS3 syntax:

box-shadow: 1px 1px 8px #999999

Safari and Chrome currently still require their own version of that code:

-webkit-box-shadow: 1px 1px 8px #999999

Ol’ Firefox plays along nicely — just as long as you give it what it wants.

-moz-box-shadow: 1px 1px 8px #999999

Although this all works like charm in each of those browsers, it’s a pain in the backside to manage. If you want to tweak the shadow color or adjust the blur, you need to edit your CSS in three places.

Quite apart from being tiresome, this gives you more places to make mistakes. There should be a way to “write once, use everywhere” — and, of course, there is.

Last year, Raena introduced us to us how to a system called LESS. The concept behind LESS is to allow you to set CSS variables that can then be used throughout your code.

LESS was developed as Ruby-based solution, which is awesome if you’re a Ruby user — but not so useful if you’re not. In the intervening time, we’ve seen the development of PHP and .NET versions of LESS.

Ok, that’s great, but what if you want to get a feel for what LESS can do without installing code or committing to a server-side technology? Happily, it can be done.

Google Code now allows you to link and run a JavaScript version of LESS directly from its servers. Here’s a quick demo using the example I cited above:

1). Start a new CSS file and cut and paste your CSS rule into it:

.content {
   box-shadow: 1px 1px 8px #999999;
   -webkit-box-shadow: 1px 1px 8px #999999;
   -moz-box-shadow: 1px 1px 8px #999999;
  }

2). Save that file as “style.less”

3). Next, we’re going to create four new variables at the top of that file. We declare them with an @ at the start, but they can be called anything you like. I’ve tried to make my variable names plain and sensible:

  @box-x: 1px;
  @box-y: 1px;
  @box-blur: 8px;
  @box-col: #999999;

.content {
   box-shadow: 1px 1px 8px #999999;
   -webkit-box-shadow: 1px 1px 8px #999999;
   -moz-box-shadow: 1px 1px 8px #999999;
  }

I’ve also given each variable a value.

4). Now we need to edit our CSS values to replace them with our new CSS variables. That should give you something like this:

 @box-x: 1px;
  @box-y: 1px;
  @box-blur: 8px;
  @box-col: #999999; 

.content {
 box-shadow:@box-x @box-y @box-blur @box-color;
 -webkit-box-shadow: @box-x @box-y @box-blur @box-color;
 -moz-box-shadow: @box-x @box-y @box-blur @box-color;
 

5). We’ll next need to link this file from the head of our HTML document. At first glance this may look like a regular LINK tag, but don’t overlook the unusual REL attribute with a value of stylesheet/less:

<link rel="stylesheet/less" href="style.less" type="text/css" />

6). Finally, we have to attach the code that does all the grunt work — the LESS JavaScript library:

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

I’ve deliberately left this step till last, because the order in which these files are loaded IS important. This LESS library file must be loaded after your CSS (i.e your 'style.less' document).

Here’s a simple demo showing the code in action. Each one of our variables is automatically inserted into each CSS rule on the fly.

Now if we need to tweak the color of our box-shadow, a single change to the @box-color variable at the top of our style document will change it across the entire document.

And this is really just scratching the surface of LESS. As Raena’s original post explains, LESS lets you:

• calculate your columns width and margins as a percentage of your body width (e.g. width: @bodywidth/6)
• nest CSS rules within other CSS rules to generate new child rules
• group commonly used CSS snippets into reuseable “mix-ins”

It’s all exciting stuff to play with.

But Are There Any Catches?

Of course, there is one obvious issue with this solution. If a user doesn’t have JavaScript enabled, none of these styles will be rendered.

As such, it might make some sense to keep all your primary styles in a garden-variety stylesheet, and then breaking out our CSS3 finery into a LESS stylesheet.

Moreover, if you decide LESS is the way forward for you (or similar technologies like Sass and CSS Scaffold), you might need to look at server-based solutions.

Nevertheless, if you’re looking for an easy way to dip your toe into the water, who could ask for.. more?

From Design View #74