Ce pseudo-sélecteur CSS très pratique vous permet de sélectionner des éléments modals.
Ce pseudo-sélecteur pratique vous permet de sélectionner des éléments "modaux" et d'éviter de gérer des classes en JavaScript en permettant de détecter ces éléments.
Deux types d'éléments sont actuellement classés comme :modal:
- Éléments de la boîte de dialogue utilisant la méthode
showModal. - Éléments en mode plein écran
Comment l'utiliser ? Cet exemple définit l'échelle de tous les éléments <dialog> dont la valeur est :modal.
dialog:modal {
scale: 2;
}
Regardez cette démonstration dans laquelle vous pouvez montrer un <dialog> dans un style "modal" ou "non modal".
Lorsque vous affichez la version "modale", elle utilise le ::backdrop fourni par la couche supérieure.
dialog::backdrop {
background: hsl(0 0% 10% / 0.5);
}
Toutefois, pour la version non modale qui n'a pas de ::backdrop, un faux élément est créé avec le pseudo-élément ::before. Il est plus léger et ne floute pas le contenu derrière. Vous pouvez la combiner à :not pour détecter une <dialog> non modale.
dialog[open]:not(:modal)::before {
content: "";
position: fixed;
height: 100vh;
width: 100vw;
top: 50%;
left: 50%;
background: hsl(0 0% 10% / 0.25);
transform: translate3d(-50%, -50%, -1px);
}
Cela fonctionne également pour les éléments qui sont en mode plein écran. Cet élément de titre est constitué de segments.
<header>
<h1>
<span style="--index: 0;">:</span>
<span style="--index: 1;">m</span>
<span style="--index: 2;">o</span>
<span style="--index: 3;">d</span>
<span style="--index: 4;">a</span>
<span style="--index: 5;">l</span>
</h1>
</header>
Lorsque l'élément est en mode plein écran, les segments s'animent.
h1 span {
animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
}
header:modal span {
--speed: 0.75;
}
@keyframes jump {
50% {
transform: translateY(-50%);
}
}
Fait partie de la série sur les nouvelles technologies interopérables