fr: Format /web/css using Prettier (part 2) (#14625)

mdn · Jul 27, 2023 · 840f419 · 840f419
1 parent b06a9c5
commit 840f419
Show file tree

Hide file tree

Showing 100 changed files with 711 additions and 419 deletions.
diff --git a/files/fr/web/css/--_star_/index.md b/files/fr/web/css/--_star_/index.md
@@ -32,8 +32,12 @@ La portée des propriétés personnalisées est celle des éléments sur lesquel
 ### HTML
 
 ```html
-<p id="premierParagraphe">Ce paragraphe devrait être sur fond bleu avec un texte jaune.</p>
-<p id="secondParagraphe">Ce paragraphe devrait être sur fond jaune avec un texte bleu.</p>
+<p id="premierParagraphe">
+  Ce paragraphe devrait être sur fond bleu avec un texte jaune.
+</p>
+<p id="secondParagraphe">
+  Ce paragraphe devrait être sur fond jaune avec un texte bleu.
+</p>
 ```
 
 ### CSS

diff --git a/files/fr/web/css/-moz-float-edge/index.md b/files/fr/web/css/-moz-float-edge/index.md
@@ -60,10 +60,7 @@ La propriété **`-moz-float-edge`** définit si les propriétés de hauteur et
 
 ```html
 <div class="box">
-   <p>
-      Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit.
-   </p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 </div>
 ```
 

diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.md b/files/fr/web/css/-moz-force-broken-image-icon/index.md
@@ -37,7 +37,7 @@ img {
 ### HTML
 
 ```html
-<img src='/lien/vers/image/cassée.png' alt='Un lien vers une image cassée'>
+<img src="/lien/vers/image/cassée.png" alt="Un lien vers une image cassée" />
 ```
 
 ### Résultat

diff --git a/files/fr/web/css/-moz-image-rect/index.md b/files/fr/web/css/-moz-image-rect/index.md
@@ -16,7 +16,7 @@ La propriété **`-moz-image-rect`** permet d'utiliser une seule partie d'une im
 
 ### Valeurs
 
-- [`url()`](/fr/docs/Web/CSS/url())
+- [`url()`](</fr/docs/Web/CSS/url()>)
   - : L'URI de l'image dont on veut obtenir une portion.
 - `top`
   - : La coordonnée du bord haut de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche.
@@ -95,15 +95,19 @@ Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessin
 
 ```js
 function rotate() {
-  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+  var prevStyle = window
+    .getComputedStyle(document.getElementById("box4"), null)
+    .getPropertyValue("background-image");
 
   // Récupérer le style du dernier élément, puis faire tourner les images
 
-  for (var i=1; i<=4; i++) {
+  for (var i = 1; i <= 4; i++) {
     var curId = "box" + i;
 
     // Décaler les images d'arrière-plan
-    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    var curStyle = window
+      .getComputedStyle(document.getElementById(curId), null)
+      .getPropertyValue("background-image");
     document.getElementById(curId).style.backgroundImage = prevStyle;
     prevStyle = curStyle;
   }

diff --git a/files/fr/web/css/-moz-orient/index.md b/files/fr/web/css/-moz-orient/index.md
@@ -33,15 +33,12 @@ La propriété `moz-orient` est définie avec un mot-clé parmi ceux de la liste
 
 ```html
 <p>
-  La barre de progression suivante est
-  horizontale (le comportement par défaut) :
+  La barre de progression suivante est horizontale (le comportement par défaut)
+  :
 </p>
 <progress max="100" value="75"></progress>
 
-<p>
-  La barre de progression suivante
-  est verticale :
-</p>
+<p>La barre de progression suivante est verticale :</p>
 <progress class="vert" max="100" value="75"></progress>
 ```
 

diff --git a/files/fr/web/css/-moz-user-focus/index.md b/files/fr/web/css/-moz-user-focus/index.md
@@ -41,7 +41,9 @@ En utilisant la valeur `ignore`, on peut désactiver la prise de focus sur l'él
 ### HTML
 
 ```html
-<input class="ignored" value="L'utilisateur ne peut pas placer le focus sur cet élément.">
+<input
+  class="ignored"
+  value="L'utilisateur ne peut pas placer le focus sur cet élément." />
 ```
 
 ### CSS

diff --git a/files/fr/web/css/-webkit-line-clamp/index.md b/files/fr/web/css/-webkit-line-clamp/index.md
@@ -52,8 +52,9 @@ Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au mil
 
 ```html
 <p>
-  Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui signifie que le texte sera rogné après trois lignes.
-  Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped.
+  Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui
+  signifie que le texte sera rogné après trois lignes. Une ellipse sera affichée
+  au n ellipsis will be shown at the point where the text is clamped.
 </p>
 ```
 

diff --git a/files/fr/web/css/-webkit-mask-attachment/index.md b/files/fr/web/css/-webkit-mask-attachment/index.md
@@ -41,7 +41,7 @@ Si la propriété {{cssxref("-webkit-mask-image")}} est définie, **`-webkit-mas
 
 ```css
 body {
-  -webkit-mask-image: url('images/mask.png');
+  -webkit-mask-image: url("images/mask.png");
   -webkit-mask-attachment: fixed;
 }
 ```

diff --git a/files/fr/web/css/-webkit-mask-box-image/index.md b/files/fr/web/css/-webkit-mask-box-image/index.md
@@ -55,11 +55,11 @@ Où :
 
 ```css
 .exempleUn {
-  -webkit-mask-box-image: url('mask.png');
+  -webkit-mask-box-image: url("mask.png");
 }
 
 .exempleDeux {
-  -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
+  -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
 }
 ```
 

diff --git a/files/fr/web/css/-webkit-mask-composite/index.md b/files/fr/web/css/-webkit-mask-composite/index.md
@@ -65,7 +65,7 @@ La propriété **`-webkit-mask-composite`** définit la façon dont plusieurs im
 
 ```css
 .exemple {
-  -webkit-mask-image: url(mask1.png), url('mask2.png');
+  -webkit-mask-image: url(mask1.png), url("mask2.png");
   -webkit-mask-composite: xor, source-over;
 }
 ```

diff --git a/files/fr/web/css/-webkit-mask-position-x/index.md b/files/fr/web/css/-webkit-mask-position-x/index.md
@@ -25,7 +25,10 @@ La propriété **`-webkit-mask-position-x`** permet de définir la position hori
 -webkit-mask-position-x: -1cm;
 
 /* Gestion de plusieurs valeurs */
--webkit-mask-position-x: 50px, 25%, -3em;
+-webkit-mask-position-x:
+  50px,
+  25%,
+  -3em;
 
 /* Valeurs globales */
 -webkit-mask-position-x: inherit;

diff --git a/files/fr/web/css/-webkit-mask-position-y/index.md b/files/fr/web/css/-webkit-mask-position-y/index.md
@@ -25,7 +25,10 @@ La propriété **`-webkit-mask-position-y`** permet de définir la position vert
 -webkit-mask-position-y: -1cm;
 
 /* Gestion de plusieurs valeurs */
--webkit-mask-position-y: 50px, 25%, -3em;
+-webkit-mask-position-y:
+  50px,
+  25%,
+  -3em;
 
 /* Valeurs globales */
 -webkit-mask-position-y: inherit;

diff --git a/files/fr/web/css/-webkit-mask-repeat-x/index.md b/files/fr/web/css/-webkit-mask-repeat-x/index.md
@@ -45,12 +45,12 @@ La propriété **`-webkit-mask-repeat-x`** définit la façon dont une image de
 
 ```css
 .exempleun {
-  -webkit-mask-image: url('mask.png');
+  -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-x: repeat;
 }
 
 .exempledeux {
-  -webkit-mask-image: url('mask.png');
+  -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-x: no-repeat;
 }
 ```
@@ -61,7 +61,7 @@ On peut définir un style de répétition (`<repeat-style>`) différent pour cha
 
 ```css
 .exempletrois {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-image: url("mask1.png"), url("mask2.png");
   -webkit-mask-repeat-x: repeat, space;
 }
 ```

diff --git a/files/fr/web/css/-webkit-mask-repeat-y/index.md b/files/fr/web/css/-webkit-mask-repeat-y/index.md
@@ -45,12 +45,12 @@ La propriété **`-webkit-mask-repeat-y`** définit la façon dont une image de
 
 ```css
 .exempleun {
-  -webkit-mask-image: url('mask.png');
+  -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-y: repeat;
 }
 
 .exempledeux {
-  -webkit-mask-image: url('mask.png');
+  -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-y: no-repeat;
 }
 ```
@@ -61,7 +61,7 @@ On peut définir un style de répétition (`<repeat-style>`) différent pour cha
 
 ```css
 .exempletrois {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-image: url("mask1.png"), url("mask2.png");
   -webkit-mask-repeat-y: repeat, space;
 }
 ```

diff --git a/files/fr/web/css/-webkit-overflow-scrolling/index.md b/files/fr/web/css/-webkit-overflow-scrolling/index.md
@@ -49,14 +49,10 @@ p {
 
 ```html
 <div class="scroll-touch">
-  <p>
-    Ce paragraphe a un défilement inertiel.
-  </p>
+  <p>Ce paragraphe a un défilement inertiel.</p>
 </div>
 <div class="scroll-auto">
-  <p>
-     Pas celui-ci.
-  </p>
+  <p>Pas celui-ci.</p>
 </div>
 ```
 

diff --git a/files/fr/web/css/-webkit-text-security/index.md b/files/fr/web/css/-webkit-text-security/index.md
@@ -24,8 +24,7 @@ En utilisant un navigateur qui prend en charge cette propriété et en saisissan
 ### HTML
 
 ```html
-<label for="name">Nom :</label>
-<input type="text" name="name" id="name" />
+<label for="name">Nom :</label> <input type="text" name="name" id="name" />
 ```
 
 ### CSS

diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.md b/files/fr/web/css/-webkit-text-stroke-color/index.md
@@ -40,7 +40,7 @@ La propriété **`-webkit-text-stroke-color`** permet de définir la couleur de
 
 ```html
 <p>Texte avec un contour</p>
-<input type="color" value="#ff0000">
+<input type="color" value="#ff0000" />
 ```
 
 ### CSS
@@ -57,7 +57,7 @@ p {
 
 ```js hidden
 var colorPicker = document.querySelector("input");
-colorPicker.addEventListener("change", function(evt) {
+colorPicker.addEventListener("change", function (evt) {
   document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
 });
 ```

diff --git a/files/fr/web/css/@charset/index.md b/files/fr/web/css/@charset/index.md
@@ -31,7 +31,7 @@ Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une fe
 où
 
 - `charset`
-  - : Est une chaîne de caractères (une valeur CSS de type {{cssxref("&lt;string&gt;")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans [le registre IANA](https://www.iana.org/assignments/character-sets/character-sets.xhtml) et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec *préféré* (_preferred_) doit être utilisé.
+  - : Est une chaîne de caractères (une valeur CSS de type {{cssxref("&lt;string&gt;")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans [le registre IANA](https://www.iana.org/assignments/character-sets/character-sets.xhtml) et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec _préféré_ (_preferred_) doit être utilisé.
 
 ### Syntaxe formelle
 
@@ -42,15 +42,15 @@ où
 ### Exemples valides
 
 ```css
-@charset "UTF-8";      /* Valide, la feuille de style est encodée en Unicode UTF-8 */
+@charset "UTF-8"; /* Valide, la feuille de style est encodée en Unicode UTF-8 */
 @charset "iso-8859-15"; /* Valide, la feuille de style est encodée en Latin-9 (langues d'Europe occidentale avec le symbole €) */
 ```
 
 ### Exemples invalides
 
-```css example-bad
- @charset "UTF-8";      /* Invalide, il y a un caractère (un espace) avant la règle @ */
-@charset UTF-8;         /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS ({{cssxref("&lt;string&gt;")}}) */
+```css-nolint example-bad
+ @charset "UTF-8"; /* Invalide, il y a un caractère (un espace) avant la règle @ */
+@charset UTF-8; /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS ({{cssxref("&lt;string&gt;")}}) */
 ```
 
 ## Spécifications

diff --git a/files/fr/web/css/@color-profile/index.md b/files/fr/web/css/@color-profile/index.md
@@ -12,7 +12,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@color-profil
 
 ```css
 @color-profile --swop5c {
-  src: url('https://example.org/SWOP2006_Coated5v2.icc');
+  src: url("https://example.org/SWOP2006_Coated5v2.icc");
 }
 ```
 
@@ -39,7 +39,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@color-profil
 
 ```css
 @color-profile --swop5c {
-  src: url('https://example.org/SWOP2006_Coated5v2.icc');
+  src: url("https://example.org/SWOP2006_Coated5v2.icc");
 }
 
 .header {

diff --git a/files/fr/web/css/@counter-style/additive-symbols/index.md b/files/fr/web/css/@counter-style/additive-symbols/index.md
@@ -10,8 +10,12 @@ Le descripteur **`additive-symbols`**, utilisé pour la règle @ {{cssxref("@cou
 
 ```css
 additive-symbols: 3 "0";
-additive-symbols: 3 "0", 2 "\2E\20";
-additive-symbols: 3 "0", 2 url(symbol.png);
+additive-symbols:
+  3 "0",
+  2 "\2E\20";
+additive-symbols:
+  3 "0",
+  2 url(symbol.png);
 ```
 
 Lorsque la valeur du descripteur `system` est `cyclic`, `numeric`, `alphabetic`, `symbolic` ou `fixed`, c'est le descripteur `symbols` qui est utilisé à la place de `additive-symbols` afin de définir les symboles utilisés pour le compteur.
@@ -31,7 +35,10 @@ Lorsque la valeur du descripteur `system` est `cyclic`, `numeric`, `alphabetic`,
 ```css
 @counter-style additive-symbols-example {
   system: additive;
-  additive-symbols: V 5, IV 4, I 1;
+  additive-symbols:
+    V 5,
+    IV 4,
+    I 1;
 }
 .exemple {
   list-style: additive-symbols-example;

diff --git a/files/fr/web/css/@counter-style/fallback/index.md b/files/fr/web/css/@counter-style/fallback/index.md
@@ -33,7 +33,8 @@ fallback: custom-gangnam-style;
 
 ```css
 @counter-style fallback-example {
-  system: fixed; symbols: "\24B6" "\24B7" "\24B8";
+  system: fixed;
+  symbols: "\24B6" "\24B7" "\24B8";
   fallback: upper-alpha;
 }
 .exemple {