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:

This is the caption
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