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.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

En savoir plus
Voir la compatibilité complète

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