`::backdrop` - Sélecteur CSS

::backdrop

Résumé des caractéristiques du sélecteur `::backdrop`

Description rapide

Pseudo-élément ciblant l'élément ajouté par les navigateurs en arrière des boites de dialogue ou des éléments affichés en plein écran.

Statut

Standard

Valeurs prédéfinies

dialog | fullscreen

Module W3C

Sélecteurs

Pseudo-élément `::backdrop` - Description

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 Touche CMD Mac Intosh +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();
	}
	function closeDialog(element) {
		element.close();
	}

Reportez-vous aussi à la page sur la pseudo-classe :fullscreen qui cible les éléments affichés en plein écran.

Pseudo-élément `::backdrop` - Exemples d'utilisation.

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.

Exemple avec le pseudo-élément ::backdrop

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.