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/display-box/index.md | 119 +++++++++++++++++----------------- 1 file changed, 60 insertions(+), 59 deletions(-) (limited to 'files/fr/web/css/display-box') diff --git a/files/fr/web/css/display-box/index.md b/files/fr/web/css/display-box/index.md index 3c1c278420..5846c64b47 100644 --- a/files/fr/web/css/display-box/index.md +++ b/files/fr/web/css/display-box/index.md @@ -7,100 +7,101 @@ tags: - Type de donnée translation_of: Web/CSS/display-box --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

Syntaxe

+## 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")}}.
-
+- `contents` {{Experimental_Inline}} -

Syntaxe formelle

+ - : 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](https://drafts.csswg.org/css-display/#unbox) 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

+## Exemples -

display: none

+### `display: none` -

CSS

+#### CSS -
p.secret {
+```css
+p.secret {
   display: none;
-}
+} +``` -

HTML

+#### HTML -
<p>Texte visible</p>
-<p class="secret">Texte invisible</p>
+```html +

Texte visible

+

Texte invisible

+``` -

Résultat

+#### Résultat -

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

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

display: contents

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

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

+#### CSS -
.outer {
+```css
+.outer {
   border: 2px solid red;
   width: 300px;
   display: contents;
 }
 
-.outer > div {
+.outer > div {
   border: 1px solid green;
 }
-
+``` + +#### HTML + +```html +
+
Inner div.
+
+``` -

HTML

+#### Résultat -
<div class="outer">
-  <div>Inner div.</div>
-</div>
-
+{{EmbedLiveSample("Display_contents", 300, 60)}} -

Résultat

+## Accessibilité -

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

+Via leur implémentation, la plupart des navigation retireront un élément de [l'arbre d'accessibilité](/fr/docs/Apprendre/a11y/What_is_accessibility) 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](https://drafts.csswg.org/css-display/#the-display-properties). -

Accessibilité

+- [Améliorer l'accessibilité du contenu avec `display: contents`, par Hidde de Vries (en anglais)](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents) +- [`display: contents` n'est pas un outil de réinitialisation CSS, par Adrian Roselli (en anglais)](http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html) -

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

Compatibilité des navigateurs

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

Prise en charge contents

+## Voir aussi -

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

+- {{CSSxRef("display")}} -

Voir aussi

+ - {{CSSxRef("<display-outside>")}} + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-internal>")}} + - {{CSSxRef("<display-legacy>")}} - +- [`display: contents` n'est pas un outil de réinitialisation CSS (en anglais)](http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html) +- [Un balisage plus accessible avec `display: contents` (en anglais)](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents) -- cgit v1.2.3-54-g00ecf