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 index 2cfa37a1f84f1f..36d13311b3d07b 100644 --- a/files/fr/web/css/css_transforms/using_css_transforms/index.md +++ b/files/fr/web/css/css_transforms/using_css_transforms/index.md @@ -32,9 +32,10 @@ Voici une version originale du logo MDN : Ici, on le tourne de 90 degrés depuis le coin inférieur gauche : ```html - + src="logo.png" /> ``` {{EmbedLiveSample('', 'auto', 250)}} @@ -44,9 +45,10 @@ Ici, on le tourne de 90 degrés depuis le coin inférieur gauche : Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses : ```html - + src="logo.png" /> ``` {{EmbedLiveSample('')}} @@ -71,10 +73,8 @@ Le fragment HTML qui suit crée quatre copies de la même boîte, chacune ayant
perspective: 250px;
- |
- perspective: 350px;
- |
+ perspective: 250px; |
+ perspective: 350px; |
|||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -103,10 +103,8 @@ Le fragment HTML qui suit crée quatre copies de la même boîte, chacune ayant | ||||||||||||||||||||||||||||
perspective: 500px;
- |
- perspective: 650px;
- |
+ perspective: 500px; |
+ perspective: 650px; |
|||||||||||||||||||||||||
@@ -222,8 +220,10 @@ Ce fragment de code CSS utilise des classes pour chacune des perspectives et d'a
}
/* Et on rend le tableau un peu plus joli */
-th, p, td {
- background-color: #EEEEEE;
+th,
+p,
+td {
+ background-color: #eeeeee;
padding: 10px;
font-family: sans-serif;
text-align: left;
@@ -244,175 +244,173 @@ Dans cet exemple, on illustre les valeurs les plus communes `perspective-origin`
```html
- perspective-origin: top left;
- perspective-origin: top right;
-
-
-
-
-1
- 2
- 3
- 4
- 5
- 6
+
+
+
- perspective-origin: left;
-
-
-
-
-1
- 2
- 3
- 4
- 5
- 6
+
+
+
- perspective-origin: 50% 50%;
-
-
-
-
-1
- 2
- 3
- 4
- 5
- 6
+
+
+
- perspective-origin: right;
-
-
-
-
-1
- 2
- 3
- 4
- 5
- 6
+
+
+
- perspective-origin: bottom left;
-
-
-
-
-1
- 2
- 3
- 4
- 5
- 6
+
+
+
- perspective-origin: bottom;
-
-
-
-
-1
- 2
- 3
- 4
- 5
- 6
+
+
+
- perspective-origin: bottom right;
-
-
-
-
-1
- 2
- 3
- 4
- 5
- 6
+
+
+
- perspective-origin: -200% -200%;
-
-
-
-
-1
- 2
- 3
- 4
- 5
- 6
+
+
+
- perspective-origin: 200% 200%;
-
-
-
-
-1
- 2
- 3
- 4
- 5
- 6
+
+
+
- perspective-origin: 200% -200%;
-
-
-
+
+
```
@@ -515,7 +513,7 @@ Dans cet exemple, on illustre les valeurs les plus communes `perspective-origin`
/* On agence le tout de façon plus agréable */
section {
- background-color: #EEE;
+ background-color: #eee;
padding: 10px;
font-family: sans-serif;
text-align: left;
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
index ffa70e4e1c6cbb..9908b90e9459cb 100644
--- 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,8 +73,12 @@ Avec cette feuille de style, on opère une transition CSS sur la taille de polic
```html hidden
- 1
- 2
- 3
- 4
- 5
- 6
+
+
+ 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. -Sample
+ + 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. + +Sample
```
@@ -82,20 +86,24 @@ Avec cette feuille de style, on opère une transition CSS sur la taille de polic
```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
-Cette boîte utilisera des transitions pour width, height, background-color, transform. - Survolez cette boîte pour voir l'effet. ++ Cette boîte utilisera des transitions pour width, height, background-color, + transform. Survolez cette boîte pour voir l'effet. + ``` @@ -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 index 1d7bd1599e2718..19b068a2aee9eb 100644 --- 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 `- On dirait qu'on pourrait sélectionner une zone. - +On dirait qu'on pourrait sélectionner une zone. -- Et là on peut zoomer. - +Et là on peut zoomer. ``` ### Résultat diff --git a/files/fr/web/css/descendant_combinator/index.md b/files/fr/web/css/descendant_combinator/index.md index 3e5b48ada4c78f..953a8e9711c03a 100644 --- 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 index 73c9c3768516a8..71ebf605cdebe7 100644 --- a/files/fr/web/css/direction/index.md +++ b/files/fr/web/css/direction/index.md @@ -59,9 +59,8 @@ blockquote { ```html- Du reste, depuis son bain dans la mare aux larmes, - tout était changé : 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é : la + salle, la table de verre, et la petite porte avaient complétement disparu.``` diff --git a/files/fr/web/css/display-inside/index.md b/files/fr/web/css/display-inside/index.md index ad39ac075b5bad..9f5d790be6ec64 100644 --- 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 index 0955c993764ed0..8aa4d9bcfccebd 100644 --- 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 index d54e523782c77d..8f7126da822857 100644 --- 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 1 -span 2 +span 1 span 2 ``` ### Résultat diff --git a/files/fr/web/css/display/index.md b/files/fr/web/css/display/index.md index 811b38e51276a0..43e366b6613501 100644 --- 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 - - Texte visible - -- Texte invisible - +Texte visible +Texte invisible ``` ### CSS diff --git a/files/fr/web/css/easing-function/index.md b/files/fr/web/css/easing-function/index.md index f1d6a04e9b988f..2060932ff7fcfc 100644 --- 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 index cc18e3ddf1dc9b..2afdb7c2c17f87 100644 --- 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
-
- Cet élément utilise l'élément - #monArrierePlan comme image - de fond ! - +Cet élément utilise l'élément #monArrierePlan comme image de fond !
- - Et voici un texte inscrit sur - l'arrière-plan. - -
-
```
#### Résultat
@@ -104,9 +99,7 @@ Pour les navigateurs qui prennent en charge `element`, on peut ici voir un arri
+
+Et voici un texte inscrit sur l'arrière-plan. +
+
+
+
-
+
```
diff --git a/files/fr/web/css/empty-cells/index.md b/files/fr/web/css/empty-cells/index.md
index 5d08670c647427..d6e054bc9c3c0a 100644
--- 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
- Si la fonction Valeur CSS actuelle : Image originale |
- Exemple live |
+
+ Exemple live
+ |
Équivalent SVG |
Exemple statique |
- |
+ |
+
+ |
+
+
+ |
|
-
-
+ |
+
+ |
|
Réglage par défaut.
- Un paragraphe pour lequel font-language-override
+ Un paragraphe pour lequel font-language-override
cible le danois
Ce paragraphe est dimensionné pour une meilleure - lecture. C'est le comportement par défaut.
- -Ce paragraphe n'est pas adapté pour une - meilleure lecture. Vous devriez voir une différence avec les navigateurs - qui prennent en charge cette fonctionnalité.
++ Ce paragraphe est dimensionné pour une meilleure lecture. C'est le + comportement par défaut. +
+ ++ Ce paragraphe n'est pas adapté pour une meilleure lecture. Vous devriez voir + une différence avec les navigateurs qui prennent en charge cette + fonctionnalité. +
``` > **Note :** La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre [en téléchargement sur GitHub](https://github.com/TypeNetwork/Amstelvar/releases). diff --git a/files/fr/web/css/font-size-adjust/index.md b/files/fr/web/css/font-size-adjust/index.md index 9811019ba0798f..8c2cf508cc23f3 100644 --- a/files/fr/web/css/font-size-adjust/index.md +++ b/files/fr/web/css/font-size-adjust/index.md @@ -66,21 +66,14 @@ On indique en fait que les minuscules de la fonte utilisée doivent mesurer `7px ```htmlExemples pour font-size-adjust
- Voici la fonte Times sur 10 px, - difficile à lire en petit. -
+Voici la fonte Times sur 10 px, difficile à lire en petit.
- Voici la fonte Verdana sur 10px, - plus lisible car sans empattement - (serif). + Voici la fonte Verdana sur 10px, plus lisible car sans empattement (serif).
- et voilà le texte ajusté pour - avoir le même facteur de forme - qu'avec Verdana. + et voilà le texte ajusté pour avoir le même facteur de forme qu'avec Verdana.
``` diff --git a/files/fr/web/css/font-size/index.md b/files/fr/web/css/font-size/index.md index e4f5bb5af0eca9..507909a360ce29 100644 --- a/files/fr/web/css/font-size/index.md +++ b/files/fr/web/css/font-size/index.md @@ -99,7 +99,7 @@ Un autre aspect important est la **composition** des valeurs exprimées avec cet- La Reine devint pourpre de colère et - après l’avoir considérée un moment avec - des yeux flamboyants comme ceux d’une - bête fauve, elle se mit à crier : - « Qu’on lui coupe la tête ! » + La Reine devint pourpre de colère et après l’avoir considérée un moment avec + des yeux flamboyants comme ceux d’une bête fauve, elle se mit à crier : « + Qu’on lui coupe la tête ! »
``` diff --git a/files/fr/web/css/font-variant-east-asian/index.md b/files/fr/web/css/font-variant-east-asian/index.md index 0e13461e57ab20..3f93f5da8b7988 100644 --- a/files/fr/web/css/font-variant-east-asian/index.md +++ b/files/fr/web/css/font-variant-east-asian/index.md @@ -11,13 +11,13 @@ La propriété **`font-variant-east-asian`** contrôle l'utilisation des glyphes ```css font-variant-east-asian: normal; font-variant-east-asian: ruby; -font-variant-east-asian: jis78; /*
- normal
+ normal
if fi ff tf ft jf fj
- none
+ none
if fi ff tf ft jf fj
- common-ligatures
+ common-ligatures
if fi ff tf ft jf fj
- no-common-ligatures
+ no-common-ligatures
if fi ff tf ft jf fj
- discretionary-ligatures
+ discretionary-ligatures
if fi ff tf ft jf fj
- no-discretionary-ligatures
+ no-discretionary-ligatures
if fi ff tf ft jf fj
- historical-ligatures
+ historical-ligatures
if fi ff tf ft jf fj
- no-historical-ligatures
+ no-historical-ligatures
if fi ff tf ft jf fj
- contextual
+ contextual
if fi ff tf ft jf fj
- no-contextual
+ no-contextual
if fi ff tf ft jf fj
- contextual
+ contextual
if fi ff tf ft jf fj
Alice ne s’était pas fait le moindre mal. - Vite elle se remet sur ses pieds et regarde en l’air ; mais tout - est noir là-haut. Elle voit devant elle un long passage et le Lapin - Blanc qui court à toutes jambes. +
+ Alice ne s’était pas fait le moindre mal. + Vite elle se remet sur ses pieds et regarde en l’air ; mais tout est noir + là-haut. Elle voit devant elle un long passage et le Lapin Blanc qui court à + toutes jambes.
``` diff --git a/files/fr/web/css/font-weight/index.md b/files/fr/web/css/font-weight/index.md index 4724a027829c4f..7d36fed0812d99 100644 --- a/files/fr/web/css/font-weight/index.md +++ b/files/fr/web/css/font-weight/index.md @@ -181,14 +181,14 @@ Pour les personnes ayant une vision faible, il peut être extrêmement difficile ```html- Alice was beginning to get very tired of sitting by her sister on the - bank, and of having nothing to do: once or twice she had peeped into the - book her sister was reading, but it had no pictures or conversations in - it, "and what is the use of a book," thought Alice "without pictures or - conversations?" + Alice was beginning to get very tired of sitting by her sister on the bank, + and of having nothing to do: once or twice she had peeped into the book her + sister was reading, but it had no pictures or conversations in it, "and what + is the use of a book," thought Alice "without pictures or conversations?"
-- « Toujours aussi mouillée, » dit Alice tristement. - « Je ne sèche que d’ennui. » + « Toujours aussi mouillée, » dit Alice tristement. « Je ne sèche que d’ennui. + »
- « Dans ce cas, » dit le Dodo avec emphase, se - dressant sur ses pattes, « je propose l’ajournement, - et l’adoption immédiate de mesures énergiques. » + « Dans ce cas, » dit le Dodo avec emphase, se dressant sur ses pattes, « je + propose l’ajournement, et l’adoption immédiate de mesures énergiques. »
- « Parlez français, » dit l’Aiglon ; « je ne - comprends pas la moitié de ces grands mots, et, qui - plus est, je ne crois pas que vous les compreniez - vous-même. » L’Aiglon baissa la tête pour cacher - un sourire, et quelques-uns des autres oiseaux - ricanèrent tout haut. + « Parlez français, » dit l’Aiglon ; « je ne comprends pas la moitié de ces + grands mots, et, qui plus est, je ne crois pas que vous les compreniez + vous-même. » L’Aiglon baissa la tête pour cacher un sourire, et quelques-uns + des autres oiseaux ricanèrent tout haut.
- « J’allais proposer, » dit le Dodo d’un ton vexé, - « une course cocasse ; c’est ce que nous pouvons - faire de mieux pour nous sécher. » + « J’allais proposer, » dit le Dodo d’un ton vexé, « une course cocasse ; c’est + ce que nous pouvons faire de mieux pour nous sécher. »
``` diff --git a/files/fr/web/css/gap/index.md b/files/fr/web/css/gap/index.md index 0dc02611bddb18..9fc8b04d3f969c 100644 --- a/files/fr/web/css/gap/index.md +++ b/files/fr/web/css/gap/index.md @@ -99,7 +99,6 @@ Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement su flex: 1 1 auto; width: 100px; height: 50px; - } ``` @@ -157,9 +156,9 @@ Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement su ```html
- Voici un texte en multi-colonne sur des colonnes avec
- une gouttière de 40px créée grâce à la propriété
- CSS gap
. Est-ce que c'est pas trop génial ?
+ Voici un texte en multi-colonne sur des colonnes avec une gouttière de 40px
+ créée grâce à la propriété CSS gap
. Est-ce que c'est pas trop
+ génial ?
- Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Curabitur dignissim nunc - mauris, et sollicitudin est scelerisque - sed. Praesent laoreet tortor massa, sit - amet vulputate nulla pharetra ut. Proin - ornare commodo sodales. Class aptent - taciti sociosqu ad litora torquent per - conubia nostra, per inceptos himenaeos. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim + nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor + massa, sit amet vulputate nulla pharetra ut. Proin ornare commodo sodales. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos.
``` @@ -91,7 +88,7 @@ Cette propriété peut être définie grâce à une, deux ou trois valeurs : ```css p { hanging-punctuation: first; - margin: .5rem; + margin: 0.5rem; } ``` diff --git a/files/fr/web/css/hyphens/index.md b/files/fr/web/css/hyphens/index.md index b0aa406d5e9903..93d638e28dfb5b 100644 --- a/files/fr/web/css/hyphens/index.md +++ b/files/fr/web/css/hyphens/index.md @@ -66,7 +66,7 @@ Dans cet exemple, on crée trois classes CSS pour illustrer chacune des configur p { width: 55px; border: 1px solid black; - } +} p.none { -webkit-hyphens: none; -ms-hyphens: none; @@ -88,13 +88,17 @@ p.auto { ```htmlnone
: aucun trait d'union, dépassement si nécessaire
+ none
: aucun trait d'union, dépassement si nécessaire
An extremely long English word
manual
: un trait d'union uniquement à ‐ ou ­ (si nécessaire)
+ manual
: un trait d'union uniquement à ‐ ou ­
+ (si nécessaire)
An extremely long English word
auto
: un trait d'union où l'algorithme l'estime nécessaire
+ auto
: un trait d'union où l'algorithme l'estime nécessaire
An extremely long English word
Alice remarqua, avec quelque surprise, qu’en - tombant sur le plancher les cailloux se changeaient - en petits gâteaux, et une brillante idée lui - traversa l’esprit.
-Elle avala un des gâteaux, et s’aperçut avec - joie qu’elle diminuait rapidement
++ Alice remarqua, avec quelque surprise, qu’en tombant sur le plancher les + cailloux se changeaient en petits gâteaux, et une brillante idée lui traversa + l’esprit. +
++ Elle avala un des gâteaux, et s’aperçut avec joie qu’elle diminuait rapidement +
``` ### Résultat diff --git a/files/fr/web/css/inheritance/index.md b/files/fr/web/css/inheritance/index.md index 40b2fbe822f2dd..6f3192e79ee376 100644 --- a/files/fr/web/css/inheritance/index.md +++ b/files/fr/web/css/inheritance/index.md @@ -52,7 +52,7 @@ p { {{EmbedLiveSample("")}} -Les mots « du texte en emphase » n'ont pas de bordure *en plus* (car la valeur initiale de [`border-style`](/fr/docs/Web/CSS/border-style) est `none`). +Les mots « du texte en emphase » n'ont pas de bordure _en plus_ (car la valeur initiale de [`border-style`](/fr/docs/Web/CSS/border-style) est `none`). ## Notes diff --git a/files/fr/web/css/initial-letter-align/index.md b/files/fr/web/css/initial-letter-align/index.md index ee5dd505daae49..3574b81c51274e 100644 --- a/files/fr/web/css/initial-letter-align/index.md +++ b/files/fr/web/css/initial-letter-align/index.md @@ -65,12 +65,11 @@ La valeur de cette propriété peut être l'un des mots-clés parmi ceux défini ```html- Tombe, tombe, tombe ! « Cette chute n’en finira - donc pas ! Je suis curieuse de savoir combien de - milles j’ai déjà faits, » dit-elle tout haut. « Je - dois être bien près du centre de la terre. Voyons - donc, cela serait à quatre mille milles de profondeur, - il me semble. »
+ Tombe, tombe, tombe ! « Cette chute n’en finira donc pas ! Je + suis curieuse de savoir combien de milles j’ai déjà faits, » dit-elle + tout haut. « Je dois être bien près du centre de la terre. Voyons donc, + cela serait à quatre mille milles de profondeur, il me semble. » + ``` ### Résultat diff --git a/files/fr/web/css/initial-letter/index.md b/files/fr/web/css/initial-letter/index.md index 984337fc238b00..3b5280e7e8e72d 100644 --- a/files/fr/web/css/initial-letter/index.md +++ b/files/fr/web/css/initial-letter/index.md @@ -14,9 +14,9 @@ initial-letter: normal; /* Valeurs numériques */ /* Types- Texte rouge - - ce texte est avec la couleur initiale (noire) - - ce texte est rouge aussi -
++ Texte rouge + ce texte est avec la couleur initiale (noire) + ce texte est rouge aussi +
``` ### Résultat diff --git a/files/fr/web/css/isolation/index.md b/files/fr/web/css/isolation/index.md index dbb7499c237eea..ad7236e02454e5 100644 --- a/files/fr/web/css/isolation/index.md +++ b/files/fr/web/css/isolation/index.md @@ -48,7 +48,7 @@ La propriété `isolation` est définie avec l'un des mots-clés suivants. ```css .a { - background-color: rgb(0,255,0); + background-color: rgb(0, 255, 0); } #b { width: 200px; diff --git a/files/fr/web/css/justify-content/index.md b/files/fr/web/css/justify-content/index.md index 64502ffa723d53..93229006a4401c 100644 --- a/files/fr/web/css/justify-content/index.md +++ b/files/fr/web/css/justify-content/index.md @@ -18,13 +18,13 @@ L'alignement est appliqué après que les longueurs et les marges automatiques o ```css /* Alignement « géométrique » */ -justify-content: center; /* Éléments groupés au centre */ -justify-content: start; /* Éléments groupés au début */ -justify-content: end; /* Éléments groupés à la fin */ +justify-content: center; /* Éléments groupés au centre */ +justify-content: start; /* Éléments groupés au début */ +justify-content: end; /* Éléments groupés à la fin */ justify-content: flex-start; /* Éléments flexibles groupés au début */ -justify-content: flex-end; /* Éléments flexibles groupés à la fin */ -justify-content: left; /* Éléments groupés à gauche */ -justify-content: right; /* Éléments groupés à droite */ +justify-content: flex-end; /* Éléments flexibles groupés à la fin */ +justify-content: left; /* Éléments groupés à gauche */ +justify-content: right; /* Éléments groupés à droite */ /* Alignement par rapport à la ligne de base */ /* justify-content ne prend pas de valeurs relatives à la ligne de base */ @@ -37,15 +37,15 @@ justify-content: space-between; /* Les éléments sont répartis équitablement Le bord du premier est aligné sur le début du conteneur et la fin du dernier est alignée sur la fin du conteneur */ -justify-content: space-around; /* Les éléments sont répartis équitablement +justify-content: space-around; /* Les éléments sont répartis équitablement À chaque extrémité, entre le bord du conteneur et le premier/dernier élément on a la moitié de l'espace appliqué entre chaque élément */ -justify-content: space-evenly; /* Les éléments sont répartis équitablement +justify-content: space-evenly; /* Les éléments sont répartis équitablement Tous les éléments sont séparés par le même espace */ -justify-content: stretch; /* Les éléments sont répartis équitablement et +justify-content: stretch; /* Les éléments sont répartis équitablement et les éléments dimensionnés avec 'auto' sont étirés afin de remplir le conteneur */ @@ -146,8 +146,7 @@ justify-content: unset; ```js hidden var justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", function (evt) { - document.getElementById("container").style.justifyContent = - evt.target.value; + document.getElementById("container").style.justifyContent = evt.target.value; }); ``` diff --git a/files/fr/web/css/justify-items/index.md b/files/fr/web/css/justify-items/index.md index 87f42d3b5ed64f..f5cbe9b5b22fbe 100644 --- a/files/fr/web/css/justify-items/index.md +++ b/files/fr/web/css/justify-items/index.md @@ -27,15 +27,15 @@ justify-items: normal; justify-items: stretch; /* Alignement par rapport à l'axe */ -justify-items: center; /* Les éléments sont regroupés au centre */ -justify-items: start; /* Les éléments sont regroupés au début */ -justify-items: end; /* Les éléments sont regroupés à la fin */ +justify-items: center; /* Les éléments sont regroupés au centre */ +justify-items: start; /* Les éléments sont regroupés au début */ +justify-items: end; /* Les éléments sont regroupés à la fin */ justify-items: flex-start; /* Les éléments sont regroupés au début de l'axe */ -justify-items: flex-end; /* Les éléments sont regroupés à la fin de l'axe */ +justify-items: flex-end; /* Les éléments sont regroupés à la fin de l'axe */ justify-items: self-start; justify-items: self-end; -justify-items: left; /* Les éléments sont regroupés à gauche */ -justify-items: right; /* Les éléments sont regroupés à droite */ +justify-items: left; /* Les éléments sont regroupés à gauche */ +justify-items: right; /* Les éléments sont regroupés à droite */ /* Alignement par rapport à la ligne de base */ justify-items: baseline; @@ -124,7 +124,9 @@ Cette propriété peut être définie selon trois formes différentes : ### CSS ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; @@ -145,7 +147,7 @@ Cette propriété peut être définie selon trois formes différentes : .wrapper { display: grid; grid-template-columns: repeat(3, 100px); - grid-template-rows: repeat(3,100px); + grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; diff --git a/files/fr/web/css/justify-self/index.md b/files/fr/web/css/justify-self/index.md index a45adcec128069..bd94ef41f438bb 100644 --- a/files/fr/web/css/justify-self/index.md +++ b/files/fr/web/css/justify-self/index.md @@ -25,15 +25,15 @@ justify-self: normal; justify-self: stretch; /* Alignement par rapport à l'axe */ -justify-self: center; /* L'élément est aligné au centre */ -justify-self: start; /* L'élément est aligné au début */ -justify-self: end; /* L'élément est aligné à la fin */ +justify-self: center; /* L'élément est aligné au centre */ +justify-self: start; /* L'élément est aligné au début */ +justify-self: end; /* L'élément est aligné à la fin */ justify-self: flex-start; /* L'élément est aligné au début de l'axe */ -justify-self: flex-end; /* L'élément est aligné à la fin de l'axe */ +justify-self: flex-end; /* L'élément est aligné à la fin de l'axe */ justify-self: self-start; justify-self: self-end; -justify-self: left; /* L'élément est aligné à gauche */ -justify-self: right; /* L'élément est aligné à droite */ +justify-self: left; /* L'élément est aligné à gauche */ +justify-self: right; /* L'élément est aligné à droite */ /* Alignement par rapport à la ligne de base */ justify-self: baseline; @@ -113,7 +113,9 @@ Cette propriété peut être définie selon trois formes différentes : ### CSS ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; @@ -134,7 +136,7 @@ Cette propriété peut être définie selon trois formes différentes : .wrapper { display: grid; grid-template-columns: repeat(2, 100px); - grid-template-rows: repeat(2,100px); + grid-template-rows: repeat(2, 100px); height: 300px; width: 300px; grid-gap: 10px; diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md index 70043faf428948..64c9c1788bcb3c 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md @@ -22,13 +22,13 @@ Une recette se décompose comme suit : 2. Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS. 3. Une page MDN, rattachée à la section [Livre de recettes CSS](/fr/docs/Web/CSS/Layout_cookbook) qui contient : - 1. Les spécifications sommaires - 2. La recette - 3. Les choix effectués - 4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive) - 5. Les points relatifs à l'accessibilité - 6. La compatibilité des navigateurs - 7. D'éventuelles ressources additionnelles + 1. Les spécifications sommaires + 2. La recette + 3. Les choix effectués + 4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive) + 5. Les points relatifs à l'accessibilité + 6. La compatibilité des navigateurs + 7. D'éventuelles ressources additionnelles ### 1. Construire le motif diff --git a/files/fr/web/css/layout_cookbook/index.md b/files/fr/web/css/layout_cookbook/index.md index 3d275ea5614b84..f12c6a377d98b8 100644 --- a/files/fr/web/css/layout_cookbook/index.md +++ b/files/fr/web/css/layout_cookbook/index.md @@ -12,18 +12,18 @@ Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fr ## Les recettes -| Recette | Description | Méthodes de disposition utilisées | -| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Objets avec média](/fr/docs/Web/CSS/Layout_cookbook/Media_objects) | Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page). | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}} | -| [Colonnes](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | -| [Centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element) | Comment centrer un élément horizontalement et verticalement. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | -| [Bas de page adhérant](/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant) | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (_viewport_) lorsque le contenu est plus petit que la zone ou le conteneur. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | -| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | -| [Navigation avec un fil d'Ariane (_breadcrumb_)](/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | -| [Liste de groupes avec indicateurs](/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs) | Afficher une liste d'éléments avec chacun un indicateur numérique. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | -| [Pagination](/fr/docs/Web/CSS/Layout_cookbook/Pagination) | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple). | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | -| [Carte](/fr/docs/Web/CSS/Layout_cookbook/Carte) | Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) | -| [Envelopper une grille (_grid wrapper_)](/fr/docs/Web/CSS/Layout_cookbook/Grid_wrapper) | Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) | +| Recette | Description | Méthodes de disposition utilisées | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Objets avec média](/fr/docs/Web/CSS/Layout_cookbook/Media_objects) | Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page). | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}} | +| [Colonnes](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element) | Comment centrer un élément horizontalement et verticalement. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | +| [Bas de page adhérant](/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant) | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (_viewport_) lorsque le contenu est plus petit que la zone ou le conteneur. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | +| [Navigation avec un fil d'Ariane (_breadcrumb_)](/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Liste de groupes avec indicateurs](/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs) | Afficher une liste d'éléments avec chacun un indicateur numérique. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | +| [Pagination](/fr/docs/Web/CSS/Layout_cookbook/Pagination) | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple). | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | +| [Carte](/fr/docs/Web/CSS/Layout_cookbook/Carte) | Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) | +| [Envelopper une grille (_grid wrapper_)](/fr/docs/Web/CSS/Layout_cookbook/Grid_wrapper) | Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) | ## Contribuer en créant une recette diff --git a/files/fr/web/css/layout_cookbook/pagination/index.md b/files/fr/web/css/layout_cookbook/pagination/index.md index a8cb74a07a51d8..dd892a77070587 100644 --- a/files/fr/web/css/layout_cookbook/pagination/index.md +++ b/files/fr/web/css/layout_cookbook/pagination/index.md @@ -58,7 +58,7 @@ Voir la section « Voir aussi » en fin d'article pour divers liens portants sur - {{Cssxref("justify-content")}} - {{Cssxref("column-gap")}} -- _[Know your ARIA: 'Hidden' vs 'None' (en anglais)](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html) +- _[Know your ARIA: 'Hidden' vs 'None' (en anglais)](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html)_ - [Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)](https://webaim.org/techniques/css/invisiblecontent/#techniques) - [Écrire du CSS sans oublier l'accessibilité (en anglais)](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939) - [Guide stylistique d'accessibilité : la pagination](https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination) diff --git a/files/fr/web/css/left/index.md b/files/fr/web/css/left/index.md index 58717e3b76812b..759c372e21b53a 100644 --- a/files/fr/web/css/left/index.md +++ b/files/fr/web/css/left/index.md @@ -78,7 +78,7 @@ left: unset; #wrap { width: 700px; margin: 0 auto; - background: #5C5C5C; + background: #5c5c5c; } pre { @@ -94,7 +94,7 @@ pre { position: absolute; left: 20px; top: 20px; - background-color: #D8F5FF; + background-color: #d8f5ff; } #exemple_2 { @@ -103,8 +103,7 @@ pre { position: relative; top: 0; right: 0; - background-color: #C1FFDB; - + background-color: #c1ffdb; } #exemple_3 { width: 600px; @@ -112,16 +111,16 @@ pre { position: relative; top: 20px; left: 20px; - background-color: #FFD7C2; + background-color: #ffd7c2; } #exemple_4 { - width:200px; - height:200px; - position:absolute; - bottom:10px; - right:20px; - background-color:#FFC7E4; + width: 200px; + height: 200px; + position: absolute; + bottom: 10px; + right: 20px; + background-color: #ffc7e4; } ``` @@ -135,7 +134,10 @@ pre { left: 20px; top: 20px; -Le seul élément englobant pour ce div est la fenêtre principale. Elle se positionne par rapport à elle.
++ Le seul élément englobant pour ce div est la fenêtre principale. Elle se + positionne par rapport à elle. +
La position est relative par rapport au div voisin mais on le retire du flux.
++ La position est relative par rapport au div voisin mais on le retire du + flux. +
@@ -162,7 +167,10 @@ pre { bottom: 10px; right: 20px;-
La position est absolue à l'intérieur d'un parent positionné de façon relative.
++ La position est absolue à l'intérieur d'un parent positionné de façon + relative. +