::backdrop

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.

// 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

::backdrop

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.

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

Spécification État Commentaires
Fullscreen API
La définition de '::backdrop' dans cette spécification.
Standard évolutif Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
::backdrop
Expérimentale
Chrome Support complet 37
Support complet 37
Support complet 32
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Préfixée
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Support complet 47IE Support complet 11
Préfixée
Support complet 11
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 24
Support complet 24
Support complet 19
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Aucun support NonWebView Android Support complet 37
Support complet 37
Support complet ≤37
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 37
Support complet 37
Support complet 32
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 47Opera Android Support complet 24
Support complet 24
Support complet 19
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Aucun support NonSamsung Internet Android ?
Support on dialog elements
Expérimentale
Chrome Support complet 32Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 19Safari Aucun support NonWebView Android Support complet ≤37Chrome Android Support complet 32Firefox Android Aucun support NonOpera Android Support complet 19Safari iOS Aucun support NonSamsung Internet Android ?
Fullscreen support
Expérimentale
Chrome Aucun support NonEdge Support complet 12Firefox Support complet 47IE Support complet 11Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 47Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi