a:hover { … } /* Ça vous dit quelque chose ? */

Voici donc notre élément html de travail, un joli (ou pas) tableau tout ce qu’il y a de plus classique :

Et le code associé :

 
<table>
    <tr>
        <td>riri</td>
        <td>fifi</td>
        <td>loulou</td>
    </tr>
    <tr>
        <td>moutarde</td>
        <td>mayo</td>
        <td>ketchup</td>
    </tr>
    <tr>
        <td>git</td>
        <td>cvs</td>
        <td>svn</td>
    </tr>
    <tr>
        <td>linus</td>
        <td>richard</td>
        <td>eric</td>
    </tr>
    <tr>
        <td>html</td>
        <td>css</td>
        <td>php</td>
    </tr>
    <tr>
        <td>symfony</td>
        <td>cake</td>
        <td>pluf</td>
    </tr>
</table>

nth-child et nth-last-child

Notre premier sélecteur porte le doux nom de nth-child. Son utilité ? Il permet de styler des éléments choisis selon leur index dans des groupes. Un exemple sera beaucoup plus parlant.

Imaginons que je veuille affecter une couleur de fond à toutes les lignes impaires de mon tableau (ce que est un besoin assez courant). Et pour pousser le vice, je souhaite aussi mettre en gras une ligne sur trois à partir de la deuxième (ça, c’est déjè moins courant).

Et bien surprise, je vais faire ça très simplement :

table tr:nth-child(2n+1)
{
    background-color: #f0f0f0;
}
table tr:nth-child(3n+2)
{
    font-weight: bold;
}

La syntaxe « nth-child(an+b) » signifie qu’on sélectionne l’élément numéro « b » dans chaque groupe de « a » éléments par rapport à un parent commun. Quand au sélecteur nth-last-child, il fonctionne exactement de la même façon, excepté le fait que le comptage des éléments se fait de bas en haut dans le document (c’est clair ?).

Et le résultat :

Pas mal, non ? Comment, vous ne voyez pas la différence ? Et bien, c’est parce que votre navigateur ne gère pas les sélecteurs avancés. Il serait peut-être temps d’utiliser un vrai navigateur ?

Ici, nous avons pris un tableau pour exemple, mais on pourrait styler un commentaire sur deux dans un blog, ou imaginer des choses beaucoup plus tordues. Par exemple, on pourait affecter 5 couleurs successives à tous les paragraphes de la page :

p:nth-child(5n+1) { background-color: blue; }
p:nth-child(5n+2) { background-color: red; }
p:nth-child(5n+3) { background-color: yellow; }
/* … */

Ah ! Et au fait :

tr:nth-child(2n+1)
/* peut être raccourci en */
tr:nth-child(odd)
/* et */
tr:nth-child(2n)
/* est équivalent à */
tr:nth-child(even)

nth-of-type, nth-last-of-type

Le sélecteur nth-of-type ressemble à nth-child, sauf qu’on ne prends en compte que les éléments de même type pour effectuer les groupes. Quand à nth-last-of-type, vous aurez deviné à quoi il sert. Là encore, un exemple sera plus parlant.

Admettons que mon article contienne des images d’illustrations. Je veux aligner successivement les images à droite, puis à gauche, et ce automatiquement, dans la mesure où je suis un fainéant.

#article img:nth-of-type(odd) { float: right; }
#article img:nth-of-type(even) { float: left; }

Et le résultat :

Alors !? Hein ?! C’est-y-pas beau ?!? Moi, en tout cas, ça m’émerveille toujours autant (oui, je suis sensible).

first-child et last-child

Ça, c’est facile. first-child permet de sélectionner le premier parmi une liste d’éléments. Et last-child, je vous laisse deviner ce que c’est.

Petit exemple facile :

table tr:first-child,
table tr:last-child
{
    background-color: #f0f0f0;
}

Et que voit-on apparaitre devant nos yeux ébahis ???

first-of-type, last-of-type

Les sélecteurs first-of-type et last-of-type permettent respectivement de sélectionner le premier et le dernier parmi les frères de l’élément. Comme d’hab’ un petit exemple :

td:first-of-type {
    padding-left: 100px ;
}
td:last-of-type {
    padding-right: 100px;
}

Ici, nous sélectionnons les premiers et derniers éléments « td » de chaque ligne et on leur applique un padding particulier. Le résultat :

only-child, only-of-type

Le sélecteur only-child désigne un élément qui n’as pas de frères dans l’arbo. only-of-type désigne un élément qui n’a pas de frères du même type que lui.

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>
<ul>
    <li>test</li>
</ul>
<ul>
    <li>test</li>
    <li>test</li>
</ul>

li:only-of-type {
    font-weight: bold;
    background-color: lime;
}

not

not(X) permet de sélectionner les éléments qui ne correspondent pas au sélecteur passé en paramètre.

li:not(:only-of-type) {
    font-weight: bold;
    background-color: lime;
}

Conclusions et références

Bien entendu, tous les sélecteurs peuvent dans une certaine mesure être combinés pour créer des expressions puissantes (tordues). Autre évidence, l’intérêt de la chose reste somme toutes assez limités à cause du support navrant des sélecteurs css3 de la part d’un certain navigateur.

Pour finir, pour les curieux, je vous dirige vers les références qui ont servi de base à cet article.

• http://www.w3.org/TR/css3-selectors/#pseudo-classes
• http://mozilla.hoa-project.net/Demo/Css_3_selectors/Demonstration.html
• http://hacks.mozilla.org/2009/07/slick-tables-with-css-3-selectors/

photo credit : JL !

Ah moins d’être restés loin de votre écran depuis quelques semaines, vous avez sûrement déjà entendu parler de la sortie de firefox 3.5. Cette sortie est particulièrement exitante^[1] pour les développeurs car elle implémente un paquet de fonctionalités fort alléchantes, la plupart tirées des spécifications du futur HTML5.

HTML5 va de plus en plus devenir une réalité (même si les inévitables boulets que l’on se traîne déjà depuis des années continueront à ralentir son adoption), et jai pensé que le moment était bien choisi pour effectuer un petit survol rapide des nouveautés de la bête. Les curieux pourront aller s’abreuver à la source.

Les nouvelles balises

Depuis le temps qu’on vous le répète, le html, c’est pour la sémantique, et le css, c’est pour la mise en forme. Sauf qu’une page remplie de divs, c’est quand même un peu moyen question sémantique. C’est pourquoi html5 définit de nouvelles balises destinées à organiser plus clairement vos contenus.

Saluons donc l’apparition des balises header, footer, section et article, qui seront trés certainement appréciées des blogueurs. nav permettra d’indiquer une zone de navigation (un menu, quoi), et aside une portion de contenu parallèle (un exergue, par exemple).

De nouveaux éléments interactifs font leur apparition. progress permettra d’afficher une barre d’avancement, meter une jauge, details une zone d’information additionnelle affichable à la demande, et datagrid sera utilisée pour représenter de façon interactive des données sous formes d’arbres, de listes ou de tableaux.

Certaines balises se sont vues attribuées de nouveaux attributs (marrant ça…), et d’autres ont vu leur sens redéfini, telles que b, i, hr, etc…

Pour finir, certaines balises passeront directement à la trappe, et dans le cas de frame, par exemple, elles ne seront sûrement pas regrettées.

Les médias à la fête

Parmi les nouveautés qui sont sans doute les plus attendues, on trouve les stars du moment, les balises audio et video qui permettront à vos navigateurs de gérer directement ces éléments multimédias. La balise canvas, quand à elle, permettra d’afficher dynamiquement des graphismes 2d sur la page (et même, pourquoi pas, de la 3d).

Grâce à ces balises, et aux apis correspondantes, il va devenir possible de créer de vrais applications multimédias en pur html / css / js, qui permettront (enfin) de basarder nos plugins flash tout pourris à la poubelle.

Enfin des vrais formulaires

photo credit : obo-bobolina

Il faut bien l’avouer, la gestion des formulaires avec html4, c’est quand même pas de la tarte. Pas de typage précis des entrées, pas de moyen standard de tester les valeurs saisies côté client, bref… C’est du brut de pomme. Heureusement, html5 vient changer un peu tout ça.

La nouveauté la plus intéressante à mon avis réside dans la possibilité de pouvoir spécifier une validation du formulaire côté client. Il est par exemple possible d’indiquer si un champ est obligatoire ou pas. Le développeur pourra fixer des contraintes qui s’appliqueront sur les champs (min, max, pattern, autocomplete, etc.), et que le navigateur se chargera de faire respecter.

input gagne quelques nouveaux types (datetime, range, number, email, url, color, etc.) qui permettront au navigateur d’afficher directement les widgets qui vont bien.

L’attribut form permettra de spécifier à quel formulaire se rattache un champ. Ce qui signifie que les dits champs pourront se trouver n’impore où dans la page, et plus uniquement sous la balise form corrspondante.

Enfin, notons l’apparition de l’attribut autofocus, que l’on pourra attribuer à un input pour lui donner le focus dés la page chargée.

Des Apis en pagaille

De nouvelles apis feront leurs apparitions, pour permettre aux développeurs de créer de véritables applications dynamiques.

Citons les apis multimédias (audio, video, dessin 2d) déjà mentionnées. Une autre api sera destinée à faire fonctionner les applications web offline (à la google gears). Il sera possible de gérer l’édition de document ou l’historique de navigation. L’api webstorage permettra de stocker des données persistentes d’une manière autremement plus puissante qu’avec les antiques cookies. L’api de GeoLocalisation permettra au navigateur de vous localiser. Mentionnons enfin l’api de drag & drop, d’ores et déjà implémentée dans Firefox 3.5.

Pour finir

En résumé, HTML 5, ça siouxe ! Le web va enfin disposer d’un langage à la hauteur de ses usages. La spécification HTML 5 n’est qu’à l’état de brouillon, et ne sera entérinée que lorsqu’il existera au moins deux implémentations complètes différentes. Espérons que son adoption sera suffisamment rapide pour ne pas laisser de place aux silverlight, flex et autres javafx.

Notes :

1. Ouais, bon, chacun ses fantasmes, hein ! [retour]