Archive — hermiene.net

"It seems you've come across an alien spacecraft. Now things are beginning to make sense. More later."

October 23, 2003

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.

<< | Previous entry (October 20, 2003) | Next entry (October 28, 2003) | >>
Back to Archive