CSS 1/2

Back in the year 2000, we, and by that I mean anyone who wrote web-pages, were bungling around with CSS. I was being told tables were evil, I need to separate code (content) and style and that CSS was the answer to my prayers. While the second was clearly something to aim for, it became obvious that CSS at the time wasn’t really capable of helping me achieve this. Don’t get me wrong, it was a step in the right direction and rightfully consigned laying out sites in tables as a thing of the past. We were encouraged to lay elements out as divs and most of the time it was possible to get at least most of the way into true separation between style and code, for static sites at least.

Dynamic Sites

One problem I repeatedly encountered was when rendering out lists of elements of undetermined size into a tabular style. Maybe I wanted odd elements as a different colour, or my boss might come in and want the last element in cornflower blue to match his Tuesday tie. It was mostly possible but was a pain and tied the code into the visuals in several places.

CSS3 to the rescue

Finally eleven years later CSS3 comes to the rescue with some fancy new selectors (there were a few in CSS2). Here are some good ones I have used already.

This will add ‘>>’ at the end of any external links automatically. Repeat for https if required.

a[href^="http://"]:not([href*="www.domain.com"]):after { 
    content: " >>"; 
}

This will highlight any links that open in a new window.

a[target^="_blank"] { 
    color:#855; 
}

It also allows you to write code that is almost (other than the class name) completely detached from the visuals. This lays out divs in columns of three.

/*Loop in your language of choice*/ {
    
Content
}

.splitThird {height: auto; clear: both; }

.splitThird div:nth-child(3n+1) {
    float:left; width: 33%; clear:left; margin-bottom: 20px;
}

.splitThird div:nth-child(3n+2) {
    float: left; width: 33%; clear: none;
}

.splitThird div:nth-child(3n+3){
    float: right; width: 33%;
}