From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/_doublecolon_backdrop/index.html | 78 ----------------------- files/fr/web/css/_doublecolon_backdrop/index.md | 78 +++++++++++++++++++++++ 2 files changed, 78 insertions(+), 78 deletions(-) delete mode 100644 files/fr/web/css/_doublecolon_backdrop/index.html create mode 100644 files/fr/web/css/_doublecolon_backdrop/index.md (limited to 'files/fr/web/css/_doublecolon_backdrop') diff --git a/files/fr/web/css/_doublecolon_backdrop/index.html b/files/fr/web/css/_doublecolon_backdrop/index.html deleted file mode 100644 index 4a5d8fae17..0000000000 --- a/files/fr/web/css/_doublecolon_backdrop/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: '::backdrop' -slug: Web/CSS/::backdrop -tags: - - CSS - - Pseudo-element - - Reference -translation_of: Web/CSS/::backdrop ---- -
{{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")}}.

- -

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

- -{{CSSSyntax}} - -

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ÉtatCommentaires
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_backdrop/index.md b/files/fr/web/css/_doublecolon_backdrop/index.md new file mode 100644 index 0000000000..4a5d8fae17 --- /dev/null +++ b/files/fr/web/css/_doublecolon_backdrop/index.md @@ -0,0 +1,78 @@ +--- +title: '::backdrop' +slug: Web/CSS/::backdrop +tags: + - CSS + - Pseudo-element + - Reference +translation_of: Web/CSS/::backdrop +--- +
{{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")}}.

+ +

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

+ +{{CSSSyntax}} + +

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ÉtatCommentaires
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf