::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
Voir aussi
- La pseudo-classe
:fullscreen - L'élément HTML
<dialog> - L'API Fullscreen
- L'attribut HTML global
popover - L'API Popover