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

La propriété order définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de order. Les éléments ayant la même valeur pour order seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document.

- -
{{EmbedInteractiveExample("pages/css/order.html")}}
- -
-

Note : order est uniquement conçue pour affecter l'ordre visuel. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. order ne doit pas être utilisée avec les média non visuels comme les informations vocales.

-
- -

Syntaxe

- -
/* Valeurs entières (type <integer>) */
-/* positives ou négatives */
-order: 5;
-order: -5;
-
-/* Valeurs globales */
-order: inherit;
-order: initial;
-order: unset;
-
- -

Valeurs

- -
-
<integer>
-
Un nombre entier (cf. {{cssxref("<integer>")}}) indiquant l'ordre à appliquer pour l'élément.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<div id='main'>
-   <article>Lorem ipsum</article>
-   <nav> consectetur adipisicing elit, sed do eiusmod</nav>
-   <aside>tempor incididunt ut labore et dolore magna</aside>
-</div>
- -

CSS

- -

Grâce à ces déclarations CSS, on crée un disposition avec deux barres entourant un bloc de contenu. Le module de disposition des boîtes flexibles crée des bloc de tailles verticales égales et utilise autant d'espace horizontal qu'il y en a de disponible.

- -
#main {
-  display: flex;
-}
-
-#main > article {
-  flex:1;
-  order: 2;
-  border: 1px dotted orange;
-}
-
-#main > nav {
-  width: 200px;
-  order: 1;
-  border: 1px dotted blue;
-}
-
-#main > aside {
-  width: 200px;
-  order: 3;
-  border: 1px dotted blue;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Accessibilité

- -

La propriété order créera une incohérence entre l'ordre de présentation visuelle et celui du DOM. Cela aura un impact négatif pour les utilisateurs avec des troubles de la vision et qui utilisent des outils d'assistance comme les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.order")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/order/index.md b/files/fr/web/css/order/index.md new file mode 100644 index 0000000000..e41e565c0f --- /dev/null +++ b/files/fr/web/css/order/index.md @@ -0,0 +1,126 @@ +--- +title: order +slug: Web/CSS/order +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/order +--- +
{{CSSRef}}
+ +

La propriété order définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de order. Les éléments ayant la même valeur pour order seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document.

+ +
{{EmbedInteractiveExample("pages/css/order.html")}}
+ +
+

Note : order est uniquement conçue pour affecter l'ordre visuel. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. order ne doit pas être utilisée avec les média non visuels comme les informations vocales.

+
+ +

Syntaxe

+ +
/* Valeurs entières (type <integer>) */
+/* positives ou négatives */
+order: 5;
+order: -5;
+
+/* Valeurs globales */
+order: inherit;
+order: initial;
+order: unset;
+
+ +

Valeurs

+ +
+
<integer>
+
Un nombre entier (cf. {{cssxref("<integer>")}}) indiquant l'ordre à appliquer pour l'élément.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<div id='main'>
+   <article>Lorem ipsum</article>
+   <nav> consectetur adipisicing elit, sed do eiusmod</nav>
+   <aside>tempor incididunt ut labore et dolore magna</aside>
+</div>
+ +

CSS

+ +

Grâce à ces déclarations CSS, on crée un disposition avec deux barres entourant un bloc de contenu. Le module de disposition des boîtes flexibles crée des bloc de tailles verticales égales et utilise autant d'espace horizontal qu'il y en a de disponible.

+ +
#main {
+  display: flex;
+}
+
+#main > article {
+  flex:1;
+  order: 2;
+  border: 1px dotted orange;
+}
+
+#main > nav {
+  width: 200px;
+  order: 1;
+  border: 1px dotted blue;
+}
+
+#main > aside {
+  width: 200px;
+  order: 3;
+  border: 1px dotted blue;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Accessibilité

+ +

La propriété order créera une incohérence entre l'ordre de présentation visuelle et celui du DOM. Cela aura un impact négatif pour les utilisateurs avec des troubles de la vision et qui utilisent des outils d'assistance comme les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.order")}}

+ +

Voir aussi

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