Note : selecteur d’attribut CSS et ::after/::before
jeudi 31 mai 2018 à 19:18J’en ai peut-être déjà parlé, mais je trouve qu’on n’exploite pas assez certaines perles en CSS.
Par exemple, dans mon lecteur RSS en JS, quand j’ouvre un post, il est marqué comme lu automatiquement.
Dans ma liste de flux, chaque flux est suivi par un bouton qui affiche le nombre d’éléments non lus pour ce site. Chaque flux, dans une liste <li> a un attribut « data-nb-unread » qui contient donc le nombre de posts non lus.
Quand un flux est ouvert, le JS décrémente ce nombre et c’est comme ça qu’un flux est marqué comme lu (il n’y a pas de boucle qui recompte à chaque fois le nombre de posts : le gain de perfs est énorme).
Pour afficher le bouton, plutôt d’ajouter un <span> qui contient le nombre, qu’il faut donc également décrémenter, j’utilise désormais ça :
li[data-nbunread]::after {
content: attr[data-nb-unread];
}Ce que ce CSS fait, c’est ajouter un ::after sur chaque <li> (donc pour chaque site) et y placer le contenu de l’attribut « data-nb-unread » du même <li>. Très pratique : le ::after est directement mis à jour par le navigateur quand l’attribut changer.
On peut faire mieux.
Par soucis de clarté, je n’affiche le nombre de flux QUE sur les lignes où ce nombre est différent de 0. Les flux qui n’ont pas de posts non-lus n’ont donc pas de bouton avec « 0 ».
Le code devient :
li:not([data-nb-unread="0"])::after {
content: '('attr(data-nbrun)')';
}Ça permet donc d’afficher le bouton sur tous les flux où l’attribut « data-nb-unread » n’est pas égal à 0.
Le sélecteur d’attribut est très puissant et fonctionne un peu comme les regex.
Par exemple, si un lien est en anglais, il peut posséder un attribut « lang » :
<a href="//site.com/page_en_allemand.html" lang="de-de">lien</a>En CSS, on peut ajouter un petit drapeau allemand :
li:[lang="^=de"])::after {
content: "";
background: src(drapeau/allemagne.jpg) no-repeat;
}Ici le « ^= » signifie « qui débute par … », mais il y en a d’autres (que l’ont peut tous combiner avec le :not() si l’on souhaite.
https://developer.mozilla.org/fr/docs/Web/CSS/attr
https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut