::backdrop

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

* Some parts of this feature may have varying levels of support.

Le pseudo-élément ::backdrop est une boîte de la taille de la zone d'affichage (viewport) qui est affichée immédiatement sous un élément lorsque ce dernier est affiché en plein écran. Cela correspond aux éléments passés en plein écran via l'API Fullscreen et aux éléments <dialog>.

Lorsque plusieurs éléments sont en plein écran, ce pseudo-élément est dessiné derrière l'élément qui est le plus en avant et par dessus les autres éléments.

css
// Cette ombre n'est affichée que lorsque la boîte de dialogue
// est ouverte avec dialog.showModal()
dialog::backdrop {
  background: rgba(255,0,0,.25);
}

Note : L'élément ::backdrop peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.

Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.

Syntaxe

Error: could not find syntax for this item

Exemples

Dans cet exemple, on indique que l'ombre derrière la vidéo en plein écran doit être bleu-gris plutôt que noire.

css
video::backdrop {
  background-color: #448;
}

Voici le résultat obtenu :

On peut voir ici les bandes bleu-gris au dessus et en dessous de la vidéo alors que la zone est normalement noire.

Vous pouvez voir cette démonstration en live ou voir et modifier le code sur Glitch.

Spécifications

Specification
CSS Positioned Layout Module Level 4
# backdrop

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::backdrop
Support on dialog elements
Fullscreen support
Backdrop elements inherit their values from its originating element
Support on popovers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi