Pseudo-éléments after, before et caractères unicode

La mise à jour du site suite au changement d'archivage des brèves touche à sa fin. Une des évolutions à consister à remplacer certaines décorations graphiques grâce aux pseudo-éléments before et after.

Les pseudo-éléments before et after permettent d'insérer un contenu avant et après un élément. Ils sont déjà utilisés sur le site pour afficher par exemple les symboles après les liens menant ailleurs sur le web ou vers le glossaire, ainsi que la langue des dit liens. Ils gèrent maintenant les puces des menus de navigation et le bouton de retour en haut de page.

Leur utilisation est assez simple. Imaginons que vos liens portent l'attribut hreflang, qui définit la langue du document cible, et que vous vouliez en afficher la valeur. Nous pouvons le faire comme suit :

<a href="http://www.site.com" hreflang="en">Le site</a>
a:after {
  content: "\0000a0[[" attr(hreflang) "]] »;
}

Les liens seront dés lors suivit de la mention de la langue entre crochets : le lien en.

Reste à ajouter - si nécessaire - d'autres mises en forme CSS (taille, couleur, etc.), et le tour est joué.

Avec cet exemple, nous voyons que l'on peut insérer dans ces pseudo-éléments du texte classique (les crochets) et autres caractères (l'espace insécable \0000a0), ainsi que le contenu d'un attribut (ici, hreflang). On peut aussi y placer des images.

Revenons sur la formulation de l'espace insécable : pour certains caractères spéciaux comme celui-ci, on ne peut pas utiliser dans la propriété content les formes numériques ou nommée. Il faut les écrire sous leur version unicode précédée du symbole d'échappement (\).

C'est donc en découvrant la richesse des caractères unicode que j'en suis venu à remplacer certaines images utilisées dans la maquette par des symboles :

Symboles géométriques : flèches pleines
Nom Symbole Caractère décimal Caractère unicode
flèche haut &#9650; 25b2
flèche bas &#9660; 25bc
flèche gauche &#9664; 25c0
flèche droite &#9654; 25b6

Pourquoi ces changements ?

  • Cela facilite la gestion des différents habillages css. Je ne suis plus obligé de créer des icônes décoratives pour chaque style, il me suffit de changer la couleur du contenu et/ou du fond des pseudo-éléments.
  • Parce que c'est amusant de tester de nouvelles choses, même s'il faut s'assurer maintenant d'un rendu correct sur différents navigateurs.

Les caractères unicode utilisés sont visibles sous Firefox/Mozilla (Windows et linux), Opera (Windows), Konqueror (Linux). Ils le seraient aussi sous Internet Explorer si celui-ci comprenait la définition des pseudo-éléments after et before.

Comme cette implémentation a avant tout une fonction décorative (présentation), et que son absence n'empêche ni ne gène la lecture des textes du site (contenu), j'ai décidé de la garder, malgré les restrictions d'Internet Explorer. J'ai tout de même utilisé un ou deux hack css, justement afin d'éviter que la présentation ne gène la lecture du contenu. C'est le cas pour les listes à puce par exemple.

En savoir plus :