Des compteurs en CSS
Alors que le W3C décrit les Cascading Style Sheets (CSS) comme étant un mécanisme pour ajouter du style (par exemple de la couleur) aux documents web, il s’agit aussi d’un véritable langage de programmation. En fait, il s’agit de l’un des langages déclaratifs les plus répandus.
Bien sûr, CSS n’est pas Turing complet: on ne peut donc pas espérer programmer de véritables applications en n’utilisant que le CSS. Cependant, on peut faire plus avec CSS que l’application bête de quelques couleurs.
Supposons que vous disposiez d’un tableau en HTML qu’il faille mettre en page:
<table>
<tr><th>City</th><th>Color</th></tr>
<tr><td>Montreal</td><td>Red</td></tr>
<tr><td>Toronto</td><td>Blue</td></tr>
<tr><td>Vancouver</td><td>Yellow</td></tr>
</table>
Vous souhaitez obtenir le résultat suivant en n’utilisant que CSS (sans JavaScript):

Il nous faut des compteurs!
Solution: Ajoutez les instructions CSS suivantes à votre page web:
tr{counter-increment: mycounter}
table {counter-reset: mycounter -1}
td:first-child:before {content: counter(mycounter)". " }
tr:nth-child(2n+2) td {background-color: #ccc;}
tr:nth-child(2n+3) td {background-color: #ddd;}
Facebook
Friendfeed
LinkedIn
SlideShare
Twitter
Delicious