From fbe72ae0a467ba71d3b9b005092bfbf2e7484d96 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Wed, 26 Jul 2023 23:42:47 -0700 Subject: [PATCH] fr: Format /web/css using Prettier (part 6) (#14631) --- files/fr/web/css/margin-inline-end/index.md | 6 +- files/fr/web/css/margin-inline-start/index.md | 6 +- files/fr/web/css/margin-inline/index.md | 8 +- files/fr/web/css/margin-left/index.md | 27 ++- files/fr/web/css/margin-right/index.md | 27 ++- files/fr/web/css/margin-top/index.md | 19 +- files/fr/web/css/margin/index.md | 34 ++- files/fr/web/css/mask-border/index.md | 8 +- files/fr/web/css/mask-image/index.md | 6 +- files/fr/web/css/mask-position/index.md | 4 +- files/fr/web/css/mask-repeat/index.md | 7 +- files/fr/web/css/mask-type/index.md | 41 +++- files/fr/web/css/mask/index.md | 31 +-- files/fr/web/css/max-block-size/index.md | 14 +- files/fr/web/css/max-height/index.md | 7 +- files/fr/web/css/max-width/index.md | 7 +- files/fr/web/css/max/index.md | 9 +- files/fr/web/css/min-height/index.md | 8 +- files/fr/web/css/min-width/index.md | 7 +- files/fr/web/css/min/index.md | 5 +- files/fr/web/css/minmax/index.md | 12 +- files/fr/web/css/mix-blend-mode/index.md | 201 ++++++++++++------ files/fr/web/css/object-fit/index.md | 24 ++- files/fr/web/css/object-position/index.md | 4 +- files/fr/web/css/offset-anchor/index.md | 11 +- files/fr/web/css/offset-distance/index.md | 2 +- files/fr/web/css/offset-path/index.md | 89 ++++---- files/fr/web/css/offset-position/index.md | 2 +- files/fr/web/css/offset-rotate/index.md | 6 +- files/fr/web/css/opacity/index.md | 21 +- files/fr/web/css/order/index.md | 10 +- files/fr/web/css/orphans/index.md | 36 ++-- files/fr/web/css/outline-color/index.md | 6 +- files/fr/web/css/outline-offset/index.md | 2 +- files/fr/web/css/outline-style/index.md | 5 +- files/fr/web/css/outline/index.md | 6 +- .../guide_to_scroll_anchoring/index.md | 2 +- files/fr/web/css/overflow-block/index.md | 54 +++-- files/fr/web/css/overflow-inline/index.md | 12 +- files/fr/web/css/overflow-wrap/index.md | 56 +++-- files/fr/web/css/overflow-x/index.md | 30 ++- files/fr/web/css/overflow-y/index.md | 46 ++-- files/fr/web/css/overflow/index.md | 58 ++--- files/fr/web/css/padding-block-end/index.md | 4 +- files/fr/web/css/padding-block-start/index.md | 4 +- files/fr/web/css/padding-block/index.md | 8 +- files/fr/web/css/padding-bottom/index.md | 6 +- files/fr/web/css/padding-inline-end/index.md | 4 +- .../fr/web/css/padding-inline-start/index.md | 8 +- files/fr/web/css/padding-inline/index.md | 8 +- files/fr/web/css/padding-left/index.md | 6 +- files/fr/web/css/padding-right/index.md | 6 +- files/fr/web/css/padding-top/index.md | 6 +- files/fr/web/css/page-break-before/index.md | 2 +- files/fr/web/css/page-break-inside/index.md | 17 +- files/fr/web/css/perspective-origin/index.md | 2 +- files/fr/web/css/perspective/index.md | 100 +++++---- files/fr/web/css/place-content/index.md | 44 ++-- files/fr/web/css/place-items/index.md | 12 +- files/fr/web/css/pointer-events/index.md | 16 +- files/fr/web/css/position/index.md | 90 +++++--- files/fr/web/css/position_value/index.md | 4 +- files/fr/web/css/print-color-adjust/index.md | 9 +- .../index.md | 6 +- files/fr/web/css/pseudo-classes/index.md | 20 +- files/fr/web/css/pseudo-elements/index.md | 19 +- files/fr/web/css/quotes/index.md | 17 +- files/fr/web/css/repeat/index.md | 20 +- files/fr/web/css/resize/index.md | 4 +- files/fr/web/css/resolution/index.md | 5 +- files/fr/web/css/revert/index.md | 23 +- files/fr/web/css/right/index.md | 4 +- files/fr/web/css/ruby-position/index.md | 4 +- files/fr/web/css/scroll-behavior/index.md | 5 +- files/fr/web/css/scroll-margin-block/index.md | 2 +- .../fr/web/css/scroll-margin-inline/index.md | 2 +- files/fr/web/css/scroll-margin/index.md | 2 +- .../fr/web/css/scroll-padding-block/index.md | 2 +- .../fr/web/css/scroll-padding-inline/index.md | 2 +- files/fr/web/css/scroll-padding/index.md | 2 +- files/fr/web/css/scroll-snap-stop/index.md | 9 +- files/fr/web/css/scroll-snap-type/index.md | 134 ++++++------ files/fr/web/css/scroll-timeline/index.md | 2 +- files/fr/web/css/scrollbar-color/index.md | 8 +- files/fr/web/css/scrollbar-width/index.md | 8 +- files/fr/web/css/selector_list/index.md | 43 +++- .../fr/web/css/shape-image-threshold/index.md | 22 +- files/fr/web/css/shape-margin/index.md | 14 +- files/fr/web/css/shape-outside/index.md | 10 +- 89 files changed, 975 insertions(+), 746 deletions(-) diff --git a/files/fr/web/css/margin-inline-end/index.md b/files/fr/web/css/margin-inline-end/index.md index 1745ae846b4bd4..63899bd65032f6 100644 --- a/files/fr/web/css/margin-inline-end/index.md +++ b/files/fr/web/css/margin-inline-end/index.md @@ -17,9 +17,9 @@ Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssx ```css /* Valeurs de longueur */ /* Type */ -margin-inline-end: 10px; /* Une longueur absolue */ -margin-inline-end: 1em; /* Une longueur relative à la taille du texte */ -margin-inline-end: 5%; /* Une largeur relative à la +margin-inline-end: 10px; /* Une longueur absolue */ +margin-inline-end: 1em; /* Une longueur relative à la taille du texte */ +margin-inline-end: 5%; /* Une largeur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/margin-inline-start/index.md b/files/fr/web/css/margin-inline-start/index.md index fc86a0445cc6b3..eeda769f8e4465 100644 --- a/files/fr/web/css/margin-inline-start/index.md +++ b/files/fr/web/css/margin-inline-start/index.md @@ -17,9 +17,9 @@ Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssx ```css /* Valeurs de longueur */ /* Type */ -margin-inline-start: 10px; /* Une longueur absolue */ -margin-inline-start: 1em; /* Une longueur relative à la taille du texte */ -margin-inline-start: 5%; /* Une largeur relative à la +margin-inline-start: 10px; /* Une longueur absolue */ +margin-inline-start: 1em; /* Une longueur relative à la taille du texte */ +margin-inline-start: 5%; /* Une largeur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/margin-inline/index.md b/files/fr/web/css/margin-inline/index.md index 2a3e40aa722fe7..c0d5680fb47eb3 100644 --- a/files/fr/web/css/margin-inline/index.md +++ b/files/fr/web/css/margin-inline/index.md @@ -11,10 +11,10 @@ La propriété **`margin-inline`** définit la marge sur les côtés de l'élém ```css /* Valeurs de longueur */ /* Type */ -margin-inline: 10px 20px; /* Une longueur absolue */ -margin-inline: 1em 2em; /* Une longueur relative à la taille du texte */ -margin-inline: 5% 2%; /* Une longueur relative à la largeur ou hauteur du bloc englobant */ -margin-inline: 10px; /* Une valeur utilisée pour les deux côtés */ +margin-inline: 10px 20px; /* Une longueur absolue */ +margin-inline: 1em 2em; /* Une longueur relative à la taille du texte */ +margin-inline: 5% 2%; /* Une longueur relative à la largeur ou hauteur du bloc englobant */ +margin-inline: 10px; /* Une valeur utilisée pour les deux côtés */ /* Valeurs avec un mot-clé */ margin-inline: auto; diff --git a/files/fr/web/css/margin-left/index.md b/files/fr/web/css/margin-left/index.md index 67cc7172531bc9..cb131e180d7044 100644 --- a/files/fr/web/css/margin-left/index.md +++ b/files/fr/web/css/margin-left/index.md @@ -21,9 +21,9 @@ Dans certains cas où la largeur est sur-contrainte (autrement dit quand `width` ```css /* Valeurs de longueur */ /* Type */ -margin-left: 10px; /* Une longueur absolue */ -margin-left: 1em; /* Une longueur absolue relative à la taille du texte */ -margin-left: 5%; /* Une marge dont la taille est relative à la largeur +margin-left: 10px; /* Une longueur absolue */ +margin-left: 1em; /* Une longueur absolue relative à la taille du texte */ +margin-left: 5%; /* Une marge dont la taille est relative à la largeur du bloc englobant */ /* Valeur avec un mot-clé */ @@ -148,20 +148,19 @@ Les valeurs en pourcentage pour `margin-left` sont relatives à la taille en lig ### HTML ```html -

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.

-

- Alice s'avança pour les regarder, et, au moment où - elle approchait, elle en entendit un qui disait : - « Fais donc attention, Cinq, et ne m'éclabousse pas - ainsi avec ta peinture. » +

+ Alice s'avança pour les regarder, et, au moment où elle approchait, elle en + entendit un qui disait : « Fais donc attention, Cinq, et ne + m'éclabousse pas ainsi avec ta peinture. »

- « Ce n'est pas de ma faute, » dit Cinq d'un ton - bourru, « c'est Sept qui m'a poussé le coude. » + « Ce n'est pas de ma faute, » dit Cinq d'un ton bourru, « c'est + Sept qui m'a poussé le coude. »

``` diff --git a/files/fr/web/css/margin-right/index.md b/files/fr/web/css/margin-right/index.md index 2b7e9dfcf64562..3963a84f7b3838 100644 --- a/files/fr/web/css/margin-right/index.md +++ b/files/fr/web/css/margin-right/index.md @@ -17,9 +17,9 @@ Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusion ```css /* Valeur de longueur */ /* Type */ -margin-right: 20px; /* Une longueur absolue */ -margin-right: 1em; /* Une longueur relative à la taille du texte */ -margin-right: 5%; /* Une marge relative à la largeur +margin-right: 20px; /* Une longueur absolue */ +margin-right: 1em; /* Une longueur relative à la taille du texte */ +margin-right: 5%; /* Une marge relative à la largeur du bloc englobant */ /* Valeur avec un mot-clé */ @@ -156,20 +156,19 @@ La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`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.

-

- Alice s’avança pour les regarder, et, au moment où - elle approchait, elle en entendit un qui disait : - « Fais donc attention, Cinq, et ne m’éclabousse pas - ainsi avec ta peinture. » +

+ Alice s’avança pour les regarder, et, au moment où elle approchait, elle en + entendit un qui disait : « Fais donc attention, Cinq, et ne + m’éclabousse pas ainsi avec ta peinture. »

- « Ce n’est pas de ma faute, » dit Cinq d’un ton - bourru, « c’est Sept qui m’a poussé le coude. » + « Ce n’est pas de ma faute, » dit Cinq d’un ton bourru, « c’est + Sept qui m’a poussé le coude. »

``` diff --git a/files/fr/web/css/margin-top/index.md b/files/fr/web/css/margin-top/index.md index f68c5d789b72f5..82384fe3f2db7f 100644 --- a/files/fr/web/css/margin-top/index.md +++ b/files/fr/web/css/margin-top/index.md @@ -17,10 +17,10 @@ Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (_i ```css /* Valeurs de longueur */ /* Type */ -margin-top: 10px; /* Une longueur absolue */ -margin-top: 1em; /* Une longueur proportionnelle à la taille du texte */ -margin-top: 5%; /* Une marge relative à la largeur */ - /* du bloc englobant le plus proche */ +margin-top: 10px; /* Une longueur absolue */ +margin-top: 1em; /* Une longueur proportionnelle à la taille du texte */ +margin-top: 5%; /* Une marge relative à la largeur */ +/* du bloc englobant le plus proche */ /* Valeur avec un mot-clé */ margin-top: auto; @@ -72,12 +72,11 @@ div { ```html
-

- C’est ce qui arriva en effet, et bien plus tôt - qu’elle ne s’y attendait. Elle n’avait pas bu - la moitié de la bouteille, que sa tête touchait - au plafond et qu’elle fut forcée de se baisser - pour ne pas se casser le cou.

+

+ C’est ce qui arriva en effet, et bien plus tôt qu’elle ne s’y attendait. Elle + n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond et + qu’elle fut forcée de se baisser pour ne pas se casser le cou. +

``` ### Résultat diff --git a/files/fr/web/css/margin/index.md b/files/fr/web/css/margin/index.md index b16afa68ff7596..6609a9e716d5e3 100644 --- a/files/fr/web/css/margin/index.md +++ b/files/fr/web/css/margin/index.md @@ -86,16 +86,8 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type #### HTML ```html -
- margin: auto; - background: gold; - width: 66%; -
-
- margin: 20px 0px 0px -20px; - background: gold; - width: 66%; -
+
margin: auto; background: gold; width: 66%;
+
margin: 20px 0px 0px -20px; background: gold; width: 66%;
``` #### Résultat @@ -105,23 +97,23 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type ### Autres exemples ```css -margin: 5%; /* tous les côtés avec une marge de 5% */ -margin: 10px; /* tous les côtés avec une marge de 10px */ +margin: 5%; /* tous les côtés avec une marge de 5% */ +margin: 10px; /* tous les côtés avec une marge de 10px */ -margin: 1.6em 20px; /* haut et bas à 1.6em */ - /* gauche et droite à 20px */ +margin: 1.6em 20px; /* haut et bas à 1.6em */ +/* gauche et droite à 20px */ -margin: 10px 3% 1em; /* haut à 10px, gauche et droite à 3% */ - /* bas à 1em */ +margin: 10px 3% 1em; /* haut à 10px, gauche et droite à 3% */ +/* bas à 1em */ margin: 10px 3px 30px 5px; /* haut à 10px, droite à 3px */ - /* bas à 30px, gauche à 5px */ +/* bas à 30px, gauche à 5px */ -margin: 1em auto; /* marge de 1em en haut et en bas */ - /* la boîte est centrée horizontalement */ +margin: 1em auto; /* marge de 1em en haut et en bas */ +/* la boîte est centrée horizontalement */ -margin: auto; /* boîte centrée horizontalement */ - /* marge nulle en haut et en bas */ +margin: auto; /* boîte centrée horizontalement */ +/* marge nulle en haut et en bas */ ``` ## Notes diff --git a/files/fr/web/css/mask-border/index.md b/files/fr/web/css/mask-border/index.md index b0b5d8834a78cb..b7311295d4d85a 100644 --- a/files/fr/web/css/mask-border/index.md +++ b/files/fr/web/css/mask-border/index.md @@ -23,16 +23,16 @@ Cette propriété est une propriété raccourcie pour les propriétés suivantes ```css /* source | slice */ -mask-border: url('border-mask.png') 25; +mask-border: url("border-mask.png") 25; /* source | slice | repeat */ -mask-border: url('border-mask.png') 25 space; +mask-border: url("border-mask.png") 25 space; /* source | slice | width */ -mask-border: url('border-mask.png') 25 / 35px; +mask-border: url("border-mask.png") 25 / 35px; /* source | slice | width | outset | repeat | mode */ -mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; +mask-border: url("border-mask.png") 25 / 35px / 12px space alpha; /* Valeurs globales */ mask-border: inherit; diff --git a/files/fr/web/css/mask-image/index.md b/files/fr/web/css/mask-image/index.md index 56dba2492f63c9..86fe1819c424ff 100644 --- a/files/fr/web/css/mask-image/index.md +++ b/files/fr/web/css/mask-image/index.md @@ -18,11 +18,11 @@ mask-image: none; mask-image: url(masks.svg#mask1); /* Valeurs de type */ -mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); +mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent); mask-image: image(url(mask.png), skyblue); /* Gestion de plusieurs masques */ -mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); +mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent); /* Valeurs globales */ mask-image: inherit; @@ -38,7 +38,7 @@ mask-image: unset; - `none` - : Le masque défini par ce mot-clé sera une image noire transparente. - `` - - : Une référence [`url()`](/fr/docs/Web/CSS/url()) vers un masque SVG ([``](/fr/docs/Web/SVG/Element/mask)) ou une image CSS. + - : Une référence [`url()`]() vers un masque SVG ([``](/fr/docs/Web/SVG/Element/mask)) ou une image CSS. - [``](/fr/docs/Web/CSS/image) - : Une image utilisée pour le masque. diff --git a/files/fr/web/css/mask-position/index.md b/files/fr/web/css/mask-position/index.md index 97879694842cb2..e86019c20da313 100644 --- a/files/fr/web/css/mask-position/index.md +++ b/files/fr/web/css/mask-position/index.md @@ -23,7 +23,9 @@ mask-position: 10% 8em; /* Valeurs multiples */ mask-position: top right; -mask-position: 1rem 1rem, center; +mask-position: + 1rem 1rem, + center; /* Valeurs globales */ mask-position: inherit; diff --git a/files/fr/web/css/mask-repeat/index.md b/files/fr/web/css/mask-repeat/index.md index 6ea03bb6d1ee7e..6529149db35393 100644 --- a/files/fr/web/css/mask-repeat/index.md +++ b/files/fr/web/css/mask-repeat/index.md @@ -134,19 +134,18 @@ Une ou plusieurs valeurs ``, séparées par des virgules. .exemple { height: 100px; width: 100px; - background-color: rgb(128,128,128); + background-color: rgb(128, 128, 128); border: solid black 1px; /* Pour voir la bordure */ -webkit-mask-clip: content; mask-clip: content; - -webkit-mask-image: url('https://developer.mozilla.org/static/img/favicon32.png'); - mask-image: url('https://developer.mozilla.org/static/img/favicon32.png'); + -webkit-mask-image: url("https://developer.mozilla.org/static/img/favicon32.png"); + mask-image: url("https://developer.mozilla.org/static/img/favicon32.png"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; - } ``` diff --git a/files/fr/web/css/mask-type/index.md b/files/fr/web/css/mask-type/index.md index 2cad1cb7c4e66c..5977205c146d19 100644 --- a/files/fr/web/css/mask-type/index.md +++ b/files/fr/web/css/mask-type/index.md @@ -46,13 +46,21 @@ La propriété `mask-type` est définie avec un mot-clé parmi ceux définis ci- ```html
- + - - + + @@ -80,13 +88,24 @@ La propriété `mask-type` est définie avec un mot-clé parmi ceux définis ci- ```html
- + - - + diff --git a/files/fr/web/css/mask/index.md b/files/fr/web/css/mask/index.md index 845e887ccbad29..57680fd1bf7f3d 100644 --- a/files/fr/web/css/mask/index.md +++ b/files/fr/web/css/mask/index.md @@ -18,16 +18,16 @@ mask: none; /* Valeurs d'image */ /* Type */ -mask: url(mask.png); /* Image matricielle utilisée comme masque */ -mask: url(masks.svg#star); /* Élément d'un SVG utilisé comme masque */ +mask: url(mask.png); /* Image matricielle utilisée comme masque */ +mask: url(masks.svg#star); /* Élément d'un SVG utilisé comme masque */ /* Valeurs combinées */ -mask: url(masks.svg#star) luminance; /* Élément d'un SVG utilisé comme masque de luminance */ -mask: url(masks.svg#star) 40px 20px; /* Élément d'un SVG utilisé comme masque positioné à 40px du haut et 20px de la gauche */ -mask: url(masks.svg#star) 0 0/50px 50px; /* Élément d'un SVG utilisé comme masque avec une hauteur et largeur de 50px */ -mask: url(masks.svg#star) repeat-x; /* Élément d'un SVG utilisé comme masque répété horizontalement */ -mask: url(masks.svg#star) stroke-box; /* Élément d'un SVG utilisé comme masque étendu à la boîte contenu dans le contour */ -mask: url(masks.svg#star) exclude; /* Élément d'un SVG utilisé comme masque et combiné avec l'arrière-plan pour les parties qui ne se chevauchent pas */ +mask: url(masks.svg#star) luminance; /* Élément d'un SVG utilisé comme masque de luminance */ +mask: url(masks.svg#star) 40px 20px; /* Élément d'un SVG utilisé comme masque positioné à 40px du haut et 20px de la gauche */ +mask: url(masks.svg#star) 0 0/50px 50px; /* Élément d'un SVG utilisé comme masque avec une hauteur et largeur de 50px */ +mask: url(masks.svg#star) repeat-x; /* Élément d'un SVG utilisé comme masque répété horizontalement */ +mask: url(masks.svg#star) stroke-box; /* Élément d'un SVG utilisé comme masque étendu à la boîte contenu dans le contour */ +mask: url(masks.svg#star) exclude; /* Élément d'un SVG utilisé comme masque et combiné avec l'arrière-plan pour les parties qui ne se chevauchent pas */ /* Valeurs globales */ mask: inherit; @@ -63,18 +63,19 @@ mask: unset; ### HTML ```html -

Il y avait une table servie sous un arbre devant - la maison, et le Lièvre y prenait le thé avec le Chapelier. Un Loir - profondément endormi était assis entre les deux autres qui s’en - servaient comme d’un coussin, le coude appuyé sur lui et causant - par-dessus sa tête.

+

+ Il y avait une table servie sous un arbre devant la maison, et le Lièvre y + prenait le thé avec le Chapelier. Un Loir profondément endormi était assis + entre les deux autres qui s’en servaient comme d’un coussin, le coude appuyé + sur lui et causant par-dessus sa tête. +

``` ### CSS ```css -.exemple{ - mask:url(firefox.png) luminance 20%; +.exemple { + mask: url(firefox.png) luminance 20%; } ``` diff --git a/files/fr/web/css/max-block-size/index.md b/files/fr/web/css/max-block-size/index.md index c9aca091f16bf0..4d68962472ba28 100644 --- a/files/fr/web/css/max-block-size/index.md +++ b/files/fr/web/css/max-block-size/index.md @@ -63,10 +63,10 @@ La propriété `max-block-size` peut prendre les mêmes valeurs que les proprié La valeur de `writing-mode` détermine la propriété physique correspondant à `max-block-size` : -| Valeur pour `writing-mode` | Propriété physique équivalente à `max-block-size` | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | -| `horizontal-tb`, `lr` {{deprecated_inline}}, `lr-tb` {{deprecated_inline}}, `rl` {{deprecated_inline}}, `rb` {{deprecated_inline}}, `rb-rl` {{deprecated_inline}} | [`max-height`](/fr/docs/Web/CSS/max-height) | -| `vertical-rl`, `vertical-lr`, `sideways-rl` {{experimental_inline}}, `sideways-lr` {{experimental_inline}}, `tb` {{deprecated_inline}}, `tb-rl` {{deprecated_inline}} | [`max-width`](/fr/docs/Web/CSS/max-width) | +| Valeur pour `writing-mode` | Propriété physique équivalente à `max-block-size` | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | +| `horizontal-tb`, `lr` {{deprecated_inline}}, `lr-tb` {{deprecated_inline}}, `rl` {{deprecated_inline}}, `rb` {{deprecated_inline}}, `rb-rl` {{deprecated_inline}} | [`max-height`](/fr/docs/Web/CSS/max-height) | +| `vertical-rl`, `vertical-lr`, `sideways-rl` {{experimental_inline}}, `sideways-lr` {{experimental_inline}}, `tb` {{deprecated_inline}}, `tb-rl` {{deprecated_inline}} | [`max-width`](/fr/docs/Web/CSS/max-width) | > **Note :** Les valeurs `sideways-lr` et `sideways-rl` pour `writing-mode` ont été retirées du module de spécification CSS sur les modes d'écriture de niveau 3 en fin de processus et pourraient être réintroduites dans la spécification de niveau 4. @@ -121,7 +121,11 @@ On a ensuite les classes `horizontal` et `vertical`, qui ajoutent la propriété padding: 4px; background-color: #abcdef; color: #000; - font: 16px "Open Sans", "Helvetica", "Arial", sans-serif; + font: + 16px "Open Sans", + "Helvetica", + "Arial", + sans-serif; max-block-size: 160px; min-block-size: 100px; } diff --git a/files/fr/web/css/max-height/index.md b/files/fr/web/css/max-height/index.md index d2e45942c06622..6e681d3c50a508 100644 --- a/files/fr/web/css/max-height/index.md +++ b/files/fr/web/css/max-height/index.md @@ -66,10 +66,11 @@ max-height: unset; ### HTML ```html -
Lorem ipsum tralala sit amet, consectetur adipisicing +
+ Lorem ipsum tralala sit amet, consectetur adipisicing

- Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat.

``` diff --git a/files/fr/web/css/max-width/index.md b/files/fr/web/css/max-width/index.md index 0bb62709836f70..22dfbf6e2b79e4 100644 --- a/files/fr/web/css/max-width/index.md +++ b/files/fr/web/css/max-width/index.md @@ -66,10 +66,11 @@ max-width: unset; #### HTML ```html -
Lorem ipsum tralala sit amet, consectetur adipisicing +
+ Lorem ipsum tralala sit amet, consectetur adipisicing

- Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat.

``` diff --git a/files/fr/web/css/max/index.md b/files/fr/web/css/max/index.md index 42b11cb4591eff..38807ff3c9e670 100644 --- a/files/fr/web/css/max/index.md +++ b/files/fr/web/css/max/index.md @@ -49,7 +49,10 @@ Il est tout à fait possible de combiner des valeurs avec différentes unités d #### HTML ```html - + ``` #### Résultat @@ -79,7 +82,9 @@ Avec ces règles, la valeur pour `font-size` vaudra au moins `2rems` ou deux foi ```html

Ce texte est toujours lisible mais sa taille ne change pas.

-

Ce texte est toujours lisible et s'adapte dans une certaine mesure.

+

+ Ce texte est toujours lisible et s'adapte dans une certaine mesure. +

``` #### Résultat diff --git a/files/fr/web/css/min-height/index.md b/files/fr/web/css/min-height/index.md index 3e876b08d7ebb7..c82975c71ee188 100644 --- a/files/fr/web/css/min-height/index.md +++ b/files/fr/web/css/min-height/index.md @@ -63,9 +63,13 @@ min-height: unset; ### Définition de min-height ```css -table { min-height: 75%; } +table { + min-height: 75%; +} -form { min-height: 0; } +form { + min-height: 0; +} ``` ## Spécifications diff --git a/files/fr/web/css/min-width/index.md b/files/fr/web/css/min-width/index.md index 4a103f7bfdad89..bb393b9be6f3c5 100644 --- a/files/fr/web/css/min-width/index.md +++ b/files/fr/web/css/min-width/index.md @@ -65,10 +65,11 @@ min-width: unset; ### HTML ```html -
Lorem ipsum tralala sit amet, consectetur adipisicing +
+ Lorem ipsum tralala sit amet, consectetur adipisicing

- Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat.

``` diff --git a/files/fr/web/css/min/index.md b/files/fr/web/css/min/index.md index b7db5758e1b642..57dad1812cfe29 100644 --- a/files/fr/web/css/min/index.md +++ b/files/fr/web/css/min/index.md @@ -41,7 +41,8 @@ La fonction `min()` peut également être utilisée pour définir la taille maxi #### CSS ```css -input, label { +input, +label { padding: 2px; box-sizing: border-box; display: inline-block; @@ -63,7 +64,7 @@ On a ici la règle qui s'applique au formulaire et qui occupe 100% de la largeur ```html
- +
``` diff --git a/files/fr/web/css/minmax/index.md b/files/fr/web/css/minmax/index.md index 14da9f97287abb..3f769b4aa52348 100644 --- a/files/fr/web/css/minmax/index.md +++ b/files/fr/web/css/minmax/index.md @@ -99,15 +99,9 @@ Si _max_ est inférieur à _min_, alors _max_ sera ignoré et `minmax(min,max)` ```html
-
- Aussi large que le contenu, large d'au plus 300 pixels. -
-
- Item flexible mais dont la largeur vaut au moins 200 pixels. -
-
- Item avec une largeur de 150 pixels. -
+
Aussi large que le contenu, large d'au plus 300 pixels.
+
Item flexible mais dont la largeur vaut au moins 200 pixels.
+
Item avec une largeur de 150 pixels.
``` diff --git a/files/fr/web/css/mix-blend-mode/index.md b/files/fr/web/css/mix-blend-mode/index.md index 5c37289a6d2774..14551f8150e9ab 100644 --- a/files/fr/web/css/mix-blend-mode/index.md +++ b/files/fr/web/css/mix-blend-mode/index.md @@ -55,24 +55,27 @@ mix-blend-mode: unset; ```html hidden
-
Blending in isolation (no blending with the background)
+
+ Blending in isolation (no blending with the background) +
-
normal +
+ normal
- + - + - + @@ -83,7 +86,8 @@ mix-blend-mode: unset;
-
multiply +
+ multiply
@@ -95,7 +99,8 @@ mix-blend-mode: unset;
-
darken +
+ darken
@@ -107,7 +112,8 @@ mix-blend-mode: unset;
-
screen +
+ screen
@@ -119,7 +125,8 @@ mix-blend-mode: unset;
-
lighten +
+ lighten
@@ -131,7 +138,8 @@ mix-blend-mode: unset;
-
overlay +
+ overlay
@@ -143,7 +151,8 @@ mix-blend-mode: unset;
-
color-dodge +
+ color-dodge
@@ -155,7 +164,8 @@ mix-blend-mode: unset;
-
color-burn +
+ color-burn
@@ -167,7 +177,8 @@ mix-blend-mode: unset;
-
hard-light +
+ hard-light
@@ -179,7 +190,8 @@ mix-blend-mode: unset;
-
soft-light +
+ soft-light
@@ -191,7 +203,8 @@ mix-blend-mode: unset;
-
difference +
+ difference
@@ -203,7 +216,8 @@ mix-blend-mode: unset;
-
exclusion +
+ exclusion
@@ -215,7 +229,8 @@ mix-blend-mode: unset;
-
hue +
+ hue
@@ -227,7 +242,8 @@ mix-blend-mode: unset;
-
saturation +
+ saturation
@@ -239,7 +255,8 @@ mix-blend-mode: unset;
-
color +
+ color
@@ -251,7 +268,8 @@ mix-blend-mode: unset;
-
luminosity +
+ luminosity
@@ -267,7 +285,8 @@ mix-blend-mode: unset;
Blending globally (blend with the background)
-
normal +
+ normal
@@ -279,7 +298,8 @@ mix-blend-mode: unset;
-
multiply +
+ multiply
@@ -291,7 +311,8 @@ mix-blend-mode: unset;
-
darken +
+ darken
@@ -303,7 +324,8 @@ mix-blend-mode: unset;
-
screen +
+ screen
@@ -315,7 +337,8 @@ mix-blend-mode: unset;
-
lighten +
+ lighten
@@ -327,7 +350,8 @@ mix-blend-mode: unset;
-
overlay +
+ overlay
@@ -339,7 +363,8 @@ mix-blend-mode: unset;
-
color-dodge +
+ color-dodge
@@ -351,7 +376,8 @@ mix-blend-mode: unset;
-
color-burn +
+ color-burn
@@ -363,7 +389,8 @@ mix-blend-mode: unset;
-
hard-light +
+ hard-light
@@ -375,7 +402,8 @@ mix-blend-mode: unset;
-
soft-light +
+ soft-light
@@ -387,7 +415,8 @@ mix-blend-mode: unset;
-
difference +
+ difference
@@ -399,7 +428,8 @@ mix-blend-mode: unset;
-
exclusion +
+ exclusion
@@ -411,7 +441,8 @@ mix-blend-mode: unset;
-
hue +
+ hue
@@ -423,7 +454,8 @@ mix-blend-mode: unset;
-
saturation +
+ saturation
@@ -435,7 +467,8 @@ mix-blend-mode: unset;
-
color +
+ color
@@ -447,7 +480,8 @@ mix-blend-mode: unset;
-
luminosity +
+ luminosity
@@ -465,10 +499,11 @@ mix-blend-mode: unset; ``` ```css hidden -html,body { +html, +body { height: 100%; box-sizing: border-box; - background: #EEE; + background: #eee; } .grid { @@ -493,9 +528,9 @@ html,body { } .cell { - margin: .5em; - padding: .5em; - background-color: #FFF; + margin: 0.5em; + padding: 0.5em; + background-color: #fff; overflow: hidden; text-align: center; } @@ -503,8 +538,8 @@ html,body { .note { background: #fff3d4; padding: 1em; - margin: .5em .5em 0; - font: .8em sans-serif; + margin: 0.5em 0.5em 0; + font: 0.8em sans-serif; text-align: left; white-space: nowrap; } @@ -515,8 +550,8 @@ html,body { .container { position: relative; - background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%), - linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%); + background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), + linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; @@ -540,24 +575,58 @@ html,body { fill: url(#blue); } -.isolate .group { isolation: isolate; } - -.normal .item { mix-blend-mode: normal; } -.multiply .item { mix-blend-mode: multiply; } -.screen .item { mix-blend-mode: screen; } -.overlay .item { mix-blend-mode: overlay; } -.darken .item { mix-blend-mode: darken; } -.lighten .item { mix-blend-mode: lighten; } -.color-dodge .item { mix-blend-mode: color-dodge; } -.color-burn .item { mix-blend-mode: color-burn; } -.hard-light .item { mix-blend-mode: hard-light; } -.soft-light .item { mix-blend-mode: soft-light; } -.difference .item { mix-blend-mode: difference; } -.exclusion .item { mix-blend-mode: exclusion; } -.hue .item { mix-blend-mode: hue; } -.saturation .item { mix-blend-mode: saturation; } -.color .item { mix-blend-mode: color; } -.luminosity .item { mix-blend-mode: luminosity; } +.isolate .group { + isolation: isolate; +} + +.normal .item { + mix-blend-mode: normal; +} +.multiply .item { + mix-blend-mode: multiply; +} +.screen .item { + mix-blend-mode: screen; +} +.overlay .item { + mix-blend-mode: overlay; +} +.darken .item { + mix-blend-mode: darken; +} +.lighten .item { + mix-blend-mode: lighten; +} +.color-dodge .item { + mix-blend-mode: color-dodge; +} +.color-burn .item { + mix-blend-mode: color-burn; +} +.hard-light .item { + mix-blend-mode: hard-light; +} +.soft-light .item { + mix-blend-mode: soft-light; +} +.difference .item { + mix-blend-mode: difference; +} +.exclusion .item { + mix-blend-mode: exclusion; +} +.hue .item { + mix-blend-mode: hue; +} +.saturation .item { + mix-blend-mode: saturation; +} +.color .item { + mix-blend-mode: color; +} +.luminosity .item { + mix-blend-mode: luminosity; +} ``` {{EmbedLiveSample("Exemples", "100%", 1600, "", "", "example-outcome-frame")}} @@ -568,9 +637,9 @@ html,body { ```html - - - + + + ``` diff --git a/files/fr/web/css/object-fit/index.md b/files/fr/web/css/object-fit/index.md index b28a74f4842e86..9bb685fe7dd16b 100644 --- a/files/fr/web/css/object-fit/index.md +++ b/files/fr/web/css/object-fit/index.md @@ -63,29 +63,29 @@ La propriété `object-fit` peut être définie grâce à l'un des mots-clés su ```html

object-fit: fill

- Logo MDN + Logo MDN - Logo MDN + Logo MDN

object-fit: contain

- Logo MDN + Logo MDN - Logo MDN + Logo MDN

object-fit: cover

- Logo MDN + Logo MDN - Logo MDN + Logo MDN

object-fit: none

- Logo MDN + Logo MDN - Logo MDN + Logo MDN

object-fit: scale-down

- Logo MDN + Logo MDN - Logo MDN + Logo MDN
``` @@ -93,7 +93,9 @@ La propriété `object-fit` peut être définie grâce à l'un des mots-clés su ```css h2 { - font-family: Courier New, monospace; + font-family: + Courier New, + monospace; font-size: 1em; margin: 1em 0 0.3em; } diff --git a/files/fr/web/css/object-position/index.md b/files/fr/web/css/object-position/index.md index 9a1056bf3cc602..28bc9c355c7443 100644 --- a/files/fr/web/css/object-position/index.md +++ b/files/fr/web/css/object-position/index.md @@ -47,8 +47,8 @@ object-position: unset; Dans ce fragment HTML, on a deux éléments [``](/fr/docs/Web/HTML/Element/img), chacun affichant le logo de MDN. ```html -Logo MDN -Logo MDN +Logo MDN +Logo MDN ``` ### CSS diff --git a/files/fr/web/css/offset-anchor/index.md b/files/fr/web/css/offset-anchor/index.md index 865481fdc8b052..82559a60688627 100644 --- a/files/fr/web/css/offset-anchor/index.md +++ b/files/fr/web/css/offset-anchor/index.md @@ -80,14 +80,21 @@ On peut voir que la première valeur, `auto`, déplace l'élément sur son centr ```css div { - offset-path: path('M 0,20 L 200,20'); + offset-path: path("M 0,20 L 200,20"); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; } section { - background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%); + background-image: linear-gradient( + to bottom, + transparent, + transparent 49%, + #000 50%, + #000 51%, + transparent 52% + ); border: 1px solid #ccc; margin-bottom: 10px; } diff --git a/files/fr/web/css/offset-distance/index.md b/files/fr/web/css/offset-distance/index.md index 25815bea4df1c0..5fd49a20d36a81 100644 --- a/files/fr/web/css/offset-distance/index.md +++ b/files/fr/web/css/offset-distance/index.md @@ -44,7 +44,7 @@ La notion de mouvement contenue dans _CSS Motion Path_ vient principalement de l ```css #motion-demo { - offset-path: path('M20,20 C20,100 200,0 200,100'); + offset-path: path("M20,20 C20,100 200,0 200,100"); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; diff --git a/files/fr/web/css/offset-path/index.md b/files/fr/web/css/offset-path/index.md index 4fc29671c7226f..42b1e3d358545b 100644 --- a/files/fr/web/css/offset-path/index.md +++ b/files/fr/web/css/offset-path/index.md @@ -32,7 +32,7 @@ offset-path: url(#path); offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); -offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200'); +offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200"); /* Boîtes géométriques */ offset-path: margin-box; @@ -78,15 +78,17 @@ L'exemple qui suit est tiré de [cette démo présente sur CodePen](https://code ```css .scissorHalf { - offset-path: path('M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190'); + offset-path: path( + "M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" + ); animation: followpath 4s linear infinite; } @keyframes followpath { - to { - motion-offset: 100%; - offset-distance: 100%; - } + to { + motion-offset: 100%; + offset-distance: 100%; + } } ``` @@ -95,44 +97,45 @@ L'exemple qui suit est tiré de [cette démo présente sur CodePen](https://code Les moitiés supérieure et inférieure des ciseaux apparaîtront dans le coin en haut à gauche du canevas si elles ne sont pas positionnés sur le point de départ avec `offset-path`. ```html - + House and Scissors - - - - - - + + + + + + ``` diff --git a/files/fr/web/css/offset-position/index.md b/files/fr/web/css/offset-position/index.md index 4366fb40952b58..044b0724f08474 100644 --- a/files/fr/web/css/offset-position/index.md +++ b/files/fr/web/css/offset-position/index.md @@ -64,7 +64,7 @@ offset-position: unset; ```css #motion-demo { - offset-path: path('M20,20 C20,100 200,0 200,100'); + offset-path: path("M20,20 C20,100 200,0 200,100"); offset-position: left top; animation: move 3000ms infinite alternate ease-in-out; width: 40px; diff --git a/files/fr/web/css/offset-rotate/index.md b/files/fr/web/css/offset-rotate/index.md index ff5553d499a1e4..3d76652e50d9bb 100644 --- a/files/fr/web/css/offset-rotate/index.md +++ b/files/fr/web/css/offset-rotate/index.md @@ -23,7 +23,7 @@ offset-rotate: reverse; /* Conserve une rotation constante quelle que soit la position /* sur le chemin */ offset-rotate: 90deg; -offset-rotate: .5turn; +offset-rotate: 0.5turn; ``` - `auto` @@ -51,12 +51,12 @@ offset-rotate: .5turn; div { width: 40px; height: 40px; - background: #2BC4A2; + background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; - offset-path: path('M20,20 C20,50 180,-10 180,20'); + offset-path: path("M20,20 C20,50 180,-10 180,20"); } div:nth-child(1) { offset-rotate: auto; diff --git a/files/fr/web/css/opacity/index.md b/files/fr/web/css/opacity/index.md index 451774da6f2c48..d9048ae73cc00b 100644 --- a/files/fr/web/css/opacity/index.md +++ b/files/fr/web/css/opacity/index.md @@ -18,13 +18,13 @@ La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même /* Valeurs numériques */ /* Totalement opaque */ opacity: 1; -opacity: 1.0; +opacity: 1; /* Légèrement transparent */ opacity: 0.6; /* Complètement transparent */ -opacity: 0.0; +opacity: 0; opacity: 0; /* Valeurs globales */ @@ -39,11 +39,11 @@ opacity: unset; - : Une valeur de type {{cssxref("<number>")}} dans l'intervalle \[`0.0`, `1.0]` qui représente l'opacité de l'élément, la valeur de son canal alpha. Les valeurs en dehors de cet intervalle seront considérées comme valides mais ramenées dans cet intervalle (ainsi `6` sera équivalent à `1` et -2 sera équivalent à `0`). - | Valeur | Signification | - | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | - | `0` | L'élément est complètement transparent (invisible). | + | Valeur | Signification | + | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | + | `0` | L'élément est complètement transparent (invisible). | | Toute valeur de type {{cssxref("<number>")}} strictement comprise entre `0` et `1` | L'élément est partiellement transparent, on peut voir l'arrière-plan. | - | `1` (la valeur par défaut) | L'élément est complètement opaque. | + | `1` (la valeur par défaut) | L'élément est complètement opaque. | ## Définition formelle @@ -113,9 +113,12 @@ img.opacity:hover { #### HTML ```html -MDN logo +MDN logo ``` #### Résultat diff --git a/files/fr/web/css/order/index.md b/files/fr/web/css/order/index.md index df0689fe9080be..e4030c487e1495 100644 --- a/files/fr/web/css/order/index.md +++ b/files/fr/web/css/order/index.md @@ -44,10 +44,10 @@ order: unset; ### HTML ```html -
-
Lorem ipsum
- - +
+
Lorem ipsum
+ +
``` @@ -61,7 +61,7 @@ Grâce à ces déclarations CSS, on crée un disposition avec deux barres entour } #main > article { - flex:1; + flex: 1; order: 2; border: 1px dotted orange; } diff --git a/files/fr/web/css/orphans/index.md b/files/fr/web/css/orphans/index.md index 5b36446e06a799..74d1dc9668e3a4 100644 --- a/files/fr/web/css/orphans/index.md +++ b/files/fr/web/css/orphans/index.md @@ -40,25 +40,23 @@ orphans: unset; ### HTML ```html -

- Tout en causant ainsi, Alice était entrée dans une petite chambre - bien rangée, et, comme elle s’y attendait, sur une petite table - dans l’embrasure de la fenêtre, elle vit un éventail et deux ou - trois paires de gants de chevreau tout petits. Elle en prit une - paire, ainsi que l’éventail, et allait quitter la chambre lorsqu’ - elle aperçut, près du miroir, une petite bouteille. Cette fois il - n’y avait pas l’inscription BUVEZ-MOI — ce qui n’empêcha pas Alice - de la déboucher et de la porter à ses lèvres. « Il m’arrive toujours - quelque chose d’intéressant, » se dit-elle, « lorsque je mange ou - que je bois. Je vais voir un peu l’effet de cette bouteille. - J’espère bien qu’elle me fera regrandir, car je suis vraiment - fatiguée de n’être qu’une petite nabote ! »C’est ce qui arriva en - effet, et bien plus tôt qu’elle ne s’y attendait. Elle n’avait pas - bu la moitié de la bouteille, que sa tête touchait au plafond et - qu’elle fut forcée de se baisser pour ne pas se casser le cou. Elle - remit bien vite la bouteille sur la table en se disant : « En voilà - assez ; j’espère ne pas grandir davantage. Je ne puis déjà plus - passer par la porte. Oh ! je voudrais bien n’avoir pas tant bu ! » +

+ Tout en causant ainsi, Alice était entrée dans une petite chambre bien rangée, + et, comme elle s’y attendait, sur une petite table dans l’embrasure de la + fenêtre, elle vit un éventail et deux ou trois paires de gants de chevreau + tout petits. Elle en prit une paire, ainsi que l’éventail, et allait quitter + la chambre lorsqu’ elle aperçut, près du miroir, une petite bouteille. Cette + fois il n’y avait pas l’inscription BUVEZ-MOI — ce qui n’empêcha pas Alice de + la déboucher et de la porter à ses lèvres. « Il m’arrive toujours quelque + chose d’intéressant, » se dit-elle, « lorsque je mange ou que je bois. Je vais + voir un peu l’effet de cette bouteille. J’espère bien qu’elle me fera + regrandir, car je suis vraiment fatiguée de n’être qu’une petite nabote ! + »C’est ce qui arriva en effet, et bien plus tôt qu’elle ne s’y attendait. Elle + n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond et + qu’elle fut forcée de se baisser pour ne pas se casser le cou. Elle remit bien + vite la bouteille sur la table en se disant : « En voilà assez ; j’espère ne + pas grandir davantage. Je ne puis déjà plus passer par la porte. Oh ! je + voudrais bien n’avoir pas tant bu ! »

``` diff --git a/files/fr/web/css/outline-color/index.md b/files/fr/web/css/outline-color/index.md index 963a6a5b48e5b7..5551edabe91b3f 100644 --- a/files/fr/web/css/outline-color/index.md +++ b/files/fr/web/css/outline-color/index.md @@ -22,7 +22,7 @@ outline-color: invert; /* Type */ outline-color: red; outline-color: #f92525; -outline-color: rgb(30,222,121); +outline-color: rgb(30, 222, 121); /* Valeurs globales */ outline-color: inherit; @@ -65,7 +65,7 @@ La propriété `outline-color` est définie avec une des valeurs listées ci-apr /* Ensuite on précise sa couleur avec */ /* outline-color */ - outline-color: #0000FF; + outline-color: #0000ff; } ``` @@ -81,7 +81,7 @@ Le ratio de contraste est déterminé en comparaisant les luminosités des deux - [Vérificateur de contraste WebAIM (en anglais)](https://webaim.org/resources/contrastchecker/) - [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- _[Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) +- _[Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)_ ## Spécifications diff --git a/files/fr/web/css/outline-offset/index.md b/files/fr/web/css/outline-offset/index.md index 157fc8941d852b..9682669c230f6e 100644 --- a/files/fr/web/css/outline-offset/index.md +++ b/files/fr/web/css/outline-offset/index.md @@ -55,7 +55,7 @@ outline-offset: unset; ### HTML ```html -

La bordure est décalée

+

La bordure est décalée

``` ### Résultat diff --git a/files/fr/web/css/outline-style/index.md b/files/fr/web/css/outline-style/index.md index 077194c6c8629f..0b0455a89e3e0c 100644 --- a/files/fr/web/css/outline-style/index.md +++ b/files/fr/web/css/outline-style/index.md @@ -107,7 +107,10 @@ La valeur `auto` indique une bordure sur mesure selon l'interface du système d' } /* To make the Demo clearer */ -* { outline-width: 10px; padding: 15px; } +* { + outline-width: 10px; + padding: 15px; +} ``` #### HTML diff --git a/files/fr/web/css/outline/index.md b/files/fr/web/css/outline/index.md index 807ef7f61e7a7f..43134ae571c511 100644 --- a/files/fr/web/css/outline/index.md +++ b/files/fr/web/css/outline/index.md @@ -91,7 +91,7 @@ La propriété `outline` peut être définie avec une, deux ou trois valeurs par ```html

petit texte - Grand Texte + Grand Texte petit texte

``` @@ -104,7 +104,7 @@ La propriété `outline` peut être définie avec une, deux ou trois valeurs par } .grand { - font-size:xx-large; + font-size: xx-large; } ``` @@ -118,7 +118,7 @@ Utiliser la propriété `outline` avec une valeur `0` ou `none` supprimera le st - {{cssxref(":focus")}} - [Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/) -- [_Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) +- [_Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) ## Spécifications diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md index 29b1c9ee82c9ee..f1176601cff5d9 100644 --- a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md @@ -1,5 +1,5 @@ --- -title: 'Guide : ancrage du défilement (scroll anchoring)' +title: "Guide : ancrage du défilement (scroll anchoring)" slug: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring --- diff --git a/files/fr/web/css/overflow-block/index.md b/files/fr/web/css/overflow-block/index.md index 806f499a26270c..9d6a5066679955 100644 --- a/files/fr/web/css/overflow-block/index.md +++ b/files/fr/web/css/overflow-block/index.md @@ -58,34 +58,60 @@ La propriété `overflow-block` est définie avec une valeur de type [` -
  • overflow-block:hidden — masque le texte en dehors -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
  • + overflow-block:hidden — masque le texte en dehors +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
    • -
  • overflow-block:scroll — ajoute une barre de défilement -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
  • + overflow-block:scroll — ajoute une barre de défilement +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
  • - overflow-block: clip (masque le texte en dehors de la boîte au-delà du bord de dépassement) + overflow-block: clip (masque le texte en dehors de la boîte + au-delà du bord de dépassement)
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
    • -
  • overflow-block:visible — affiche le texte en dehors si besoin -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
  • + overflow-block:visible — affiche le texte en dehors si besoin +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
    • -
  • overflow-block:auto — pour la plupart des navigateurs, équivalent à scroll -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
  • + overflow-block:auto — pour la plupart des navigateurs, + équivalent à scroll +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
    • diff --git a/files/fr/web/css/overflow-inline/index.md b/files/fr/web/css/overflow-inline/index.md index 9ab2760482ee0a..25f47138e413e4 100644 --- a/files/fr/web/css/overflow-inline/index.md +++ b/files/fr/web/css/overflow-inline/index.md @@ -64,22 +64,26 @@ La propriété `overflow-inline` est définie avec une valeur de type [`
  • - overflow-inline: scroll (ajoute une barre de défilement quoi qu'il arrive) + overflow-inline: scroll (ajoute une barre de défilement quoi + qu'il arrive)
    ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
  • - overflow-inline: visible (affiche le texte en dehors de la boîte si nécessaire) + overflow-inline: visible (affiche le texte en dehors de la + boîte si nécessaire)
    ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
  • - overflow-inline: auto (équivalent à scroll pour la plupart des navigateurs) + overflow-inline: auto (équivalent à scroll pour la + plupart des navigateurs)
    ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
  • - overflow-inline: clip (masque le texte en dehors de la boîte au-delà du bord de dépassement) + overflow-inline: clip (masque le texte en dehors de la boîte + au-delà du bord de dépassement) clip
    ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    • diff --git a/files/fr/web/css/overflow-wrap/index.md b/files/fr/web/css/overflow-wrap/index.md index c76d597ba2a591..10528bfc8a8482 100644 --- a/files/fr/web/css/overflow-wrap/index.md +++ b/files/fr/web/css/overflow-wrap/index.md @@ -81,33 +81,47 @@ p { ```html

    normal

    -

    They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

    +

    + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, though + I've never been there myself. +

    overflow-wrap: anywhere

    -

    They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

    +

    + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. +

    overflow-wrap: break-word

    -

    They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

    +

    + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. +

    word-break: break-all

    -

    They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

    +

    + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. +

    hyphens: auto, without lang attribute

    -

    They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg - though I've never been there myself.

    +

    + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg though I've never been + there myself. +

    hyphens: auto, English rules

    -

    They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

    +

    + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been + there myself. +

    hyphens: auto, German rules

    -

    They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

    +

    + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been + there myself. +

    ``` ### Résultat diff --git a/files/fr/web/css/overflow-x/index.md b/files/fr/web/css/overflow-x/index.md index 51279821294732..2e822bf3a26c2c 100644 --- a/files/fr/web/css/overflow-x/index.md +++ b/files/fr/web/css/overflow-x/index.md @@ -62,28 +62,26 @@ Si [`overflow-y`](/fr/docs/Web/CSS/overflow-y) vaut `hidden`, `scroll` ou `auto` ```html
      -
    • overflow-x:hidden — cache le texte en dehors de la boîte -
      - ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ -
      +
    • + overflow-x:hidden — cache le texte en dehors de la boîte +
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
      • -
    • overflow-x:scroll — ajoute toujours un ascenseur -
      - ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ -
      +
    • + overflow-x:scroll — ajoute toujours un ascenseur +
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
      • -
    • overflow-x:visible — affiche le texte en dehors de la boîte si besoin -
      - ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ -
      +
    • + overflow-x:visible — affiche le texte en dehors de la boîte si + besoin +
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
      • -
    • overflow-x:auto — sur la plupart des navigateurs, cela sera équivalent à scroll -
      - ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ -
      +
    • + overflow-x:auto — sur la plupart des navigateurs, cela sera + équivalent à scroll +
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    ``` diff --git a/files/fr/web/css/overflow-y/index.md b/files/fr/web/css/overflow-y/index.md index 7e389c001a8e80..76b04b2e109e21 100644 --- a/files/fr/web/css/overflow-y/index.md +++ b/files/fr/web/css/overflow-y/index.md @@ -62,27 +62,49 @@ Si [`overflow-x`](/fr/docs/Web/CSS/overflow-y) vaut `hidden`, `scroll` ou `auto` ```html
      -
    • overflow-y:hidden — cache le texte en dehors de la boîte -
      - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
    • + overflow-y:hidden — cache le texte en dehors de la boîte +
      + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
      • -
    • overflow-y:scroll — ajoute toujours un ascenseur -
      - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
    • + overflow-y:scroll — ajoute toujours un ascenseur +
      + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
      • -
    • overflow-y:visible — affiche le texte en dehors de la boîte si besoin -
      - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
    • + overflow-y:visible — affiche le texte en dehors de la boîte si + besoin +
      + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
      • -
    • overflow-y:auto — sur la plupart des navigateurs, cela sera équivalent à scroll -
      - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
    • + overflow-y:auto — sur la plupart des navigateurs, cela sera + équivalent à scroll +
      + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
    diff --git a/files/fr/web/css/overflow/index.md b/files/fr/web/css/overflow/index.md index 0fac036f698e88..efc5ae1239165e 100644 --- a/files/fr/web/css/overflow/index.md +++ b/files/fr/web/css/overflow/index.md @@ -79,33 +79,37 @@ La propriété `overflow` peut être définie grâce à un ou deux des mots-clé #### HTML ```html -
    - visible -

    - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. -

    -
    - -
    - hidden - -
    - -
    - scroll -

    - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. -

    -
    - -
    - auto -

    - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. -

    -
    +
    + visible +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium. +

    +
    + +
    + hidden + +
    + +
    + scroll +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium. +

    +
    + +
    + auto +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium. +

    +
    ``` #### CSS diff --git a/files/fr/web/css/padding-block-end/index.md b/files/fr/web/css/padding-block-end/index.md index 5179e81b07a8d5..8b13e2d551aa6c 100644 --- a/files/fr/web/css/padding-block-end/index.md +++ b/files/fr/web/css/padding-block-end/index.md @@ -22,7 +22,7 @@ padding-block-end: 1em; /* Valeurs de proportions */ /* Type */ -padding-block-end: 5%; /* Relatif à la largeur du bloc englobant */ +padding-block-end: 5%; /* Relatif à la largeur du bloc englobant */ /* Valeurs globales */ padding-block-end: inherit; @@ -64,7 +64,7 @@ div { .exemple { writing-mode: vertical-lr; padding-block-end: 20px; - background-color: #C8C800; + background-color: #c8c800; } ``` diff --git a/files/fr/web/css/padding-block-start/index.md b/files/fr/web/css/padding-block-start/index.md index 71d69fc5599081..377690d34dcf74 100644 --- a/files/fr/web/css/padding-block-start/index.md +++ b/files/fr/web/css/padding-block-start/index.md @@ -22,7 +22,7 @@ padding-block-start: 1em; /* Valeurs de proportions */ /* Type */ -padding-block-start: 5%; /* Relatif à la largeur du bloc englobant */ +padding-block-start: 5%; /* Relatif à la largeur du bloc englobant */ /* Valeurs globales */ padding-block-start: inherit; @@ -64,7 +64,7 @@ div { .exemple { writing-mode: vertical-lr; padding-block-start: 20px; - background-color: #C8C800; + background-color: #c8c800; } ``` diff --git a/files/fr/web/css/padding-block/index.md b/files/fr/web/css/padding-block/index.md index 7ac72d9f05255f..a056613a9ec006 100644 --- a/files/fr/web/css/padding-block/index.md +++ b/files/fr/web/css/padding-block/index.md @@ -11,10 +11,10 @@ La propriété **`padding-block`** définit l'espace de remplissage (_padding_) ```css /* Valeurs de longueur */ /* Type */ -padding-block: 10px 20px; /* Des longueurs absolues */ -padding-block: 1em 2em; /* Des longueurs relatives à la taille du texte */ -padding-block: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */ -padding-block: 10px; /* Une seule valeur définit le remplissage des deux côtés */ +padding-block: 10px 20px; /* Des longueurs absolues */ +padding-block: 1em 2em; /* Des longueurs relatives à la taille du texte */ +padding-block: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */ +padding-block: 10px; /* Une seule valeur définit le remplissage des deux côtés */ /* Valeurs avec un mot-clé */ padding-block: auto; diff --git a/files/fr/web/css/padding-bottom/index.md b/files/fr/web/css/padding-bottom/index.md index 0a2ed33fca8c57..399ae1ced6c456 100644 --- a/files/fr/web/css/padding-bottom/index.md +++ b/files/fr/web/css/padding-bottom/index.md @@ -52,10 +52,8 @@ padding-bottom: unset; ```html

    - Elle n’avait pas bu la moitié de la bouteille, - que sa tête touchait au plafond et qu’elle fut - forcée de se baisser pour ne pas se casser le - cou. + Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond + et qu’elle fut forcée de se baisser pour ne pas se casser le cou.

    ``` diff --git a/files/fr/web/css/padding-inline-end/index.md b/files/fr/web/css/padding-inline-end/index.md index b41d527fc20876..9224e3bd2bf346 100644 --- a/files/fr/web/css/padding-inline-end/index.md +++ b/files/fr/web/css/padding-inline-end/index.md @@ -22,7 +22,7 @@ padding-inline-end: 1em; /* Valeurs de proportions */ /* Type */ -padding-inline-end: 5%; /* Relatif à la largeur du bloc englobant */ +padding-inline-end: 5%; /* Relatif à la largeur du bloc englobant */ /* Valeurs globales */ padding-inline-end: inherit; @@ -64,7 +64,7 @@ div { .exemple { writing-mode: vertical-lr; padding-inline-end: 20px; - background-color: #C8C800; + background-color: #c8c800; } ``` diff --git a/files/fr/web/css/padding-inline-start/index.md b/files/fr/web/css/padding-inline-start/index.md index 807656d15a6708..37949585dd84d9 100644 --- a/files/fr/web/css/padding-inline-start/index.md +++ b/files/fr/web/css/padding-inline-start/index.md @@ -16,11 +16,11 @@ La propriété **`padding-inline-start`** définit le décalage avec le début d /* Valeurs de longueur */ /* Type */ padding-inline-start: 10px; /* Une longueur absolue */ -padding-inline-start: 1em; /* Relatif à la taille du texte */ +padding-inline-start: 1em; /* Relatif à la taille du texte */ /* Valeurs de proportions */ /* Type */ -padding-inline-start: 5%; /* Relatif à la largeur du bloc englobant */ +padding-inline-start: 5%; /* Relatif à la largeur du bloc englobant */ /* Valeurs globales */ padding-inline-start: inherit; @@ -34,7 +34,7 @@ padding-inline-start: unset; - [``](/fr/docs/Web/CSS/length) - : La taille de la zone de remplissage exprimée de façon absolue. Les valeurs négatives sont interdites. - [``](/fr/docs/Web/CSS/percentage) - - : La taille de la zone de remplissage exprimée de façon relative à la *taille en ligne* (inline en anglais) du bloc englobant. Les valeurs négatives sont interdites. + - : La taille de la zone de remplissage exprimée de façon relative à la _taille en ligne_ (inline en anglais) du bloc englobant. Les valeurs négatives sont interdites. ## Description @@ -74,7 +74,7 @@ div { .exemple { writing-mode: vertical-lr; padding-inline-start: 20px; - background-color: #C8C800; + background-color: #c8c800; } ``` diff --git a/files/fr/web/css/padding-inline/index.md b/files/fr/web/css/padding-inline/index.md index d62281d66fb8e6..83e6f2c5b2e8c2 100644 --- a/files/fr/web/css/padding-inline/index.md +++ b/files/fr/web/css/padding-inline/index.md @@ -11,10 +11,10 @@ La propriété **`padding-inline`** définit l'espace de remplissage (_padding_) ```css /* Valeurs de longueur */ /* Type */ -padding-inline: 10px 20px; /* Des longueurs absolues */ -padding-inline: 1em 2em; /* Des longueurs relatives à la taille du texte */ -padding-inline: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */ -padding-inline: 10px; /* Une seule valeur définit le remplissage des deux côtés */ +padding-inline: 10px 20px; /* Des longueurs absolues */ +padding-inline: 1em 2em; /* Des longueurs relatives à la taille du texte */ +padding-inline: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */ +padding-inline: 10px; /* Une seule valeur définit le remplissage des deux côtés */ /* Valeurs avec un mot-clé */ padding-inline: auto; diff --git a/files/fr/web/css/padding-left/index.md b/files/fr/web/css/padding-left/index.md index b9cf96b6119d4c..5d3da661a740f0 100644 --- a/files/fr/web/css/padding-left/index.md +++ b/files/fr/web/css/padding-left/index.md @@ -52,10 +52,8 @@ padding-left: unset; ```html

    - Elle n’avait pas bu la moitié de la bouteille, - que sa tête touchait au plafond et qu’elle fut - forcée de se baisser pour ne pas se casser le - cou. + Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond + et qu’elle fut forcée de se baisser pour ne pas se casser le cou.

    ``` diff --git a/files/fr/web/css/padding-right/index.md b/files/fr/web/css/padding-right/index.md index bd0ab5802071c7..357ac72f3e7f02 100644 --- a/files/fr/web/css/padding-right/index.md +++ b/files/fr/web/css/padding-right/index.md @@ -52,10 +52,8 @@ padding-right: unset; ```html

    - Elle n’avait pas bu la moitié de la bouteille, - que sa tête touchait au plafond et qu’elle fut - forcée de se baisser pour ne pas se casser le - cou. + Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond + et qu’elle fut forcée de se baisser pour ne pas se casser le cou.

    ``` diff --git a/files/fr/web/css/padding-top/index.md b/files/fr/web/css/padding-top/index.md index f15d0eeed1e7a4..90ca3772aa5e8b 100644 --- a/files/fr/web/css/padding-top/index.md +++ b/files/fr/web/css/padding-top/index.md @@ -54,10 +54,8 @@ padding-top: unset; ```html

    - Elle n’avait pas bu la moitié de la bouteille, - que sa tête touchait au plafond et qu’elle fut - forcée de se baisser pour ne pas se casser le - cou. + Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond + et qu’elle fut forcée de se baisser pour ne pas se casser le cou.

    ``` diff --git a/files/fr/web/css/page-break-before/index.md b/files/fr/web/css/page-break-before/index.md index c250fdfc95a4f4..b66a1c7dd57c07 100644 --- a/files/fr/web/css/page-break-before/index.md +++ b/files/fr/web/css/page-break-before/index.md @@ -73,7 +73,7 @@ Pour des raisons de compatibilité, si on traite `page-break-before` comme un sy /* Pour éviter d'avoir un saut de page avant */ /* une note dans un div */ div.note { - page-break-before: avoid; + page-break-before: avoid; } ``` diff --git a/files/fr/web/css/page-break-inside/index.md b/files/fr/web/css/page-break-inside/index.md index 2836360ed72d4d..af883104b9cb28 100644 --- a/files/fr/web/css/page-break-inside/index.md +++ b/files/fr/web/css/page-break-inside/index.md @@ -60,16 +60,18 @@ Pour des raisons de compatibilité, `page-break-inside` devrait être considér Une liste
    1. Un
      2. - +
    • Un
      • - +

    Un deuxième paragraphe.

    Un troisième paragraphe, un peu plus long.

    -

    Un quatrième paragraphe, un peu plus long voire plus long que le troisième.

    +

    + Un quatrième paragraphe, un peu plus long voire plus long que le troisième. +

    ``` @@ -84,7 +86,10 @@ Pour des raisons de compatibilité, `page-break-inside` devrait être considér column-width: 100px; } -.list, ol, ul, p { +.list, +ol, +ul, +p { break-inside: avoid; } @@ -92,7 +97,9 @@ p { background-color: #8ca0ff; } -ol, ul, .list { +ol, +ul, +.list { margin: 0.5em 0; display: block; background-color: orange; diff --git a/files/fr/web/css/perspective-origin/index.md b/files/fr/web/css/perspective-origin/index.md index 7400df4a74f281..bd6c3a91177330 100644 --- a/files/fr/web/css/perspective-origin/index.md +++ b/files/fr/web/css/perspective-origin/index.md @@ -337,7 +337,7 @@ perspective-origin: unset; /* On améliore la disposition */ section { - background-color: #EEE; + background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; diff --git a/files/fr/web/css/perspective/index.md b/files/fr/web/css/perspective/index.md index dd896c1a469dd3..e176cde715b952 100644 --- a/files/fr/web/css/perspective/index.md +++ b/files/fr/web/css/perspective/index.md @@ -58,10 +58,8 @@ perspective: unset; - - + + - - + +
    perspective: 250px; - perspective: 350px; - perspective: 250px;perspective: 350px;
    @@ -90,10 +88,8 @@ perspective: unset;
    perspective: 500px; - perspective: 650px; - perspective: 500px;perspective: 650px;
    @@ -130,86 +126,88 @@ perspective: unset; ```css /* Des classes pour les différentes valeurs */ .pers250 { - perspective: 250px; + perspective: 250px; } .pers350 { - perspective: 350px; + perspective: 350px; } .pers500 { - perspective: 500px; + perspective: 500px; } .pers650 { - perspective: 650px; + perspective: 650px; } /* On définit le div pour le conteneur, */ /* le cube, ainsi qu'une face générique */ - .container { - width: 200px; - height: 200px; - margin: 75px 0 0 75px; - border: none; +.container { + width: 200px; + height: 200px; + margin: 75px 0 0 75px; + border: none; } .cube { - width: 100%; - height: 100%; - backface-visibility: visible; - perspective-origin: 150% 150%; - transform-style: preserve-3d; + width: 100%; + height: 100%; + backface-visibility: visible; + perspective-origin: 150% 150%; + transform-style: preserve-3d; } .face { - display: block; - position: absolute; - width: 100px; - height: 100px; - border: none; - line-height: 100px; - font-family: sans-serif; - font-size: 60px; - color: white; - text-align: center; + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; } /* On définit chaque face en fonction de sa direction */ - .front { - background: rgba(0, 0, 0, 0.3); - transform: translateZ(50px); +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); } .back { - background: rgba(0, 255, 0, 1); - color: black; - transform: rotateY(180deg) translateZ(50px); + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); } .right { - background: rgba(196, 0, 0, 0.7); - transform: rotateY(90deg) translateZ(50px); + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); } .left { - background: rgba(0, 0, 196, 0.7); - transform: rotateY(-90deg) translateZ(50px); + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); } .top { - background: rgba(196, 196, 0, 0.7); - transform: rotateX(90deg) translateZ(50px); + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); } .bottom { - background: rgba(196, 0, 196, 0.7); - transform: rotateX(-90deg) translateZ(50px); + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); } /* On améliore légèrement le tableau */ -th, p, td { - background-color: #EEEEEE; - padding: 10px; - font-family: sans-serif; - text-align: left; +th, +p, +td { + background-color: #eeeeee; + padding: 10px; + font-family: sans-serif; + text-align: left; } ``` diff --git a/files/fr/web/css/place-content/index.md b/files/fr/web/css/place-content/index.md index 68bc24d2bc6537..a26efac0671234 100644 --- a/files/fr/web/css/place-content/index.md +++ b/files/fr/web/css/place-content/index.md @@ -85,7 +85,7 @@ La première valeur utilisée sera celle qui correspond à {{cssxref("align-cont ```css #container { display: flex; - height:240px; + height: 240px; width: 240px; flex-wrap: wrap; background-color: #8c8c8c; @@ -116,27 +116,30 @@ div > div { ```html
    Lorem
    -
    Lorem
    ipsum
    +
    Lorem
    ipsum
    Lorem
    -
    Lorem
    impsum
    +
    Lorem
    impsum
    ``` ```html hidden -writing-mode: - -;
    -direction:;
    +direction:;
    -place-content:;
    +place-content:; + ; ``` ```js hidden var update = function () { - document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value; -} + document.getElementById("container").style.placeContent = + document.getElementById("alignContentAlignment").value + + " " + + document.getElementById("justifyContentAlignment").value; +}; var alignContentAlignment = document.getElementById("alignContentAlignment"); -alignContentAlignment.addEventListener("change", update); +alignContentAlignment.addEventListener("change", update); -var justifyContentAlignment = document.getElementById("justifyContentAlignment"); +var justifyContentAlignment = document.getElementById( + "justifyContentAlignment", +); justifyContentAlignment.addEventListener("change", update); var writingM = document.getElementById("writingMode"); writingM.addEventListener("change", function (evt) { - document.getElementById("container").style.writingMode = evt.target.value; + document.getElementById("container").style.writingMode = evt.target.value; }); var direction = document.getElementById("direction"); direction.addEventListener("change", function (evt) { - document.getElementById("container").style.direction = evt.target.value; + document.getElementById("container").style.direction = evt.target.value; }); ``` diff --git a/files/fr/web/css/place-items/index.md b/files/fr/web/css/place-items/index.md index fb5325852e202f..a904c45ac1719c 100644 --- a/files/fr/web/css/place-items/index.md +++ b/files/fr/web/css/place-items/index.md @@ -91,7 +91,7 @@ place-items: unset; ```css #container { - height:200px; + height: 200px; width: 240px; place-items: center; /* Cette valeur peut être modifiée dans l'exemple */ background-color: #8c8c8c; @@ -204,15 +204,15 @@ select { ``` ```js hidden -var values = document.getElementById('values'); -var display = document.getElementById('display'); -var container = document.getElementById('container'); +var values = document.getElementById("values"); +var display = document.getElementById("display"); +var container = document.getElementById("container"); -values.addEventListener('change', function (evt) { +values.addEventListener("change", function (evt) { container.style.placeItems = evt.target.value; }); -display.addEventListener('change', function (evt) { +display.addEventListener("change", function (evt) { container.className = evt.target.value; }); ``` diff --git a/files/fr/web/css/pointer-events/index.md b/files/fr/web/css/pointer-events/index.md index cae8f492becb80..0b384aeb96cecb 100644 --- a/files/fr/web/css/pointer-events/index.md +++ b/files/fr/web/css/pointer-events/index.md @@ -17,13 +17,13 @@ La propriété [CSS](/fr/docs/Web/CSS) **`pointer-events`** permet de contrôler pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG uniquement */ -pointer-events: visibleFill; /* SVG uniquement */ -pointer-events: visibleStroke; /* SVG uniquement */ -pointer-events: visible; /* SVG uniquement */ -pointer-events: painted; /* SVG uniquement */ -pointer-events: fill; /* SVG uniquement */ -pointer-events: stroke; /* SVG uniquement */ -pointer-events: all; /* SVG uniquement */ +pointer-events: visibleFill; /* SVG uniquement */ +pointer-events: visibleStroke; /* SVG uniquement */ +pointer-events: visible; /* SVG uniquement */ +pointer-events: painted; /* SVG uniquement */ +pointer-events: fill; /* SVG uniquement */ +pointer-events: stroke; /* SVG uniquement */ +pointer-events: all; /* SVG uniquement */ /* Valeurs globales */ pointer-events: inherit; @@ -66,7 +66,7 @@ Lorsque cette propriété n'est pas définie pour le contenu SVG, on aura le mê Lorsqu'on utilise la valeur `none`, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être « en dessous/derrière ». -L'utilisation de `pointer-events` peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Cela *ne signifie en aucun cas* que les gestionnaires d'événement de cet élément ne pourront pas être déclenchés ! Si l'un des éléments descendants possède une valeur explicite de `pointer-events` qui lui *permet* de recevoir des événements de pointeur, les événements qui parcourent les ancêtres pourront déclencher les gestionnaires d'événements associés. Bien entendu, tout pointage qui a lieu sur un endroit de l'écran qui est couvert par le parent, mais pas par l'élément descendant, ne déclenchera pas d'événement. L'événement passera « au travers » du parent et ciblera le contenu qui est en dessous. +L'utilisation de `pointer-events` peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Cela _ne signifie en aucun cas_ que les gestionnaires d'événement de cet élément ne pourront pas être déclenchés ! Si l'un des éléments descendants possède une valeur explicite de `pointer-events` qui lui _permet_ de recevoir des événements de pointeur, les événements qui parcourent les ancêtres pourront déclencher les gestionnaires d'événements associés. Bien entendu, tout pointage qui a lieu sur un endroit de l'écran qui est couvert par le parent, mais pas par l'élément descendant, ne déclenchera pas d'événement. L'événement passera « au travers » du parent et ciblera le contenu qui est en dessous. Les éléments avec `pointer-events: none` continueront de recevoir le focus via la navigation au clavier avec la touche Tab. diff --git a/files/fr/web/css/position/index.md b/files/fr/web/css/position/index.md index a0dc37ce5e2570..907268cdb84f46 100644 --- a/files/fr/web/css/position/index.md +++ b/files/fr/web/css/position/index.md @@ -29,24 +29,29 @@ position: unset; ### Valeurs - `static` + - : Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés [`top`](/fr/docs/Web/CSS/top), [`right`](/fr/docs/Web/CSS/right), [`bottom`](/fr/docs/Web/CSS/bottom), [`left`](/fr/docs/Web/CSS/left) et [`z-index`](/fr/docs/Web/CSS/z-index) ne s'appliquent pas. - `relative` + - : L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par `top`, `right`, `bottom` et `left`. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec `static`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. L'effet de cette valeur n'est pas défini pour les éléments `table-*-group`, `table-row`, `table-column`, `table-cell` et `table-caption`. - `absolute` + - : L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges. - `fixed` + - : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (viewport), sauf si un des ancêtres a une propriété [`transform`](/fr/docs/Web/CSS/transform), [`perspective`](/fr/docs/Web/CSS/perspective) ou [`filter`](/fr/docs/Web/CSS/filter) qui est différente de `none` (voir [la spécification sur les transformations CSS](https://www.w3.org/TR/css-transforms-1/#propdef-transform)) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour _chaque page_). Cette valeur crée toujours un nouveau contexte d'empilement. Certaines incohérences existent entre les navigateurs quant au rôle de `perspective` et `filter` pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée toujours un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour _chacune des pages_. - `sticky` + - : La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à [son bloc englobant](/fr/docs/Web/CSS/Containing_block) selon les valeurs de `top`, `right`, `bottom` et `left`. Dans tous les cas, y compris avec les éléments `table`, cela n'affecte pas la position des autres éléments. Cette valeur entraîne toujours la création d'un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand `overflow` vaut `hidden`, `scroll`, `auto` ou `overlay`) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut `overflow: hidden` ou `auto` ([cf. cette _issue_ GitHub](https://github.com/w3c/csswg-drafts/issues/865)). @@ -139,12 +144,27 @@ Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte «  ```html

    Positionnement absolu

    -

    Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en dessous.

    - -

    Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi grand que notre contenu.

    -

    Nous sommes séparés par nos marges (une seule marge en raison de la fusion des marges).

    - -

    Les éléments en ligne (inline) comme celui-ci et celui-là se situent sur la même ligne avec également les nœuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent passent à la ligne si possible — comme pour ce texte. ou cette image

    +

    + Un élément de bloc simple. Les éléments de bloc adjacents sont sur de + nouvelles lignes en dessous. +

    + +

    + Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi + grand que notre contenu. +

    +

    + Nous sommes séparés par nos marges (une seule marge en raison de la fusion des + marges). +

    + +

    + Les éléments en ligne (inline) comme celui-ci et + celui-là se situent sur la même ligne avec également les nœuds + texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent + passent à la ligne si possible — comme pour ce texte. ou cette + image +

    ``` #### CSS @@ -192,22 +212,30 @@ Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bl ```html

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor + eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, + laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut + arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam + sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem + aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id + maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam + finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id + ultrices ultrices, tempor et tellus.

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor + eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, + laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut + arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam + sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem + aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id + maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam + finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id + ultrices ultrices, tempor et tellus.

    Un
    @@ -308,16 +336,19 @@ Il faut définir un seuil avec au moins [`top`](/fr/docs/Web/CSS/top) ou [`right } dl > div { - background: #FFF; + background: #fff; padding: 24px 0 0 0; } dt { - background: #B8C1C8; - border-bottom: 1px solid #989EA4; - border-top: 1px solid #717D85; - color: #FFF; - font: bold 18px/21px Helvetica, Arial, sans-serif; + background: #b8c1c8; + border-bottom: 1px solid #989ea4; + border-top: 1px solid #717d85; + color: #fff; + font: + bold 18px/21px Helvetica, + Arial, + sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; @@ -326,14 +357,17 @@ dt { } dd { - font: bold 20px/45px Helvetica, Arial, sans-serif; + font: + bold 20px/45px Helvetica, + Arial, + sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { - border-top: 1px solid #CCC; + border-top: 1px solid #ccc; } ``` diff --git a/files/fr/web/css/position_value/index.md b/files/fr/web/css/position_value/index.md index 0fafcd768aefd0..6cd0808863afc7 100644 --- a/files/fr/web/css/position_value/index.md +++ b/files/fr/web/css/position_value/index.md @@ -96,5 +96,5 @@ bottom top - [Valeurs et unités en CSS](/fr/docs/Web/CSS/CSS_Values_and_Units) - [Tutoriel — Introduction aux valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) - [`background-position`](/fr/docs/Web/CSS/background-position) -- [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) -- [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) +- [`radial-gradient()`]() +- [`conic-gradient()`]() diff --git a/files/fr/web/css/print-color-adjust/index.md b/files/fr/web/css/print-color-adjust/index.md index 4c228638f21c50..ad5b2055086fd4 100644 --- a/files/fr/web/css/print-color-adjust/index.md +++ b/files/fr/web/css/print-color-adjust/index.md @@ -60,12 +60,17 @@ Dans cet exemple, on a une boîte qui utilise [`background-image`](/fr/docs/Web/ ```css .ma-boite { background-color: black; - background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); + background-image: linear-gradient( + rgba(0, 0, 180, 0.5), + rgba(70, 140, 220, 0.5) + ); color: #900; width: 15rem; height: 6rem; text-align: center; - font: 24px "Helvetica", sans-serif; + font: + 24px "Helvetica", + sans-serif; display: flex; align-items: center; justify-content: center; diff --git a/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md index 513f51190b182c..dce4715cdb367a 100644 --- a/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md +++ b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md @@ -43,9 +43,9 @@ Voici un exemple de mise en forme prenant en compte ces restrictions : } :visited { - outline-color: orange; /* Les liens visités auront un contour orange */ - color: yellow; /* Le texte des liens visités sera en jaune */ - background-color: green; /* L'arrière-plan des liens visités sera vert */ + outline-color: orange; /* Les liens visités auront un contour orange */ + color: yellow; /* Le texte des liens visités sera en jaune */ + background-color: green; /* L'arrière-plan des liens visités sera vert */ } ``` diff --git a/files/fr/web/css/pseudo-classes/index.md b/files/fr/web/css/pseudo-classes/index.md index 09317ceabcc839..1347461a8a335e 100644 --- a/files/fr/web/css/pseudo-classes/index.md +++ b/files/fr/web/css/pseudo-classes/index.md @@ -10,7 +10,7 @@ Une **pseudo-classe** est un mot-clé qui peut être ajouté à un sélecteur af ```css div:hover { - background-color: #F89B4D; + background-color: #f89b4d; } ``` @@ -100,7 +100,7 @@ sélecteur:pseudo-classe { background-color: palegreen; } -p:nth-child(2n+1) { +p:nth-child(2n + 1) { background-color: lime; } ``` @@ -110,19 +110,17 @@ p:nth-child(2n+1) { ```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 ! »

    - « Quelle idée ! » dit Alice très-haut et d’un - ton décidé. La Reine se tut. + « Quelle idée ! » dit Alice très-haut et d’un ton décidé. La + Reine se tut.

    - Le Roi lui posa la main sur le bras, et lui - dit timidement : « Considérez donc, ma chère - amie, que ce n’est qu’une enfant. » + Le Roi lui posa la main sur le bras, et lui dit timidement : + « Considérez donc, ma chère amie, que ce n’est qu’une enfant. »

    ``` diff --git a/files/fr/web/css/pseudo-elements/index.md b/files/fr/web/css/pseudo-elements/index.md index e8cc5bcabade70..5a2df0adc923e9 100644 --- a/files/fr/web/css/pseudo-elements/index.md +++ b/files/fr/web/css/pseudo-elements/index.md @@ -60,17 +60,14 @@ p::first-line { ```html

    - C’était le Lapin Blanc qui revenait en trottinant, - et qui cherchait de tous côtés, d’un air inquiet, - comme s’il avait perdu quelque chose ; Alice - l’entendit qui marmottait : « La Duchesse ! La - Duchesse ! Oh ! mes pauvres pattes ; oh ! ma robe - et mes moustaches ! Elle me fera guillotiner aussi - vrai que des furets sont des furets ! Où pourrais-je - bien les avoir perdus ? » Alice devina tout de suite - qu’il cherchait l’éventail et la paire de gants paille, - et, comme elle avait bon cœur, elle se mit à les - chercher aussi ; mais pas moyen de les trouver. + C’était le Lapin Blanc qui revenait en trottinant, et qui cherchait de tous + côtés, d’un air inquiet, comme s’il avait perdu quelque chose ; Alice + l’entendit qui marmottait : « La Duchesse ! La Duchesse ! Oh ! mes pauvres + pattes ; oh ! ma robe et mes moustaches ! Elle me fera guillotiner aussi vrai + que des furets sont des furets ! Où pourrais-je bien les avoir perdus ? » + Alice devina tout de suite qu’il cherchait l’éventail et la paire de gants + paille, et, comme elle avait bon cœur, elle se mit à les chercher aussi ; mais + pas moyen de les trouver.

    ``` diff --git a/files/fr/web/css/quotes/index.md b/files/fr/web/css/quotes/index.md index 6dc399f14b18ed..19fd7b6be51b13 100644 --- a/files/fr/web/css/quotes/index.md +++ b/files/fr/web/css/quotes/index.md @@ -16,9 +16,9 @@ quotes: none; /* Chaînes de caractères */ /* Type */ -quotes: "«" "»"; /* On utilise les guillemets français +quotes: "«" "»"; /* On utilise les guillemets français pour ouvrir et fermer une citation */ -quotes: "«" "»" "‹" "›"; /* On définit deux niveaux de citation */ +quotes: "«" "»" "‹" "›"; /* On définit deux niveaux de citation */ /* Valeurs globales */ quotes: inherit; @@ -47,11 +47,12 @@ quotes: unset; ```html

    - Bientôt le Lapin aperçut Alice qui furetait ; - il lui cria d’un ton d’impatience : - Eh bien ! Marianne, que faites-vous ici ? - Courez vite à la maison me chercher une paire - de gants et un éventail ! Allons, dépêchons-nous. + Bientôt le Lapin aperçut Alice qui furetait ; il lui cria d’un ton + d’impatience : + Eh bien ! Marianne, que faites-vous ici ? Courez vite à la maison me + chercher une paire de gants et un éventail ! Allons, dépêchons-nous.

    @@ -61,7 +62,7 @@ quotes: unset; ```css q { - quotes : "«" "»" '"' '"'; + quotes: "«" "»" '"' '"'; } ``` diff --git a/files/fr/web/css/repeat/index.md b/files/fr/web/css/repeat/index.md index 252bbaba2245ce..fb5f960c3195e3 100644 --- a/files/fr/web/css/repeat/index.md +++ b/files/fr/web/css/repeat/index.md @@ -97,21 +97,11 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) ```html
    -
    - Un élément qui mesure 50 pixels de large. -
    -
    - Un élément avec une largeur flexible. -
    -
    - Un élément qui mesure 50 pixels de large. -
    -
    - Un élément avec une largeur flexible. -
    -
    - Un élément non-flexible qui mesure 100 pixels de large. -
    +
    Un élément qui mesure 50 pixels de large.
    +
    Un élément avec une largeur flexible.
    +
    Un élément qui mesure 50 pixels de large.
    +
    Un élément avec une largeur flexible.
    +
    Un élément non-flexible qui mesure 100 pixels de large.
    ``` diff --git a/files/fr/web/css/resize/index.md b/files/fr/web/css/resize/index.md index d1c5242b7ba002..6ecba69696813a 100644 --- a/files/fr/web/css/resize/index.md +++ b/files/fr/web/css/resize/index.md @@ -107,8 +107,8 @@ p { ```html

    - Ce paragraphe peut être redimensionné car la propriété - CSS resize vaut 'both' sur cet élément. + Ce paragraphe peut être redimensionné car la propriété CSS resize vaut + 'both' sur cet élément.

    ``` diff --git a/files/fr/web/css/resolution/index.md b/files/fr/web/css/resolution/index.md index 3b98e28b52f645..d6426ddb09316e 100644 --- a/files/fr/web/css/resolution/index.md +++ b/files/fr/web/css/resolution/index.md @@ -72,9 +72,8 @@ ten dpi Incorrect : seules des expressions numériques sont acceptées. ```html

    - À ces mots le Chapelier ouvrit de grands yeux ; mais - il se contenta de dire : « Pourquoi une pie - ressemble-t-elle à un pupitre ? » + À ces mots le Chapelier ouvrit de grands yeux ; mais il se contenta de dire : + « Pourquoi une pie ressemble-t-elle à un pupitre ? »

    ``` diff --git a/files/fr/web/css/revert/index.md b/files/fr/web/css/revert/index.md index e98deda35ae968..2e9beefc670189 100644 --- a/files/fr/web/css/revert/index.md +++ b/files/fr/web/css/revert/index.md @@ -79,16 +79,11 @@ h3 {

    Ceci aura toujours font-weight: normal mais color: black

    -

    - Juste un peu de texte -

    +

    Juste un peu de texte

    - Ceci devrait avoir font-weight: bold (la valeur originale) - et color: black + Ceci devrait avoir font-weight: bold (la valeur originale) et color: black

    -

    - Juste un peu de texte -

    +

    Juste un peu de texte

    ``` #### Résultat @@ -112,18 +107,12 @@ h3 { #### HTML ```html -

    - Un style spécifique -

    -

    - Juste un peu de texte -

    +

    Un style spécifique

    +

    Juste un peu de texte

    Retour aux réglages par défaut pour toutes les propriétés

    -

    - Juste un peu de texte -

    +

    Juste un peu de texte

    ``` #### Résultat diff --git a/files/fr/web/css/right/index.md b/files/fr/web/css/right/index.md index 5d9b5aa4dc2e71..e7f687898e79d1 100644 --- a/files/fr/web/css/right/index.md +++ b/files/fr/web/css/right/index.md @@ -77,7 +77,7 @@ right: unset; #exemple_3 { width: 100px; height: 100px; - background-color: #FFC7E4; + background-color: #ffc7e4; position: relative; top: 20px; left: 20px; @@ -86,7 +86,7 @@ right: unset; #exemple_4 { width: 100px; height: 100px; - background-color: #FFD7C2; + background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; diff --git a/files/fr/web/css/ruby-position/index.md b/files/fr/web/css/ruby-position/index.md index 225cc69c132ff6..fd735372e952c5 100644 --- a/files/fr/web/css/ruby-position/index.md +++ b/files/fr/web/css/ruby-position/index.md @@ -61,7 +61,7 @@ Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-posi ```css ruby { - ruby-position:over; + ruby-position: over; } ``` @@ -80,7 +80,7 @@ On obtiendra le résultat suivant : ```css ruby { - ruby-position:under; + ruby-position: under; } ``` diff --git a/files/fr/web/css/scroll-behavior/index.md b/files/fr/web/css/scroll-behavior/index.md index 8a3f4d3bb070df..df3d697c5b390c 100644 --- a/files/fr/web/css/scroll-behavior/index.md +++ b/files/fr/web/css/scroll-behavior/index.md @@ -10,7 +10,7 @@ La propriété **`scroll-behavior`** définit le comportement du défilement pou {{EmbedInteractiveExample("pages/css/scroll-behavior.html")}} -Pour les autres défilements, tels que ceux appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (viewport). Lorsque cette propriété est indiquée sur l'élément `body`, elle *ne se propage pas* à la zone d'affichage (viewport). +Pour les autres défilements, tels que ceux appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (viewport). Lorsque cette propriété est indiquée sur l'élément `body`, elle _ne se propage pas_ à la zone d'affichage (viewport). Les agents utilisateur peuvent choisir d'ignorer cette propriété. @@ -73,7 +73,8 @@ a { text-decoration: none; } -nav, .scroll-container { +nav, +.scroll-container { display: block; margin: 0 auto; text-align: center; diff --git a/files/fr/web/css/scroll-margin-block/index.md b/files/fr/web/css/scroll-margin-block/index.md index efc94d7840377c..79940e509ad44d 100644 --- a/files/fr/web/css/scroll-margin-block/index.md +++ b/files/fr/web/css/scroll-margin-block/index.md @@ -18,7 +18,7 @@ Les valeurs des marges de défilement correspondent aux décalages entre la zone /* Valeurs de longueur */ /* Type */ scroll-margin-block: 10px; -scroll-margin-block: 1em .5em; +scroll-margin-block: 1em 0.5em; /* Valeurs globales */ scroll-margin-block: inherit; diff --git a/files/fr/web/css/scroll-margin-inline/index.md b/files/fr/web/css/scroll-margin-inline/index.md index 40d8f2243bd7b1..56c208a58830e4 100644 --- a/files/fr/web/css/scroll-margin-inline/index.md +++ b/files/fr/web/css/scroll-margin-inline/index.md @@ -16,7 +16,7 @@ Les valeurs des marges de défilement correspondent aux décalages entre la zone /* Valeurs de longueur */ /* Type */ scroll-margin-inline: 10px; -scroll-margin-inline: 1em .5em; +scroll-margin-inline: 1em 0.5em; /* Valeurs globales */ scroll-margin-inline: inherit; diff --git a/files/fr/web/css/scroll-margin/index.md b/files/fr/web/css/scroll-margin/index.md index a986d52dccde16..6e42757af2097d 100644 --- a/files/fr/web/css/scroll-margin/index.md +++ b/files/fr/web/css/scroll-margin/index.md @@ -18,7 +18,7 @@ Les valeurs de `scroll-margin` correspondent aux décalages entre la zone qui es /* Valeur de longueur */ /* Type */ scroll-margin: 10px; -scroll-margin: 1em .5em 1em 1em; +scroll-margin: 1em 0.5em 1em 1em; /* Valeurs globales */ scroll-margin: inherit; diff --git a/files/fr/web/css/scroll-padding-block/index.md b/files/fr/web/css/scroll-padding-block/index.md index 147608401ce355..0085e99038b65f 100644 --- a/files/fr/web/css/scroll-padding-block/index.md +++ b/files/fr/web/css/scroll-padding-block/index.md @@ -21,7 +21,7 @@ scroll-padding-block: auto; /* Valeurs de longueur */ /* Type */ scroll-padding-block: 10px; -scroll-padding-block: 1em .5em; +scroll-padding-block: 1em 0.5em; scroll-padding-block: 10%; /* Valeurs globales */ diff --git a/files/fr/web/css/scroll-padding-inline/index.md b/files/fr/web/css/scroll-padding-inline/index.md index 9518d3132d1971..c9c60f1edf1b9e 100644 --- a/files/fr/web/css/scroll-padding-inline/index.md +++ b/files/fr/web/css/scroll-padding-inline/index.md @@ -21,7 +21,7 @@ scroll-padding-inline: auto; /* Valeurs de longueur */ /* Type */ scroll-padding-inline: 10px; -scroll-padding-inline: 1em .5em; +scroll-padding-inline: 1em 0.5em; scroll-padding-inline: 10%; /* Valeurs globales */ diff --git a/files/fr/web/css/scroll-padding/index.md b/files/fr/web/css/scroll-padding/index.md index 98b0e41e13c46c..8d09ac7c939b22 100644 --- a/files/fr/web/css/scroll-padding/index.md +++ b/files/fr/web/css/scroll-padding/index.md @@ -21,7 +21,7 @@ scroll-padding: auto; /* Valeurs de longueur */ /* Type */ scroll-padding: 10px; -scroll-padding: 1em .5em 1em 1em; +scroll-padding: 1em 0.5em 1em 1em; scroll-padding: 10%; /* Valeurs globales */ diff --git a/files/fr/web/css/scroll-snap-stop/index.md b/files/fr/web/css/scroll-snap-stop/index.md index ce8381661b4b50..0d3d112c7d71d0 100644 --- a/files/fr/web/css/scroll-snap-stop/index.md +++ b/files/fr/web/css/scroll-snap-stop/index.md @@ -42,7 +42,8 @@ scroll-snap-type: unset; ```css /* setup */ -:root, body { +:root, +body { height: 100%; display: flex; align-items: center; @@ -118,11 +119,11 @@ scroll-snap-type: unset; } /* coloration */ .container > div:nth-child(even) { - background-color: #87EA87; + background-color: #87ea87; } .container > div:nth-child(odd) { - background-color: #87CCEA; + background-color: #87ccea; } ``` @@ -130,7 +131,7 @@ scroll-snap-type: unset; ```html
    -
    X Mand. LTR
    +
    X Mand. LTR
    2
    3
    4
    diff --git a/files/fr/web/css/scroll-snap-type/index.md b/files/fr/web/css/scroll-snap-type/index.md index 3c701aaca3af20..c0cd248d11a637 100644 --- a/files/fr/web/css/scroll-snap-type/index.md +++ b/files/fr/web/css/scroll-snap-type/index.md @@ -68,7 +68,9 @@ scroll-snap-type: unset; ```css /* setup */ -html, body, .holster { +html, +body, +.holster { height: 100%; } .holster { @@ -140,11 +142,11 @@ html, body, .holster { } /* coloration */ .container > div:nth-child(even) { - background-color: #87EA87; + background-color: #87ea87; } .container > div:nth-child(odd) { - background-color: #87CCEA; + background-color: #87ccea; } ``` @@ -152,69 +154,69 @@ html, body, .holster { ```html
    -
    -
    X Mand. LTR
    -
    2
    -
    3
    -
    4
    -
    5
    -
    - -
    -
    X Prox. LTR
    -
    2
    -
    3
    -
    4
    -
    5
    -
    - -
    -
    Y Mand. LTR
    -
    2
    -
    3
    -
    4
    -
    5
    -
    - -
    -
    Y Prox. LTR
    -
    2
    -
    3
    -
    4
    -
    5
    -
    - -
    -
    X Mand. RTL
    -
    2
    -
    3
    -
    4
    -
    5
    -
    - -
    -
    X Prox. RTL
    -
    2
    -
    3
    -
    4
    -
    5
    -
    - -
    -
    Y Mand. RTL
    -
    2
    -
    3
    -
    4
    -
    5
    -
    - -
    -
    Y Prox. RTL
    -
    2
    -
    3
    -
    4
    -
    5
    -
    +
    +
    X Mand. LTR
    +
    2
    +
    3
    +
    4
    +
    5
    +
    + +
    +
    X Prox. LTR
    +
    2
    +
    3
    +
    4
    +
    5
    +
    + +
    +
    Y Mand. LTR
    +
    2
    +
    3
    +
    4
    +
    5
    +
    + +
    +
    Y Prox. LTR
    +
    2
    +
    3
    +
    4
    +
    5
    +
    + +
    +
    X Mand. RTL
    +
    2
    +
    3
    +
    4
    +
    5
    +
    + +
    +
    X Prox. RTL
    +
    2
    +
    3
    +
    4
    +
    5
    +
    + +
    +
    Y Mand. RTL
    +
    2
    +
    3
    +
    4
    +
    5
    +
    + +
    +
    Y Prox. RTL
    +
    2
    +
    3
    +
    4
    +
    5
    +
    ``` diff --git a/files/fr/web/css/scroll-timeline/index.md b/files/fr/web/css/scroll-timeline/index.md index 2c2959131a0197..c2598f5bd961cc 100644 --- a/files/fr/web/css/scroll-timeline/index.md +++ b/files/fr/web/css/scroll-timeline/index.md @@ -1,5 +1,5 @@ --- -title: '@scroll-timeline' +title: "@scroll-timeline" slug: Web/CSS/scroll-timeline l10n: sourceCommit: 3db79652f43f0d5b4bd3bc0f233ed7670d91cbdf diff --git a/files/fr/web/css/scrollbar-color/index.md b/files/fr/web/css/scrollbar-color/index.md index 577dcb6f169d8c..787f0b4a9b76d6 100644 --- a/files/fr/web/css/scrollbar-color/index.md +++ b/files/fr/web/css/scrollbar-color/index.md @@ -101,7 +101,13 @@ scrollbar-color: unset; ### HTML ```html -
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
    +
    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens + corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts + fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber + earthnut pea peanut soko zucchini. +
    ``` ### Résultat diff --git a/files/fr/web/css/scrollbar-width/index.md b/files/fr/web/css/scrollbar-width/index.md index f95ed4ca5b42d7..1b736fe3c35cb9 100644 --- a/files/fr/web/css/scrollbar-width/index.md +++ b/files/fr/web/css/scrollbar-width/index.md @@ -86,7 +86,13 @@ scrollbar-width: unset; ### HTML ```html -
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
    +
    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens + corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts + fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber + earthnut pea peanut soko zucchini. +
    ``` ### Résultat diff --git a/files/fr/web/css/selector_list/index.md b/files/fr/web/css/selector_list/index.md index 001eeaf6e3dbe5..627cb3057a0d0d 100644 --- a/files/fr/web/css/selector_list/index.md +++ b/files/fr/web/css/selector_list/index.md @@ -31,7 +31,14 @@ element, element, element { propriétés de style } On peut grouper les sélecteurs sur une seule ligne : ```css -h1, h2, h3, h4, h5, h6 { font-family: helvetica; } +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: helvetica; +} ``` ### Groupement sur plusieurs lignes @@ -51,13 +58,23 @@ article { Un inconvénient des listes de sélecteurs est la non-équivalence des deux blocs suivants : ```css -h1 { font-family: sans-serif } -h2:maybe-unsupported { font-family: sans-serif } -h3 { font-family: sans-serif } +h1 { + font-family: sans-serif; +} +h2:maybe-unsupported { + font-family: sans-serif; +} +h3 { + font-family: sans-serif; +} ``` ```css -h1, h2:maybe-unsupported, h3 { font-family: sans-serif } +h1, +h2:maybe-unsupported, +h3 { + font-family: sans-serif; +} ``` En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul sélecteur invalide rend l'ensemble de la règle invalide. @@ -65,13 +82,21 @@ En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul Pour éviter cet effet indésirable, on pourra utiliser le sélecteur {{CSSxRef(":is", ":is()")}} qui ignore les sélecteurs invalides parmi ses arguments. Par contre, tous les sélecteurs passés en arguments auront la même spécificité. ```css -h1 { font-family: sans-serif } -h2:maybe-unsupported { font-family: sans-serif } -h3 { font-family: sans-serif } +h1 { + font-family: sans-serif; +} +h2:maybe-unsupported { + font-family: sans-serif; +} +h3 { + font-family: sans-serif; +} ``` ```css -:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif } +:is(h1, h2:maybe-unsupported, h3) { + font-family: sans-serif; +} ``` ## Spécifications diff --git a/files/fr/web/css/shape-image-threshold/index.md b/files/fr/web/css/shape-image-threshold/index.md index c6da950a3ca825..85f4d342f284b1 100644 --- a/files/fr/web/css/shape-image-threshold/index.md +++ b/files/fr/web/css/shape-image-threshold/index.md @@ -49,10 +49,8 @@ Dans cet exemple, on utilise un bloc {{HTMLElement("div")}} pour y afficher une width: 150px; height: 150px; float: left; - background-image: linear-gradient(30deg, black, transparent 80%, - transparent); - shape-outside: linear-gradient(30deg, black, transparent 80%, - transparent); + background-image: linear-gradient(30deg, black, transparent 80%, transparent); + shape-outside: linear-gradient(30deg, black, transparent 80%, transparent); shape-image-threshold: 0.2; } ``` @@ -65,14 +63,14 @@ Dans cet exemple, on utilise un bloc {{HTMLElement("div")}} pour y afficher une

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint - facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat - adipisci, libero quae nihil porro debitis laboriosam inventore animi - impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque - a mollitia dicta repudiandae illum exercitationem aliquam repellendus - ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto - nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit - accusamus iusto dolore, at provident eius alias maxime pariatur non - deleniti ipsum sequi rem eveniet laboriosam magni expedita? + facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci, + libero quae nihil porro debitis laboriosam inventore animi impedit nostrum + nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta + repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo + eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea + eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius + alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni + expedita?

    ``` diff --git a/files/fr/web/css/shape-margin/index.md b/files/fr/web/css/shape-margin/index.md index a466b3d7f2c261..33a2828c3c7be5 100644 --- a/files/fr/web/css/shape-margin/index.md +++ b/files/fr/web/css/shape-margin/index.md @@ -68,13 +68,13 @@ section { ```html
    - We are not quite sure of any one thing in biology; our knowledge of geology - is relatively very slight, and the economic laws of society are - uncertain to every one except some individual who attempts to set them - forth; but before the world was fashioned the square on the hypotenuse - was equal to the sum of the squares on the other two sides of a right - triangle, and it will be so after this world is dead; and the inhabitant - of Mars, if he exists, probably knows its truth as we know it. + We are not quite sure of any one thing in biology; our knowledge of geology is + relatively very slight, and the economic laws of society are uncertain to + every one except some individual who attempts to set them forth; but before + the world was fashioned the square on the hypotenuse was equal to the sum of + the squares on the other two sides of a right triangle, and it will be so + after this world is dead; and the inhabitant of Mars, if he exists, probably + knows its truth as we know it.
    ``` diff --git a/files/fr/web/css/shape-outside/index.md b/files/fr/web/css/shape-outside/index.md index 7fe78a90204ce0..5f8c15e29d69bb 100644 --- a/files/fr/web/css/shape-outside/index.md +++ b/files/fr/web/css/shape-outside/index.md @@ -25,12 +25,11 @@ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); -shape-outside: linear-gradient(45deg, rgba(255,255,255,0) 150px, red 150px); +shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* Valeur de type */ shape-outside: url(image.png); - /* Valeur de type */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); @@ -78,10 +77,9 @@ Afin de pouvoir interpoler entre deux formes, on appliquera les règles suivante

    - Sometimes a web page's text content appears to be - funneling your attention towards a spot on the page - to drive you to follow a particular link. Sometimes - you don't notice. + Sometimes a web page's text content appears to be funneling your attention + towards a spot on the page to drive you to follow a particular link. + Sometimes you don't notice.

    ```