Mozilla, pour promouvoir Firefox 3.5, a sorti hacks.mozilla.org pour les 35 Days, qui sont 35 jours de démos et d'articles sur les standards, tels que l'HTML, le CSS, le Javascript etc.
Si vous êtes développeurs, ce site est intéressant car on voit les dernières possibilités en matières de standards. Si vous n'êtes pas développeurs, bah c'est joli et on apprend plein de choses.
J'en parle parce que j'ai la chance et l'honneur d'avoir une démo et un article qui ont été publiés ce matin. L'article Slick tables with CSS3 selectors présente les sélecteurs :nth-* et ses dérivés, tout chaud de la spécification CSS 3. Cet article (recopié avec quelques fautes, mais qui sont en train d'être corrigées) est accompagné d'une démonstration au pas à pas. Cette démonstration permet de voir toutes les étapes successives de l'habillage du tableau : la sélection, puis le style.
Wala. C'est tout bête, mais on peut faire de belles choses sans ajouter des classes et ID partout dans notre code. Car on part du code HTML :
Code : Tout sélectionner
<table>
<thead>
<tr>
<th>...</th>
...
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
...
<td>...</td>
<tr>
...
<tr>
<td>...</td>
...
<td>...</td>
<tr>
</tbody>
</table>
CSS3 selectors rocks!
Wala. Mais il y a aussi beaucoup d'autres démos qui sont bien plus impressionnantes que la mienne. Je vous recommande vivement la lecture de ce site.
Édition : mise à jour du code HTML suite à une erreur dans l'article et la démonstration.