fr: Format /web/css using Prettier (part 5) (#14630)

mdn · Jul 27, 2023 · 8fd0c16 · 8fd0c16
1 parent dbb1ce2
commit 8fd0c16
Show file tree

Hide file tree

Showing 100 changed files with 1,624 additions and 1,131 deletions.
diff --git a/files/fr/web/css/css_transforms/using_css_transforms/index.md b/files/fr/web/css/css_transforms/using_css_transforms/index.md
diff --git a/files/fr/web/css/css_transitions/using_css_transitions/index.md b/files/fr/web/css/css_transitions/using_css_transitions/index.md
@@ -73,29 +73,37 @@ Avec cette feuille de style, on opère une transition CSS sur la taille de polic
 
 ```html hidden
 <body>
-    <p>La boîte ci-dessous utilise des transitions pour les propriétés : width, height, background-color, transform. Survolez la boîte pour voir les animations.</p>
-    <div class="box">Sample</div>
+  <p>
+    La boîte ci-dessous utilise des transitions pour les propriétés : width,
+    height, background-color, transform. Survolez la boîte pour voir les
+    animations.
+  </p>
+  <div class="box">Sample</div>
 </body>
 ```
 
 #### CSS Content
 
 ```css
 .box {
-    border-style: solid;
-    border-width: 1px;
-    display: block;
-    width: 100px;
-    height: 100px;
-    background-color: #0000FF;
-    transition: width 2s, height 2s, background-color 2s, transform 2s;
+  border-style: solid;
+  border-width: 1px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: #0000ff;
+  transition:
+    width 2s,
+    height 2s,
+    background-color 2s,
+    transform 2s;
 }
 
 .box:hover {
-    background-color: #FFCCCC;
-    width: 200px;
-    height: 200px;
-    transform: rotate(180deg);
+  background-color: #ffcccc;
+  width: 200px;
+  height: 200px;
+  transform: rotate(180deg);
 }
 ```
 
@@ -112,12 +120,16 @@ Avec cette feuille de style, on opère une transition CSS sur la taille de polic
   display: block;
   width: 100px;
   height: 100px;
-  background-color: #0000FF;
-  transition: width 2s, height 2s, background-color 2s, transform 2s;
+  background-color: #0000ff;
+  transition:
+    width 2s,
+    height 2s,
+    background-color 2s,
+    transform 2s;
 }
 
 .box:hover {
-  background-color: #FFCCCC;
+  background-color: #ffcccc;
   width: 200px;
   height: 200px;
   transform: rotate(180deg);
@@ -127,8 +139,10 @@ Avec cette feuille de style, on opère une transition CSS sur la taille de polic
 #### HTML
 
 ```html
-<p>Cette boîte utilisera des transitions pour width, height, background-color, transform.
-   Survolez cette boîte pour voir l'effet.</p>
+<p>
+  Cette boîte utilisera des transitions pour width, height, background-color,
+  transform. Survolez cette boîte pour voir l'effet.
+</p>
 <div class="box"></div>
 ```
 
@@ -160,8 +174,8 @@ De même, si la liste est trop longue par rapport à {{cssxref("transition-prope
 
 ```css
 div {
- transition-property: opacity, left;
- transition-duration: 3s, 5s, 2s, 1s;
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
 }
 ```
 
@@ -252,11 +266,15 @@ Les transitions permettent de lisser les opérations effectuées avec JavaScript
 Avec JavaScript, on peut ajouter un effet de mouvement sur la balle :
 
 ```js
-var f = document.getElementById('foo');
-document.addEventListener('click', function(ev){
-    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
-    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
-},false);
+var f = document.getElementById("foo");
+document.addEventListener(
+  "click",
+  function (ev) {
+    f.style.transform = "translateY(" + (ev.clientY - 25) + "px)";
+    f.style.transform += "translateX(" + (ev.clientX - 25) + "px)";
+  },
+  false,
+);
 ```
 
 Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :

diff --git a/files/fr/web/css/cursor/index.md b/files/fr/web/css/cursor/index.md
@@ -21,8 +21,12 @@ cursor: auto;
 cursor: url(hand.cur), pointer;
 
 /* Une valeur d'URL avec des coordonnées et un mot-clé par défaut */
-cursor: url(cursor1.png) 4 12, auto;
-cursor: url(cursor2.png) 2 2, pointer;
+cursor:
+  url(cursor1.png) 4 12,
+  auto;
+cursor:
+  url(cursor2.png) 2 2,
+  pointer;
 
 /* Valeurs globales */
 cursor: inherit;
@@ -37,7 +41,10 @@ Chaque `<url>` peut éventuellement être suivi par un couple de nombres sépar
 Par exemple, on peut indiquer deux images grâce à deux valeurs `<url>` et fournir des coordonnées `<x><y>` pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé `progress` :
 
 ```css
-cursor: url(one.svg), url(two.svg) 5 5, progress;
+cursor:
+  url(one.svg),
+  url(two.svg) 5 5,
+  progress;
 ```
 
 ### Valeurs
@@ -384,13 +391,9 @@ Pour plus d'informations, voir le tableau de compatibilité ci-après.
 ### HTML
 
 ```html
-<p class="toto">
-  On dirait qu'on pourrait sélectionner une zone.
-</p>
+<p class="toto">On dirait qu'on pourrait sélectionner une zone.</p>
 
-<p class="truc">
-  Et là on peut zoomer.
-</p>
+<p class="truc">Et là on peut zoomer.</p>
 ```
 
 ### Résultat

diff --git a/files/fr/web/css/descendant_combinator/index.md b/files/fr/web/css/descendant_combinator/index.md
@@ -21,7 +21,9 @@ Techniquement, le combinateur de descendance est représenté par un ou plusieur
 ## Syntaxe
 
 ```css
-selecteur1 selecteur2 { /* déclarations CSS */ }
+selecteur1 selecteur2 {
+  /* déclarations CSS */
+}
 ```
 
 ## Exemples

diff --git a/files/fr/web/css/direction/index.md b/files/fr/web/css/direction/index.md
@@ -59,9 +59,8 @@ blockquote {
 
 ```html
 <blockquote>
-  Du reste, depuis son bain dans la mare aux larmes,
-  tout était changé&nbsp;: la salle, la table de verre, et
-  la petite porte avaient complétement disparu.
+  Du reste, depuis son bain dans la mare aux larmes, tout était changé&nbsp;: la
+  salle, la table de verre, et la petite porte avaient complétement disparu.
 </blockquote>
 ```
 

diff --git a/files/fr/web/css/display-inside/index.md b/files/fr/web/css/display-inside/index.md
@@ -55,7 +55,7 @@ Dans l'exemple qui suit, la boîte parente est ciblée avec `display: flow-root`
   width: 200px;
   height: 150px;
   background-color: white;
-  border:1px solid black;
+  border: 1px solid black;
   padding: 10px;
 }
 ```

diff --git a/files/fr/web/css/display-listitem/index.md b/files/fr/web/css/display-listitem/index.md
@@ -6,7 +6,7 @@ translation_of: Web/CSS/display-listitem
 
 {{CSSRef}}
 
-Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker`  dont le contenu est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément.
+Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker` dont le contenu est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément.
 
 ## Syntaxe
 

diff --git a/files/fr/web/css/display-outside/index.md b/files/fr/web/css/display-outside/index.md
@@ -48,8 +48,7 @@ span {
 ### HTML
 
 ```html
-<span>span 1</span>
-<span>span 2</span>
+<span>span 1</span> <span>span 2</span>
 ```
 
 ### Résultat

diff --git a/files/fr/web/css/display/index.md b/files/fr/web/css/display/index.md
@@ -128,12 +128,8 @@ En plus de l'exemple qui suit, vous pouvez voir d'autres exemples sur les sectio
 ### HTML
 
 ```html
-<p>
-  Texte visible
-</p>
-<p class="secret">
-  Texte invisible
-</p>
+<p>Texte visible</p>
+<p class="secret">Texte invisible</p>
 ```
 
 ### CSS

diff --git a/files/fr/web/css/easing-function/index.md b/files/fr/web/css/easing-function/index.md
@@ -205,7 +205,11 @@ div > div {
   width: 50px;
   height: 50px;
   background-color: blue;
-  background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4));
+  background-image: radial-gradient(
+    circle at 10px 10px,
+    rgba(25, 255, 255, 0.8),
+    rgba(25, 255, 255, 0.4)
+  );
   border-radius: 50%;
   top: 25px;
   animation: 1.5s infinite alternate;
@@ -237,7 +241,7 @@ const startBtn = document.querySelector("button");
 const divElem = document.querySelector("div > div");
 
 startBtn.addEventListener("click", () => {
-  if(startBtn.textContent === "Démarrer l'animation") {
+  if (startBtn.textContent === "Démarrer l'animation") {
     divElem.style.animationName = "move-right";
     startBtn.textContent = "Arrêter l'animation";
     divElem.style.animationTimingFunction = selectElem.value;

diff --git a/files/fr/web/css/element/index.md b/files/fr/web/css/element/index.md
@@ -34,7 +34,6 @@ element(id)
   width: 400px;
   height: 400px;
   background: -moz-element(#monArrierePlan) no-repeat;
-
 }
 
 .paragraphe {
@@ -43,7 +42,7 @@ element(id)
   color: white;
 }
 
-#monArrierePlan{
+#monArrierePlan {
   width: 1024px;
   height: 1024px;
   background-image: linear-gradient(to right, red, orange, yellow, white);
@@ -58,21 +57,17 @@ element(id)
 
 ```html
 <div class="exemple">
-  <p>
-    Cet élément utilise l'élément
-    #monArrierePlan comme image
-    de fond !
-  </p>
+  <p>Cet élément utilise l'élément #monArrierePlan comme image de fond !</p>
 </div>
 
 <div class="cache">
   <div id="monArrierePlan">
-    <p class="paragraphe">
-      Et voici un texte inscrit sur
-      l'arrière-plan.
-    </p>
-  <div>
-<div>
+    <p class="paragraphe">Et voici un texte inscrit sur l'arrière-plan.</p>
+    <div>
+      <div></div>
+    </div>
+  </div>
+</div>
 ```
 
 #### Résultat
@@ -104,9 +99,7 @@ Pour les navigateurs qui prennent en charge `element`, on peut ici voir un arri
 <div class="exemple"></div>
 
 <div class="cache">
-  <button id="monArrierePlan" type="button">
-    Méchant bouton
-  </button>
+  <button id="monArrierePlan" type="button">Méchant bouton</button>
 </div>
 ```
 

diff --git a/files/fr/web/css/empty-cells/index.md b/files/fr/web/css/empty-cells/index.md
@@ -48,24 +48,24 @@ Cette propriété se définit avec l'un des mots-clés suivants.
 
 ```html
 <table class="table_1">
-    <tr>
-        <td>Jean</td>
-        <td>Biche</td>
-    </tr>
-    <tr>
-        <td>Alice</td>
-        <td></td>
-    </tr>
+  <tr>
+    <td>Jean</td>
+    <td>Biche</td>
+  </tr>
+  <tr>
+    <td>Alice</td>
+    <td></td>
+  </tr>
 </table>
 <table class="table_2">
-    <tr>
-        <td>Jean</td>
-        <td>Biche</td>
-    </tr>
-    <tr>
-        <td>Alice</td>
-        <td></td>
-    </tr>
+  <tr>
+    <td>Jean</td>
+    <td>Biche</td>
+  </tr>
+  <tr>
+    <td>Alice</td>
+    <td></td>
+  </tr>
 </table>
 ```
 
@@ -79,7 +79,8 @@ Cette propriété se définit avec l'un des mots-clés suivants.
   empty-cells: hide;
 }
 
-td, th {
+td,
+th {
   border: 1px solid #999;
   padding: 0.5rem;
 }