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/display-box/index.html | 106 -------------------------------- files/fr/web/css/display-box/index.md | 106 ++++++++++++++++++++++++++++++++ 2 files changed, 106 insertions(+), 106 deletions(-) delete mode 100644 files/fr/web/css/display-box/index.html create mode 100644 files/fr/web/css/display-box/index.md (limited to 'files/fr/web/css/display-box') diff --git a/files/fr/web/css/display-box/index.html b/files/fr/web/css/display-box/index.html deleted file mode 100644 index 3c1c278420..0000000000 --- a/files/fr/web/css/display-box/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: -slug: Web/CSS/display-box -tags: - - CSS - - Reference - - Type de donnée -translation_of: Web/CSS/display-box ---- -
{{CSSRef}}
- -

Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.

- -

Syntaxe

- -
-
contents {{Experimental_Inline}}
-
L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur contents affecte les éléments « inhabituels » tels que les éléments remplacés. Voir Appendix B: Effects of display: contents on Unusual Elements pour plus de détails.
-
- À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec display: contents sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran.
-
none
-
Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.
- Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété {{CSSxRef("visibility")}}.
-
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

display: none

- -

CSS

- -
p.secret {
-  display: none;
-}
- -

HTML

- -
<p>Texte visible</p>
-<p class="secret">Texte invisible</p>
- -

Résultat

- -

{{EmbedLiveSample("display_none", "100%", 60)}}

- -

display: contents

- -

Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec display: contents et l'élément <div> ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.

- -

CSS

- -
.outer {
-  border: 2px solid red;
-  width: 300px;
-  display: contents;
-}
-
-.outer > div {
-  border: 1px solid green;
-}
-
- -

HTML

- -
<div class="outer">
-  <div>Inner div.</div>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Display_contents", 300, 60)}}

- -

Accessibilité

- -

Via leur implémentation, la plupart des navigation retireront un élément de l'arbre d'accessibilité si celui-ci reçoit display: contents. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon la spécification CSSWG.

- - - -

Compatibilité des navigateurs

- -

Prise en charge contents

- -

{{Compat("css.properties.display.contents", 10)}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/display-box/index.md b/files/fr/web/css/display-box/index.md new file mode 100644 index 0000000000..3c1c278420 --- /dev/null +++ b/files/fr/web/css/display-box/index.md @@ -0,0 +1,106 @@ +--- +title: +slug: Web/CSS/display-box +tags: + - CSS + - Reference + - Type de donnée +translation_of: Web/CSS/display-box +--- +
{{CSSRef}}
+ +

Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.

+ +

Syntaxe

+ +
+
contents {{Experimental_Inline}}
+
L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur contents affecte les éléments « inhabituels » tels que les éléments remplacés. Voir Appendix B: Effects of display: contents on Unusual Elements pour plus de détails.
+
+ À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec display: contents sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran.
+
none
+
Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.
+ Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété {{CSSxRef("visibility")}}.
+
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

display: none

+ +

CSS

+ +
p.secret {
+  display: none;
+}
+ +

HTML

+ +
<p>Texte visible</p>
+<p class="secret">Texte invisible</p>
+ +

Résultat

+ +

{{EmbedLiveSample("display_none", "100%", 60)}}

+ +

display: contents

+ +

Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec display: contents et l'élément <div> ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.

+ +

CSS

+ +
.outer {
+  border: 2px solid red;
+  width: 300px;
+  display: contents;
+}
+
+.outer > div {
+  border: 1px solid green;
+}
+
+ +

HTML

+ +
<div class="outer">
+  <div>Inner div.</div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Display_contents", 300, 60)}}

+ +

Accessibilité

+ +

Via leur implémentation, la plupart des navigation retireront un élément de l'arbre d'accessibilité si celui-ci reçoit display: contents. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon la spécification CSSWG.

+ + + +

Compatibilité des navigateurs

+ +

Prise en charge contents

+ +

{{Compat("css.properties.display.contents", 10)}}

+ +

Voir aussi

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