Colour palettes for web development

One of the best features of CSS is implied in its own name: cascading. It means that, if you change a style definition, all elements of a page that have that style applied will change at the same time in a "cascade".

As recomended by the W3C, designers must not rely on color alone to convey information. That's a reasonable recomendation that we designers must always follow.

As you designers probably know, we use to work with colour palettes. Usually a document has a previously decided range of colors, often limited to just a few, that we use throughout the document. In DTP applications we define this colour palette and use it to apply colour to the different styles in use. In that way, if we want to change the colour scheme, we just have to redefine the colour palete and the change is applied to all the elements that use that colours in the document, giving the document a different feeling. In the same way, we can use the same style but different colours for different document sections. But in CSS, if you want to do that you have to create a whole new style sheet, doing a "find & replace" all over the CSS to change the colour definitions.

That’s why I’d like to see CSS Colour Palettes implemented in CSS3.[...]

This quote from electriblog shows in all it's a glory a little but insistent pain that shows up every time we go into cascade style sheets. It seems that my head retained the whole article and, a couple of days ago, my brain got working (tm), remembering an article from PPK which could hold the solution in it: it turns out that, some CSS rules, can have as a possible value the url() command, for example:

And how is this useful? how does it help in creating colour palettes? The key, very little known, is that the standard specifies that the url() command admits a little bit of javascript (example here). It's a very limited javascript but, after all, you can put it there. Let's say, imagine you have a javascript variable called path_to_gif, then it would be valid to do something like this:

Knowing this, inmediatly everybody thinks about defining a colour palette in a javascript file, and make some kind of ugly hack in the CSS (as shown in previous example, a document.write) which would take this variables to the specified colour attributes. Before anyone starts to code this as fast as hell, let me say it: this won't work, as the javascript is executed in a very limited scope. It seems that the standard's main intention was to provide of some flexibility to this parameter to make it a little more dynamic.

So, as we seen, this first attempt was not valid. But a useful pair of ideas have already popped up: defining the colour palette in a separate javascript file and, somehow, push some javascript code inside the style sheet.

First part is quite easy to achieve but second one... ugh! We've already seen that we can -barely- put some javascript inside a style sheet. But we've also heard zillions of times that mixing javascript with HTML or styles with HTML isn't a good practice, so imagine of mixing javascript inside CSS...

In the other hand, what it is very common is using javascript to change a web's appearance, and it's this way where we are going to reach a satisfactory conclusion. However, we are not allowing any sahbby, grotty code. The idea is to obtain a solution which will be sufficiently transparent and generic, which translated to web developer jargon is called unobtrusive. I won't make a big speech of this point, instead, I will refer to another article from PPK. In fast, it comes to say that an unobtrusive script should achieve these characteristics (if you want to read more about unobtrusive scripting, this article is a good place to begin with):

1. Usable: A script should be unobtrusive to the user. No flashy stuff or sliding layers, just a small usability benefit that helps users make sense of a site instead of hindering them.
2. Accessible: A script should be unobtrusive when it doesn’t work. The site shouldn't depend on the script.
3. Easy to implement: A script should be unobtrusive to Web developers. Typically, a Web developer should only have to include a script and to add a class or id to one or more XHTML elements, which the script interprets as: "Deploy the behaviour here".

At this point we are at disposal of introducing the last piece of the puzzle: Behaviour, a quite impressive javascript library developed by Ben Nolan, which allows us to specify CSS selectors to apply them javascript functions in an unobtrusive way. Technically, is the best javascript code I've ever approached. So little code, so elegant, which allows so many things going so unnoticed.

Making a very quick summary, with this library we can define an array of CSS selectors and associate them with the javascript event that we want:

From now on, we are going to fit all the pieces together. Let's have another look to them:

1. HTML Document (better if xHTML), with page content.
2. One or several style sheets, where any of them is going to have any colour attribute (neither front colour, nor background, nor border). Made this exception, the rest of the page presentation will be defined in the CSS.
3. Behaviour javascript library, used to split behaviour from content.
4. Another javascript library, developed by myself, which seamlessly integrates with Behaviour, and allows us to use in an unobtrusive way a colour palette to define an style. On an unkown originality show off, I've decided to name it css_init_palette.
5. A javascript file, where we will define our colour palette and our CSS selector's array, so we can associate both the javascript events and the colour palette to the page elements.

My custom library adds the on_css_init event, so we can apply the colour palette in a similar way we apply events to CSS selectors with Behaviour. It's not a very big thing (~2KB) but, quoting Woody Allen, "hapiness is all about having little things: a little mansion, a little yatch, a little fortune...".

I've also added a convenience method called set_css_color_palette(el, bg, fg, bd), which receives four parameters: the HTML element in which we apply the colour palette, background colour, foreground colour and border colour. An example of use could be the following one:

This example has several things which should be noted:

1. On the method definition executed in on_css_init is possible to call more javascript functions ('div.div2' case), but I definitely don't recommend this approach: mixing behaviour with presentation it's not a good practice so, if we've done it a little, we've better don't do it anymore.
2. The set_css_color_palette method and the on_css_init event are independent one from another, as it can be seen in 'div.div3' case.
3. The colour palette initialization, css_init_apply();, must always go next to Behaviour initialization (Behaviour.register(css_palette); or Behaviour.apply(); if we've been toying around with DOM).

In relation to the first consideration, it would be very nice if the future standard CSS 3.0 would add support for colour palettes. The easiest way I can think of would be implementing a new command, palette(), which could parse javascript, pretty much the same way as it's done in url() command. I haven't found any other way to achieve a colour palette for web development, so until then we'll have to ignore the use of colour palettes or use a custom solution like the one described above.

As I said before, css_init_palette is heavily based on Behaviour, so it will run in the same browsers as it. I've tested it against Firefox 1.5 & 2.0, and against Internet Explorer 6.0. It should run in any nowadays browser, but it would be nice to hear about other people who have successfully tested it against other browsers and platforms.

I've uploaded a complete example of use for everyone who wants to have a look to the whole picture. As this is all too web 2.0, I've chosen the colour palette from the most appropiate site I could think of. Oh, by the way! before we end, this tiny library is BSD licensed, just like Behaviour.

And that's all folks, hope someone finds this useful, at least as an intellectual exercise.

(Disclaimer - english readers: this is not my mother tongue so, if you see any misspellings it's not my fault, it's a beta version :o) and furthermore it's 3.00am at the time of writing this! post a comment and I'll fix it as soon as I can).

Update 21/11/2006: Whoaa! Been hitted by Ben Nolan himself! Thousand thanks for the post!

servido por foobar 3 comentarios compártelo