Pseudo-élément CSS `::backdrop`

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2022.

Voir la compatibilité complète
En savoir plus

Le pseudo-élément CSS ::backdrop est une boîte de la taille de la zone d'affichage, qui est rendue immédiatement sous tout élément présenté dans la couche supérieure.

Exemple interactif

button {
  font-size: 1.2rem;
  padding: 5px 15px;
}

dialog::backdrop {
  background-color: salmon;
}

<button id="showDialogBtn">Afficher la boîte de dialogue</button>

<dialog id="favDialog">
  <form method="dialog">
    <p>
      Le fond affiché en dehors de cette boîte de dialogue est un arrière-plan.
    </p>
    <button id="confirmBtn">Fermer la boîte de dialogue</button>
  </form>
</dialog>

const showDialogBtn = document.getElementById("showDialogBtn");
const favDialog = document.getElementById("favDialog");

showDialogBtn.addEventListener("click", () => favDialog.showModal());

Syntax

css

::backdrop {
  /* ... */
}

Description

Les arrière-plans apparaissent dans les cas suivants :

Les éléments qui ont été placés en mode plein écran à l'aide de la méthode Fullscreen API Element.requestFullscreen().
Les éléments <dialog> qui ont été affichés dans la couche supérieure avec un appel à HTMLDialogElement.showModal().
Les éléments Popover qui ont été affichés dans la couche supérieure avec un appel à HTMLElement.showPopover().

Lorsque plusieurs éléments ont été placés dans la couche supérieure, chacun d'eux a son propre pseudo-élément ::backdrop.

css

/* L'arrière-plan ne s'affiche que lorsque la boîte de dialogue est ouverte avec
   dialog.showModal() */
dialog::backdrop {
  background: rgb(255 0 0 / 25%);
}

Les éléments sont placés dans une pile last-in/first-out (LIFO) dans la couche supérieure. Le pseudo-élément ::backdrop permet d'obscurcir, de mettre en forme ou de cacher complètement tout ce qui se trouve en dessous d'un élément de la couche supérieure.

::backdrop n'hérite ni n'est hérité par d'autres éléments. Aucune restriction n'est imposée sur les propriétés qui s'appliquent à ce pseudo-élément.

Exemples

Mettre en forme l'arrière-plan d'une boîte de dialogue

Dans cet exemple, nous utilisons le pseudo-élément ::backdrop pour mettre en forme l'arrière-plan utilisé lorsqu'un modal <dialog> est affiché.

HTML

Nous incluons un <button> qui, lorsqu'il est cliqué, ouvre le <dialog> inclus. Lorsque le <dialog> est ouvert, nous donnons la sélection au bouton qui ferme la boîte de dialogue :

html

<dialog>
  <button autofocus>Fermer</button>
  <p>Cette boîte de dialogue a un bel arrière-plan&nbsp;!</p>
</dialog>
<button>Afficher la boîte de dialogue</button>

CSS

Nous ajoutons un arrière-plan à l'arrière-plan, créant un donut coloré à l'aide de dégradés CSS :

css

::backdrop {
  background-image:
    radial-gradient(
      circle,
      white 0 5vw,
      transparent 5vw 20vw,
      white 20vw 22.5vw,
      #eeeeee 22.5vw
    ),
    conic-gradient(
      #272b66 0 50grad,
      #2d559f 50grad 100grad,
      #9ac147 100grad 150grad,
      #639b47 150grad 200grad,
      #e1e23b 200grad 250grad,
      #f7941e 250grad 300grad,
      #662a6c 300grad 350grad,
      #9a1d34 350grad 400grad,
      #43a1cd 100grad 150grad,
      #ba3e2e
    );
}

JavaScript

La boîte de dialogue est ouverte à l'aide de la méthode .showModal() et fermée à l'aide de la méthode .close().

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// Le bouton "Afficher la boîte de dialogue" ouvre la boîte de dialogue
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// Le bouton "Fermer" ferme la boîte de dialogue
closeButton.addEventListener("click", () => {
  dialog.close();
});