October 2003

I seriously want to marry CSS.

With CSS you, yes you, you, the reader, the user, you can override any styles with your custom user style sheet. You can specify general rules for how headers, paragraphs, lists etc. should be rendered across a plethora of web sites. But you can also specify rules that apply to specific sites only. Like, say, my site. On my <body>, I've got the attribute and value id="havard-no-ip-info". With CSS, you can use descendant selectors (or any other contextual selector) to define styles which apply to my site only:

body#havard-no-ip-info {
  background: red;
  color: purple;
  font-family: "comic sans ms", gautami, raavi, sans-serif;
  line-height: 5.2;
}

body#havard-no-ip-info hr {
  background: #000;
  color: #000;
  border: 0;
  height: 5px;
}

body#havard-no-ip-info h1 {
  display: none;
}

The values used here are purely for demonstration; please don't rape my site by using the Comic Sans MS font.

CSS3 is going to be really great.

The new nth-child() selector, for instance, is going to greatly simplify the selection of even and odd numbered table rows. Currently, I assign a class to every even numbered table row, <tr class="even">, and to every odd numbered table row, <tr class="odd"> and style it with CSS, producing this:

A test table used to describe the selection of even and odd numbered rows.
Header 1 Header 2 Header 3
Row 1 Cell 1 Cell 2 Cell 3
Row 2 Cell 1 Cell 2 Cell 3
Row 3 Cell 1 Cell 2 Cell 3
Row 4 Cell 1 Cell 2 Cell 3
Row 5 Cell 1 Cell 2 Cell 3

The problem arises if I've got a very large table and need to put in an extra row in the middle of the table somewhere. Doing that means I have to change the class for x <tr>s downward in the table. That's very tedious and boring work, not to mention a big waste of time (unless you're inserting an even number of new rows, of course). This is where CSS3 comes and saves the day. Using the nth-child() pseudo-class, I could do tr:nth-child(even) (which is equivalent to tr:nth-child(2n)) and tr:nth-child(odd) (which is equivalent to tr:nth-child(2n+1)).

The border module looks extremely interesting; the border-radius property will allow me to add borders with round corners and border-image will allow me to add separate images for all the sides and corners of a box.

CSS3 will truly take the concept of separating presentation from content and structure one huge step forward.

I added a very subtle image to the background. Do you see it?

MSIE doesn't understand a:link:active or a:visited:active. It gets a:active though. Just so you know.

You may have noticed that for every instance of an HTML element or a CSS property in code examples, I've added links to the respective W3C spec section for easy reference. At one point in the Archived News page I have several links separated by nothing else than white space. This is annoying, because this is the only instance where my site contradicts W3C's WAI guidelines (specifically, checkpoint 10.5). As such, I cannot state that my web site is Bobby AAA Approved. I will, however, claim that it is "Håvard Pretty Damned Accessible Web Site Approved".

There are 9 posts for October 2003.