💾 Archived View for heyplzlookat.me › articles › exemple-utilisation-has-en-css.gmi captured on 2023-11-14 at 07:29:32. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2023-11-04)
-=-=-=-=-=-=-
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 :
<nav> <a href="/">home</a> <a href="/texts.html">texts</a> <a href="/about.html">about</a> </nav>
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 :
<header>
<h1>My blog</h1>
<nav>
<a href="#">home</a>
<a href="#texts">texts</a>
<a href="#about">about</a>
</nav>
</header>
<main>
<section id="#" class="home">
<h2>Home</h2>
…
</section>
<section id="texts">
<h2>Texts</h2>
…
</section>
<section id="about">
<h2>About</h2>
…
</section>
</main>
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 :
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).
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`.
Pas encore de commentaires