Update various French border and list style pages (#3554)

* Update various fr border and list style pages

* minor typofix and nitpicking

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 77 insertions, 47 deletions

diff --git a/files/fr/web/css/list-style/index.md b/files/fr/web/css/list-style/index.md
index f71aa35d3d..4c1b0876f0 100644
--- a/files/fr/web/css/list-style/index.md
+++ b/files/fr/web/css/list-style/index.md
@@ -1,19 +1,24 @@
 ---
 title: list-style
 slug: Web/CSS/list-style
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/list-style
+browser-compat: css.properties.list-style
 ---
 {{CSSRef}}
 
-La propriété **`list-style`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) qui permet de définir {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} et {{cssxref("list-style-position")}}.
+La propriété **`list-style`** est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de définir [`list-style-type`](/fr/docs/Web/CSS/list-style-type), [`list-style-image`](/fr/docs/Web/CSS/list-style-image) et [`list-style-position`](/fr/docs/Web/CSS/list-style-position).
 
 {{EmbedInteractiveExample("pages/css/list-style.html")}}
 
-> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}` : list-item``; `}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).
+> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels [`display`](/fr/docs/Web/CSS/display) vaut `list-item`). [Par défaut](https://www.w3.org/TR/html5/rendering.html#lists), cela inclut les éléments [`<li>`](/fr/docs/Web/HTML/Element/li). Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à [`<ol>`](/fr/docs/Web/HTML/Element/ol) ou à [`<ul>`](/fr/docs/Web/HTML/Element/ul)).
+
+## Propriétés détaillées correspondantes
+
+Cette propriété est une propriété raccourcie pour les propriétés CSS&nbsp;:
+
+- [`list-style-image`](/fr/docs/Web/CSS/list-style-image)
+- [`list-style-position`](/fr/docs/Web/CSS/list-style-position)
+- [`list-style-type`](/fr/docs/Web/CSS/list-style-type)
 
 ## Syntaxe
 
@@ -33,46 +38,82 @@ list-style: georgian inside;
 /* type | image | position */
 list-style: lower-roman url('../img/etoile.png') outside;
 
+
+/* Valeur avec un mot-clé */
 list-style: none;
 
 /* Valeurs globales */
 list-style: inherit;
 list-style: initial;
+list-style: revert;
 list-style: unset;
 ```
 
-### Valeurs
+Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si [`list-style-type`](/fr/docs/Web/CSS/list-style-type) et [`list-style-image`](/fr/docs/Web/CSS/list-style-image) sont tous les deux définis, `list-style-type` sera utilisé si l'image est indisponible.
 
-Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si {{cssxref("list-style-type")}} et {{cssxref("list-style-image")}} sont tous les deux définis, `list-style-type` sera utilisé si l'image est indisponible.
+### Valeurs
 
-- `<'list-style-type'>`
-  - : Voir {{cssxref("list-style-type")}}
-- `<'list-style-image'>`
-  - : Voir {{cssxref("list-style-image")}}
-- `<'list-style-position'>`
-  - : Voir {{cssxref("list-style-position")}}
+- [`list-style-type`](/fr/docs/Web/CSS/list-style-type)
+  - : Voir [`list-style-type`](/fr/docs/Web/CSS/list-style-type).
+- [`list-style-image`](/fr/docs/Web/CSS/list-style-image)
+  - : Voir [`list-style-image`](/fr/docs/Web/CSS/list-style-image).
+- [`list-style-position`](/fr/docs/Web/CSS/list-style-position)
+  - : Voir [`list-style-position`](/fr/docs/Web/CSS/list-style-position).
 - `none`
   - : Aucun style n'est utilisé.
 
-### Syntaxe formelle
+## Accessibilité
 
-{{csssyntax}}
+Safari ne reconnait pas les listes non ordonnées lorsque `list-style: none` leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans).
 
-## Exemples
+La solution la plus directe est d'affecter `role="list"` à l'élément `<ul>` dans votre code HTML. Cela rajoute les valeurs sémantiques de la liste sans impacter le design.
 
-### CSS
+Pour pallier ce problème en utilisant uniquement les styles CSS, on peut ajouter un [espace sans chasse](https://fr.wikipedia.org/wiki/Espace_sans_chasse) comme [pseudo-contenu](/fr/docs/Web/CSS/content) avant chaque élément de liste afin que la liste soit correctement annoncée.
 
 ```css
-.un {
-  list-style: circle;
+ul {
+  list-style: none;
 }
 
-.deux {
-  list-style: square inside;
+ul li::before {
+  content: "\200B";
+}
+```
+
+Une autre approche consiste à affecter une valeur `url` à la propriété `list-style`&nbsp;:
+
+```css
+nav ol, nav ul {
+  list-style: none;
+}
+
+/* cela devient : */
+
+nav ol, nav ul {
+  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
 }
 ```
 
-### HTML
+N'utilisez les palliatifs CSS que dans le cas où la solution en HTML n'est pas disponible et les conséquences inattendues nuisant à l'expérience utilisateur sont écartées durant des essais.
+
+- [_'Fixing' Lists_ (en anglais)](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)
+- [_VoiceOver and_ `list-style-type: none` – _Unfettered Thoughts_ (en anglais)](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/)
+- [MDN Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_—_create_content_that_can_be_presented_in_different_ways)
+- [_Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
+
+## Définition formelle
+
+{{CSSInfo}}
+
+## Syntaxe formelle
+
+{{csssyntax}}
+
+## Exemples
+
+### Définition de list-style-type et position
+
+#### HTML
 
 ```html
 Liste 1
@@ -89,43 +130,32 @@ Liste 2
 </ul>
 ```
 
-### Résultat
-
-{{EmbedLiveSample('Exemples','auto', 220)}}
-
-## Accessibilité
-
-Safari ne reconnait pas (incorrectement) les listes non ordonnées lorsque `list-style:none` leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans). Pour pallier ce problème, on peut ajouter un [espace sans chasse](https://fr.wikipedia.org/wiki/Espace_sans_chasse) comme [pseudo-contenu](/fr/docs/Web/CSS/content) avant chaque élément de liste afin que la liste soit correctement annoncée.
+#### CSS
 
 ```css
-ul {
-  list-style: none;
+.un {
+  list-style: circle;
 }
 
-ul li::before {
-  content: "\200B";
+.deux {
+  list-style: square inside;
 }
 ```
 
-- [VoiceOver et `list-style-type: none` – Unfettered Thoughts (en anglais)](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/)
-- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
-- _[Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 ](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)_[(en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
+#### Résultat
 
-## Spécifications
+{{EmbedLiveSample('', 'auto', 220)}}
 
-| Spécification                                                                                    | État                             | Commentaires         |
-| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
-| {{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}             | {{Spec2('CSS3 Lists')}} | Aucun changement.    |
-| {{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}} | {{Spec2('CSS2.1')}}         | Définition initiale. |
+## Spécifications
 
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.list-style")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("list-style-type")}}
-- {{cssxref("list-style-image")}}
-- {{cssxref("list-style-position")}}
+- [`list-style-type`](/fr/docs/Web/CSS/list-style-type)
+- [`list-style-image`](/fr/docs/Web/CSS/list-style-image)
+- [`list-style-position`](/fr/docs/Web/CSS/list-style-position)
\ No newline at end of file