Software Development

Using :nth-child from CSS3

As written is a previous posting about PHPUnit I also wrote the time has come to rewrite an application that is now mainly functional to a object oriented model. As doing standardized unit testing becomes easier and not an one project solution. One of the first goals is to separate the presentation layer from the application layer.

To complete this goal the first requirement is to see which browser versions needed to be supported. Based on the numbers from it is safe to say that both Mozilla Firefox and Google Chrome users are following the latest version in majority. For Microsoft Internet Explorer it is a different story as IE8 is the last possible version on Windows XP and the out of the box version for Windows 7. The numbers for IE8 are declining for months now and Microsoft started to push IE10 out to customers. For now I will select IE9 features when implementing Cascading Style Sheets and those features also need to be supported by the previous released version of Firefox and Chrome.

While moving a lot of inline style sheet information into separate file I also found the odd and even row coloring code. This code assigns a different style sheet class to the rows in question, but with CSS level 3 the pseudo-class selector :nth-child exits and this now can be done in the presentation layer and making the application layer lighter. So a style sheet file that defines the correct tr:nth-child(even) and tr:nth-child(odd) pseudo-clases will do the trick.

tbody tr:nth-child(odd) {
    background: rgb(255,255,255);
tbody tr:nth-child(even) {
    background: rgb(245,245,245);

The following HTML-tags are now completely clean and generating the correct colors will be done by the webbrowser. Saving expensive server-side execution time and precious bandwidth both resulting in a quicker response for the user.


As this is the first step to separate the presentation layer form the application layer it is also a step that can take a while due to checking if everything still works and looks correct. The next step maybe even more daunting as it requires the separation of creating HTML-tags and business logic. As it looks now I will be moving everything into a PHP-version of known from Perl.