emotionalmarkup

I remember back in 2000 when I first used CSS to style a web page. It was a strange and often frustrating experience shifting from the development paradigm of cross-browser markup to cross-browser styling. I didn’t realise how revolutionary it was back then mainly because I was frying my brains trying to write code that looked decent in Netscape 4 and IE5. And now look at us: CSS 3.

I know a truck load of stuff has been written about CSS 3 and its implementations/possibilities before, but I’ve only recently had the time to sit down and go over the specifications properly. Plus you learn more by writing about stuff, so here goes…

Why we should be excited

Well apart from the fact that any new toy is fun to play with, CSS 3 builds upon CSS 2 by introducing some groovy selectors and pseudo classes. It makes sense that we should have greater access to page elements so we don’t need to rely on JavaScript DOM traversing just to style the last element in an unordered list.

You’ve probably heard and perhaps even used CSS 2’s child and adjacent selectors (or combinators as Spock would say):

Child combinator

body > p {margin:0 0 1em 0;}

This will apply a bottom margin of 1em to all p tags that are children of the body tag.

Adjacent sibling combinator

h1 + h2 {color:pink;}

This will give the first h2 tag that immediately follows a h1 a colour of pink.

Well now with CSS3 we have a preceding selector, or General sibling combinator:

p ~ h4 { background:#ff0; }

This CSS rule will target h4 elements that are preceded by a p element with the same parent. The second element does not have to be immediately preceded by the first element.

Even better, there are cool pseudo classes to get your feet wet with:

::selection

#instructions::selection {background-color:pink; }

Any selected text in #instructions will have a pink background. This selector currently only works on Safari-based browsers. For now, browsers of the Mozilla flavour can use ::-moz-selection.

:target

div#box:target {color:pink;}

div#box will have a pink background where div#box is a target of a fragment identifier (that is, in a url such as http://www.url.org/index.html#box). Mozilla and Safari users can use this pseudo class straight away. As usual IE6/IE7 users can go to hell. See this article for a useful explanation.

:lang

:lang(fr) {color:pink;}

My personal favourite. The text of every element that has an attribute of lang=”fr” will be pink. So naturally you can assume that if you’re building a page in French and have placed the lang attribute on your html tag, you will be living la vie en rose.

Why we shouldn’t get too excited

Unfortunately we’re not quite ready to start building sites in CSS 3 quite yet (thanks to mixed support we are even prevented from using CSS 2 with gay abandon) and it may be many years before we get the opportunity to use any of these selectors freely in projects.

However I believe it’s important to start learning now. When and if the time comes when we can use them with impunity we’ll be ready and won’t have to rely on the JavaScript workarounds we’re so used to. CSS 2 and 3 combined is powerful stuff and will save lives. Well, maybe not, but there’ll be a few less hacks in the world and that can only be a good thing, right?

How far should we go?

While I haven’t come close to providing an outline what’s going on with CSS 3, it fairly clear that things are moving, with modern browsers already supporting some of the specifications. Browser support will be slow and so will the death of IE6 but that shouldn’t be an excuse not to support nor learn them.

Some purists have argued that a few CSS features cross the boundaries between presentation, content and behaviour. It is well accepted that presentation should be CSS’s main gig so, for example, should we allow it to control real content through the content property? What about using :hover to display another element rather than styling the target element?

I am for giving CSS as much power as possible regardless of anyone’s definitions of how we should separate the holy trinity - it’s fast to perform and fast to load. But in the end people are going to do what works. Answering the question of how much behaviour is style and how much is action is one of those philosophical debates best left to the after parties of web conferences.

This entry was posted on Thursday, February 14th, 2008 at 9:27 am and is filed under Development rants. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.