I wanted to write some automated tests for CSS changes and bugs, these type of issues are quite prone to regression so re-running the tests has a large benefit.

It is possible to add new assertions to selenium via the user-extensions.js file

The following adds a test for computed style, this only works in firefox as far as I know - but some automation is better than none


//only works in firefox
Selenium.prototype.assertStyle = function(locator, text) {
var params = text.split('=', 2);

var propertyName = params[0];
var expectedValue = params[1];

When the web first started everything was in Times New Roman, black on grey with few images.

Things have moved on a long way since then, but there are still very few fonts. I've worked on many sites that have tried to overcome this by various routes.

CSS revolutionised web development, <font> and <table> were a nightmare in comparison.

But still there are times when CSS feels very limited, if you want to change a colour or margin size and have to hunt through the CSS to calculate the related changes.

But now there is

http://lesscss.org/

Which looks like it fills in some of the missing gaps - it extends the CSS syntax and to it's own format - and then generates standard CSS from this.

I'm definitely planning on using this for my next project. 

When creating a Drupal theme it is tempting to start with one of the existing themes (Zen and Garland are often used) but I would argue against this approach.

If you start from another theme it feels good at the beginning; after all you start from a position where your site looks good. But the more customisations you make, the more you find that the old theme just adds complexity to your existing theme.

The way Drupal works is that each module can add it's own CSS: so tabs, menu trees, filters and so on all come with some sensible styling by default. If you want it to look different you not only have to create the CSS to make it look how you want - you have to make sure this overrides the default rules.

So CSS in Drupal isn't simple - don't add to the complexity more than you need to.

When developing a website it's important to test it in as many different web browsers as possible.

If a client has a problem viewing the page there's little point saying "but it works on my machine"

I have found that the differences between different versions of firefox to be small enough that testing in one version is sufficient.

Internet Explorer is so different between versions that each target version must be tested seperately.

There is a package for multiple IEs.

At work we recently redesigned our website:
the old design was created in front page and made heavy use of tables, font tags, fixed size divs and a smattering of css.
The new design is pure CSS using CSS hacks to workaround bugs in various browsers.

The old design had only ever been tested in MSIE and was a little quirky in other browsers, tables based layouts always seem to look more or less the same though. Mind you when there was a problem it would take me hours of trwling through nested tables to find and fix it.