CSS3 restraint

Over the last six months I’ve gotten increasingly excited about CSS3 and how it will improve things for the front-end developer. Because I generally build pages rather than applications, I would go so far as to say CSS3 is as important as HTML5, at least from my perspective.

Not for the usual reasons, though. Whilst I’m delighted to have things like shadows and rounded corners native to CSS, ultimately these visual flourishes are exactly that – flourishes. The design can do without them if they aren’t supported, and it’s encouraging to see more and more people going down that progressive enhancement path with their work.

Typically, what excites me the most are the boring parts. Selectors, for a start. Things like even, first-child and nth-of-type can eliminate the need for a lot of extra class values in markup, particularly in things like tables and lists. With Internet Explorer development seemingly going at full speed, we could reasonably expect a switch to full reliance on these selectors within a few years.

Media queries have also got my attention. Phones with full web browsers (not to mention the iPad and its inevitable copies) are fast on increase, and being able to serve different style sheets to browsers depending on screen size will be of huge benefit – I think we will see less and less mobile versions of sites as a result.

Happily, lots of other people are excited about my third choice: RGBA colour. Most designers and developers will know how much of a pain in the backside opacity is to work with. RGBA beats opacity in most cases, mainly because you can apply different transparencies to text and its container. I also love how easy life is if your colour scheme is based on lighter shades of the one colour. In some cases, you can have the entire page’s colour scheme running off one value, which you can change instantly to transform the page.

Multiple columns are long overdue, but they are coming in CSS3 to free us from some awkward uses of floats to achieve what should be easy.

The best thing about all this, though, is its backwards compatibility. Selectors, media queries, RGBA and multiple columns will all simply be ignored by browsers that don’t understand them, and safe fallbacks for those browsers are easy to implement in all cases (either that, or fallbacks aren’t needed at all).

A few people have predicted that, with the mainstream arrival of web fonts, 2010 will be a year in which we’ll see typography put to terrible use. I agree, but I also think CSS3 could be abused to equal levels of horror. I’ve found myself looking at elements and thinking “ooh, I could round that corner” and “hey, that image could have a shadow” only to realise I would be using those styles just for the sake of it. Let’s hope restraint is shown all round, or we could have some silly looking websites…