Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fr: Format /web/css using Prettier (part 7) #14632

Merged
merged 1 commit into from
Jul 27, 2023
Merged

fr: Format /web/css using Prettier (part 7) #14632

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .prettierignore
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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