From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/_doublecolon_backdrop/index.md | 72 ++++++++++--------------- 1 file changed, 29 insertions(+), 43 deletions(-) (limited to 'files/fr/web/css/_doublecolon_backdrop') diff --git a/files/fr/web/css/_doublecolon_backdrop/index.md b/files/fr/web/css/_doublecolon_backdrop/index.md index 4a5d8fae17..cf54d7149d 100644 --- a/files/fr/web/css/_doublecolon_backdrop/index.md +++ b/files/fr/web/css/_doublecolon_backdrop/index.md @@ -7,72 +7,58 @@ tags: - Reference translation_of: Web/CSS/::backdrop --- -
{{CSSRef}}
+{{CSSRef}} -

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 {{HTMLElement("dialog")}}.

+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments) **`::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](/fr/docs/Web/API/Fullscreen_API) et aux éléments {{HTMLElement("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.

+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
+```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.

-
+> **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.

+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

+## Syntaxe {{CSSSyntax}} -

Exemples

+## 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.

+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 {
+```css
+video::backdrop {
   background-color: #448;
 }
-
+``` -

Voici le résultat obtenu :

+Voici le résultat obtenu : -

+![](bbb-backdrop.png) -

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

+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.

+Vous pouvez [voir cette démonstration en _live_](https://fullscreen-requestfullscreen-demo.glitch.me/) ou [voir et modifier le code sur Glitch](https://glitch.com/edit/#!/fullscreen-requestfullscreen-demo). -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Définition initiale.
+| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}} | {{Spec2('Fullscreen')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.selectors.backdrop")}}

+{{Compat("css.selectors.backdrop")}} -

Voir aussi

+## Voir aussi - +- La pseudo-classe {{cssxref(":fullscreen")}} +- L'élément HTML {{HTMLElement("dialog")}} +- [L'API Fullscreen](/fr/docs/Web/API/Fullscreen_API) -- cgit v1.2.3-54-g00ecf