Est-ce :modal ?

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.

Navigateurs pris en charge

  • Chrome: 105
  • Edge: 105.
  • Firefox: 103.
  • Safari: 15.6

Source

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%);
  }
}