From 8fd0c16d6c577aac3ff442722e6854ab914502dc Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Wed, 26 Jul 2023 23:41:25 -0700 Subject: [PATCH] fr: Format /web/css using Prettier (part 5) (#14630) --- .../using_css_transforms/index.md | 340 ++++++------ .../using_css_transitions/index.md | 68 ++- files/fr/web/css/cursor/index.md | 21 +- .../fr/web/css/descendant_combinator/index.md | 4 +- files/fr/web/css/direction/index.md | 5 +- files/fr/web/css/display-inside/index.md | 2 +- files/fr/web/css/display-listitem/index.md | 2 +- files/fr/web/css/display-outside/index.md | 3 +- files/fr/web/css/display/index.md | 8 +- files/fr/web/css/easing-function/index.md | 8 +- files/fr/web/css/element/index.md | 25 +- files/fr/web/css/empty-cells/index.md | 35 +- files/fr/web/css/env/index.md | 26 +- .../fr/web/css/filter-function/blur/index.md | 18 +- .../css/filter-function/brightness/index.md | 18 +- .../web/css/filter-function/contrast/index.md | 18 +- .../css/filter-function/drop-shadow/index.md | 18 +- .../css/filter-function/grayscale/index.md | 18 +- .../css/filter-function/hue-rotate/index.md | 18 +- files/fr/web/css/filter-function/index.md | 89 ++-- .../web/css/filter-function/invert/index.md | 18 +- .../web/css/filter-function/opacity/index.md | 18 +- .../web/css/filter-function/saturate/index.md | 18 +- .../fr/web/css/filter-function/sepia/index.md | 18 +- files/fr/web/css/filter/index.md | 495 +++++++++++------- files/fr/web/css/fit-content/index.md | 4 +- files/fr/web/css/flex-basis/index.md | 18 +- files/fr/web/css/flex-direction/index.md | 12 +- files/fr/web/css/flex-flow/index.md | 2 - files/fr/web/css/flex-grow/index.md | 4 +- files/fr/web/css/flex-shrink/index.md | 2 +- files/fr/web/css/flex-wrap/index.md | 6 +- files/fr/web/css/flex/index.md | 60 +-- files/fr/web/css/font-family/index.md | 46 +- .../fr/web/css/font-feature-settings/index.md | 36 +- files/fr/web/css/font-kerning/index.md | 13 +- .../web/css/font-language-override/index.md | 6 +- files/fr/web/css/font-optical-sizing/index.md | 22 +- files/fr/web/css/font-size-adjust/index.md | 13 +- files/fr/web/css/font-size/index.md | 16 +- files/fr/web/css/font-style/index.md | 1 + files/fr/web/css/font-synthesis/index.md | 4 +- .../web/css/font-variant-alternates/index.md | 7 +- files/fr/web/css/font-variant-caps/index.md | 8 +- .../web/css/font-variant-east-asian/index.md | 14 +- .../web/css/font-variant-ligatures/index.md | 45 +- .../fr/web/css/font-variant-numeric/index.md | 12 +- .../fr/web/css/font-variant-position/index.md | 9 +- files/fr/web/css/font-weight/index.md | 14 +- files/fr/web/css/font/index.md | 32 +- files/fr/web/css/gap/index.md | 7 +- .../web/css/gradient/conic-gradient/index.md | 17 +- files/fr/web/css/gradient/index.md | 75 ++- .../web/css/gradient/linear-gradient/index.md | 30 +- .../web/css/gradient/radial-gradient/index.md | 19 +- .../repeating-conic-gradient/index.md | 16 +- .../repeating-linear-gradient/index.md | 30 +- .../repeating-radial-gradient/index.md | 33 +- files/fr/web/css/grid-auto-flow/index.md | 4 +- files/fr/web/css/grid-auto-rows/index.md | 1 - files/fr/web/css/grid-column-end/index.md | 4 +- files/fr/web/css/grid-column-start/index.md | 4 +- files/fr/web/css/grid-row-end/index.md | 4 +- files/fr/web/css/grid-row-start/index.md | 4 +- files/fr/web/css/grid-template-areas/index.md | 12 +- .../fr/web/css/grid-template-columns/index.md | 17 +- files/fr/web/css/grid-template-rows/index.md | 18 +- files/fr/web/css/grid-template/index.md | 26 +- files/fr/web/css/hanging-punctuation/index.md | 15 +- files/fr/web/css/hyphens/index.md | 12 +- files/fr/web/css/id_selectors/index.md | 1 - files/fr/web/css/image-orientation/index.md | 20 +- files/fr/web/css/image/image-set/index.md | 3 +- files/fr/web/css/image/image/index.md | 26 +- files/fr/web/css/image/index.md | 22 +- files/fr/web/css/image/paint/index.md | 14 +- files/fr/web/css/index.md | 2 +- files/fr/web/css/inherit/index.md | 14 +- files/fr/web/css/inheritance/index.md | 2 +- .../fr/web/css/initial-letter-align/index.md | 11 +- files/fr/web/css/initial-letter/index.md | 16 +- files/fr/web/css/initial/index.md | 12 +- files/fr/web/css/isolation/index.md | 2 +- files/fr/web/css/justify-content/index.md | 21 +- files/fr/web/css/justify-items/index.md | 18 +- files/fr/web/css/justify-self/index.md | 18 +- .../contribute_a_recipe/index.md | 14 +- files/fr/web/css/layout_cookbook/index.md | 24 +- .../css/layout_cookbook/pagination/index.md | 2 +- files/fr/web/css/left/index.md | 36 +- files/fr/web/css/letter-spacing/index.md | 18 +- files/fr/web/css/line-height/index.md | 26 +- files/fr/web/css/list-style-image/index.md | 4 +- files/fr/web/css/list-style-position/index.md | 9 +- files/fr/web/css/list-style-type/index.md | 288 +++++++--- files/fr/web/css/list-style/index.md | 11 +- files/fr/web/css/margin-block-end/index.md | 6 +- files/fr/web/css/margin-block-start/index.md | 6 +- files/fr/web/css/margin-block/index.md | 8 +- files/fr/web/css/margin-bottom/index.md | 36 +- 100 files changed, 1624 insertions(+), 1131 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 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 left;
-
-
1
-
2
-
3
-
4
-
5
-
6
-
-
-
- -
-
perspective-origin: top;
-
-
-
1
-
2
-
3
-
4
-
5
-
6
+
+
1
+
2
+
3
+
4
+
5
+
6
+
-
-
- -
-
perspective-origin: top right;
-
-
-
1
-
2
-
3
-
4
-
5
-
6
+
+ +
+
perspective-origin: top;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
- -
- -
-
perspective-origin: left;
-
-
-
1
-
2
-
3
-
4
-
5
-
6
+
+ +
+
perspective-origin: top right;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
- -
- -
-
perspective-origin: 50% 50%;
-
-
-
1
-
2
-
3
-
4
-
5
-
6
+
+ +
+
perspective-origin: left;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
- -
- -
-
perspective-origin: right;
-
-
-
1
-
2
-
3
-
4
-
5
-
6
+
+ +
+
perspective-origin: 50% 50%;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
- -
- -
-
perspective-origin: bottom left;
-
-
-
1
-
2
-
3
-
4
-
5
-
6
+
+ +
+
perspective-origin: right;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
- -
- -
-
perspective-origin: bottom;
-
-
-
1
-
2
-
3
-
4
-
5
-
6
+
+ +
+
perspective-origin: bottom left;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
- -
- -
-
perspective-origin: bottom right;
-
-
-
1
-
2
-
3
-
4
-
5
-
6
+
+ +
+
perspective-origin: bottom;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
- -
- -
-
perspective-origin: -200% -200%;
-
-
-
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%;
-
-
-
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
+
+
+
``` @@ -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 -

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 `` peut éventuellement être suivi par un couple de nombres sépar Par exemple, on peut indiquer deux images grâce à deux valeurs `` et fournir des coordonnées `` 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 -

- 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. -

-
-
+

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
- +
``` 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 - - - - - - - - + + + + + + + +
JeanBiche
Alice
JeanBiche
Alice
- - - - - - - - + + + + + + + +
JeanBiche
Alice
JeanBiche
Alice
``` @@ -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; } diff --git a/files/fr/web/css/env/index.md b/files/fr/web/css/env/index.md index d939b6d346f90c..22bb1d2782bf18 100644 --- a/files/fr/web/css/env/index.md +++ b/files/fr/web/css/env/index.md @@ -12,11 +12,10 @@ La fonction CSS **`env()`** peut être utilisée afin d'insérer la valeur d'une ```css body { - padding: - env(safe-area-inset-top, 20px) - env(safe-area-inset-right, 20px) - env(safe-area-inset-bottom, 20px) - env(safe-area-inset-left, 20px); + padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env( + safe-area-inset-bottom, + 20px + ) env(safe-area-inset-left, 20px); } ``` @@ -59,10 +58,10 @@ Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonct ```html

- Si la fonction env() est prise en charge dans votre - navigateur, le texte de ce paragraphe aura 50 pixels de padding avec - la bordure gauche mais pas la droite / basse et haute. - En effet, le code CSS associé est équivalent à padding: 0 0 0 50px + Si la fonction env() est prise en charge dans votre navigateur, + le texte de ce paragraphe aura 50 pixels de padding avec la bordure gauche + mais pas la droite / basse et haute. En effet, le code CSS associé est + équivalent à padding: 0 0 0 50px car les noms des propriétés CSS associées aux agents utilisateurs sont sensibles à la casse (contrairement aux autres propriétés).

@@ -74,11 +73,10 @@ Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonct p { width: 300px; border: 2px solid red; - padding: - env(safe-area-inset-top, 50px) - env(safe-area-inset-right, 50px) - env(safe-area-inset-bottom, 50px) - env(SAFE-AREA-INSET-LEFT, 50px); + padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env( + safe-area-inset-bottom, + 50px + ) env(SAFE-AREA-INSET-LEFT, 50px); } ``` diff --git a/files/fr/web/css/filter-function/blur/index.md b/files/fr/web/css/filter-function/blur/index.md index 212f300cd44d9d..2fcd118d34fcce 100644 --- a/files/fr/web/css/filter-function/blur/index.md +++ b/files/fr/web/css/filter-function/blur/index.md @@ -42,12 +42,12 @@ blur(1.17rem); /* Un flou avec un rayon de 1.17rem */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/brightness/index.md b/files/fr/web/css/filter-function/brightness/index.md index a2fbf57c27a883..79697312aa3875 100644 --- a/files/fr/web/css/filter-function/brightness/index.md +++ b/files/fr/web/css/filter-function/brightness/index.md @@ -43,12 +43,12 @@ brightness(200%) /* Double la clarté */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/contrast/index.md b/files/fr/web/css/filter-function/contrast/index.md index 167e7604b02bff..3148ae53bf6a88 100644 --- a/files/fr/web/css/filter-function/contrast/index.md +++ b/files/fr/web/css/filter-function/contrast/index.md @@ -43,12 +43,12 @@ contrast(200%); /* Contraste doublé */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/drop-shadow/index.md b/files/fr/web/css/filter-function/drop-shadow/index.md index c2ceb982543c16..eaac163552e271 100644 --- a/files/fr/web/css/filter-function/drop-shadow/index.md +++ b/files/fr/web/css/filter-function/drop-shadow/index.md @@ -58,13 +58,13 @@ drop-shadow(.5rem .5rem 1rem #e23) ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() - La propriété CSS [`box-shadow`](/fr/docs/Web/CSS/box-shadow) diff --git a/files/fr/web/css/filter-function/grayscale/index.md b/files/fr/web/css/filter-function/grayscale/index.md index c97a653023960f..7d0c50fd09b5ec 100644 --- a/files/fr/web/css/filter-function/grayscale/index.md +++ b/files/fr/web/css/filter-function/grayscale/index.md @@ -42,12 +42,12 @@ grayscale(100%) /* Uniquement en niveaux de gris */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/hue-rotate/index.md b/files/fr/web/css/filter-function/hue-rotate/index.md index 7d3ba525779a90..8babede3b6d6b6 100644 --- a/files/fr/web/css/filter-function/hue-rotate/index.md +++ b/files/fr/web/css/filter-function/hue-rotate/index.md @@ -44,12 +44,12 @@ hue-rotate(405deg); /* Correspond à une rotation de 45deg */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/index.md b/files/fr/web/css/filter-function/index.md index 75271c9ae88d54..0e9cacf7ba777b 100644 --- a/files/fr/web/css/filter-function/index.md +++ b/files/fr/web/css/filter-function/index.md @@ -12,25 +12,25 @@ Le type de donnée **``** représente un effet graphique qui pe Une valeur de type `` se construit avec l'une des fonctions listées ci-après. Chaque fonction utilise un argument et si celui-ci est invalide, aucun filtre n'est appliqué. -- [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) +- [`blur()`]() - : Ajoute un flou sur l'image. -- [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) +- [`brightness()`]() - : Rend l'image plus claire ou plus sombre. -- [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) +- [`contrast()`]() - : Augmente ou diminue le contraste de l'image. -- [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) +- [`drop-shadow()`]() - : Applique une ombre portée derrière l'image. -- [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) +- [`grayscale()`]() - : Convertit l'image en niveaux de gris. -- [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) +- [`hue-rotate()`]() - : Modifie la teinte globale de l'image. -- [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) +- [`invert()`]() - : Inverse les couleurs de l'image. -- [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) +- [`opacity()`]() - : Rend l'image transparente. -- [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) +- [`saturate()`]() - : Sursature ou désature l'image. -- [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) +- [`sepia()`]() - : Convertit l'image en sépia. ## Exemples @@ -59,9 +59,7 @@ Cet exemple fournit une image ainsi qu'un menu pour expérimenter les différent -
  • - -
    • +

  • Valeur CSS actuelle :

    • @@ -74,7 +72,8 @@ Cet exemple fournit une image ainsi qu'un menu pour expérimenter les différent div { width: 300px; height: 300px; - background: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; + background: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) + no-repeat center; } li { @@ -85,7 +84,7 @@ li { } input { - width: 60% + width: 60%; } output { @@ -102,66 +101,82 @@ select { #### JavaScript ```js -const selectElem = document.querySelector('select'); -const divElem = document.querySelector('div'); -const slider = document.querySelector('input'); -const output = document.querySelector('output'); -const curValue = document.querySelector('p code'); +const selectElem = document.querySelector("select"); +const divElem = document.querySelector("div"); +const slider = document.querySelector("input"); +const output = document.querySelector("output"); +const curValue = document.querySelector("p code"); -selectElem.addEventListener('change', () => { +selectElem.addEventListener("change", () => { setSlider(selectElem.value); setDiv(selectElem.value); }); -slider.addEventListener('input', () => { +slider.addEventListener("input", () => { setDiv(selectElem.value); }); function setSlider(filter) { - if(filter === 'blur') { + if (filter === "blur") { slider.value = 0; slider.min = 0; slider.max = 30; slider.step = 1; - slider.setAttribute('data-unit', 'px'); - } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') { + slider.setAttribute("data-unit", "px"); + } else if ( + filter === "brightness" || + filter === "contrast" || + filter === "saturate" + ) { slider.value = 1; slider.min = 0; slider.max = 4; slider.step = 0.05; - slider.setAttribute('data-unit', ''); - } else if(filter === 'drop-shadow') { + slider.setAttribute("data-unit", ""); + } else if (filter === "drop-shadow") { slider.value = 0; slider.min = -20; slider.max = 40; slider.step = 1; - slider.setAttribute('data-unit', 'px'); - } else if(filter === 'opacity') { + slider.setAttribute("data-unit", "px"); + } else if (filter === "opacity") { slider.value = 1; slider.min = 0; slider.max = 1; slider.step = 0.01; - slider.setAttribute('data-unit', ''); - } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { + slider.setAttribute("data-unit", ""); + } else if ( + filter === "grayscale" || + filter === "invert" || + filter === "sepia" + ) { slider.value = 0; slider.min = 0; slider.max = 1; slider.step = 0.01; - slider.setAttribute('data-unit', ''); - } else if(filter === 'hue-rotate') { + slider.setAttribute("data-unit", ""); + } else if (filter === "hue-rotate") { slider.value = 0; slider.min = 0; slider.max = 360; slider.step = 1; - slider.setAttribute('data-unit', 'deg'); + slider.setAttribute("data-unit", "deg"); } } function setDiv(filter) { - if(filter === 'drop-shadow') { - divElem.style.filter = `${selectElem.value}(${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(Math.abs(slider.value/2))}${slider.getAttribute('data-unit')})`; + if (filter === "drop-shadow") { + divElem.style.filter = `${selectElem.value}(${Math.round( + slider.value, + )}${slider.getAttribute("data-unit")} ${Math.round( + slider.value, + )}${slider.getAttribute("data-unit")} ${Math.round( + Math.abs(slider.value / 2), + )}${slider.getAttribute("data-unit")})`; } else { - divElem.style.filter = `${selectElem.value}(${slider.value}${slider.getAttribute('data-unit')}`; + divElem.style.filter = `${selectElem.value}(${ + slider.value + }${slider.getAttribute("data-unit")}`; } updateOutput(); diff --git a/files/fr/web/css/filter-function/invert/index.md b/files/fr/web/css/filter-function/invert/index.md index 52284439b34d74..ab4315b6f0ac60 100644 --- a/files/fr/web/css/filter-function/invert/index.md +++ b/files/fr/web/css/filter-function/invert/index.md @@ -42,12 +42,12 @@ invert(100%); /* Négatif de l'image originale */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/opacity/index.md b/files/fr/web/css/filter-function/opacity/index.md index 5bb7f12b53d59f..fe9884880e6e9e 100644 --- a/files/fr/web/css/filter-function/opacity/index.md +++ b/files/fr/web/css/filter-function/opacity/index.md @@ -45,12 +45,12 @@ opacity(1); /* Aucun effet */ - La propriété CSS [`opacity`](/fr/docs/Web/CSS/opacity) - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/saturate/index.md b/files/fr/web/css/filter-function/saturate/index.md index 404d774416457a..2f97729bec3d23 100644 --- a/files/fr/web/css/filter-function/saturate/index.md +++ b/files/fr/web/css/filter-function/saturate/index.md @@ -43,12 +43,12 @@ saturate(200%); /* Saturation doublée */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/sepia/index.md b/files/fr/web/css/filter-function/sepia/index.md index 151e2748c40f04..b50c607671eacc 100644 --- a/files/fr/web/css/filter-function/sepia/index.md +++ b/files/fr/web/css/filter-function/sepia/index.md @@ -42,12 +42,12 @@ sepia(100%); /* Complètement sépia */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() diff --git a/files/fr/web/css/filter/index.md b/files/fr/web/css/filter/index.md index af839a6ffe96dc..cad81f20052455 100644 --- a/files/fr/web/css/filter/index.md +++ b/files/fr/web/css/filter/index.md @@ -46,18 +46,18 @@ filter: unset; Avec une fonction, on utilisera la forme suivante : ```css -filter: []* | none +filter: [] * | none; ``` En utilisant un élément SVG [``](/fr/docs/Web/SVG/Element/filter), on utilisera la forme suivante : ```css -filter: url(file.svg#filter-element-id) +filter: url(file.svg#filter-element-id); ``` ### Interpolation -Si les deux filtres possèdent chacun une liste de même longueur (sans [``](/fr/docs/Web/CSS/url()), chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut `none`, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise une interpolation discrète. +Si les deux filtres possèdent chacun une liste de même longueur (sans [``](), chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut `none`, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise une interpolation discrète. ## Fonctions @@ -70,7 +70,7 @@ Lorsqu'une seule propriété `filter` possède deux fonctions (ou plus), le rés La fonction `url()` prend comme argument l'emplacement d'un [élément SVG <filter> à appliquer](/fr/docs/Web/SVG/Element/filter). L'URL peut faire référence à une ancre d'un élément spécifique. Cet élément peut être embarqué dans un fichier XML externe. ```css -filter: url(resources.svg#c1) +filter: url(resources.svg#c1); ``` ### `blur()` @@ -78,7 +78,7 @@ filter: url(resources.svg#c1) Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type [``](/fr/docs/Web/CSS/length) mais la fonction n'accepte pas de valeurs exprimées en pourcentages. ```css -filter: blur(5px) +filter: blur(5px); ``` ```html hidden @@ -86,26 +86,54 @@ filter: blur(5px)
    Image originaleExemple live + Exemple live + Équivalent SVG Exemple statique
    + + + +
    - + - + - +
    		+ +
    @@ -113,20 +141,28 @@ filter: blur(5px) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; - -webkit-filter:blur(5px); - -ms-filter:blur(5px); - filter:blur(5px); } + width: 100%; + height: auto; + -webkit-filter: blur(5px); + -ms-filter: blur(5px); + filter: blur(5px); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -147,11 +183,11 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` @@ -165,14 +201,14 @@ table.standard-table td { {{EmbedLiveSample('','100%','236px','','', 'no-codepen')}} -> **Note :** Voir [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) pour plus d'informations. +> **Note :** Voir [`blur()`]() pour plus d'informations. ### `brightness()` -La fonction [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal `0%` créera une image totalement noire et une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à `100%` afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est `1`. +La fonction [`brightness()`]() permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal `0%` créera une image totalement noire et une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à `100%` afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est `1`. ```css -filter: brightness(2) +filter: brightness(2); ``` ```svg @@ -219,27 +255,35 @@ filter: brightness(2) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; - -moz-filter:brightness(2); - -webkit-filter:brightness(2); - -ms-filter:brightness(2); - filter:brightness(2); } + width: 100%; + height: auto; + -moz-filter: brightness(2); + -webkit-filter: brightness(2); + -ms-filter: brightness(2); + filter: brightness(2); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; - height:100%; + height: 100%; width: 85%; } table.standard-table th { @@ -254,24 +298,24 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','231px','','', 'no-codepen')}} -> **Note :** Voir [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) pour plus d'informations. +> **Note :** Voir [`brightness()`]() pour plus d'informations. ### `contrast()` -La fonction [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) permet d'ajuster le contraste de l'image d'entrée. Une valeur de `0%` créera une image entièrement grise. Une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est `1`. +La fonction [`contrast()`]() permet d'ajuster le contraste de l'image d'entrée. Une valeur de `0%` créera une image entièrement grise. Une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est `1`. ```css -filter: contrast(200%) +filter: contrast(200%); ``` ```svg @@ -318,21 +362,29 @@ filter: contrast(200%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; - -moz-filter:contrast(200%); - -webkit-filter:contrast(200%); - -ms-filter:contrast(200%); - filter:contrast(200%); } + width: 100%; + height: auto; + -moz-filter: contrast(200%); + -webkit-filter: contrast(200%); + -ms-filter: contrast(200%); + filter: contrast(200%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -353,21 +405,21 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','203px','','', 'no-codepen')}} -> **Note :** Voir [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) pour plus d'informations. +> **Note :** Voir [`contrast()`]() pour plus d'informations. ### `drop-shadow()` -La fonction [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type [``](/fr/docs/Web/CSS/shadow) (définie dans la spécification CSS3 sur les arrière-plans), une exception : les mots-clés `inset` et `spread` ne sont pas autorisés. Cette fonction est semblable à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleures performances. Les paramètres de l'argument `` sont les suivants : +La fonction [`drop-shadow()`]() permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type [``](/fr/docs/Web/CSS/shadow) (définie dans la spécification CSS3 sur les arrière-plans), une exception : les mots-clés `inset` et `spread` ne sont pas autorisés. Cette fonction est semblable à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleures performances. Les paramètres de l'argument `` sont les suivants : - `` `` (nécessaire) - : Deux valeurs [``](/fr/docs/Web/CSS/length) qui indiquent le décalage de l'ombre portée. `` définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. `` définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page [``](/fr/docs/Web/CSS/length) pour les différentes unités utilisables. @@ -380,7 +432,7 @@ La fonction [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) pe - : Voir [``](/fr/docs/Web/CSS/color_value) pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété [`color`](/fr/docs/Web/CSS/color) est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile). ```css -filter: drop-shadow(16px 16px 10px black) +filter: drop-shadow(16px 16px 10px black); ``` ```svg @@ -458,29 +510,36 @@ filter: drop-shadow(16px 16px 10px black) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: drop-shadow(16px 16px 10px black); -webkit-filter: drop-shadow(16px 16px 10px black); -ms-filter: drop-shadow(16px 16px 10px black); filter: drop-shadow(16px 16px 10px black); } #img12 { - width:100%; - height:auto; - -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + width: 100%; + height: auto; + -moz-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); + -webkit-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); + -ms-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); + filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); } table.standard-table { border: 1px solid rgb(187, 187, 187); @@ -505,25 +564,26 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } -#img3, #img13 { - width:100%; - height:auto; +#img3, +#img13 { + width: 100%; + height: auto; } ``` {{EmbedLiveSample('','100%','400px','','', 'no-codepen')}} -> **Note :** Voir [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) pour plus d'informations. +> **Note :** Voir [`drop-shadow()`]() pour plus d'informations. ### `grayscale()` -Avec la fonction [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()), l'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de `100%` sera complètement en niveaux de gris. `0%` conservera l'image telle quelle. La valeur par défaut du paramètre est `0`. +Avec la fonction [`grayscale()`](), l'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de `100%` sera complètement en niveaux de gris. `0%` conservera l'image telle quelle. La valeur par défaut du paramètre est `0`. ```css -filter: grayscale(100%) +filter: grayscale(100%); ``` ```html hidden @@ -558,21 +618,29 @@ filter: grayscale(100%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; - -moz-filter:grayscale(100%); - -webkit-filter:grayscale(100%); - -ms-filter:grayscale(100%); - filter:grayscale(100%); } + width: 100%; + height: auto; + -moz-filter: grayscale(100%); + -webkit-filter: grayscale(100%); + -ms-filter: grayscale(100%); + filter: grayscale(100%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -593,28 +661,28 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','209px','','', 'no-codepen')}} -> **Note :** Voir [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) pour plus d'informations. +> **Note :** Voir [`grayscale()`]() pour plus d'informations. ### `hue-rotate()` -La fonction [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de `0deg` conservera l'image telle quelle. La valeur par défaut du paramètre est `0deg`. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à `360deg` est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée. +La fonction [`hue-rotate()`]() applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de `0deg` conservera l'image telle quelle. La valeur par défaut du paramètre est `0deg`. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à `360deg` est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée. ```css -filter: hue-rotate(90deg) +filter: hue-rotate(90deg); ``` ```css -filter: hue-rotate(90deg) +filter: hue-rotate(90deg); ``` ```html hidden @@ -646,21 +714,29 @@ filter: hue-rotate(90deg) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; - -moz-filter:hue-rotate(90deg); - -webkit-filter:hue-rotate(90deg); - -ms-filter:hue-rotate(90deg); - filter:hue-rotate(90deg); } + width: 100%; + height: auto; + -moz-filter: hue-rotate(90deg); + -webkit-filter: hue-rotate(90deg); + -ms-filter: hue-rotate(90deg); + filter: hue-rotate(90deg); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -681,32 +757,34 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` ```html - + - + ``` {{EmbedLiveSample('','100%','221px','','', 'no-codepen')}} -> **Note :** Voir [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) pour plus d'informations. +> **Note :** Voir [`hue-rotate()`]() pour plus d'informations. ### `invert()` -La fonction [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de `100%` inversera complètement les couleurs (tel un négatif) et une valeur `0%` conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est `0`. +La fonction [`invert()`]() permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de `100%` inversera complètement les couleurs (tel un négatif) et une valeur `0%` conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est `0`. ```css -filter: invert(100%) +filter: invert(100%); ``` ```html hidden @@ -741,21 +819,29 @@ filter: invert(100%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: invert(100%); -webkit-filter: invert(100%); -ms-filter: invert(100%); - filter: invert(100%); } + filter: invert(100%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -776,24 +862,24 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','407px','','', 'no-codepen')}} -> **Note :** Voir [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) pour plus d'informations. +> **Note :** Voir [`invert()`]() pour plus d'informations. ### `opacity()` -La fonction [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de `0%` rendra l'image complètement transparente et une valeur de `100%` conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est `1`. Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity), toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances. +La fonction [`opacity()`]() permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de `0%` rendra l'image complètement transparente et une valeur de `100%` conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est `1`. Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity), toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances. ```css -filter: opacity(50%) +filter: opacity(50%); ``` ```html hidden @@ -826,21 +912,29 @@ filter: opacity(50%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: opacity(50%); -webkit-filter: opacity(50%); -ms-filter: opacity(50%); - filter: opacity(50%); } + filter: opacity(50%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -861,24 +955,24 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','210px','','', 'no-codepen')}} -> **Note :** Voir [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) pour plus d'informations. +> **Note :** Voir [`opacity()`]() pour plus d'informations. ### `saturate()` -La fonction [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) sature l'image d'entrée. La valeur de l'argument indique la force de la saturation. Une valeur de `0%` fera que l'image sera totalement désaturée et une valeur de `100%` conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à `100%` pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est `1`. +La fonction [`saturate()`]() sature l'image d'entrée. La valeur de l'argument indique la force de la saturation. Une valeur de `0%` fera que l'image sera totalement désaturée et une valeur de `100%` conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à `100%` pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est `1`. ```css -filter: saturate(200%) +filter: saturate(200%); ``` ```html hidden @@ -910,21 +1004,29 @@ filter: saturate(200%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: saturate(200%); -webkit-filter: saturate(200%); -ms-filter: saturate(200%); - filter: saturate(200%); } + filter: saturate(200%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -945,24 +1047,24 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','332px','','', 'no-codepen')}} -> **Note :** Voir [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) pour plus d'informations. +> **Note :** Voir [`saturate()`]() pour plus d'informations. ### `sepia()` -La fonction [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) convertit l'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de `0%`, l'image d'entrée sera inchangée. Les valeurs comprises entre `0%` et `100%` appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est `0`. +La fonction [`sepia()`]() convertit l'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de `0%`, l'image d'entrée sera inchangée. Les valeurs comprises entre `0%` et `100%` appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est `0`. ```css -filter: sepia(100%) +filter: sepia(100%); ``` ```html hidden @@ -997,21 +1099,29 @@ filter: sepia(100%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: sepia(100%); -webkit-filter: sepia(100%); -ms-filter: sepia(100%); - filter: sepia(100%); } + filter: sepia(100%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -1032,24 +1142,24 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','229px','','', 'no-codepen')}} -> **Note :** Voir [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) pour plus d'informations. +> **Note :** Voir [`sepia()`]() pour plus d'informations. ## Enchaîner les fonctions On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image : ```css -filter: contrast(175%) brightness(103%) +filter: contrast(175%) brightness(103%); ``` ```html hidden @@ -1057,15 +1167,35 @@ filter: contrast(175%) brightness(103%)
    Image originale - Exemple
    live + + Exemple live + Exemple statique - - - + + + + + + + + + @@ -1073,17 +1203,24 @@ filter: contrast(175%) brightness(103%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: contrast(175%) brightness(103%); -webkit-filter: contrast(175%) brightness(103%); -ms-filter: contrast(175%) brightness(103%); @@ -1109,11 +1246,11 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` diff --git a/files/fr/web/css/fit-content/index.md b/files/fr/web/css/fit-content/index.md index 05c45f4e328d98..5e2ef54b758397 100644 --- a/files/fr/web/css/fit-content/index.md +++ b/files/fr/web/css/fit-content/index.md @@ -64,8 +64,8 @@ Elle peut également être utilisée pour définir la taille d'une boîte avec {
    Item as wide as the content.
    - Item with more text in it. Because the contents of it are - wider than the maximum width, it is clamped at 300 pixels. + Item with more text in it. Because the contents of it are wider than the + maximum width, it is clamped at 300 pixels.
    Flexible item
    diff --git a/files/fr/web/css/flex-basis/index.md b/files/fr/web/css/flex-basis/index.md index e992bba0385bad..a0d204215b0cec 100644 --- a/files/fr/web/css/flex-basis/index.md +++ b/files/fr/web/css/flex-basis/index.md @@ -94,10 +94,10 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex { - background: #6AB6D8; + background: #6ab6d8; padding: 10px; margin-bottom: 50px; - border: 3px solid #2E86BB; + border: 3px solid #2e86bb; color: white; font-size: 20px; text-align: center; @@ -120,7 +120,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex1:after { - content: 'auto'; + content: "auto"; } .flex2 { @@ -128,7 +128,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex2:after { - content: 'max-content'; + content: "max-content"; } .flex3 { @@ -136,7 +136,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex3:after { - content: 'min-content'; + content: "min-content"; } .flex4 { @@ -144,15 +144,15 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex4:after { - content: 'fit-content'; + content: "fit-content"; } .flex5 { - flex-basis: content; + flex-basis: content; } .flex5:after { - content: 'content'; + content: "content"; } .flex6 { @@ -160,7 +160,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex6:after { - content: 'fill'; + content: "fill"; } ``` diff --git a/files/fr/web/css/flex-direction/index.md b/files/fr/web/css/flex-direction/index.md index 099dcc02b942d9..e453ae76814f15 100644 --- a/files/fr/web/css/flex-direction/index.md +++ b/files/fr/web/css/flex-direction/index.md @@ -64,15 +64,15 @@ flex-direction: unset; ```html

    Un exemple avec column-reverse

    -
    A
    -
    B
    -
    C
    +
    A
    +
    B
    +
    C

    Un exemple avec row-reverse

    -
    A
    -
    B
    -
    C
    +
    A
    +
    B
    +
    C
    ``` diff --git a/files/fr/web/css/flex-flow/index.md b/files/fr/web/css/flex-flow/index.md index 6a2158e4a4f851..36d989d66daccd 100644 --- a/files/fr/web/css/flex-flow/index.md +++ b/files/fr/web/css/flex-flow/index.md @@ -53,14 +53,12 @@ Voir {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} pour plus d'infor ```css element { - /* L'axe principal sera la direction de bloc */ /* et on commencera par le bas (main-start et */ /* main-end inversés. Les éléments flexibles */ /* passent sur une nouvelle ligne si besoin */ flex-flow: column-reverse wrap; - } ``` diff --git a/files/fr/web/css/flex-grow/index.md b/files/fr/web/css/flex-grow/index.md index c1691967e48295..73cd56c564d3b0 100644 --- a/files/fr/web/css/flex-grow/index.md +++ b/files/fr/web/css/flex-grow/index.md @@ -74,12 +74,12 @@ La propriété `flex-grow` se définit avec une valeur de type [``](#num .box { flex-shrink: 1; - border: 3px solid rgba(0,0,0,.2); + border: 3px solid rgba(0, 0, 0, 0.2); } .box1 { flex-grow: 1; - border: 3px solid rgba(0,0,0,.2); + border: 3px solid rgba(0, 0, 0, 0.2); } ``` diff --git a/files/fr/web/css/flex-shrink/index.md b/files/fr/web/css/flex-shrink/index.md index 6167ac9f116b79..849092adee7332 100644 --- a/files/fr/web/css/flex-shrink/index.md +++ b/files/fr/web/css/flex-shrink/index.md @@ -68,7 +68,7 @@ La propriété `flex-shrink` est définie grâce à une valeur de type [`Un exemple de flex-wrap:wrap +

    Un exemple de flex-wrap:wrap

    1
    2
    3
    -

    Un exemple de flex-wrap:nowrap

    +

    Un exemple de flex-wrap:nowrap

    1
    2
    3
    -

    Un exemple de flex-wrap:wrap-reverse

    +

    Un exemple de flex-wrap:wrap-reverse

    1
    2
    diff --git a/files/fr/web/css/flex/index.md b/files/fr/web/css/flex/index.md index 75985477439d1e..71d31eabb7e950 100644 --- a/files/fr/web/css/flex/index.md +++ b/files/fr/web/css/flex/index.md @@ -20,43 +20,33 @@ Pour la plupart des cas, on utilisera une des valeurs suivantes : `auto`, `initi ```html hidden
    - -
    auto
    -
    auto
    -
    auto
    - +
    auto
    +
    auto
    +
    auto
    - -
    auto
    -
    initial
    -
    initial
    - +
    auto
    +
    initial
    +
    initial
    - -
    auto
    -
    auto
    -
    none
    - +
    auto
    +
    auto
    +
    none
    - -
    initial
    -
    none
    -
    none
    - +
    initial
    +
    none
    +
    none
    - -
    4
    -
    2
    -
    1
    - +
    4
    +
    2
    +
    1
    ``` @@ -66,11 +56,11 @@ Pour la plupart des cas, on utilisera une des valeurs suivantes : `auto`, `initi } .flex-container { - background-color: #F4F7F8; - resize: horizontal; - overflow: hidden; - display: flex; - margin: 1em; + background-color: #f4f7f8; + resize: horizontal; + overflow: hidden; + display: flex; + margin: 1em; } .item { @@ -78,7 +68,7 @@ Pour la plupart des cas, on utilisera une des valeurs suivantes : `auto`, `initi padding: 0.5em; width: 110px; min-width: 0; - background-color: #1B5385; + background-color: #1b5385; color: white; font-family: monospace; } @@ -217,8 +207,10 @@ La propriété `flex` peut être définie avec une, deux ou trois valeurs. ```html
    -
    Boîte flexible (cliquez pour basculer l’affichage de la boîte « normale »)
    -
    Boîte « normale »
    +
    + Boîte flexible (cliquez pour basculer l’affichage de la boîte « normale ») +
    +
    Boîte « normale »
    ``` @@ -227,7 +219,7 @@ La propriété `flex` peut être définie avec une, deux ou trois valeurs. ```js var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); -flex.addEventListener("click", function() { +flex.addEventListener("click", function () { raw.style.display = raw.style.display == "none" ? "block" : "none"; }); ``` diff --git a/files/fr/web/css/font-family/index.md b/files/fr/web/css/font-family/index.md index 91d8ca6877bb45..e70fbe31468741 100644 --- a/files/fr/web/css/font-family/index.md +++ b/files/fr/web/css/font-family/index.md @@ -49,7 +49,9 @@ La propriété `font-family` permet de lister différentes familles de police, s Dans l'exemple suivant, on liste deux familles de police, la première utilise une valeur `` et la seconde utilise une valeur `` : ```css -font-family: Gill Sans Extrabold, sans-serif; +font-family: + Gill Sans Extrabold, + sans-serif; ``` ### Valeurs @@ -98,13 +100,21 @@ font-family: "Goudy Bookletter 1911", sans-serif; Et ces déclarations sont **invalides** : ```css example-bad -font-family: Goudy Bookletter 1911, sans-serif; +font-family: + Goudy Bookletter 1911, + sans-serif; font-family: Red/Black, sans-serif; -font-family: "Lucida" Grande, sans-serif; +font-family: + "Lucida" Grande, + sans-serif; font-family: Ahem!, sans-serif; -font-family: test@foo, sans-serif; +font-family: + test @foo, + sans-serif; font-family: #POUND, sans-serif; -font-family: Hawaii 5-0, sans-serif; +font-family: + Hawaii 5-0, + sans-serif; ``` ## Définition formelle @@ -157,36 +167,26 @@ font-family: Hawaii 5-0, sans-serif; ```html
    -Voici un exemple de police avec empattement (serif). + Voici un exemple de police avec empattement (serif).
    -Voici un exemple de police sans empattement (sans-serif). + Voici un exemple de police sans empattement (sans-serif).
    -Voici un exemple de police à chasse fixe (monospace). + Voici un exemple de police à chasse fixe (monospace).
    -
    -Voici un exemple de police cursive. -
    +
    Voici un exemple de police cursive.
    -
    -Voici un exemple de police fantaisie. -
    +
    Voici un exemple de police fantaisie.
    -
    -Voici un exemple de police mathématique. -
    +
    Voici un exemple de police mathématique.
    -
    -Voici un exemple de police emoji. -
    +
    Voici un exemple de police emoji.
    -
    -Voici un exemple de police fangsong. -
    +
    Voici un exemple de police fangsong.
    ``` ### Résultat diff --git a/files/fr/web/css/font-feature-settings/index.md b/files/fr/web/css/font-feature-settings/index.md index a53f0c999d16a5..b2678a3d316478 100644 --- a/files/fr/web/css/font-feature-settings/index.md +++ b/files/fr/web/css/font-feature-settings/index.md @@ -24,7 +24,9 @@ font-feature-settings: normal; font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; -font-feature-settings: "smcp", "swsh" 2; +font-feature-settings: + "smcp", + "swsh" 2; /* Valeurs globales */ font-feature-settings: inherit; @@ -52,30 +54,46 @@ font-feature-settings: unset; ```css /* on utilise les glyphes alternatifs en small-cap */ -.smallcaps { font-feature-settings: "smcp" on; } +.smallcaps { + font-feature-settings: "smcp" on; +} /* on convertit les majuscules et minuscules en petites capitales */ -.allsmallcaps { font-feature-settings: "c2sc", "smcp"; } +.allsmallcaps { + font-feature-settings: "c2sc", "smcp"; +} /* on utilise les zéros barrés d'une barre oblique afin de les différencier de "O" */ -.nicezero { font-feature-settings: "zero"; } +.nicezero { + font-feature-settings: "zero"; +} /* on active les formes historiques */ -.hist { font-feature-settings: "hist"; } +.hist { + font-feature-settings: "hist"; +} /* on désactive les ligatures communément utilisées */ -.noligs { font-feature-settings: "liga" 0; } +.noligs { + font-feature-settings: "liga" 0; +} /* on active les chiffres tabulaires (chasse fixe) */ -td.tabular { font-feature-settings: "tnum"; } +td.tabular { + font-feature-settings: "tnum"; +} /* on active les fractions automatiques */ -.fractions { font-feature-settings: "frac"; } +.fractions { + font-feature-settings: "frac"; +} /* on utilise le deuxième caractère de « swash » */ -.swash { font-feature-settings: "swsh" 2; } +.swash { + font-feature-settings: "swsh" 2; +} /* On active l'ensemble stylistique 7 */ .fancystyle { diff --git a/files/fr/web/css/font-kerning/index.md b/files/fr/web/css/font-kerning/index.md index 339221caf7d080..f8e66411bbd0f6 100644 --- a/files/fr/web/css/font-kerning/index.md +++ b/files/fr/web/css/font-kerning/index.md @@ -6,7 +6,7 @@ translation_of: Web/CSS/font-kerning {{CSSRef}} -La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est *bien crénée*, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.![Exemple pour font-kerning](font-kerning.png) +La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est _bien crénée_, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.![Exemple pour font-kerning](font-kerning.png) ```css font-kerning: auto; @@ -43,7 +43,8 @@ font-kerning: unset; ### CSS ```css -#nokern, #kern { +#nokern, +#kern { font-size: 2rem; font-family: serif; } @@ -66,10 +67,10 @@ font-kerning: unset; ### JavaScript ```js -var input = document.getElementById('input'), - kern = document.getElementById('kern'), - nokern = document.getElementById('nokern'); -input.addEventListener('keyup', function() { +var input = document.getElementById("input"), + kern = document.getElementById("kern"), + nokern = document.getElementById("nokern"); +input.addEventListener("keyup", function () { kern.textContent = input.value; /* On met à jour le contenu */ nokern.textContent = input.value; }); diff --git a/files/fr/web/css/font-language-override/index.md b/files/fr/web/css/font-language-override/index.md index 19fc16af3e8610..ec33400d1e9bfe 100644 --- a/files/fr/web/css/font-language-override/index.md +++ b/files/fr/web/css/font-language-override/index.md @@ -13,8 +13,8 @@ La propriété **`font-language-override`** permet de contrôler l'utilisation d font-language-override: normal; /* values */ -font-language-override: "ENG"; /* Use English glyphs */ -font-language-override: "TRK"; /* Use Turkish glyphs */ +font-language-override: "ENG"; /* Use English glyphs */ +font-language-override: "TRK"; /* Use Turkish glyphs */ /* Valeurs globales */ font-language-override: initial; font-language-override: inherit; @@ -63,7 +63,7 @@ p.para2 { ```html

    Réglage par défaut.

    - Un paragraphe pour lequel font-language-override + Un paragraphe pour lequel font-language-override cible le danois

    ``` diff --git a/files/fr/web/css/font-optical-sizing/index.md b/files/fr/web/css/font-optical-sizing/index.md index a7b2a45a48e9b2..1c32f60370385a 100644 --- a/files/fr/web/css/font-optical-sizing/index.md +++ b/files/fr/web/css/font-optical-sizing/index.md @@ -46,9 +46,9 @@ font-optical-sizing: unset; ```css @font-face { - src: url('AmstelvarAlpha-VF.ttf'); - font-family:'Amstelvar'; - font-style: normal; + src: url("AmstelvarAlpha-VF.ttf"); + font-family: "Amstelvar"; + font-style: normal; } p { @@ -64,12 +64,16 @@ p { ### HTML ```html -

    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 ```html

    Exemples 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
    Extérieur - Intérieur + Intérieur Extérieur
    @@ -142,7 +142,7 @@ On utilisera le même fragment de HTML : ```html Extérieur - Intérieur + Intérieur Extérieur ``` @@ -158,15 +158,21 @@ Dans cet exemple, si la taille par défaut du navigateur vaut `16px`, tous les m ```css /* Le paragraphe sera écrit avec une grande */ /* fonte. */ -p { font-size: xx-large } +p { + font-size: xx-large; +} /* La taille du texte des h1 sera 2.5 fois plus */ /* grande que le texte autour. */ -h1 { font-size: 250% } +h1 { + font-size: 250%; +} /* Le texte contenu dans des éléments span */ /* mesurera 16px */ -span { font-size: 16px; } +span { + font-size: 16px; +} ``` ### Démonstration diff --git a/files/fr/web/css/font-style/index.md b/files/fr/web/css/font-style/index.md index a9019268f02415..b5c0330ffe59d2 100644 --- a/files/fr/web/css/font-style/index.md +++ b/files/fr/web/css/font-style/index.md @@ -40,6 +40,7 @@ La propriété `font-style` s'utilise avec un mot-clé parmi ceux qui suivent. S - `oblique` - : Sélectionne une police qualifiée d'`oblique`. S'il n'y a pas de version oblique, une version `italic` sera sélectionnée à la place. Si aucune version n'est disponible, le style de police est synthétisé. - `oblique` [``](/fr/docs/Web/CSS/angle) + - : Sélectionne une police qualifiée d'`oblique` et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponibles pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur _synthétisera_ une police penchée en tournant les caractères d'une fonte normale. L'angle indiqué (cf. [``](/fr/docs/Web/CSS/angle)) doit être compris entre `-90deg` et `90deg`. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera `14deg`. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne. diff --git a/files/fr/web/css/font-synthesis/index.md b/files/fr/web/css/font-synthesis/index.md index 82701f2557d23e..9957343c0645fb 100644 --- a/files/fr/web/css/font-synthesis/index.md +++ b/files/fr/web/css/font-synthesis/index.md @@ -58,7 +58,9 @@ Cette propriété peut prendre l'une des formes suivantes : ### CSS ```css -.syn {font-synthesis: none;} +.syn { + font-synthesis: none; +} ``` ### Résultat diff --git a/files/fr/web/css/font-variant-alternates/index.md b/files/fr/web/css/font-variant-alternates/index.md index e052d83fdc40c5..8db349fbcfaca0 100644 --- a/files/fr/web/css/font-variant-alternates/index.md +++ b/files/fr/web/css/font-variant-alternates/index.md @@ -54,7 +54,8 @@ Cette propriété peut être définie selon deux formes : - `swash()` - : Cette fonction active l'affichage des glyphes [pour les lettres ornées](https://fr.wikipedia.org/wiki/Lettre_ornée). Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType `swsh` et `cswh` (par exemple `swsh 2` ou `cswh 2`). - `ornaments()` - - : Cette fonction active l'affichage des ornements tels que les [fleurons](https://fr.wikipedia.org/wiki/Fleuron_(typographie)) et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType `ornm` (par exemple `ornm 2`). + + - : Cette fonction active l'affichage des ornements tels que les [fleurons]() et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType `ornm` (par exemple `ornm 2`). > **Note :** Afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (`U+2022`). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité. @@ -84,7 +85,9 @@ Cette propriété peut être définie selon deux formes : ```css @font-feature-values "Leitura Display Swashes" { - @swash { fancy: 1 } + @swash { + fancy: 1; + } } p { diff --git a/files/fr/web/css/font-variant-caps/index.md b/files/fr/web/css/font-variant-caps/index.md index 74eb39c01f9c01..d49bbb87c43349 100644 --- a/files/fr/web/css/font-variant-caps/index.md +++ b/files/fr/web/css/font-variant-caps/index.md @@ -81,11 +81,9 @@ La valeur de cette propriété peut être l'un des mots-clés définis ci-après ```html

    - 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; /* */ -font-variant-east-asian: jis83; /* */ -font-variant-east-asian: jis90; /* */ -font-variant-east-asian: jis04; /* */ -font-variant-east-asian: simplified; /* */ -font-variant-east-asian: traditional; /* */ -font-variant-east-asian: full-width; /* */ +font-variant-east-asian: jis78; /* */ +font-variant-east-asian: jis83; /* */ +font-variant-east-asian: jis90; /* */ +font-variant-east-asian: jis04; /* */ +font-variant-east-asian: simplified; /* */ +font-variant-east-asian: traditional; /* */ +font-variant-east-asian: full-width; /* */ font-variant-east-asian: proportional-width; /* */ font-variant-east-asian: ruby full-width jis83; diff --git a/files/fr/web/css/font-variant-ligatures/index.md b/files/fr/web/css/font-variant-ligatures/index.md index bfc4b011946d4e..fc9e8f5e7656fd 100644 --- a/files/fr/web/css/font-variant-ligatures/index.md +++ b/files/fr/web/css/font-variant-ligatures/index.md @@ -16,15 +16,15 @@ La propriété CSS **`font-variant-ligatures`** contrôle quelles [ligatures](/f /* Valeur avec un mot-clé */ font-variant-ligatures: normal; font-variant-ligatures: none; -font-variant-ligatures: common-ligatures; /* */ -font-variant-ligatures: no-common-ligatures; /* */ -font-variant-ligatures: discretionary-ligatures; /* */ +font-variant-ligatures: common-ligatures; /* */ +font-variant-ligatures: no-common-ligatures; /* */ +font-variant-ligatures: discretionary-ligatures; /* */ font-variant-ligatures: no-discretionary-ligatures; /* */ -font-variant-ligatures: historical-ligatures; /* */ -font-variant-ligatures: no-historical-ligatures; /* */ -font-variant-ligatures: contextual; /* */ -font-variant-ligatures: no-contextual; /* */ -font-variant-ligatures: contextual; /* */ +font-variant-ligatures: historical-ligatures; /* */ +font-variant-ligatures: no-historical-ligatures; /* */ +font-variant-ligatures: contextual; /* */ +font-variant-ligatures: no-contextual; /* */ +font-variant-ligatures: contextual; /* */ /* Valeurs globales */ font-variant-ligatures: inherit; @@ -39,24 +39,29 @@ La valeur de cette propriété peut être l'un des mots-clés définis ci-après ### Valeurs - `normal` + - : Cette valeur active les ligatures et les formes contextuelles courantes pour un rendu correct. Les ligatures et formes activées dépendent de la police utilisée, de la langue et de certains scripts. C'est la valeur par défaut. - `none` + - : Cette valeur désactive toutes les ligatures et formes contextuelles, y compris celles couramment utilisées. - `` + - : Ces valeurs contrôlent les ligatures les plus courantes, comme `fi`, `ffi`, `th` et autres. Elles correspondent aux valeurs OpenType `liga` et `clig`. Deux valeurs sont possibles : - `common-ligatures` : active ces ligatures. Notez que la valeur `normal` active ces ligatures. - `no-common-ligatures` : désactive ces ligatures. - `` + - : Ces valeurs contrôlent les ligatures spécifiques, spécifiques à la police et définies par le fondeur. Elles correspondent à la valeur OpenType `dlig`. Deux valeurs sont possibles : - `discretionary-ligatures` : active ces ligatures. - `no-discretionary-ligatures` : désactive ces ligatures. Notez que la valeur `normal` désactive ces ligatures. - `` + - : Ces valeurs contrôlent les ligatures historiques, utilisées dans les livres anciens, comme l'allemand tz qui devient ꜩ. Elles correspondent à la valeur OpenType `hlig`. Deux valeurs sont possibles : - `historical-ligatures` : active ces ligatures. - `no-historical-ligatures` : désactive ces ligatures. Notez que la valeur `normal` désactive ces ligatures. @@ -83,49 +88,49 @@ La valeur de cette propriété peut être l'un des mots-clés définis ci-après #### HTML ```html - +

    - 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

    ``` diff --git a/files/fr/web/css/font-variant-numeric/index.md b/files/fr/web/css/font-variant-numeric/index.md index d2e07b048a97f2..2a6be4fe3163bb 100644 --- a/files/fr/web/css/font-variant-numeric/index.md +++ b/files/fr/web/css/font-variant-numeric/index.md @@ -16,12 +16,12 @@ La propriété [CSS](/fr/docs/Web/CSS) **`font-variant-numeric`** permet de cont font-variant-numeric: normal; font-variant-numeric: ordinal; font-variant-numeric: slashed-zero; -font-variant-numeric: lining-nums; /* */ -font-variant-numeric: oldstyle-nums; /* */ -font-variant-numeric: proportional-nums; /* */ -font-variant-numeric: tabular-nums; /* */ -font-variant-numeric: diagonal-fractions; /* */ -font-variant-numeric: stacked-fractions; /* */ +font-variant-numeric: lining-nums; /* */ +font-variant-numeric: oldstyle-nums; /* */ +font-variant-numeric: proportional-nums; /* */ +font-variant-numeric: tabular-nums; /* */ +font-variant-numeric: diagonal-fractions; /* */ +font-variant-numeric: stacked-fractions; /* */ font-variant-numeric: oldstyle-nums stacked-fractions; /* Valeurs globales */ diff --git a/files/fr/web/css/font-variant-position/index.md b/files/fr/web/css/font-variant-position/index.md index 97f81bc3d2ba9e..75761bdb93e03e 100644 --- a/files/fr/web/css/font-variant-position/index.md +++ b/files/fr/web/css/font-variant-position/index.md @@ -60,10 +60,11 @@ La valeur de cette propriété est définie grâce à l'un des mots-clés défin ### HTML ```html -

    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?"

    -
    I'm heavy
    +
    + I'm heavy
    I'm lighter
    ``` @@ -204,7 +204,7 @@ p { /* Le texte du div utilise plus fort que normal mais moins fort que standard. */ div { - font-weight: 600; + font-weight: 600; } /* Le texte du span utilise un niveau de graisse diff --git a/files/fr/web/css/font/index.md b/files/fr/web/css/font/index.md index da577e7e1ae47a..3c453d363ea81c 100644 --- a/files/fr/web/css/font/index.md +++ b/files/fr/web/css/font/index.md @@ -19,10 +19,14 @@ Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies av ```css /* size | family */ -font: 2em "Open Sans", sans-serif; +font: + 2em "Open Sans", + sans-serif; /* style | size | family */ -font: italic 2em "Open Sans", sans-serif; +font: + italic 2em "Open Sans", + sans-serif; /* style | variant | weight | size/line-height | family */ font: italic small-caps bolder 16px/3 cursive; @@ -176,29 +180,25 @@ Si `font` est définie comme une propriété raccourcie : ```html

    - « 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 ?

    ``` diff --git a/files/fr/web/css/gradient/conic-gradient/index.md b/files/fr/web/css/gradient/conic-gradient/index.md index 7f82f295e33d27..8e97a3d90ef0fc 100644 --- a/files/fr/web/css/gradient/conic-gradient/index.md +++ b/files/fr/web/css/gradient/conic-gradient/index.md @@ -137,8 +137,7 @@ div { ```css div { - background-image: - conic-gradient(from 40deg, #fff, #000); + background-image: conic-gradient(from 40deg, #fff, #000); } ``` @@ -182,9 +181,8 @@ div { ```css div { - background: conic-gradient( - red 36deg, orange 36deg 170deg, yellow 170deg); - border-radius: 50% + background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg); + border-radius: 50%; } ``` @@ -205,9 +203,12 @@ div { ```css div { - background: - conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) - top left / 25% 25% repeat; + background: conic-gradient( + #fff 0.25turn, + #000 0.25turn 0.5turn, + #fff 0.5turn 0.75turn, + #000 0.75turn + ) top left / 25% 25% repeat; border: 1px solid; } ``` diff --git a/files/fr/web/css/gradient/index.md b/files/fr/web/css/gradient/index.md index d827e0d9bfcc79..385ff4800940ae 100644 --- a/files/fr/web/css/gradient/index.md +++ b/files/fr/web/css/gradient/index.md @@ -24,11 +24,56 @@ A rainbow made from a gradient ```css body { - background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); - background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); - background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); - background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); - background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); + background: -moz-linear-gradient( + left, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + background: -webkit-linear-gradient( + left, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + background: -ms-linear-gradient( + left, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + background: -o-linear-gradient( + left, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + background: linear-gradient( + to right, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); } ``` @@ -40,12 +85,12 @@ Ils sont générés à partir de la fonction {{cssxref("radial-gradient", "radia ```html hidden Radial gradient - ``` ```css body { - background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent; + background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll + 0% 0% transparent; background: radial-gradient(red, yellow, rgb(30, 144, 255)); } ``` @@ -62,8 +107,20 @@ Repeating gradient ```css body { - background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); - background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px); + background: -moz-repeating-linear-gradient( + top left -45deg, + red, + red 5px, + white 5px, + white 10px + ); + background: repeating-linear-gradient( + to top left, + red, + red 5px, + white 5px, + white 10px + ); } ``` diff --git a/files/fr/web/css/gradient/linear-gradient/index.md b/files/fr/web/css/gradient/linear-gradient/index.md index b810717e823f05..15b0091f50147e 100644 --- a/files/fr/web/css/gradient/linear-gradient/index.md +++ b/files/fr/web/css/gradient/linear-gradient/index.md @@ -62,7 +62,7 @@ linear-gradient(45deg, red 0 50%, blue 50% 100%); Comme tout autre dégradé, un dégradé linéaire [ne possède pas de dimensions intrinsèques](/fr/docs/Web/CSS/image#description) ; c'est-à-dire qu'il n'a pas de taille naturelle ou préférée ni de ratio d'affichage préféré. Sa taille réelle correspondra à celle de l'élément auquel il s'applique. -Pour créer un dégradé linéaire qui se répète jusqu'à remplir son conteneur, on utilisera plutôt la fonction [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()). +Pour créer un dégradé linéaire qui se répète jusqu'à remplir son conteneur, on utilisera plutôt la fonction [`repeating-linear-gradient()`](). Étant donné que le type `` est un sous-type du type ``, on peut utiliser des dégradés à tout endroit où on peut utiliser une image. C'est également pour cette raison que `linear-gradient()` ne fonctionnera pas pour la propriété [`background-color`](/fr/docs/Web/CSS/background-color) et pour les autres propriétés qui utilisent le type de données [``](/fr/docs/Web/CSS/color). @@ -158,8 +158,14 @@ body { ```css body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); + background: linear-gradient( + to right, + red 20%, + orange 20% 40%, + yellow 40% 60%, + green 60% 80%, + blue 80% + ); } ``` @@ -181,13 +187,13 @@ Voir la page [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS - [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) - Les autres fonctions de dégradés : - - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) - - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) - - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) - - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) - - [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()) + - [`repeating-linear-gradient()`]() + - [`radial-gradient()`]() + - [`repeating-radial-gradient()`]() + - [`conic-gradient()`]() + - [`repeating-conic-gradient()`]() - [``](/fr/docs/Web/CSS/image) -- [`element()`](/fr/docs/Web/CSS/element()) -- [`image()`](/fr/docs/Web/CSS/image/image()) -- [`image-set()`](/fr/docs/Web/CSS/image/image-set()) -- [`cross-fade()`](/fr/docs/Web/CSS/cross-fade()) +- [`element()`]() +- [`image()`]() +- [`image-set()`]() +- [`cross-fade()`]() diff --git a/files/fr/web/css/gradient/radial-gradient/index.md b/files/fr/web/css/gradient/radial-gradient/index.md index 915b029946f1c9..90844bb54cb5b6 100644 --- a/files/fr/web/css/gradient/radial-gradient/index.md +++ b/files/fr/web/css/gradient/radial-gradient/index.md @@ -28,20 +28,22 @@ Un dégradé radial est défini en indiquant le centre du dégradé (là où ser - `` - : La forme du contour du dégradé. Elle vaut soit `circle` (la forme du dégradé sera un cercle de rayon constant) ou `ellipse` (la forme est une ellipse alignée sur les axes). La valeur par défaut est `ellipse`. - `` + - : La taille du contour du dégradé. La valeur par défaut est `farthest-corner`. Cette taille peut être définie explicitement ou décrite par un mot-clé. Pour les définitions des mots-clés qui suivent, on considèrera que les bords de la boîte du dégradé s'étendent indéfiniment dans les deux directions (plutôt que d'être finies). Les dégradés circulaires et elliptiques prennent en charge les mots-clés suivants pour `` : - | Mot-clé | Description | - | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | Mot-clé | Description | + | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `closest-side` | La forme du contour du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses). | - | `closest-corner` | La forme du contour du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre. | - | `farthest-side` | Cette valeur fonctionne de façon semblable à `closest-side`, sauf que ce seront les côtés les plus éloignés qui seront utilisés. | - | `farthest-corner` | La valeur par défaut. Cette valeur fonctionne de façon semblable à `closest-corner`, sauf que ce sera le coin le plus éloigné du centre qui sera utilisé. | + | `closest-corner` | La forme du contour du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre. | + | `farthest-side` | Cette valeur fonctionne de façon semblable à `closest-side`, sauf que ce seront les côtés les plus éloignés qui seront utilisés. | + | `farthest-corner` | La valeur par défaut. Cette valeur fonctionne de façon semblable à `closest-corner`, sauf que ce sera le coin le plus éloigné du centre qui sera utilisé. | Si `` est définie avec `circle`, la taille pourra être fournie explicitement avec une valeur [``](/fr/docs/Web/CSS/length), qui indique le rayon du cercle (les valeurs négatives sont invalides). Si `` est définie avec `ellipse` (ou que cette valeur est omise), la taille pourra être indiquée explicitement avec une valeur [``](/fr/docs/Web/CSS/length-percentage) dont les deux composantes fournissent une taille d'ellipse explicite (la première représentant le rayon horizontal et la seconde le rayon vertical). Les valeurs exprimées en pourcentages sont alors relatives à la dimension correspondante de la boîte du dégradé. Les valeurs négatives sont invalides. + - `` - : Une valeur d'arrêt de couleur, composée d'une valeur [``](/fr/docs/Web/CSS/color_value), suivie d'une ou deux positions d'arrêt optionnelles (définies par une valeur [``](/fr/docs/Web/CSS/percentage) ou [``](/fr/docs/Web/CSS/length) le long de l'axe du dégradé). Un pourcentage à `0%`, ou une longueur de `0`, représentera le centre du dégradé ; la valeur `100%` représentera l'intersection de la forme du contour avec la ligne d'évolution du dégradé. Les valeurs de pourcentages intermédiaire sont positionnées linéairement le long du dégradé. Inclure deux fois la même position pour deux arrêts différents revient à créer une rupture franche entre les deux couleurs. - `` @@ -111,8 +113,11 @@ Les arrêts de couleurs sont positionnés selon une ligne virtuelle qui part du ```css .radial-gradient { - background-image: radial-gradient(farthest-corner at 40px 40px, - #f35 0%, #43e 100%); + background-image: radial-gradient( + farthest-corner at 40px 40px, + #f35 0%, + #43e 100% + ); } ``` diff --git a/files/fr/web/css/gradient/repeating-conic-gradient/index.md b/files/fr/web/css/gradient/repeating-conic-gradient/index.md index 858613610d31ef..457a8bc38b4bc5 100644 --- a/files/fr/web/css/gradient/repeating-conic-gradient/index.md +++ b/files/fr/web/css/gradient/repeating-conic-gradient/index.md @@ -17,9 +17,9 @@ La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`repeati est centré dans le quart supérieur gauche et tourné de 3 degrés, il n'y a donc pas de ligne horizontale */ background: repeating-conic-gradient( - from 3deg at 25% 25%, - hsl(200, 100%, 50%) 0deg 15deg, - hsl(200, 100%, 60%) 10deg 30deg + from 3deg at 25% 25%, + hsl(200, 100%, 50%) 0deg 15deg, + hsl(200, 100%, 60%) 10deg 30deg ); ``` @@ -109,8 +109,7 @@ div { ```css div { - background-image: - repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); + background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); } ``` @@ -133,7 +132,12 @@ div { div { background: repeating-conic-gradient( from 3deg at 25% 25%, - green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); + green, + blue 2deg 5deg, + green, + yellow 15deg 18deg, + green 20deg + ); } ``` diff --git a/files/fr/web/css/gradient/repeating-linear-gradient/index.md b/files/fr/web/css/gradient/repeating-linear-gradient/index.md index 8e31dc9b86d3c3..d1990bcca34d7b 100644 --- a/files/fr/web/css/gradient/repeating-linear-gradient/index.md +++ b/files/fr/web/css/gradient/repeating-linear-gradient/index.md @@ -72,15 +72,19 @@ body { ```css body { - background-image: repeating-linear-gradient(-45deg, - transparent, - transparent 20px, - black 20px, - black 40px); + background-image: repeating-linear-gradient( + -45deg, + transparent, + transparent 20px, + black 20px, + black 40px + ); /* avec plusieurs arrêts de couleur */ - background-image: repeating-linear-gradient(-45deg, - transparent 0 20px, - black 20px 40px); + background-image: repeating-linear-gradient( + -45deg, + transparent 0 20px, + black 20px 40px + ); } ``` @@ -97,10 +101,12 @@ body { ```css body { - background-image: repeating-linear-gradient(to bottom, - rgb(26,198,204), - rgb(26,198,204) 7%, - rgb(100,100,100) 10%); + background-image: repeating-linear-gradient( + to bottom, + rgb(26, 198, 204), + rgb(26, 198, 204) 7%, + rgb(100, 100, 100) 10% + ); } ``` diff --git a/files/fr/web/css/gradient/repeating-radial-gradient/index.md b/files/fr/web/css/gradient/repeating-radial-gradient/index.md index d241a2d9cb8140..f3b260391a567c 100644 --- a/files/fr/web/css/gradient/repeating-radial-gradient/index.md +++ b/files/fr/web/css/gradient/repeating-radial-gradient/index.md @@ -41,12 +41,12 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); - : Un mot-clé décrivant la taille de la forme de terminaison. Les valeurs possibles sont : - | Mot-clé | Description | - | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | Mot-clé | Description | + | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `closest-side` | La forme du contour du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses). | - | `closest-corner` | La forme du contour du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre. | - | `farthest-side` | Cette valeur fonctionne de façon semblable à `closest-side`, sauf que ce seront les côtés les plus éloignés qui seront utilisés. | - | `farthest-corner` | La valeur par défaut. Cette valeur fonctionne de façon semblable à `closest-corner`, sauf que ce sera le coin le plus éloigné du centre qui sera utilisé. | + | `closest-corner` | La forme du contour du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre. | + | `farthest-side` | Cette valeur fonctionne de façon semblable à `closest-side`, sauf que ce seront les côtés les plus éloignés qui seront utilisés. | + | `farthest-corner` | La valeur par défaut. Cette valeur fonctionne de façon semblable à `closest-corner`, sauf que ce sera le coin le plus éloigné du centre qui sera utilisé. | > **Note :** Les premières implémentations de cette fonction incluaient d'autres mots-clés (`cover` et `contain`) qui sont des synonymes respectifs des mots-clés standards `farthest-corner` et `closest-side`. Seuls les mots-clés standards doivent être utilisés, certaines implémentations ayant déjà abandonné ces anciennes variantes. @@ -74,7 +74,12 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); ```css .radial-gradient { - background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); + background: repeating-radial-gradient( + black, + black 5px, + white 5px, + white 10px + ); } ``` @@ -95,10 +100,18 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); ```css .radial-gradient { - background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, - red, black 5%, blue 5%, green 10%); - background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, - red 0 5%, green 5% 10%); + background: repeating-radial-gradient( + ellipse farthest-corner at 20% 20%, + red, + black 5%, + blue 5%, + green 10% + ); + background: repeating-radial-gradient( + ellipse farthest-corner at 20% 20%, + red 0 5%, + green 5% 10% + ); } ``` diff --git a/files/fr/web/css/grid-auto-flow/index.md b/files/fr/web/css/grid-auto-flow/index.md index f6ed3a9bbaa9c3..08c5b808fb018e 100644 --- a/files/fr/web/css/grid-auto-flow/index.md +++ b/files/fr/web/css/grid-auto-flow/index.md @@ -62,7 +62,7 @@ Cette propriété peut prendre deux formes : display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); - grid-auto-flow: column; /* ou 'row', 'row dense', 'column dense' */ + grid-auto-flow: column; /* ou 'row', 'row dense', 'column dense' */ } #item1 { @@ -102,7 +102,7 @@ Cette propriété peut prendre deux formes : - + ``` diff --git a/files/fr/web/css/grid-auto-rows/index.md b/files/fr/web/css/grid-auto-rows/index.md index 4d2958bc4b8a64..b5ae5552bcddb3 100644 --- a/files/fr/web/css/grid-auto-rows/index.md +++ b/files/fr/web/css/grid-auto-rows/index.md @@ -48,7 +48,6 @@ grid-auto-rows: 0.5fr 3fr 1fr; grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); - /* Valeurs globales */ grid-auto-rows: inherit; grid-auto-rows: initial; diff --git a/files/fr/web/css/grid-column-end/index.md b/files/fr/web/css/grid-column-end/index.md index 786f1c9c3274f8..98efa4b0558e34 100644 --- a/files/fr/web/css/grid-column-end/index.md +++ b/files/fr/web/css/grid-column-end/index.md @@ -104,7 +104,9 @@ grid-column-end: unset; ``` ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; diff --git a/files/fr/web/css/grid-column-start/index.md b/files/fr/web/css/grid-column-start/index.md index bbae5f3c0c5a7a..19483322d46822 100644 --- a/files/fr/web/css/grid-column-start/index.md +++ b/files/fr/web/css/grid-column-start/index.md @@ -114,7 +114,9 @@ La valeur de cette propriété prend la forme d'une seule valeur ``. ``` ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; diff --git a/files/fr/web/css/grid-row-end/index.md b/files/fr/web/css/grid-row-end/index.md index de6489df66aaba..64d64ce74314a8 100644 --- a/files/fr/web/css/grid-row-end/index.md +++ b/files/fr/web/css/grid-row-end/index.md @@ -104,7 +104,9 @@ grid-row-end: unset; ``` ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; diff --git a/files/fr/web/css/grid-row-start/index.md b/files/fr/web/css/grid-row-start/index.md index 7af9b2fe5f2ef5..6216702eab5739 100644 --- a/files/fr/web/css/grid-row-start/index.md +++ b/files/fr/web/css/grid-row-start/index.md @@ -112,7 +112,9 @@ La valeur de cette propriété prend la forme d'une seule valeur ``. ``` ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; diff --git a/files/fr/web/css/grid-template-areas/index.md b/files/fr/web/css/grid-template-areas/index.md index 28c58295bbffd7..60fc33f940f9bd 100644 --- a/files/fr/web/css/grid-template-areas/index.md +++ b/files/fr/web/css/grid-template-areas/index.md @@ -21,8 +21,9 @@ grid-template-areas: none; /* Valeurs de chaînes */ /* Type */ grid-template-areas: "a b"; -grid-template-areas: "a b b" - "a c d"; +grid-template-areas: + "a b b" + "a c d"; /* Valeurs globales */ grid-template-areas: inherit; @@ -65,9 +66,10 @@ grid-template-areas: unset; display: grid; width: 100%; height: 250px; - grid-template-areas: "head head" - "nav main" - "nav foot"; + grid-template-areas: + "head head" + "nav main" + "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } diff --git a/files/fr/web/css/grid-template-columns/index.md b/files/fr/web/css/grid-template-columns/index.md index 57818c9d50862b..6f4c7974ed877b 100644 --- a/files/fr/web/css/grid-template-columns/index.md +++ b/files/fr/web/css/grid-template-columns/index.md @@ -26,13 +26,16 @@ grid-template-columns: repeat(3, 200px); /* Valeurs */ grid-template-columns: 200px repeat(auto-fill, 100px) 300px; -grid-template-columns: minmax(100px, max-content) - repeat(auto-fill, 200px) 20%; -grid-template-columns: [linename1] 100px [linename2] - repeat(auto-fit, [linename3 linename4] 300px) - 100px; -grid-template-columns: [linename1 linename2] 100px - repeat(auto-fit, [linename1] 300px) [linename3]; +grid-template-columns: + minmax(100px, max-content) + repeat(auto-fill, 200px) 20%; +grid-template-columns: + [linename1] 100px [linename2] + repeat(auto-fit, [linename3 linename4] 300px) + 100px; +grid-template-columns: + [linename1 linename2] 100px + repeat(auto-fit, [linename1] 300px) [linename3]; /* Valeurs globales */ grid-template-columns: inherit; diff --git a/files/fr/web/css/grid-template-rows/index.md b/files/fr/web/css/grid-template-rows/index.md index e89ccb82e58436..09917d6fa1ed4f 100644 --- a/files/fr/web/css/grid-template-rows/index.md +++ b/files/fr/web/css/grid-template-rows/index.md @@ -27,14 +27,16 @@ grid-template-rows: repeat(3, 200px); /* Valeurs */ grid-template-rows: 200px repeat(auto-fill, 100px) 300px; -grid-template-rows: minmax(100px, max-content) - repeat(auto-fill, 200px) 20%; -grid-template-rows: [linename1] 100px [linename2] - repeat(auto-fit, [linename3 linename4] 300px) - 100px; -grid-template-rows: [linename1 linename2] 100px - repeat(auto-fit, [linename1] 300px) [linename3]; - +grid-template-rows: + minmax(100px, max-content) + repeat(auto-fill, 200px) 20%; +grid-template-rows: + [linename1] 100px [linename2] + repeat(auto-fit, [linename3 linename4] 300px) + 100px; +grid-template-rows: + [linename1 linename2] 100px + repeat(auto-fit, [linename1] 300px) [linename3]; /* Valeurs globales */ grid-template-rows: inherit; diff --git a/files/fr/web/css/grid-template/index.md b/files/fr/web/css/grid-template/index.md index e0e356d243c70e..4c2a4ff51cfed5 100644 --- a/files/fr/web/css/grid-template/index.md +++ b/files/fr/web/css/grid-template/index.md @@ -25,13 +25,16 @@ grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%; grid-template: fit-content(100px) / fit-content(40%); /* Valeurs utilisant grid-template-areas grid-template-rows / grid-template-column */ -grid-template: "a a a" - "b b b"; -grid-template: "a a a" 20% - "b b b" auto; -grid-template: [header-top] "a a a" [header-bottom] - [main-top] "b b b" 1fr [main-bottom] - / auto 1fr auto; +grid-template: + "a a a" + "b b b"; +grid-template: + "a a a" 20% + "b b b" auto; +grid-template: + [header-top] "a a a" [header-bottom] + [main-top] "b b b" 1fr [main-bottom] + / auto 1fr auto; /* Valeurs globales */ grid-template: inherit; @@ -70,10 +73,11 @@ grid-template: unset; display: grid; width: 100%; height: 200px; - grid-template: [header-left] "head head" 30px [header-right] - [main-left] "nav main" 1fr [main-right] - [footer-left] "nav foot" 30px [footer-right] - / 120px 1fr; + grid-template: + [header-left] "head head" 30px [header-right] + [main-left] "nav main" 1fr [main-right] + [footer-left] "nav foot" 30px [footer-right] + / 120px 1fr; } header { diff --git a/files/fr/web/css/hanging-punctuation/index.md b/files/fr/web/css/hanging-punctuation/index.md index 0c7c66f96ab01b..adc2954475a454 100644 --- a/files/fr/web/css/hanging-punctuation/index.md +++ b/files/fr/web/css/hanging-punctuation/index.md @@ -75,14 +75,11 @@ Cette propriété peut être définie grâce à une, deux ou trois valeurs : ```html

    - 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 { ```html
      -
    • none: aucun trait d'union, dépassement si nécessaire +
    • + none: aucun trait d'union, dépassement si nécessaire

      An extreme­ly long English word

      • -
    • manual: un trait d'union uniquement à &hyphen; ou &shy; (si nécessaire) +
    • + manual: un trait d'union uniquement à &hyphen; ou &shy; + (si nécessaire)

      An extreme­ly 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 extreme­ly long English word

    diff --git a/files/fr/web/css/id_selectors/index.md b/files/fr/web/css/id_selectors/index.md index 7ad344b1bdef76..5724672ab79899 100644 --- a/files/fr/web/css/id_selectors/index.md +++ b/files/fr/web/css/id_selectors/index.md @@ -23,7 +23,6 @@ Un sélecteur d'identifiant (_ID selector_) permet, pour un document HTML, de ci > **Note :** Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}: > -> > ``` > [id=valeur_identifiant] { déclarations } > ``` diff --git a/files/fr/web/css/image-orientation/index.md b/files/fr/web/css/image-orientation/index.md index f5f8ed7e7f146c..f9a5ec5b2e671b 100644 --- a/files/fr/web/css/image-orientation/index.md +++ b/files/fr/web/css/image-orientation/index.md @@ -61,7 +61,7 @@ L'image suivante a suivi une rotation de 180° et la propriété `image-orientat ```css hidden img { - margin: .5rem 0; + margin: 0.5rem 0; } label { @@ -70,23 +70,29 @@ label { ``` ```html hidden -Orientation obtenue à partir de l'image +Orientation obtenue à partir de l'image
    - +
    - +
    ``` ```js hidden -document.addEventListener('change', evt => { +document.addEventListener("change", (evt) => { document.getElementById("image").style.imageOrientation = evt.target.value; }); ``` diff --git a/files/fr/web/css/image/image-set/index.md b/files/fr/web/css/image/image-set/index.md index de21d035a95cf1..f206f74fa30473 100644 --- a/files/fr/web/css/image/image-set/index.md +++ b/files/fr/web/css/image/image-set/index.md @@ -56,7 +56,8 @@ Il n'y a pas de méthode de recours native en l'absence de prise en charge de `i background-image: url("large-balloons.jpg"); background-image: image-set( "large-balloons.avif" type("image/avif"), - "large-balloons.jpg" type("image/jpeg")); + "large-balloons.jpg" type("image/jpeg") + ); } ``` diff --git a/files/fr/web/css/image/image/index.md b/files/fr/web/css/image/image/index.md index 534d38fa5c1f54..e6e1c04067273d 100644 --- a/files/fr/web/css/image/image/index.md +++ b/files/fr/web/css/image/image/index.md @@ -32,7 +32,7 @@ Le premier paramètre de la fonction `image()` est optionnel et indique la direc Une différence fondamentale entre `url()` et `image()` est la possibilité d'ajouter un identifiant de fragment d'image. Un identifiant de fragment est donné par : un point de départ défini par ses coordonnées x et y et par une largeur et une hauteur. Cela permet de ne sélectionner qu'une section de l'image source. La section ainsi définie devient une image à part entière aux yeux du moteur de rendu. ```css -background-image: image('monimage.webp#xywh=0,20,40,60'); +background-image: image("monimage.webp#xywh=0,20,40,60"); ``` Avec l'exemple précédent, l'image d'arrière-plan utilisée sera une section de l'image `monimage.webp` commençant aux coordonnées (0px,20px), ayant une largeur de 40px et une hauteur de 60px. @@ -75,13 +75,15 @@ Cette fonction peut aider à améliorer l'accessibilité en fournissant une coul ```html
    • La puce est une flèche pointant à droite et située à gauche
      • -
    • La puce est la même flèche mais renversée pour pointer à gauche.
      • +
    • + La puce est la même flèche mais renversée pour pointer à gauche. +
    ``` ```css ul { - list-style-image: image(ltr 'rightarrow.png'); + list-style-image: image(ltr "rightarrow.png"); } ``` @@ -92,7 +94,9 @@ Pour les éléments de la liste allant de gauche à droite (ceux avec `dir="ltr" ### Afficher une section de l'image ```html -
    Vous pouvez survoler cet élément pour voir un autre curseur
    +
    + Vous pouvez survoler cet élément pour voir un autre curseur +
    ``` ```css @@ -108,21 +112,25 @@ Lorsqu'on survole la boîte, le curseur changera pour afficher une section d'un ### Placer une couleur sur une image en arrière-plan ```css hidden -.quarterlogo {height: 200px; width: 200px; border: 1px solid;} +.quarterlogo { + height: 200px; + width: 200px; + border: 1px solid; +} ``` ```css .quarterlogo { - background-image: - image(rgba(0, 0, 0, 0.25)), - url("firefox.png"); + background-image: image(rgba(0, 0, 0, 0.25)), url("firefox.png"); background-size: 25%; background-repeat: no-repeat; } ``` ```html - + ``` Dans l'exemple précédent, on placera un masque noir semi-transparent sur le logo Firefox utilisé comme image d'arrière-plan. Si on avait utilisé la propriété `background-color` à la place, la couleur aurait été placée sous le logo et non sur lui. De plus, le conteneur entier aurait eu cette couleur en arrière-plan. Avec `image()` et [`background-size`](/fr/docs/Web/CSS/background-size) (tout en empêchant l'image de se répéter grâce à [`background-repeat`](/fr/docs/Web/CSS/background-repeat)), le voile noir ne couvrira qu'un quart du conteneur. diff --git a/files/fr/web/css/image/index.md b/files/fr/web/css/image/index.md index fc964be3e16de2..7ed627f9207897 100644 --- a/files/fr/web/css/image/index.md +++ b/files/fr/web/css/image/index.md @@ -35,17 +35,17 @@ Le moteur CSS détermine la _taille effective_ d'un objet en utilisant : 2. Sa taille indiquée, définie par les propriétés CSS telles que [`width`](/fr/docs/Web/CSS/width), [`height`](/fr/docs/Web/CSS/height), ou [`background-size`](/fr/docs/Web/CSS/background-size) 3. Sa taille par défaut, déterminée en fonction de la propriété avec laquelle l'image est utilisée (voir le tableau qui suit) -| Type d'objet (propriété CSS) | Taille par défaut de l'objet | -| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -| [`background-image`](/fr/docs/Web/CSS/background-image) | La taille de la zone de positionnement de l'arrière-plan de l'élément | -| [`list-style-image`](/fr/docs/Web/CSS/list-style-image) | La taille d'un caractère en `1em` | -| [`border-image-source`](/fr/docs/Web/CSS/border-image-source) | La taille de la zone de bordure de l'élément | -| [`cursor`](/fr/docs/Web/CSS/cursor) | La taille définie par le navigateur qui correspond à la taille du curseur du système client | -| [`mask-image`](/fr/docs/Web/CSS/mask-image) | ? | -| [`shape-outside`](/fr/docs/Web/CSS/shape-outside) | ? | -| [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source) | ? | -| [`symbols()`](/fr/docs/Web/CSS/symbols) pour [`@counter-style`](/fr/docs/Web/CSS/@counter-style) | Fonctionnalité à risque. Si prise en charge, la taille est celle du curseur du système client | -| [`content`](/fr/docs/Web/CSS/content) pour un pseudo-élément ([`::after`](/fr/docs/Web/CSS/::after)/[`::before`](/fr/docs/Web/CSS/::before)) | Un rectangle de 300px par 150px | +| Type d'objet (propriété CSS) | Taille par défaut de l'objet | +| -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | +| [`background-image`](/fr/docs/Web/CSS/background-image) | La taille de la zone de positionnement de l'arrière-plan de l'élément | +| [`list-style-image`](/fr/docs/Web/CSS/list-style-image) | La taille d'un caractère en `1em` | +| [`border-image-source`](/fr/docs/Web/CSS/border-image-source) | La taille de la zone de bordure de l'élément | +| [`cursor`](/fr/docs/Web/CSS/cursor) | La taille définie par le navigateur qui correspond à la taille du curseur du système client | +| [`mask-image`](/fr/docs/Web/CSS/mask-image) | ? | +| [`shape-outside`](/fr/docs/Web/CSS/shape-outside) | ? | +| [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source) | ? | +| [`symbols()`](/fr/docs/Web/CSS/symbols) pour [`@counter-style`](/fr/docs/Web/CSS/@counter-style) | Fonctionnalité à risque. Si prise en charge, la taille est celle du curseur du système client | +| [`content`](/fr/docs/Web/CSS/content) pour un pseudo-élément ([`::after`](/fr/docs/Web/CSS/::after)/[`::before`](/fr/docs/Web/CSS/::before)) | Un rectangle de 300px par 150px | La taille effective d'un objet est calculée avec l'algorithme suivant : diff --git a/files/fr/web/css/image/paint/index.md b/files/fr/web/css/image/paint/index.md index d15dc1b81b3ddc..875efe92e743fc 100644 --- a/files/fr/web/css/image/paint/index.md +++ b/files/fr/web/css/image/paint/index.md @@ -53,22 +53,24 @@ Il est possible de passer des arguments supplémentaires grâce à la fonction C ``` ```js hidden -CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); +CSS.paintWorklet.addModule( + "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js", +); ``` ```css li { - --boxColor: hsla(55, 90%, 60%, 1.0); + --boxColor: hsla(55, 90%, 60%, 1); background-image: paint(hollowHighlights, stroke, 2px); } li:nth-of-type(3n) { - --boxColor: hsla(155, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, filled, 3px); + --boxColor: hsla(155, 90%, 60%, 1); + background-image: paint(hollowHighlights, filled, 3px); } -li:nth-of-type(3n+1) { - --boxColor: hsla(255, 90%, 60%, 1.0); +li:nth-of-type(3n + 1) { + --boxColor: hsla(255, 90%, 60%, 1); background-image: paint(hollowHighlights, stroke, 1px); } ``` diff --git a/files/fr/web/css/index.md b/files/fr/web/css/index.md index a487540ef7a7d3..073d69982f5700 100644 --- a/files/fr/web/css/index.md +++ b/files/fr/web/css/index.md @@ -1,5 +1,5 @@ --- -title: 'CSS : Feuilles de style en cascade' +title: "CSS : Feuilles de style en cascade" slug: Web/CSS translation_of: Web/CSS --- diff --git a/files/fr/web/css/inherit/index.md b/files/fr/web/css/inherit/index.md index d32cd0efb93dcd..c54d8aca408b28 100644 --- a/files/fr/web/css/inherit/index.md +++ b/files/fr/web/css/inherit/index.md @@ -31,12 +31,14 @@ p { ### HTML ```html -

    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 puis */ -initial-letter: 1.5; /* La première lettre occupe 1.5 lignes */ -initial-letter: 3.0; /* La première lettre occupe 3 lignes */ -initial-letter: 3.0 2; /* La première lettre occupe 3 lignes et +initial-letter: 1.5; /* La première lettre occupe 1.5 lignes */ +initial-letter: 3; /* La première lettre occupe 3 lignes */ +initial-letter: 3 2; /* La première lettre occupe 3 lignes et s'enfonce de deux lignes vers le bas */ /* Valeurs globales */ @@ -52,8 +52,8 @@ La valeur de cette propriété peut être le mot-clé `normal` ou un nombre (` - Un grand rosier se trouvait à l’entrée du jardin ; - les roses qu’il portait étaient blanches, mais trois - jardiniers étaient en train de les peindre en rouge. + Un grand rosier se trouvait à l’entrée du jardin ; les roses qu’il + portait étaient blanches, mais trois jardiniers étaient en train de les + peindre en rouge.

    ``` diff --git a/files/fr/web/css/initial/index.md b/files/fr/web/css/initial/index.md index 7b20284f3766bf..75fab83aee1990 100644 --- a/files/fr/web/css/initial/index.md +++ b/files/fr/web/css/initial/index.md @@ -33,13 +33,11 @@ La propriété {{cssxref("all")}} peut être utilisée avec cette valeur afin de ### HTML ```html -

    - 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. +

    @@ -154,7 +156,10 @@ pre { top: 20px; left: 20px; -

    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. +

    diff --git a/files/fr/web/css/letter-spacing/index.md b/files/fr/web/css/letter-spacing/index.md index cc97b8cde9a0d0..4348b856da976b 100644 --- a/files/fr/web/css/letter-spacing/index.md +++ b/files/fr/web/css/letter-spacing/index.md @@ -17,7 +17,7 @@ La propriété **`letter-spacing`** définit [l'interlettre](https://fr.wikipedi /* Type */ letter-spacing: 0.3em; letter-spacing: 3px; -letter-spacing: .3px; +letter-spacing: 0.3px; /* Valeur avec mot-clé */ letter-spacing: normal; @@ -48,10 +48,18 @@ letter-spacing: unset; ### CSS ```css -.premier { letter-spacing: 0.4em; } -.deuxieme { letter-spacing: 1em; } -.troisieme { letter-spacing: -0.05em; } -.quatrieme { letter-spacing: 6px; } +.premier { + letter-spacing: 0.4em; +} +.deuxieme { + letter-spacing: 1em; +} +.troisieme { + letter-spacing: -0.05em; +} +.quatrieme { + letter-spacing: 6px; +} ``` ### HTML diff --git a/files/fr/web/css/line-height/index.md b/files/fr/web/css/line-height/index.md index 7af38c18b0b6c4..42e62aefb0be3e 100644 --- a/files/fr/web/css/line-height/index.md +++ b/files/fr/web/css/line-height/index.md @@ -73,10 +73,24 @@ La propriété `line-height` peut être définie grâce : /* Toutes les règles qui suivent fourniront un résultat équivalent */ -div { line-height: 1.2; font-size: 10pt } /* number */ -div { line-height: 1.2em; font-size: 10pt } /* length */ -div { line-height: 120%; font-size: 10pt } /* percentage */ -div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } +div { + line-height: 1.2; + font-size: 10pt; +} /* number */ +div { + line-height: 1.2em; + font-size: 10pt; +} /* length */ +div { + line-height: 120%; + font-size: 10pt; +} /* percentage */ +div { + font: + 10pt/1.2 Georgia, + "Bitstream Charter", + serif; +} ``` ### Notes @@ -115,12 +129,12 @@ h1 { ```html
    -

    Avoid unexpected results by using unitless line-height

    +

    Avoid unexpected results by using unitless line-height

    length and percentage line-heights have poor inheritance behavior ...
    -

    Avoid unexpected results by using unitless line-height

    +

    Avoid unexpected results by using unitless line-height

    length and percentage line-heights have poor inheritance behavior ...
    diff --git a/files/fr/web/css/list-style-image/index.md b/files/fr/web/css/list-style-image/index.md index 8b81891e69c846..470a2fc35c126a 100644 --- a/files/fr/web/css/list-style-image/index.md +++ b/files/fr/web/css/list-style-image/index.md @@ -21,7 +21,7 @@ On peut également utiliser la propriété raccourcie [`list-style`](/fr/docs/We list-style-image: none; /* Valeurs pointant vers une image */ -list-style-image: url('starsolid.gif'); +list-style-image: url("starsolid.gif"); /* Valeurs avec une image */ list-style-image: linear-gradient(to left bottom, red, blue); @@ -110,4 +110,4 @@ ul { - [`list-style`](/fr/docs/Web/CSS/list-style) - [`list-style-type`](/fr/docs/Web/CSS/list-style-type) - [`list-style-position`](/fr/docs/Web/CSS/list-style-position) -- La fonction [`url()`](/fr/docs/Web/CSS/url()) +- La fonction [`url()`]() diff --git a/files/fr/web/css/list-style-position/index.md b/files/fr/web/css/list-style-position/index.md index d40638398fe530..cedb3872f75cc6 100644 --- a/files/fr/web/css/list-style-position/index.md +++ b/files/fr/web/css/list-style-position/index.md @@ -54,19 +54,22 @@ La propriété `list-style-position` est définie avec l'un des mots-clés suiva #### HTML ```html -
      Liste 1 +
        + Liste 1
      • Élément 1-1
      • Élément 1-2
      • Élément 1-3
      • Élément 1-4
      -
        Liste 2 +
          + Liste 2
        • Élément 2-1
        • Élément 2-2
        • Élément 2-3
        • Élément 2-4
        -
          Liste 3 +
            + Liste 3
          • Élément 3-1
          • Élément 3-2
          • Élément 3-3
            • diff --git a/files/fr/web/css/list-style-type/index.md b/files/fr/web/css/list-style-type/index.md index a9ba6ec21f282f..c98674192e5815 100644 --- a/files/fr/web/css/list-style-type/index.md +++ b/files/fr/web/css/list-style-type/index.md @@ -28,7 +28,7 @@ list-style-type: kannada; /* Une chaîne de caractères */ /* Type */ -list-style-type: '-'; +list-style-type: "-"; /* Un identifiant correspondant à */ /* une règle @counter-style */ @@ -60,7 +60,7 @@ La propriété `list-style-type` peut être définie grâce à : - [``](/fr/docs/Web/CSS/custom-ident) - : Un identifiant correspondant à la valeur d'un [`@counter-style`](/fr/docs/Web/CSS/@counter-style) ou à un style prédéfini : -- [`symbols()`](/fr/docs/Web/CSS/symbols()) +- [`symbols()`]() - : Définit un style de puce utilisé. - [``](/fr/docs/Web/CSS/string) - : La chaîne de caractères indiquée sera utilisée comme puce. @@ -266,267 +266,413 @@ ol.shortcut {

            Choisissez un style de liste :

            - -
            ``` @@ -546,7 +692,7 @@ label { } input { - margin: .4rem; + margin: 0.4rem; } ``` @@ -554,7 +700,7 @@ input { ```js const container = document.querySelector(".container"); -container.addEventListener("change", event => { +container.addEventListener("change", (event) => { const list = document.querySelector("ol"); list.setAttribute("style", `list-style-type: ${event.target.value}`); }); diff --git a/files/fr/web/css/list-style/index.md b/files/fr/web/css/list-style/index.md index 8d7d9fe970b9de..0a19e6cf21f4ed 100644 --- a/files/fr/web/css/list-style/index.md +++ b/files/fr/web/css/list-style/index.md @@ -27,7 +27,7 @@ Cette propriété est une propriété raccourcie pour les propriétés CSS  list-style: square; /* Image */ -list-style: url('../img/etoile.png'); +list-style: url("../img/etoile.png"); /* Position */ list-style: inside; @@ -36,8 +36,7 @@ list-style: inside; list-style: georgian inside; /* type | image | position */ -list-style: lower-roman url('../img/etoile.png') outside; - +list-style: lower-roman url("../img/etoile.png") outside; /* Valeur avec un mot-clé */ list-style: none; @@ -83,13 +82,15 @@ ul li::before { Une autre approche consiste à affecter une valeur `url` à la propriété `list-style` : ```css -nav ol, nav ul { +nav ol, +nav ul { list-style: none; } /* cela devient : */ -nav ol, nav ul { +nav ol, +nav ul { list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); } ``` diff --git a/files/fr/web/css/margin-block-end/index.md b/files/fr/web/css/margin-block-end/index.md index 7f47aadfdc3486..1abfc1b8c1fb02 100644 --- a/files/fr/web/css/margin-block-end/index.md +++ b/files/fr/web/css/margin-block-end/index.md @@ -15,9 +15,9 @@ La propriété **`margin-block-end`** définit la marge logique appliquée à la ```css /* Valeurs de longueur */ /* Type */ -margin-block-end: 10px; /* Une longueur absolue */ -margin-block-end: 1em; /* Une longueur relative à la taille du texte */ -margin-block-end: 5%; /* Une largeur relative à la +margin-block-end: 10px; /* Une longueur absolue */ +margin-block-end: 1em; /* Une longueur relative à la taille du texte */ +margin-block-end: 5%; /* Une largeur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/margin-block-start/index.md b/files/fr/web/css/margin-block-start/index.md index f692f7e7636800..c076fb970e1eab 100644 --- a/files/fr/web/css/margin-block-start/index.md +++ b/files/fr/web/css/margin-block-start/index.md @@ -17,9 +17,9 @@ Cette propriété est à rapprocher de {{cssxref("margin-inline-start")}}, {{css ```css /* Valeurs de longueur */ /* Type */ -margin-block-start: 10px; /* Une longueur absolue */ -margin-block-start: 1em; /* Une longueur relative à la taille du texte */ -margin-block-start: 5%; /* Une largeur relative à la +margin-block-start: 10px; /* Une longueur absolue */ +margin-block-start: 1em; /* Une longueur relative à la taille du texte */ +margin-block-start: 5%; /* Une largeur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/margin-block/index.md b/files/fr/web/css/margin-block/index.md index ab2d9bc1831164..b211b348071474 100644 --- a/files/fr/web/css/margin-block/index.md +++ b/files/fr/web/css/margin-block/index.md @@ -11,10 +11,10 @@ La propriété **`margin-block`** définit la marge sur les côtés de l'éléme ```css /* Valeurs de longueur */ /* Type */ -margin-block: 10px 20px; /* Une longueur absolue */ -margin-block: 1em 2em; /* Une longueur relative à la taille du texte */ -margin-block: 5% 2%; /* Une longueur relative à la largeur ou hauteur du bloc englobant */ -margin-block: 10px; /* Une valeur utilisée pour les deux côtés */ +margin-block: 10px 20px; /* Une longueur absolue */ +margin-block: 1em 2em; /* Une longueur relative à la taille du texte */ +margin-block: 5% 2%; /* Une longueur relative à la largeur ou hauteur du bloc englobant */ +margin-block: 10px; /* Une valeur utilisée pour les deux côtés */ /* Valeurs avec un mot-clé */ margin-block: auto; diff --git a/files/fr/web/css/margin-bottom/index.md b/files/fr/web/css/margin-bottom/index.md index 22d725db9ba6fc..df0b0359ee21e7 100644 --- a/files/fr/web/css/margin-bottom/index.md +++ b/files/fr/web/css/margin-bottom/index.md @@ -17,9 +17,9 @@ Cette propriété n'a aucun effet sur les éléments en ligne (_inline_) qui ne ```css /* Valeurs de longueur */ /* Type */ -margin-bottom: 10px; /* Une longueur absolue */ -margin-bottom: 1em; /* Une longueur relative à la taille du texte */ -margin-bottom: 5%; /* Une longueur relative à la +margin-bottom: 10px; /* Une longueur absolue */ +margin-bottom: 1em; /* Une longueur relative à la taille du texte */ +margin-bottom: 5%; /* Une longueur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ @@ -58,17 +58,17 @@ Grâce à la feuille de style on définit la marge basse et la hauteur des diff ```css .box0 { - margin-bottom:1em; - height:3em; + margin-bottom: 1em; + height: 3em; } .box1 { - margin-bottom:-1.5em; - height:4em; + margin-bottom: -1.5em; + height: 4em; } .box2 { - border:1px dashed black; - border-width:1px 0; - margin-bottom:2em; + border: 1px dashed black; + border-width: 1px 0; + margin-bottom: 2em; } ``` @@ -76,13 +76,13 @@ On ajoute quelques règles afin de mieux visualiser les effets obtenus : ```css .container { - background-color:orange; - width:320px; - border:1px solid black; + background-color: orange; + width: 320px; + border: 1px solid black; } div { - width:320px; - background-color:gold; + width: 320px; + background-color: gold; } ``` @@ -90,9 +90,9 @@ div { ```html
            -
            Boîte 0
            -
            Boîte 1
            -
            La marge négative de 1 m'attire vers le haut
            +
            Boîte 0
            +
            Boîte 1
            +
            La marge négative de 1 m'attire vers le haut
            ```