::backdrop
Baseline
Widely available
*
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.
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
::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 via un appel àHTMLDialogElement.showModal(). - Les éléments Popover qui ont été affichés dans la couche supérieure via 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.
/* 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 styliser 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 styliser l'arrière-plan utilisé lorsqu'un modal <dialog> est affiché.
HTML
Nous incluons un <button> qui, lorsqu'il est cliqué, ouvrira le <dialog> inclus. Lorsque le <dialog> est ouvert, nous donnons le focus au bouton qui ferme la boîte de dialogue :
<dialog>
<button autofocus>Fermer</button>
<p>Cette boîte de dialogue a un bel arrière-plan !</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 :
::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();
});
Résultat
Spécifications
| Specification |
|---|
| CSS Positioned Layout Module Level 4 # backdrop |
Compatibilité des navigateurs
Chargement…
Voir aussi
- La pseudo-classe
:fullscreen - L'élément HTML
<dialog> - L'API Fullscreen
- L'attribut HTML global
popover - L'API Popover