Ce pseudo-sélecteur CSS pratique vous permet de sélectionner des éléments qui sont modaux.
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 fournissant un moyen de détecter les éléments modaux.
Deux types d'éléments sont actuellement classés comme :modal
:
- Éléments de boîte de dialogue à l'aide de 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>
qui sont :modal
.
dialog:modal {
scale: 2;
}
Prenons l'exemple de cette démonstration, dans laquelle vous pouvez afficher un <dialog>
dans les styles "modal" ou "non modal".
Lorsque vous affichez la version "modale", elle utilise l'::backdrop
fournie par la couche supérieure.
dialog::backdrop {
background: hsl(0 0% 10% / 0.5);
}
Toutefois, pour la version non modale qui ne comporte pas de ::backdrop
, un faux élément est créé avec le pseudo-élément ::before
. Il est plus clair et ne floute pas le contenu en arrière-plan. Vous pouvez le combiner avec :not
pour détecter un <dialog>
non modal.
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 en mode plein écran. Prenons l'exemple de cet élément de titre composé de balises span.
<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 plages sont animées.
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%);
}
}