::backdrop - Sélecteur CSS
Résumé des caractéristiques du sélecteur ::backdrop
dialog
| fullscreen
Description du pseudo-élément ::backdrop
.
Lorsqu'un élément est affiché en plein écran ou en modal (boîte de dialogue), le navigateur insère derrière lui un élément opaque
aussi grand que le viewport. Ceci afin de cacher la page qui se trouve derrière.
Le pseudo-élément ::backdrop
cible cet élément ajouté par le navigateur.
Attention ! On parle bien d'éléments de la page affichés en plein écran, et pas de la fenêtre du navigateur (qui peut passer
en plein écran par un appui sur la touche F11
sur Windows ou +F
sur MacIntosh).
L'affichage en plein écran ou l'ouverture d'une boîte de dialogue sont généralement réalisés par un code Javascript dont voici un exemple ci-dessous :
function fullScreen(element) {
element.requestFullscreen();
}
function openDialog(element) {
element.showModal();
}
funcion closeDialog(element) {
element.close();
}
Reportez-vous aussi à la page sur la pseudo-classe :fullscreen
qui cible les éléments affichés en plein écran.
Exemples d'utilisation de ::backdrop
.
Un clic sur l'image ci-dessous l'affiche en plein écran (la touche echap
lui redonne sa taille initiale).
Le pseudo-élément ::backdrop
a été utilisé pour définir le fond en arrière de l'image lorsque celle-ci est affichée
en plein écran.
Ce deuxième exemple concerne une boite de dialogue (balise dialog de HTML) qui peut être affichée en modal par
le bouton .
Les styles appliqués au pseudo-élément ::backdrop
estompent la page en arrière-plan.
Compatibilité des navigateurs.
Le pseudo-élément ::backdrop
est correctement reconnu par les navigateurs.
::backdrop
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi : pseudo-classes relatives à l'état d'affichage.
Les pseudo-classes ci-dessous permettent de désigner un élément en fonction de son mode d'affichage : plein-écran, dans une fenêtre séparée, etc.
:open
::closed
::modal
::fullscreen
::picture-in-picture
:
Pseudo-classe désignant un élément pouvant être soit ouvert, soit fermé, comme
Pseudo-classe désignant un élément pouvant être soit ouvert, soit fermé, comme un menu
Pseudo-classe désignant les éléments qui bloquent les interactions avec les autres éléments.
Pseudo-classe désignant les éléments affichés en plein écran.
Pseudo classe désignant un élément (le plus souvent une vidéo) affiché dans une fenêtre ne défilant pas avec le reste de la page.