10 trucs et astuces en CSS, ou comment devenir un maître de la feuille de style !

Le développement web n’échappe pas à quelques règles simples : il est affaire de temps et de pratique. À force de pisser des lignes comme on dit dans notre jargon, on prend fait et cause pour certaines pratiques, on apprend, on comprend, on évolue et on s’adapte. Aujourd’hui, nous allons fournir une approche différente dans le maniement des feuilles de style CSS. Il existe déjà pléthore de sites Internet vous expliquant comment ça marche et comment faire des feuilles de style propres, respectueuses des conventions, standards et autres compatibilités chères au W3C. C’est pourquoi, il nous paraît judicieux de sortir des sentiers battus et de vous proposer 10 trucs et astuces ingénieux, parfois fumants, qui marchent vraiment et qui pourront vous servir dans vos projets.

1. Les combinateurs

Le sélecteur descendant est le plus connu et le plus utilisé de tous, il cible tous les descendants prédéfinis :

Le sélecteur d’enfant ne cible que les enfants directs prédéfinis :

Le sélecteur de voisin direct ne cible que le premier élément prédéfini qui suit :

Le sélecteur de voisins généraux sélectionne tous les éléments prédéfinis qui suivent. Il est moins restrictif que le sélecteur de voisin direct :

2. Les sélecteurs d’attributs

Pour sélectionner uniquement les input radio :

Pour sélectionner certains attributs utilisant data-* :

3. Comment surcharger un attribut écrit en dur ?

Si un attribut est écrit en dur dans le DOM, alors ce code va mettre fin au problème :

4. La pseudo-classe :not()

Pour ne pas avoir de bordure pour le premier enfant :

Pour ne pas avoir de bordure pour le dernier enfant :

Pour ne pas avoir le même fond ni pour le premier, ni pour le dernier enfant :

5. Les indispensables :before et :after

Mise en garde : les contenus ajoutés dans les pseudo-classes :before et :after n’étant pas réellement présents dans le DOM, ils peuvent nuire à l’expérience des utilisateurs handicapés et / ou malvoyants et à leurs logiciels. Utilisez :before et :after avec parcimonie et dans du contenu qui n’est pas indispensable au confort de lecture.

Pour ajouter un tiret avant chaque début de ligne :

Pour ajouter une virgule après chaque fin de ligne :

Pour ajouter un triangle vert avant chaque début de ligne :

6. Les enfants avec :nth-child() et nth-last-child()

Pour ne sélectionner qu’un seul et unique élément enfant :

Pour ne sélectionner que les 5 premiers éléments enfants :

Pour ne sélectionner que les 4 derniers éléments enfants :

Pour tout sélectionner, sauf les 2 premiers éléments enfants :

Pour ne sélectionner que les éléments enfants paires :

Pour ne sélectionner que les éléments enfants impaires :

Pour ne sélectionner que l’avant-dernier élément enfant :

Pour sélectionner tous les 3 éléments enfants, en commençant par le premier élément enfant :

7. Les ancres avec :target

La pseudo-classe :target permet de modifier des éléments lors de l’utilisation d’une ancre :

8. Modifier des liens

Pour ajouter une icône uniquement si le lien redirige vers un autre site que le nôtre :

Le lien est vide de texte ? C’est pas grave, on fait sans avec :empty !

9. Les compteurs

Rien de plus simple avec counters() :

10. La propriété quotes

Peu connue et pourtant redoutable :

11. Pour conclure

La liste est longue et il serait impossible de tout résumer en un seul article. Nous espérons néanmoins que ces astuces CSS vous auront permis de découvrir (ou de redécouvrir) la puissance de ce langage, à tord sous-évalué. En effet, depuis plusieurs années maintenant, les navigateurs web améliorent leurs rendus en permettant aux développeurs d’utiliser de plus en plus l’étendue des spécifications de CSS 3. Cela nous permet de concevoir des sites à la fois plus beaux, plus agréables et plus respectueux des standards. Pour autant, le progrès ne saurait s’arrêter là, surtout lorsque l’on sait que CSS 4 se déploie au compte-gouttes. Le progrès est en marche et l’aventure ne fait que commencer…