Skip to content

Commit

Permalink
fr: Format /web/css using Prettier (part 7) (#14632)
Browse files Browse the repository at this point in the history
  • Loading branch information
@queengooborg
queengooborg committed Jul 27, 2023
1 parent fbe72ae commit bfca232
Show file tree
Hide file tree
Showing 59 changed files with 737 additions and 559 deletions.
4 changes: 4 additions & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ build/
/files/fr/glossary/grid_lines/index.md
/files/fr/glossary/main_axis/index.md
/files/fr/learn/server-side/django/forms/index.md
/files/fr/web/css/align-self/index.md
/files/fr/web/css/justify-content/index.md
/files/fr/web/css/place-items/index.md
/files/fr/web/css/place-self/index.md
/files/pt-br/learn/server-side/django/forms/index.md
/files/ru/learn/server-side/django/forms/index.md
/files/ru/learn/server-side/django/introduction/index.md
Expand Down
180 changes: 91 additions & 89 deletions files/fr/web/css/shorthand_properties/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,98 +16,98 @@ Bien que les propriétés raccourcies soient pratiques à utiliser. Il est néce

1. Une valeur qui n'est pas définie pour la propriété raccourcie **sera réinitialisée avec sa valeur initiale**. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi :

```css
background-color: red;
background: url(images/bg.gif) no-repeat top right;
```
```css
background-color: red;
background: url(images/bg.gif) no-repeat top right;
```

ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} `transparent` car la deuxième déclaration prend le pas sur la première.
ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} `transparent` car la deuxième déclaration prend le pas sur la première.

2. L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé `inherit.`
3. Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes :

1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :

<table>
<tbody>
<tr>
<td style="width: 79px"><img alt="border1.png" src="border1.png" /></td>
<td>
<em>1 valeur </em>: <code>border-width: 1em</code> — La valeur unique
s'adresse à tous les côtés.
</td>
</tr>
<tr>
<td><img alt="border2.png" src="border2.png" /></td>
<td>
<em>2 valeurs </em>: <code>border-width: 1em 2em</code> — La première
valeur représente les côtés horizontaux en haut et en bas. La seconde
valeur représente les côtés verticaux, à gauche et à droite.
</td>
</tr>
<tr>
<td><img alt="border3.png" src="border3.png" /></td>
<td>
<em>3 valeurs </em>: <code>border-width: 1em 2em 3em</code> — La
première valeur représente le côté haut, la deuxième les côtés gauche et
droit et la troisième représente le côté bas.
</td>
</tr>
<tr>
<td><img alt="border4.png" src="border4.png" /></td>
<td>
<p>
<em>4 valeurs </em>: <code>border-width: 1em 2em 3em 4em</code> — Les
quatre valeurs représentent respectivement le côté haut, le côté
droit, le côté bas et le côté haut, toujours dans cet ordre (le sens
horaire).
</p>
</td>
</tr>
</tbody>
</table>

2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :

<table>
<tbody>
<tr>
<td style="width: 69px"><img alt="corner1.png" src="corner1.png" /></td>
<td>
<em>1 valeur </em>: <code>border-radius: 1em</code> — La valeur
s'applique à tous les coins.
</td>
</tr>
<tr>
<td><img alt="corner2.png" src="corner2.png" /></td>
<td>
<em>2 valeurs </em>: <code>border-radius: 1em 2em</code> — La première
valeur s'applique aux coins en haut à gauche et en bas à droite et la
deuxième s'applique aux coins en haut à droite et en bas à gauche.
</td>
</tr>
<tr>
<td><img alt="corner3.png" src="corner3.png" /></td>
<td>
<em>3 valeurs </em>: <code>border-radius: 1em 2em 3em</code> — La
première valeur représente le coin en haut à gauche, la deuxième
représente les coins en haut à droite et en bas à gauche et la troisième
valeur représente le coin en bas à droite.
</td>
</tr>
<tr>
<td><img alt="corner4.png" src="corner4.png" /></td>
<td>
<p>
<em>4 valeurs </em>: <code>border-radius: 1em 2em 3em 4em</code> — Les
quatre valeurs s'appliquent respectivement au coin en haut à gauche,
en haut à droite, en bas à droite et en bas à gauche, toujours dans
cet ordre (le sens horaire).
</p>
</td>
</tr>
</tbody>
</table>
1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :

<table>
<tbody>
<tr>
<td style="width: 79px"><img alt="border1.png" src="border1.png" /></td>
<td>
<em>1 valeur </em>: <code>border-width: 1em</code> — La valeur unique
s'adresse à tous les côtés.
</td>
</tr>
<tr>
<td><img alt="border2.png" src="border2.png" /></td>
<td>
<em>2 valeurs </em>: <code>border-width: 1em 2em</code> — La première
valeur représente les côtés horizontaux en haut et en bas. La seconde
valeur représente les côtés verticaux, à gauche et à droite.
</td>
</tr>
<tr>
<td><img alt="border3.png" src="border3.png" /></td>
<td>
<em>3 valeurs </em>: <code>border-width: 1em 2em 3em</code> — La
première valeur représente le côté haut, la deuxième les côtés gauche et
droit et la troisième représente le côté bas.
</td>
</tr>
<tr>
<td><img alt="border4.png" src="border4.png" /></td>
<td>
<p>
<em>4 valeurs </em>: <code>border-width: 1em 2em 3em 4em</code> — Les
quatre valeurs représentent respectivement le côté haut, le côté
droit, le côté bas et le côté haut, toujours dans cet ordre (le sens
horaire).
</p>
</td>
</tr>
</tbody>
</table>

2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :

<table>
<tbody>
<tr>
<td style="width: 69px"><img alt="corner1.png" src="corner1.png" /></td>
<td>
<em>1 valeur </em>: <code>border-radius: 1em</code> — La valeur
s'applique à tous les coins.
</td>
</tr>
<tr>
<td><img alt="corner2.png" src="corner2.png" /></td>
<td>
<em>2 valeurs </em>: <code>border-radius: 1em 2em</code> — La première
valeur s'applique aux coins en haut à gauche et en bas à droite et la
deuxième s'applique aux coins en haut à droite et en bas à gauche.
</td>
</tr>
<tr>
<td><img alt="corner3.png" src="corner3.png" /></td>
<td>
<em>3 valeurs </em>: <code>border-radius: 1em 2em 3em</code> — La
première valeur représente le coin en haut à gauche, la deuxième
représente les coins en haut à droite et en bas à gauche et la troisième
valeur représente le coin en bas à droite.
</td>
</tr>
<tr>
<td><img alt="corner4.png" src="corner4.png" /></td>
<td>
<p>
<em>4 valeurs </em>: <code>border-radius: 1em 2em 3em 4em</code> — Les
quatre valeurs s'appliquent respectivement au coin en haut à gauche,
en haut à droite, en bas à droite et en bas à gauche, toujours dans
cet ordre (le sens horaire).
</p>
</td>
</tr>
</tbody>
</table>

## Les propriétés concernant l'arrière-plan

Expand Down Expand Up @@ -137,15 +137,17 @@ Les déclarations suivantes :
```css
font-style: italic;
font-weight: bold;
font-size: .8em;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
```

Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :

```css
font: italic bold .8em/1.2 Arial, sans-serif;
font:
italic bold 0.8em/1.2 Arial,
sans-serif;
```

> **Note :** Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera `font-variant: normal` et `font-size-adjust: none` (CSS2.0 / CSS3), `font-stretch: normal` (CSS3).
Expand Down
67 changes: 45 additions & 22 deletions files/fr/web/css/specificity/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,26 +43,36 @@ Lorsqu'une règle `important` est utilisée dans une déclaration de style, cett
1. Utiliser mieux la cascade CSS
2. Utiliser davantage des règles spécifiques. En indiquant un ou plusieurs éléments avant l'élément sélectionné, la règle devient plus spécifique et sa priorité est accrue&nbsp;:

```html
<div id="test">
<span>Texte</span>
</div>
```

```css
div#test span { color: green; }
div span { color: blue; }
span { color: red; }
```

L'ordre n'a aucune importance, le texte sera en vert (_green_) car cette règle est plus spécifique. (Également, la règle pour bleu est prioritaire par rapport à celle pour rouge, là encore l'ordre n'a pas d'importance)
```html
<div id="test">
<span>Texte</span>
</div>
```

```css
div#test span {
color: green;
}
div span {
color: blue;
}
span {
color: red;
}
```

L'ordre n'a aucune importance, le texte sera en vert (_green_) car cette règle est plus spécifique. (Également, la règle pour bleu est prioritaire par rapport à celle pour rouge, là encore l'ordre n'a pas d'importance)

3. En rapport avec le point 2, le fait de dupliquer des sélecteurs simples afin d''augmenter la spécificité lorsque vous n'avez aucun autre moyen de le faire, n'a aucun sens.

```css
#monId#monId span { color: yellow; }
.maClasse.maClasse span { color: orange; }
```
```css
#monId#monId span {
color: yellow;
}
.maClasse.maClasse span {
color: orange;
}
```

#### Utilisation de !important

Expand Down Expand Up @@ -105,15 +115,23 @@ A) Ajouter une autre règle CSS avec `!important` et, soit donner au sélecteur
Quelques exemples avec une spécificité accrue&nbsp;:

```css
table td { height: 50px !important; }
.monTableau td { height: 50px !important; }
#monTableau td { height: 50px !important; }
table td {
height: 50px !important;
}
.monTableau td {
height: 50px !important;
}
#monTableau td {
height: 50px !important;
}
```

B) Ou ajouter le même sélecteur après le sélecteur existant&nbsp;:

```css
td { height: 50px !important; }
td {
height: 50px !important;
}
```

C) Ou, de préférence, réécrire la règle d'origine afin d'éviter totalement l'utilisation de `!important`.
Expand Down Expand Up @@ -200,7 +218,12 @@ div p {

```html hidden
<div id="no-where-support">
⚠️ Votre navigateur ne prend pas en charge la pseudo-classe <code><a href="https://developer.mozilla.org/docs/Web/CSS/:where" target="_top">:where()</a></code>.
⚠️ Votre navigateur ne prend pas en charge la pseudo-classe
<code
><a href="https://developer.mozilla.org/docs/Web/CSS/:where" target="_top"
>:where()</a
></code
>.
</div>
```

Expand Down
15 changes: 9 additions & 6 deletions files/fr/web/css/specified_value/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,17 @@ La **valeur définie** d'une propriété CSS est celle explicitement définie da
```html
<p>Ma couleur provient explicitement de la feuille de style CSS.</p>

<div>Les valeurs définies de mes propriétés utilisent
les valeurs initiales (par défaut) car aucune n'est fournie
dans la feuille de style CSS.</div>
<div>
Les valeurs définies de mes propriétés utilisent les valeurs initiales (par
défaut) car aucune n'est fournie dans la feuille de style CSS.
</div>

<div class="fun">
<p>La valeur définie pour ma police n'est pas fournie explicitement
dans la feuille de style et est donc héritée de mon parent.
Toutefois, la bordure n'est pas une propriété héritée.</p>
<p>
La valeur définie pour ma police n'est pas fournie explicitement dans la
feuille de style et est donc héritée de mon parent. Toutefois, la bordure
n'est pas une propriété héritée.
</p>
</div>
```

Expand Down
1 change: 1 addition & 0 deletions files/fr/web/css/syntax/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ slug: Web/CSS/Syntax
l10n:
sourceCommit: 71c4bc0b6329ec40ddbefd8d3124547e91cfa612
---

{{CSSRef}}

L'objectif fondamental du langage <i lang="en">Cascading Style Sheets</i> ([CSS](/fr/docs/Web/CSS)) est de permettre à un moteur de navigation d'associer des fonctionnalités spécifiques, comme les couleurs, le positionnement ou les décorations à des éléments de la page. La _syntaxe CSS_ reflète cet objectif et ses éléments de base sont&nbsp;:
Expand Down
1 change: 1 addition & 0 deletions files/fr/web/css/tab-size/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ tab-size: unset;
### HTML

<!-- markdownlint-disable MD010 -->

```html
<pre class="exemple">
print "tabulation avant"
Expand Down
3 changes: 2 additions & 1 deletion files/fr/web/css/table-layout/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@ Cet exemple utilise `table-layout: fixed` et une largeur donnée (avec la propri
border: 1px solid red;
}

tr, td {
tr,
td {
border: solid;
}

Expand Down
Loading

0 comments on commit bfca232

Please sign in to comment.