Le nouveau sélecteur :has rend CSS encore plus déclaratif et débloque plein de situations où Javascript était autrefois nécessaire. Aujourd’hui, on va exposer une petite démonstration de son utilité en encapsulant un blog avec plusieurs pages en un seul et même document HTML.
La manière la plus évidente de procéder est de décrire une simple barre de navigation contenant des liens vers d’autres pages :
L’idée est de combiner la puissance de :has et de la pseudo-classe :target pour styliser uniquement les sections ciblées dans l’URL.
=> https://developer.mozilla.org/fr/docs/Web/CSS/:target | https://developer.mozilla.org/en-US/docs/Web/CSS/:has
Commençons par notre HTML :
My blog
Home
…Texts
…About
…
Puis notre CSS :
/* On rend invisible toutes les sections à l’exception de « home » qui est la section affichée par défaut. */
main>section:not(.home) {
display: none;
}
/* On rend invisible « home » quand cette section n’est pas ciblée. */
main:has(section:target):not(.home)>.home {
display: none;
}
/* On rend visible la section ciblée. */
main:has(section:target)>section:target {
display: unset;
}J’ai mis en ligne l’exemple complet si vous voulez observer l’évolution du CSS dans l’inspecteur de votre navigateur :
=> /static-pages/has-demo.html
Utilisateurs de Firefox attention ⚠️, pour que :has fonctionne, il est nécessaire d’activer l’option « layout.css.has-selector.enabled » dans about:config. Elle devrait être activée par défaut dans les prochaines versions (à partir du 19 décembre 2023 visiblement).
=> Intent to Ship: :has Selector
Aucune idée. Même si ça a quelques avantages :
Le seul écueil est peut-être de devoir disposer d’un navigateur moderne supportant :has.
=> Retour au gemlog | Retour à l’accueil
Pas encore de commentaires
=> Écrire un commentaire This content has been proxied by September (ba2dc).
Proxy Information
text/gemini; lang=fr