From 840f41992534889b9a6c0a36ccc514df8f43a940 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Wed, 26 Jul 2023 22:18:08 -0700 Subject: [PATCH] fr: Format /web/css using Prettier (part 2) (#14625) --- files/fr/web/css/--_star_/index.md | 8 +- files/fr/web/css/-moz-float-edge/index.md | 5 +- .../css/-moz-force-broken-image-icon/index.md | 2 +- files/fr/web/css/-moz-image-rect/index.md | 12 +- files/fr/web/css/-moz-orient/index.md | 9 +- files/fr/web/css/-moz-user-focus/index.md | 4 +- files/fr/web/css/-webkit-line-clamp/index.md | 5 +- .../web/css/-webkit-mask-attachment/index.md | 2 +- .../web/css/-webkit-mask-box-image/index.md | 4 +- .../web/css/-webkit-mask-composite/index.md | 2 +- .../web/css/-webkit-mask-position-x/index.md | 5 +- .../web/css/-webkit-mask-position-y/index.md | 5 +- .../fr/web/css/-webkit-mask-repeat-x/index.md | 6 +- .../fr/web/css/-webkit-mask-repeat-y/index.md | 6 +- .../css/-webkit-overflow-scrolling/index.md | 8 +- .../fr/web/css/-webkit-text-security/index.md | 3 +- .../css/-webkit-text-stroke-color/index.md | 4 +- files/fr/web/css/@charset/index.md | 10 +- files/fr/web/css/@color-profile/index.md | 4 +- .../@counter-style/additive-symbols/index.md | 13 +- .../web/css/@counter-style/fallback/index.md | 3 +- files/fr/web/css/@counter-style/index.md | 14 +- .../web/css/@counter-style/negative/index.md | 4 +- .../fr/web/css/@counter-style/prefix/index.md | 2 +- .../fr/web/css/@counter-style/range/index.md | 12 +- .../web/css/@counter-style/speak-as/index.md | 1 - .../web/css/@counter-style/symbols/index.md | 2 +- .../fr/web/css/@counter-style/system/index.md | 19 ++- files/fr/web/css/@document/index.md | 6 +- .../web/css/@font-face/font-display/index.md | 5 +- .../web/css/@font-face/font-family/index.md | 4 +- .../web/css/@font-face/font-stretch/index.md | 7 +- .../fr/web/css/@font-face/font-style/index.md | 4 +- .../font-variation-settings/index.md | 8 +- .../web/css/@font-face/font-weight/index.md | 5 +- files/fr/web/css/@font-face/index.md | 28 ++-- files/fr/web/css/@font-face/src/index.md | 28 ++-- .../web/css/@font-face/unicode-range/index.md | 12 +- .../fr/web/css/@font-feature-values/index.md | 6 +- files/fr/web/css/@import/index.md | 4 +- files/fr/web/css/@keyframes/index.md | 51 ++++-- files/fr/web/css/@layer/index.md | 16 +- .../@media/-moz-device-pixel-ratio/index.md | 8 +- .../css/@media/-webkit-transition/index.md | 2 +- files/fr/web/css/@media/any-pointer/index.md | 3 +- files/fr/web/css/@media/aspect-ratio/index.md | 9 +- files/fr/web/css/@media/color-index/index.md | 5 +- files/fr/web/css/@media/color/index.md | 5 +- .../fr/web/css/@media/device-height/index.md | 5 +- files/fr/web/css/@media/device-width/index.md | 5 +- files/fr/web/css/@media/grid/index.md | 4 +- files/fr/web/css/@media/height/index.md | 3 +- files/fr/web/css/@media/index.md | 31 ++-- .../web/css/@media/inverted-colors/index.md | 10 +- files/fr/web/css/@media/monochrome/index.md | 8 +- .../fr/web/css/@media/overflow-block/index.md | 11 +- .../web/css/@media/overflow-inline/index.md | 18 +-- files/fr/web/css/@media/pointer/index.md | 3 +- .../css/@media/prefers-color-scheme/index.md | 50 ++++-- .../web/css/@media/prefers-contrast/index.md | 2 +- .../@media/prefers-reduced-motion/index.md | 19 ++- files/fr/web/css/@media/scripting/index.md | 6 +- files/fr/web/css/@media/shape/index.md | 9 +- files/fr/web/css/@media/update/index.md | 4 +- files/fr/web/css/@media/width/index.md | 13 +- files/fr/web/css/@namespace/index.md | 9 +- files/fr/web/css/@property/index.md | 10 +- files/fr/web/css/@supports/index.md | 43 +++-- files/fr/web/css/_colon_-moz-broken/index.md | 4 +- files/fr/web/css/_colon_-moz-loading/index.md | 2 +- .../css/_colon_-moz-only-whitespace/index.md | 2 +- .../css/_colon_-moz-submit-invalid/index.md | 2 +- .../web/css/_colon_-moz-suppressed/index.md | 2 +- .../css/_colon_-moz-user-disabled/index.md | 2 +- files/fr/web/css/_colon_active/index.md | 31 ++-- files/fr/web/css/_colon_any-link/index.md | 4 +- files/fr/web/css/_colon_checked/index.md | 6 +- files/fr/web/css/_colon_default/index.md | 8 +- files/fr/web/css/_colon_defined/index.md | 15 +- files/fr/web/css/_colon_dir/index.md | 3 +- files/fr/web/css/_colon_disabled/index.md | 30 ++-- files/fr/web/css/_colon_empty/index.md | 2 +- files/fr/web/css/_colon_enabled/index.md | 17 +- files/fr/web/css/_colon_first-child/index.md | 28 ++-- files/fr/web/css/_colon_first/index.md | 2 +- .../fr/web/css/_colon_focus-visible/index.md | 15 +- files/fr/web/css/_colon_focus-within/index.md | 8 +- files/fr/web/css/_colon_focus/index.md | 4 +- files/fr/web/css/_colon_fullscreen/index.md | 6 +- files/fr/web/css/_colon_future/index.md | 7 +- files/fr/web/css/_colon_has/index.md | 6 +- files/fr/web/css/_colon_host-context/index.md | 24 +-- files/fr/web/css/_colon_host/index.md | 25 +-- .../fr/web/css/_colon_host_function/index.md | 23 +-- files/fr/web/css/_colon_in-range/index.md | 16 +- .../fr/web/css/_colon_indeterminate/index.md | 14 +- files/fr/web/css/_colon_invalid/index.md | 4 +- files/fr/web/css/_colon_is/index.md | 147 +++++++++++++----- files/fr/web/css/_colon_lang/index.md | 14 +- files/fr/web/css/_colon_last-child/index.md | 4 +- 100 files changed, 711 insertions(+), 419 deletions(-) diff --git a/files/fr/web/css/--_star_/index.md b/files/fr/web/css/--_star_/index.md index 26788f367d7324..e1312821e5c027 100644 --- a/files/fr/web/css/--_star_/index.md +++ b/files/fr/web/css/--_star_/index.md @@ -32,8 +32,12 @@ La portée des propriétés personnalisées est celle des éléments sur lesquel ### HTML ```html -

Ce paragraphe devrait être sur fond bleu avec un texte jaune.

-

Ce paragraphe devrait être sur fond jaune avec un texte bleu.

+

+ Ce paragraphe devrait être sur fond bleu avec un texte jaune. +

+

+ Ce paragraphe devrait être sur fond jaune avec un texte bleu. +

``` ### CSS diff --git a/files/fr/web/css/-moz-float-edge/index.md b/files/fr/web/css/-moz-float-edge/index.md index 10eec1ea2ac89a..070957e6159227 100644 --- a/files/fr/web/css/-moz-float-edge/index.md +++ b/files/fr/web/css/-moz-float-edge/index.md @@ -60,10 +60,7 @@ La propriété **`-moz-float-edge`** définit si les propriétés de hauteur et ```html
-

- Lorem ipsum dolor sit amet, - consectetur adipiscing elit. -

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

``` diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.md b/files/fr/web/css/-moz-force-broken-image-icon/index.md index c1e353aef3b138..665cebd38ae6d5 100644 --- a/files/fr/web/css/-moz-force-broken-image-icon/index.md +++ b/files/fr/web/css/-moz-force-broken-image-icon/index.md @@ -37,7 +37,7 @@ img { ### HTML ```html -Un lien vers une image cassée +Un lien vers une image cassée ``` ### Résultat diff --git a/files/fr/web/css/-moz-image-rect/index.md b/files/fr/web/css/-moz-image-rect/index.md index 75bf6f70c92ec1..24189f5cb43f0e 100644 --- a/files/fr/web/css/-moz-image-rect/index.md +++ b/files/fr/web/css/-moz-image-rect/index.md @@ -16,7 +16,7 @@ La propriété **`-moz-image-rect`** permet d'utiliser une seule partie d'une im ### Valeurs -- [`url()`](/fr/docs/Web/CSS/url()) +- [`url()`]() - : L'URI de l'image dont on veut obtenir une portion. - `top` - : La coordonnée du bord haut de l'image, définie comme un entier ([``](/fr/docs/Web/CSS/integer)) ou un pourcentage ([``](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche. @@ -95,15 +95,19 @@ Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessin ```js function rotate() { - var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image"); + var prevStyle = window + .getComputedStyle(document.getElementById("box4"), null) + .getPropertyValue("background-image"); // Récupérer le style du dernier élément, puis faire tourner les images - for (var i=1; i<=4; i++) { + for (var i = 1; i <= 4; i++) { var curId = "box" + i; // Décaler les images d'arrière-plan - var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image"); + var curStyle = window + .getComputedStyle(document.getElementById(curId), null) + .getPropertyValue("background-image"); document.getElementById(curId).style.backgroundImage = prevStyle; prevStyle = curStyle; } diff --git a/files/fr/web/css/-moz-orient/index.md b/files/fr/web/css/-moz-orient/index.md index a5ee62031d7323..f6466e7da437b6 100644 --- a/files/fr/web/css/-moz-orient/index.md +++ b/files/fr/web/css/-moz-orient/index.md @@ -33,15 +33,12 @@ La propriété `moz-orient` est définie avec un mot-clé parmi ceux de la liste ```html

- La barre de progression suivante est - horizontale (le comportement par défaut) : + La barre de progression suivante est horizontale (le comportement par défaut) + :

-

- La barre de progression suivante - est verticale : -

+

La barre de progression suivante est verticale :

``` diff --git a/files/fr/web/css/-moz-user-focus/index.md b/files/fr/web/css/-moz-user-focus/index.md index 2848035075d265..9391b0e04c75c6 100644 --- a/files/fr/web/css/-moz-user-focus/index.md +++ b/files/fr/web/css/-moz-user-focus/index.md @@ -41,7 +41,9 @@ En utilisant la valeur `ignore`, on peut désactiver la prise de focus sur l'él ### HTML ```html - + ``` ### CSS diff --git a/files/fr/web/css/-webkit-line-clamp/index.md b/files/fr/web/css/-webkit-line-clamp/index.md index f3998001cdcbbb..ecb316ebfeb6df 100644 --- a/files/fr/web/css/-webkit-line-clamp/index.md +++ b/files/fr/web/css/-webkit-line-clamp/index.md @@ -52,8 +52,9 @@ Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au mil ```html

- Dans cet exemple -webkit-line-clamp vaut 3, ce qui signifie que le texte sera rogné après trois lignes. - Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped. + Dans cet exemple -webkit-line-clamp vaut 3, ce qui + signifie que le texte sera rogné après trois lignes. Une ellipse sera affichée + au n ellipsis will be shown at the point where the text is clamped.

``` diff --git a/files/fr/web/css/-webkit-mask-attachment/index.md b/files/fr/web/css/-webkit-mask-attachment/index.md index bec464de713bf1..fd194c08a65122 100644 --- a/files/fr/web/css/-webkit-mask-attachment/index.md +++ b/files/fr/web/css/-webkit-mask-attachment/index.md @@ -41,7 +41,7 @@ Si la propriété {{cssxref("-webkit-mask-image")}} est définie, **`-webkit-mas ```css body { - -webkit-mask-image: url('images/mask.png'); + -webkit-mask-image: url("images/mask.png"); -webkit-mask-attachment: fixed; } ``` diff --git a/files/fr/web/css/-webkit-mask-box-image/index.md b/files/fr/web/css/-webkit-mask-box-image/index.md index 49f11513b427f8..4ea926f55ed07d 100644 --- a/files/fr/web/css/-webkit-mask-box-image/index.md +++ b/files/fr/web/css/-webkit-mask-box-image/index.md @@ -55,11 +55,11 @@ Où : ```css .exempleUn { - -webkit-mask-box-image: url('mask.png'); + -webkit-mask-box-image: url("mask.png"); } .exempleDeux { - -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round; + -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round; } ``` diff --git a/files/fr/web/css/-webkit-mask-composite/index.md b/files/fr/web/css/-webkit-mask-composite/index.md index 11f2c30a5f511c..f7ead46cbe3884 100644 --- a/files/fr/web/css/-webkit-mask-composite/index.md +++ b/files/fr/web/css/-webkit-mask-composite/index.md @@ -65,7 +65,7 @@ La propriété **`-webkit-mask-composite`** définit la façon dont plusieurs im ```css .exemple { - -webkit-mask-image: url(mask1.png), url('mask2.png'); + -webkit-mask-image: url(mask1.png), url("mask2.png"); -webkit-mask-composite: xor, source-over; } ``` diff --git a/files/fr/web/css/-webkit-mask-position-x/index.md b/files/fr/web/css/-webkit-mask-position-x/index.md index 99afc2108f8e73..f9f55a77bbfcf7 100644 --- a/files/fr/web/css/-webkit-mask-position-x/index.md +++ b/files/fr/web/css/-webkit-mask-position-x/index.md @@ -25,7 +25,10 @@ La propriété **`-webkit-mask-position-x`** permet de définir la position hori -webkit-mask-position-x: -1cm; /* Gestion de plusieurs valeurs */ --webkit-mask-position-x: 50px, 25%, -3em; +-webkit-mask-position-x: + 50px, + 25%, + -3em; /* Valeurs globales */ -webkit-mask-position-x: inherit; diff --git a/files/fr/web/css/-webkit-mask-position-y/index.md b/files/fr/web/css/-webkit-mask-position-y/index.md index a3960b66289dc9..fc0c3af53352cc 100644 --- a/files/fr/web/css/-webkit-mask-position-y/index.md +++ b/files/fr/web/css/-webkit-mask-position-y/index.md @@ -25,7 +25,10 @@ La propriété **`-webkit-mask-position-y`** permet de définir la position vert -webkit-mask-position-y: -1cm; /* Gestion de plusieurs valeurs */ --webkit-mask-position-y: 50px, 25%, -3em; +-webkit-mask-position-y: + 50px, + 25%, + -3em; /* Valeurs globales */ -webkit-mask-position-y: inherit; diff --git a/files/fr/web/css/-webkit-mask-repeat-x/index.md b/files/fr/web/css/-webkit-mask-repeat-x/index.md index db9ae6b1f129e3..b49c3952e4c6e8 100644 --- a/files/fr/web/css/-webkit-mask-repeat-x/index.md +++ b/files/fr/web/css/-webkit-mask-repeat-x/index.md @@ -45,12 +45,12 @@ La propriété **`-webkit-mask-repeat-x`** définit la façon dont une image de ```css .exempleun { - -webkit-mask-image: url('mask.png'); + -webkit-mask-image: url("mask.png"); -webkit-mask-repeat-x: repeat; } .exempledeux { - -webkit-mask-image: url('mask.png'); + -webkit-mask-image: url("mask.png"); -webkit-mask-repeat-x: no-repeat; } ``` @@ -61,7 +61,7 @@ On peut définir un style de répétition (``) différent pour cha ```css .exempletrois { - -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-image: url("mask1.png"), url("mask2.png"); -webkit-mask-repeat-x: repeat, space; } ``` diff --git a/files/fr/web/css/-webkit-mask-repeat-y/index.md b/files/fr/web/css/-webkit-mask-repeat-y/index.md index 8ac1b836e1edcf..1a434ccf9877ad 100644 --- a/files/fr/web/css/-webkit-mask-repeat-y/index.md +++ b/files/fr/web/css/-webkit-mask-repeat-y/index.md @@ -45,12 +45,12 @@ La propriété **`-webkit-mask-repeat-y`** définit la façon dont une image de ```css .exempleun { - -webkit-mask-image: url('mask.png'); + -webkit-mask-image: url("mask.png"); -webkit-mask-repeat-y: repeat; } .exempledeux { - -webkit-mask-image: url('mask.png'); + -webkit-mask-image: url("mask.png"); -webkit-mask-repeat-y: no-repeat; } ``` @@ -61,7 +61,7 @@ On peut définir un style de répétition (``) différent pour cha ```css .exempletrois { - -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-image: url("mask1.png"), url("mask2.png"); -webkit-mask-repeat-y: repeat, space; } ``` diff --git a/files/fr/web/css/-webkit-overflow-scrolling/index.md b/files/fr/web/css/-webkit-overflow-scrolling/index.md index 3f05ce4d1afcf7..368dafc632e656 100644 --- a/files/fr/web/css/-webkit-overflow-scrolling/index.md +++ b/files/fr/web/css/-webkit-overflow-scrolling/index.md @@ -49,14 +49,10 @@ p { ```html
-

- Ce paragraphe a un défilement inertiel. -

+

Ce paragraphe a un défilement inertiel.

-

- Pas celui-ci. -

+

Pas celui-ci.

``` diff --git a/files/fr/web/css/-webkit-text-security/index.md b/files/fr/web/css/-webkit-text-security/index.md index 690a4041d29f36..b90397d36e9b5f 100644 --- a/files/fr/web/css/-webkit-text-security/index.md +++ b/files/fr/web/css/-webkit-text-security/index.md @@ -24,8 +24,7 @@ En utilisant un navigateur qui prend en charge cette propriété et en saisissan ### HTML ```html - - + ``` ### CSS diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.md b/files/fr/web/css/-webkit-text-stroke-color/index.md index 14c17e608913a8..608edfbfea4be6 100644 --- a/files/fr/web/css/-webkit-text-stroke-color/index.md +++ b/files/fr/web/css/-webkit-text-stroke-color/index.md @@ -40,7 +40,7 @@ La propriété **`-webkit-text-stroke-color`** permet de définir la couleur de ```html

Texte avec un contour

- + ``` ### CSS @@ -57,7 +57,7 @@ p { ```js hidden var colorPicker = document.querySelector("input"); -colorPicker.addEventListener("change", function(evt) { +colorPicker.addEventListener("change", function (evt) { document.querySelector("p").style.webkitTextStrokeColor = evt.target.value; }); ``` diff --git a/files/fr/web/css/@charset/index.md b/files/fr/web/css/@charset/index.md index 6f45f82a9fd028..e3893110db38cf 100644 --- a/files/fr/web/css/@charset/index.md +++ b/files/fr/web/css/@charset/index.md @@ -31,7 +31,7 @@ Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une fe où - `charset` - - : Est une chaîne de caractères (une valeur CSS de type {{cssxref("<string>")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans [le registre IANA](https://www.iana.org/assignments/character-sets/character-sets.xhtml) et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec *préféré* (_preferred_) doit être utilisé. + - : Est une chaîne de caractères (une valeur CSS de type {{cssxref("<string>")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans [le registre IANA](https://www.iana.org/assignments/character-sets/character-sets.xhtml) et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec _préféré_ (_preferred_) doit être utilisé. ### Syntaxe formelle @@ -42,15 +42,15 @@ où ### Exemples valides ```css -@charset "UTF-8"; /* Valide, la feuille de style est encodée en Unicode UTF-8 */ +@charset "UTF-8"; /* Valide, la feuille de style est encodée en Unicode UTF-8 */ @charset "iso-8859-15"; /* Valide, la feuille de style est encodée en Latin-9 (langues d'Europe occidentale avec le symbole €) */ ``` ### Exemples invalides -```css example-bad - @charset "UTF-8"; /* Invalide, il y a un caractère (un espace) avant la règle @ */ -@charset UTF-8; /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS ({{cssxref("<string>")}}) */ +```css-nolint example-bad + @charset "UTF-8"; /* Invalide, il y a un caractère (un espace) avant la règle @ */ +@charset UTF-8; /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS ({{cssxref("<string>")}}) */ ``` ## Spécifications diff --git a/files/fr/web/css/@color-profile/index.md b/files/fr/web/css/@color-profile/index.md index b59bcaad61a7c3..d55241b41680d2 100644 --- a/files/fr/web/css/@color-profile/index.md +++ b/files/fr/web/css/@color-profile/index.md @@ -12,7 +12,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@color-profil ```css @color-profile --swop5c { - src: url('https://example.org/SWOP2006_Coated5v2.icc'); + src: url("https://example.org/SWOP2006_Coated5v2.icc"); } ``` @@ -39,7 +39,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@color-profil ```css @color-profile --swop5c { - src: url('https://example.org/SWOP2006_Coated5v2.icc'); + src: url("https://example.org/SWOP2006_Coated5v2.icc"); } .header { diff --git a/files/fr/web/css/@counter-style/additive-symbols/index.md b/files/fr/web/css/@counter-style/additive-symbols/index.md index 1258ef898ba0ab..9fe364f6557fc9 100644 --- a/files/fr/web/css/@counter-style/additive-symbols/index.md +++ b/files/fr/web/css/@counter-style/additive-symbols/index.md @@ -10,8 +10,12 @@ Le descripteur **`additive-symbols`**, utilisé pour la règle @ {{cssxref("@cou ```css additive-symbols: 3 "0"; -additive-symbols: 3 "0", 2 "\2E\20"; -additive-symbols: 3 "0", 2 url(symbol.png); +additive-symbols: + 3 "0", + 2 "\2E\20"; +additive-symbols: + 3 "0", + 2 url(symbol.png); ``` Lorsque la valeur du descripteur `system` est `cyclic`, `numeric`, `alphabetic`, `symbolic` ou `fixed`, c'est le descripteur `symbols` qui est utilisé à la place de `additive-symbols` afin de définir les symboles utilisés pour le compteur. @@ -31,7 +35,10 @@ Lorsque la valeur du descripteur `system` est `cyclic`, `numeric`, `alphabetic`, ```css @counter-style additive-symbols-example { system: additive; - additive-symbols: V 5, IV 4, I 1; + additive-symbols: + V 5, + IV 4, + I 1; } .exemple { list-style: additive-symbols-example; diff --git a/files/fr/web/css/@counter-style/fallback/index.md b/files/fr/web/css/@counter-style/fallback/index.md index 4db7300c32d7e0..c469709dce3bba 100644 --- a/files/fr/web/css/@counter-style/fallback/index.md +++ b/files/fr/web/css/@counter-style/fallback/index.md @@ -33,7 +33,8 @@ fallback: custom-gangnam-style; ```css @counter-style fallback-example { - system: fixed; symbols: "\24B6" "\24B7" "\24B8"; + system: fixed; + symbols: "\24B6" "\24B7" "\24B8"; fallback: upper-alpha; } .exemple { diff --git a/files/fr/web/css/@counter-style/index.md b/files/fr/web/css/@counter-style/index.md index 39b91433d4fe53..e54fea6f9012a3 100644 --- a/files/fr/web/css/@counter-style/index.md +++ b/files/fr/web/css/@counter-style/index.md @@ -29,24 +29,31 @@ La version initiale de CSS définit un ensemble de compteurs qui peuvent être u Chaque `@counter-style` est identifié par un nom et possède un ensemble de descripteurs. - [`system`](/fr/docs/Web/CSS/@counter-style/system) + - : Ce descripteur indique l'algorithme à utiliser pour convertir les valeurs entières du compteur en des chaînes de caractères correspondantes. - [`negative`](/fr/docs/Web/CSS/@counter-style/negative) + - : Ce descripteur permet d'indiquer si le symbole du compteur doit être préfixé ou suffixé si la valeur est négative. - [`prefix`](/fr/docs/Web/CSS/@counter-style/prefix) + - : Ce descripteur indique un symbole qui doit être utilisé comme préfixe pour le compteur. Les préfixes sont ajoutés à la fin de la représentation et apparaissent avant le signe négatif. - [`suffix`](/fr/docs/Web/CSS/@counter-style/suffix) + - : Ce descripteur indique un symbole qui doit être utilisé comme suffixe pour le compteur. Comme pour les préfixes, les suffixes sont ajoutés à la fin de la représentation. - [`range`](/fr/docs/Web/CSS/@counter-style/range) + - : Ce descripteur indique l'intervalle de valeur pour lequel le style du compteur peut s'appliquer. Pour les valeurs du compteur en dehors de cet intervalle, le style utilisé sera le style de secours. - [`pad`](/fr/docs/Web/CSS/@counter-style/pad) + - : Ce descripteur est utilisé lorsqu'il faut que la représentation du marqueur ait une longueur minimale. Ainsi, s'il faut que le compteur mesure deux caractères (ex. 01, 02, 03, 04 etc), on utilisera ce descripteur. Pour les valeurs dont la taille est plus grande que celle indiquée dans ce descripteur, le marqueur est construit normalement. - [`fallback`](/fr/docs/Web/CSS/@counter-style/fallback) + - : Ce descripteur définit le système en cas de secours (si le système définit via la règle @ ne permet pas de construire le marqueur ou si la valeur du compteur est en dehors de l'intervalle défini). Si le système indiqué en secours échoue également, ce sera alors le système de secours de secours qui sera utilisé et ainsi de suite si nécessaire. Si besoin, le style décimal sera utilisé en fin de chaîne. - [`symbols`](/fr/docs/Web/CSS/@counter-style/symbols) @@ -64,6 +71,7 @@ Chaque `@counter-style` est identifié par un nom et possède un ensemble de des ``` - [`additive-symbols`](/fr/docs/Web/CSS/@counter-style/additive-symbols) + - : Certains symboles définis via le descripteur `symbols` sont utilisés par la plupart des algorithmes. Certains systèmes dits « additifs » s'appuient sur des _tuples additifs_ décrit avec ce descripteur. Chaque tuple additif se compose d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids. - [`speak-as`](/fr/docs/Web/CSS/@counter-style/speak-as) @@ -98,7 +106,7 @@ Chaque `@counter-style` est identifié par un nom et possède un ensemble de des } .exemple { - list-style: circled-alpha; + list-style: circled-alpha; } ``` @@ -119,6 +127,6 @@ Chaque `@counter-style` est identifié par un nom et possède un ensemble de des ## Voir aussi - [`list-style`](/fr/docs/Web/CSS/list-style), [`list-style-image`](/fr/docs/Web/CSS/list-style-image), [`list-style-position`](/fr/docs/Web/CSS/list-style-position), [`list-style-type`](/fr/docs/Web/CSS/list-style-type) -- [`symbols()`](/fr/docs/Web/CSS/symbols()) : la notation fonctionnelle qui permet de créer des styles de compteur anonymes -- Les fonctions CSS [`counter()`](/fr/docs/Web/CSS/counter()) et [`counters()`](/fr/docs/Web/CSS/counters()) +- [`symbols()`]() : la notation fonctionnelle qui permet de créer des styles de compteur anonymes +- Les fonctions CSS [`counter()`]() et [`counters()`]() - [Démonstration pour les styles de compteur](https://mdn.github.io/css-examples/counter-style-demo/) ([code](https://github.com/mdn/css-examples/tree/master/counter-style-demo)) diff --git a/files/fr/web/css/@counter-style/negative/index.md b/files/fr/web/css/@counter-style/negative/index.md index d486819cb962e2..3c749405a2f8db 100644 --- a/files/fr/web/css/@counter-style/negative/index.md +++ b/files/fr/web/css/@counter-style/negative/index.md @@ -10,8 +10,8 @@ Le descripteur **`negative`**, associé à la règle @ {{cssxref("@counter-style ```css /* Valeurs représentant les symboles */ -negative: "-"; /* Préfixe '-' si la valeur est négative */ -negative: "(" ")"; /* Entoure la valeur avec '(' et ')' si elle est négative */ +negative: "-"; /* Préfixe '-' si la valeur est négative */ +negative: "(" ")"; /* Entoure la valeur avec '(' et ')' si elle est négative */ ``` Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur `negative` n'a d'effet que si la valeur du descripteur `system` est `symbolic`, `alphabetic`, `numeric`, `additive` ou `extends` et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur `negative` est fourni, il est ignoré. diff --git a/files/fr/web/css/@counter-style/prefix/index.md b/files/fr/web/css/@counter-style/prefix/index.md index 980ec4b3a1a350..4f339422b7e19b 100644 --- a/files/fr/web/css/@counter-style/prefix/index.md +++ b/files/fr/web/css/@counter-style/prefix/index.md @@ -37,7 +37,7 @@ prefix: "Page"; @counter-style chapitres { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; - prefix: 'Chapitre '; + prefix: "Chapitre "; } .exemple { diff --git a/files/fr/web/css/@counter-style/range/index.md b/files/fr/web/css/@counter-style/range/index.md index 1ac1465365a7b4..88cc97c1812b87 100644 --- a/files/fr/web/css/@counter-style/range/index.md +++ b/files/fr/web/css/@counter-style/range/index.md @@ -32,8 +32,12 @@ range: 6 infinite; range: infinite infinite; /* Valeurs indiquant plusieurs intervalles */ -range: 2 5, 8 10; -range: infinite 6, 10 infinite; +range: + 2 5, + 8 10; +range: + infinite 6, + 10 infinite; ``` ### Values @@ -55,7 +59,9 @@ range: infinite 6, 10 infinite; @counter-style range-multi-example { system: cyclic; symbols: "\25A0" "\25A1"; - range: 2 4, 7 9; + range: + 2 4, + 7 9; } .exemple { diff --git a/files/fr/web/css/@counter-style/speak-as/index.md b/files/fr/web/css/@counter-style/speak-as/index.md index e4147f8a528feb..a958a51e859c8e 100644 --- a/files/fr/web/css/@counter-style/speak-as/index.md +++ b/files/fr/web/css/@counter-style/speak-as/index.md @@ -66,7 +66,6 @@ speak-as: ; speak-as: numbers; } - .exemple { list-style: speak-as-exemple; } diff --git a/files/fr/web/css/@counter-style/symbols/index.md b/files/fr/web/css/@counter-style/symbols/index.md index 5285ed1d13be0d..5d16ca76173bd1 100644 --- a/files/fr/web/css/@counter-style/symbols/index.md +++ b/files/fr/web/css/@counter-style/symbols/index.md @@ -12,7 +12,7 @@ Le descripteur **`symbols`**, rattaché à la règle @ {{cssxref("@counter-style symbols: A B C D E; symbols: "\24B6" "\24B7" "\24B8" D E; symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; -symbols: url('premier.svg') url('deuxieme.svg') url('troisieme.svg'); +symbols: url("premier.svg") url("deuxieme.svg") url("troisieme.svg"); symbols: indic-numbers; ``` diff --git a/files/fr/web/css/@counter-style/system/index.md b/files/fr/web/css/@counter-style/system/index.md index 1dc4f81c6f0b22..f994c62bcb30ae 100644 --- a/files/fr/web/css/@counter-style/system/index.md +++ b/files/fr/web/css/@counter-style/system/index.md @@ -72,7 +72,7 @@ Ce descripteur peut prendre l'une de ces trois formes : } .list { - list-style: fisheye; + list-style: fisheye; } ``` @@ -100,7 +100,7 @@ Ce descripteur peut prendre l'une de ces trois formes : @counter-style circled-digits { system: fixed; symbols: ➀ ➁ ➂; - suffix: ' '; + suffix: " "; } .list { @@ -258,7 +258,20 @@ Ce descripteur peut prendre l'une de ces trois formes : @counter-style upper-roman { system: additive; range: 1 3999; - additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I; + additive-symbols: + 1000 M, + 900 CM, + 500 D, + 400 CD, + 100 C, + 90 XC, + 50 L, + 40 XL, + 10 X, + 9 IX, + 5 V, + 4 IV, + 1 I; } .list { diff --git a/files/fr/web/css/@document/index.md b/files/fr/web/css/@document/index.md index 55ccaa828b7974..3a99ff207be7a4 100644 --- a/files/fr/web/css/@document/index.md +++ b/files/fr/web/css/@document/index.md @@ -9,7 +9,8 @@ translation_of: Web/CSS/@document La [règle @ CSS](/fr/docs/Web/CSS/Règles_@) **`@document`** restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur. ```css -@document url("https://www.example.com/") { +@document url("https://www.example.com/") +{ h1 { color: green; } @@ -43,8 +44,7 @@ Les valeurs échappées fournies à la fonction `regexp()` doivent être en outr url-prefix("http://www.w3.org/Style/"), domain("mozilla.org"), media-document("video"), - regexp("https:.*") -{ + regexp("https:.*") { /* Ces règles CSS s'appliquent à : - la page "http://www.w3.org/" - toute page dont l'URL commence par "http://www.w3.org/Style/" diff --git a/files/fr/web/css/@font-face/font-display/index.md b/files/fr/web/css/@font-face/font-display/index.md index 7def92ac82f01a..57587d20b375dd 100644 --- a/files/fr/web/css/@font-face/font-display/index.md +++ b/files/fr/web/css/@font-face/font-display/index.md @@ -54,8 +54,9 @@ font-display: optional; ```css @font-face { font-family: FonteExemple; - src: url(/chemin/vers/fonts/examplefont.woff) format('woff'), - url(/chemin/vers/fonts/examplefont.eot) format('eot'); + src: + url(/chemin/vers/fonts/examplefont.woff) format("woff"), + url(/chemin/vers/fonts/examplefont.eot) format("eot"); font-weight: 400; font-style: normal; font-display: fallback; diff --git a/files/fr/web/css/@font-face/font-family/index.md b/files/fr/web/css/@font-face/font-family/index.md index 510575f8645d97..7376abbcaa250c 100644 --- a/files/fr/web/css/@font-face/font-family/index.md +++ b/files/fr/web/css/@font-face/font-family/index.md @@ -14,7 +14,7 @@ Le descripteur **`font-family`** permet aux auteurs d'un document de définir la /* Valeurs de chaînes de caractères */ /* Type */ font-family: "police de caractères a"; -font-family: 'une autre police'; +font-family: "une autre police"; /* Valeur de type */ font-family: exemplepolice; @@ -38,7 +38,7 @@ font-family: exemplepolice; ```css @font-face { font-family: exemplepolice; - src: url('exemplepolice.ttf'); + src: url("exemplepolice.ttf"); } ``` diff --git a/files/fr/web/css/@font-face/font-stretch/index.md b/files/fr/web/css/@font-face/font-stretch/index.md index 603fb7cf258599..e2b9a035cef002 100644 --- a/files/fr/web/css/@font-face/font-stretch/index.md +++ b/files/fr/web/css/@font-face/font-stretch/index.md @@ -31,7 +31,7 @@ font-stretch: 200%; /* Valeurs multiples */ font-stretch: 75% 125%; -font-stretch: condensed ultra-condensed;; +font-stretch: condensed ultra-condensed; ``` ### Valeurs @@ -119,8 +119,9 @@ Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ```css @font-face { font-family: "Open Sans"; - src: local("Open Sans") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); + src: + local("Open Sans") format("woff2"), + url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); font-stretch: 87.5% 112.5%; } ``` diff --git a/files/fr/web/css/@font-face/font-style/index.md b/files/fr/web/css/@font-face/font-style/index.md index 9c3ad2f7a8f046..07bea496bc8dbe 100644 --- a/files/fr/web/css/@font-face/font-style/index.md +++ b/files/fr/web/css/@font-face/font-style/index.md @@ -48,7 +48,7 @@ Dans les exemples qui suivent, on utilisera les différentes formes liées à la ```css @font-face { font-family: garamond; - src: url('garamond.ttf'); + src: url("garamond.ttf"); } ``` @@ -63,7 +63,7 @@ En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via ```css @font-face { font-family: garamond; - src: url('garamond-italic.ttf'); + src: url("garamond-italic.ttf"); /* On indique ici que la police est italique */ font-style: italic; } diff --git a/files/fr/web/css/@font-face/font-variation-settings/index.md b/files/fr/web/css/@font-face/font-variation-settings/index.md index 8128cfe9ab7270..3deaeffca83e02 100644 --- a/files/fr/web/css/@font-face/font-variation-settings/index.md +++ b/files/fr/web/css/@font-face/font-variation-settings/index.md @@ -37,11 +37,13 @@ font-variation-settings: "xhgt" 0.7; ```css @font-face { - font-family: 'OpenTypeFont'; - src: url('open_type_font.woff2') format('woff2'); + font-family: "OpenTypeFont"; + src: url("open_type_font.woff2") format("woff2"); font-weight: normal; font-style: normal; - font-variation-settings: 'wght' 400, 'wdth' 300; + font-variation-settings: + "wght" 400, + "wdth" 300; } ``` diff --git a/files/fr/web/css/@font-face/font-weight/index.md b/files/fr/web/css/@font-face/font-weight/index.md index 9d08164948b78a..c18d050807537a 100644 --- a/files/fr/web/css/@font-face/font-weight/index.md +++ b/files/fr/web/css/@font-face/font-weight/index.md @@ -73,8 +73,9 @@ Dans l'exemple suivant, on récupère une police Open Sans et on l'importe en ut ```css @font-face { font-family: "Open Sans"; - src: local("Open Sans") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); + src: + local("Open Sans") format("woff2"), + url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); font-weight: 400; } ``` diff --git a/files/fr/web/css/@font-face/index.md b/files/fr/web/css/@font-face/index.md index 814d36da7dcf7a..caf462c64aeac0 100644 --- a/files/fr/web/css/@font-face/index.md +++ b/files/fr/web/css/@font-face/index.md @@ -14,9 +14,11 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@font-face`** ```css @font-face { font-family: "Trickster"; - src: local("Trickster"), - url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf") - format("opentype"), url("trickster-outline.woff") format("woff"); + src: + local("Trickster"), + url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), + url("trickster-outline.otf") format("opentype"), + url("trickster-outline.woff") format("woff"); } ``` @@ -46,6 +48,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@font-face`** - [`size-adjust`](/fr/docs/Web/CSS/@font-face/size-adjust) - : Définit un multiplicateur pour les contours des glyphes et les métriques associées à cette police. Cela permet de simplifier l'harmonisation de différentes polices lorsqu'elles sont affichées avec le même corps. - [`src`](/fr/docs/Web/CSS/@font-face/src) + - : Indique les ressources à utiliser pour la police. La valeur est une liste de valeurs indiquant les ressources à tenter les unes après les autres. Chaque ressource est indiquée avec `url()` ou `local()`. C'est la première ressource de la liste qui est chargée correctement qui est utilisée. Les éléments situés après sont ignorés. Si plusieurs descripteurs `src` sont définis, seule la dernière règle déclarée capable de charger une ressource est appliquée. > **Note :** Les éléments que le navigateur considère comme invalides sont ignorés. Certains navigateurs pourront ignorer l'ensemble du descripteur si même un seul des éléments est invalide. Cela pourra avoir un impact sur la gestion des alternatives. @@ -53,9 +56,11 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@font-face`** Une notation `url()` peut être suivie des notations fonctionnelles `format()` et `tech()`, comme ceci : ```css - src: local("Trickster"), - url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf") - format("opentype"), url("trickster-outline.woff") format("woff"); + src: + local("Trickster"), + url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), + url("trickster-outline.otf") format("opentype"), + url("trickster-outline.woff") format("woff"); ``` `url()` indique l'URL d'un fichier de police et fonctionne comme la notation fonctionnelle `url()` qu'on utilise par ailleurs en CSS. Si le fichier de la police contient plusieurs polices, un fragment d'identifiant doit être utilisé pour indiquer la police à utiliser. Par exemple : @@ -97,6 +102,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@font-face`** | `format("truetype-variations")` | `format(truetype) tech(variations)` | > **Note :** `format(svg)` correspond aux [polices SVG](/fr/docs/Web/SVG/Tutorial/SVG_fonts), tandis que `tech(color-SVG)` correspond aux [polices OpenType avec un tableau SVG](https://learn.microsoft.com/en-us/typography/opentype/spec/svg) (également appelées polices de couleur OpenType-SVG) : il s'agit de deux types de polices complètement différents. + - [`unicode-range`](/fr/docs/Web/CSS/@font-face/unicode-range) - : L'intervalle des points de code Unicode pour lesquels la règle `@font-face` s'applique. @@ -150,7 +156,7 @@ Dans cet exemple, on indique une police téléchargeable à utiliser et on l'app #### HTML ```html - + @@ -199,7 +205,9 @@ Cela signifie généralement que les fichiers locaux doivent apparaître avant l ```css @font-face { font-family: "MgOpenModernaBold"; - src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), url("MgOpenModernaBold.otf") format(opentype); + src: + url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), + url("MgOpenModernaBold.otf") format(opentype); } ``` @@ -214,7 +222,9 @@ On notera dans ce cas que les descripteurs `src` sont essayés dans l'ordre inve font-family: "MgOpenModernaBold"; src: url("MgOpenModernaBold.otf") format(opentype); src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental); - src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), url("MgOpenModernaBold.otf") format(opentype); + src: + url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), + url("MgOpenModernaBold.otf") format(opentype); } ``` diff --git a/files/fr/web/css/@font-face/src/index.md b/files/fr/web/css/@font-face/src/index.md index c9743c2faabd66..3da01563772885 100644 --- a/files/fr/web/css/@font-face/src/index.md +++ b/files/fr/web/css/@font-face/src/index.md @@ -16,23 +16,25 @@ Là aussi, les URL utilisées peuvent être relatives. Dans le cas où une URL r ## Syntaxe -```css +```css-nolint /* */ src: url(https://unsiteweb.com/chemin/vers/police.woff); /* URL absolue */ -src: url(chemin/vers/police.woff); /* URL relative */ -src: url(chemin/vers/police.woff) format("woff"); /* format explicite */ -src: url('chemin/vers/police.woff'); /* URL entre quotes */ -src: url(chemin/vers/policesvg.svg#exemple); /* fragment identifiant une police */ +src: url(chemin/vers/police.woff); /* URL relative */ +src: url(chemin/vers/police.woff) format("woff"); /* format explicite */ +src: url('chemin/vers/police.woff'); /* URL entre quotes */ +src: url(chemin/vers/policesvg.svg#exemple); /* fragment identifiant une police */ /* Valeurs de type */ -src: local(police); /* nom sans double quote */ +src: local(police); /* nom sans double quote */ src: local(une police); /* nom avec espace */ -src: local("police"); /* nom entre double quotes */ +src: local("police"); /* nom entre double quotes */ /* Liste avec plusieurs éléments */ -src: local(police), url(chemin/vers/police.svg) format("svg"), - url(chemin/vers/police.woff) format("woff"), - url(chemin/vers/police.otf) format("opentype"); +src: + local(police), + url(chemin/vers/police.svg) format("svg"), + url(chemin/vers/police.woff) format("woff"), + url(chemin/vers/police.otf) format("opentype"); ``` ### Valeurs @@ -51,8 +53,10 @@ src: local(police), url(chemin/vers/police.svg) format("svg"), ```css @font-face { font-family: policeexemple; - src: local(Police Exemple), url('policeexemple.woff') format("woff"), - url('policeexemple.otf') format("opentype"); + src: + local(Police Exemple), + url("policeexemple.woff") format("woff"), + url("policeexemple.otf") format("opentype"); } ``` diff --git a/files/fr/web/css/@font-face/unicode-range/index.md b/files/fr/web/css/@font-face/unicode-range/index.md index 86f4a02ee0392b..2f28071223f83a 100644 --- a/files/fr/web/css/@font-face/unicode-range/index.md +++ b/files/fr/web/css/@font-face/unicode-range/index.md @@ -12,11 +12,11 @@ Le descripteur **`unicode-range`**, associé à la règle @ [`@font-face`](/fr/d ```css /* Valeurs */ -unicode-range: U+26; /* un seul point de code */ +unicode-range: U+26; /* un seul point de code */ unicode-range: U+0-7F; -unicode-range: U+0025-00FF; /* un intervalle spécifique */ -unicode-range: U+4??; /* un intervalle de substitution */ -unicode-range: U+0025-00FF, U+4??; /* plusieurs valeurs */ +unicode-range: U+0025-00FF; /* un intervalle spécifique */ +unicode-range: U+4??; /* un intervalle de substitution */ +unicode-range: U+0025-00FF, U+4??; /* plusieurs valeurs */ ``` ### Valeurs @@ -63,8 +63,8 @@ Dans la feuille de style CSS, on définit une règle [`@font-face`](/fr/docs/Web ```css @font-face { - font-family: 'Ampersand'; - src: local('Times New Roman'); + font-family: "Ampersand"; + src: local("Times New Roman"); unicode-range: U+26; } diff --git a/files/fr/web/css/@font-feature-values/index.md b/files/fr/web/css/@font-feature-values/index.md index 3c8ce0e13c40e9..38e1df79d36285 100644 --- a/files/fr/web/css/@font-feature-values/index.md +++ b/files/fr/web/css/@font-feature-values/index.md @@ -10,7 +10,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) **`@font-feature-values`** permet aux au ```css @font-feature-values Font One { -/* On active la caractéristique nice-style + /* On active la caractéristique nice-style sur Font One */ @styleset { nice-style: 12; @@ -18,7 +18,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) **`@font-feature-values`** permet aux au } @font-feature-values Font Two { -/* On active la caractéristique nice-style + /* On active la caractéristique nice-style sur Font Two */ @styleset { nice-style: 4; @@ -49,7 +49,7 @@ La règle @ `@font-feature-values` peut être utilisée au plus haut niveau d'un - `@styleset` - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : `ident1: 2 4 12 1` correspondra aux valeurs OpenType `ss02`, `ss04`, `ss12`, `ss01`. Les valeurs supérieures à `99` sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées. - `@character-variant` - - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : `ident1: 2` correspond à `cv02=1` et `ident2: 2 4` correspond à `cv02)4`, en revanche `ident2: 2 4 5` est invalide. + - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : `ident1: 2` correspond à `cv02=1` et `ident2: 2 4` correspond à `cv02)4`, en revanche `ident2: 2 4 5` est invalide. ### Syntaxe formelle diff --git a/files/fr/web/css/@import/index.md b/files/fr/web/css/@import/index.md index 74ff0e576e0e13..a4dc0d0d36f4bb 100644 --- a/files/fr/web/css/@import/index.md +++ b/files/fr/web/css/@import/index.md @@ -11,10 +11,10 @@ La [règle @](/fr/docs/Web/CSS/Règles_@) **`@import`** est utilisée afin d'imp ```css @import url("fineprint.css") print; @import url("bluish.css") speech; -@import 'custom.css'; +@import "custom.css"; @import url("chrome://communicator/skin/"); @import "common.css" screen; -@import url('landscape.css') screen and (orientation:landscape); +@import url("landscape.css") screen and (orientation: landscape); ``` Afin que les agents utilisateurs évitent de récupérer des ressources pour des types de média qui ne sont pas pris en charge, les auteurs peuvent définir des règles `@import` spécifiques à chaque média. Ces imports conditionnels comportent une liste de [requête média](/fr/docs/Web/CSS/Media_queries) séparées par des virgules, situées après l'URL. Si aucune requête média n'est indiquée, l'import est inconditionnel. Cela aura le même effet que d'utiliser la requête média `all`. diff --git a/files/fr/web/css/@keyframes/index.md b/files/fr/web/css/@keyframes/index.md index 66b4c2db99c37a..1635119d61006b 100644 --- a/files/fr/web/css/@keyframes/index.md +++ b/files/fr/web/css/@keyframes/index.md @@ -46,10 +46,21 @@ Si des propriétés ne sont pas définies à chaque étape, elles sont interpol ```css @keyframes identifier { - 0% { top: 0; left: 0; } - 30% { top: 50px; } - 68%, 72% { left: 50px; } - 100% { top: 100px; left: 100%; } + 0% { + top: 0; + left: 0; + } + 30% { + top: 50px; + } + 68%, + 72% { + left: 50px; + } + 100% { + top: 100px; + left: 100%; + } } ``` @@ -63,16 +74,26 @@ Les déclarations qui utilisent `!important` dans une description d'étape sont ```css @keyframes important1 { - from { margin-top: 50px; } - 50% { margin-top: 150px !important; } /* ignorée */ - to { margin-top: 100px; } + from { + margin-top: 50px; + } + 50% { + margin-top: 150px !important; + } /* ignorée */ + to { + margin-top: 100px; + } } @keyframes important2 { - from { margin-top: 50px; - margin-bottom: 100px; } - to { margin-top: 150px !important; /* ignorée */ - margin-bottom: 50px; } + from { + margin-top: 50px; + margin-bottom: 100px; + } + to { + margin-top: 150px !important; /* ignorée */ + margin-bottom: 50px; + } } ``` @@ -125,11 +146,9 @@ p { ```html

- Le Chat grimaça en apercevant Alice. Elle trouva qu’il - avait l’air bon enfant, et cependant il avait de - très longues griffes et une grande rangée de dents ; - aussi comprit-elle qu’il fallait le traiter avec - respect. + Le Chat grimaça en apercevant Alice. Elle trouva qu’il avait l’air bon enfant, + et cependant il avait de très longues griffes et une grande rangée de dents ; + aussi comprit-elle qu’il fallait le traiter avec respect.

``` diff --git a/files/fr/web/css/@layer/index.md b/files/fr/web/css/@layer/index.md index 7e37f2c90948bf..52747149cb4ffe 100644 --- a/files/fr/web/css/@layer/index.md +++ b/files/fr/web/css/@layer/index.md @@ -35,11 +35,11 @@ La première façon consiste à créer une couche de cascade nommée et qui cont ```css @layer utilities { .padding-sm { - padding: .5rem; + padding: 0.5rem; } .padding-lg { - padding: .8rem; + padding: 0.8rem; } } ``` @@ -79,7 +79,7 @@ Une autre façon pour créer une couche de cascade consiste à utiliser [`@impor > **Attention :** La règle @ `@import` doit précéder tous les autres types de règles, à l'exception des règles `@charset`. ```css -@import 'theme.css' layer(utilities); +@import "theme.css" layer(utilities); ``` ### Couches imbriquées @@ -89,7 +89,6 @@ Les couches peuvent être imbriquées, on peut par exemple avoir : ```css @layer framework { @layer layout { - } } ``` @@ -159,9 +158,10 @@ Dans l'exemple qui suit, on crée deux couches sans leur affecter de règle puis ```html
Je m'affiche avec color: rebeccapurple car la couche - special arrive après base dans les déclarations. - Ma bordure verte, la taille du texte et le remplissage viennent de la - couche base.
+ special arrive après base dans les déclarations. Ma + bordure verte, la taille du texte et le remplissage viennent de la couche + base. + ``` #### CSS @@ -180,7 +180,7 @@ Dans l'exemple qui suit, on crée deux couches sans leur affecter de règle puis color: green; border: 5px solid green; font-size: 1.3em; - padding: .5em; + padding: 0.5em; } } ``` diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md index 3bfa131c5aa609..884aa85b984849 100644 --- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md +++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md @@ -12,11 +12,11 @@ La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries# > > `-moz-device-pixel-ratio` peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et `-webkit-device-pixel-ratio` peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge `dppx`. Par exemple : > -> ```css +> ```css-nolint > @media (-webkit-min-device-pixel-ratio: 2), /* Navigateurs basés sur Webkit */ -> (min--moz-device-pixel-ratio: 2), /* Anciens Firefox (avant Firefox 16) */ -> (min-resolution: 2dppx), /* La méthode standard */ -> (min-resolution: 192dpi) /* Utilisée si dppx n'est pas gérée */ +> (min--moz-device-pixel-ratio: 2), /* Anciens Firefox (avant Firefox 16) */ +> (min-resolution: 2dppx), /* La méthode standard */ +> (min-resolution: 192dpi) /* Utilisée si dppx n'est pas gérée */ > ``` > > Voir [cet article du CSSWG](https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) pour les bonnes pratiques quant à la compatibilité de `resolution` et `dppx`. diff --git a/files/fr/web/css/@media/-webkit-transition/index.md b/files/fr/web/css/@media/-webkit-transition/index.md index c86b1027b913f6..9156ecf362db1d 100644 --- a/files/fr/web/css/@media/-webkit-transition/index.md +++ b/files/fr/web/css/@media/-webkit-transition/index.md @@ -15,7 +15,7 @@ translation_of: Web/CSS/@media/-webkit-transition S'il vous faut déterminer si les transitions CSS sont prises en charges, évitez d'utiliser `-webkit-transition`. En lieu et place, on utilisera la règle @ {{cssxref("@supports")}} : ```css -@supports(transition: initial) { +@supports (transition: initial) { /* Les règles CSS à utiliser si */ /* les transitions sont prises en */ /* charge. */ diff --git a/files/fr/web/css/@media/any-pointer/index.md b/files/fr/web/css/@media/any-pointer/index.md index 5f9e800800f49c..09473f4ca55163 100644 --- a/files/fr/web/css/@media/any-pointer/index.md +++ b/files/fr/web/css/@media/any-pointer/index.md @@ -30,8 +30,7 @@ Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui d ### HTML ```html - - + ``` ### CSS diff --git a/files/fr/web/css/@media/aspect-ratio/index.md b/files/fr/web/css/@media/aspect-ratio/index.md index a0319703b5f965..27fffda979f8b6 100644 --- a/files/fr/web/css/@media/aspect-ratio/index.md +++ b/files/fr/web/css/@media/aspect-ratio/index.md @@ -28,7 +28,14 @@ Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'appliqu Pour Firefox, la feuille de style interne ressemble à : ```css -img, input[type="image"], video, embed, iframe, marquee, object, table { +img, +input[type="image"], +video, +embed, +iframe, +marquee, +object, +table { aspect-ratio: attr(width) / attr(height); } ``` diff --git a/files/fr/web/css/@media/color-index/index.md b/files/fr/web/css/@media/color-index/index.md index d6fdce6e392270..fe110ad4f005f0 100644 --- a/files/fr/web/css/@media/color-index/index.md +++ b/files/fr/web/css/@media/color-index/index.md @@ -52,7 +52,10 @@ Ce fragment HTML permet d'appliquer une feuille de style spécifique pour les ap ```html - + ``` ## Spécifications diff --git a/files/fr/web/css/@media/color/index.md b/files/fr/web/css/@media/color/index.md index 3758add80b7534..e90aaa28285f23 100644 --- a/files/fr/web/css/@media/color/index.md +++ b/files/fr/web/css/@media/color/index.md @@ -20,9 +20,8 @@ La caractéristique `color` est définie avec un entier (type CSS {{cssxref("< ```html

- Ce texte sera noir pour les appareils qui ne prennent en charge - aucune couleur, rouge pour ceux qui prennent peu de couleurs en - charge et vert sinon. + Ce texte sera noir pour les appareils qui ne prennent en charge aucune + couleur, rouge pour ceux qui prennent peu de couleurs en charge et vert sinon.

``` diff --git a/files/fr/web/css/@media/device-height/index.md b/files/fr/web/css/@media/device-height/index.md index d713f747ec0f5b..459e894fff5c00 100644 --- a/files/fr/web/css/@media/device-height/index.md +++ b/files/fr/web/css/@media/device-height/index.md @@ -17,7 +17,10 @@ La caractéristique `device-height` est définie comme une longueur (type {{cssx Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels. ```html - + ``` ## Spécifications diff --git a/files/fr/web/css/@media/device-width/index.md b/files/fr/web/css/@media/device-width/index.md index aeebc726e07aa2..07bef870be9222 100644 --- a/files/fr/web/css/@media/device-width/index.md +++ b/files/fr/web/css/@media/device-width/index.md @@ -17,7 +17,10 @@ translation_of: Web/CSS/@media/device-width Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels. ```html - + ``` ## Spécifications diff --git a/files/fr/web/css/@media/grid/index.md b/files/fr/web/css/@media/grid/index.md index ff7dfde87f7c5a..12a120125e247f 100644 --- a/files/fr/web/css/@media/grid/index.md +++ b/files/fr/web/css/@media/grid/index.md @@ -19,7 +19,9 @@ La caractéristique `grid` est une valeur booléenne (`0` ou `1`) (type {{cssxre ### HTML ```html -

Impossible de savoir si l'affichage fonctionne sur une grille. :-(

+

+ Impossible de savoir si l'affichage fonctionne sur une grille. :-( +

L'appareil dispose d'un affichage matriciel.

L'appareil utilise une grille pour l'affichage !

``` diff --git a/files/fr/web/css/@media/height/index.md b/files/fr/web/css/@media/height/index.md index 67cbcb732bdc26..a3e6bbb79a962f 100644 --- a/files/fr/web/css/@media/height/index.md +++ b/files/fr/web/css/@media/height/index.md @@ -18,8 +18,7 @@ La caractéristique `height` est définie comme une longueur (type {{cssxref("&l ```html
- Surveillez cet élément lors du - redimensionnement de la zone d'affichage. + Surveillez cet élément lors du redimensionnement de la zone d'affichage.
``` diff --git a/files/fr/web/css/@media/index.md b/files/fr/web/css/@media/index.md index 7e089dc56d29e8..db184fa44006dd 100644 --- a/files/fr/web/css/@media/index.md +++ b/files/fr/web/css/@media/index.md @@ -121,9 +121,11 @@ Il est aussi possible de combiner plusieurs requêtes média en une seule règle - `and` - : Cet opérateur permet de combiner plusieurs tests de caractéristiques afin que le résultat du test vaille `true` si chacun des tests individuels vaut `true`. Il permet également de joindre des tests de caractéristiques média et des tests de type de média. - `not` + - : Cet opérateur donne la négation d'une requête média, renvoyant `true` si la requête devait renvoyer `false`. Si cet opérateur est présent dans une liste de requêtes séparées par des virgules, la négation portera uniquement sur la requête sur laquelle l'opérateur est appliqué. Si l'opérateur `not` est utilisé, il _est nécessaire_ d'indiquer un type de média. > **Note :** Dans la spécification de niveau 3, le mot-clé `not` permet uniquement de prendre la négation d'une requête média entière (et pas d'une caractéristique seule). + - `only` - : Applique la mise en forme uniquement si toute la requête correspond. Ce mot-clé est utile pour empêcher les anciens navigateurs d'appliquer les styles en question. Sans utiliser `only`, les anciens navigateurs interpréteraient la requête `screen and (max-width: 500px)` comme `screen`, en ignorant le reste et en appliquant donc le style à tous les écrans. Si l'opérateur `only` est utilisé, il _est nécessaire_ d'indiquer un type de média. - `,` (virgule) @@ -151,20 +153,25 @@ Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyée ```css @media print { - body { font-size: 10pt } + body { + font-size: 10pt; + } } @media screen { - body { font-size: 13px } + body { + font-size: 13px; + } } @media screen, print { - body { line-height: 1.2 } + body { + line-height: 1.2; + } } -@media only screen - and (min-width: 320px) - and (max-width: 480px) - and (-webkit-min-device-pixel-ratio: 2) { - body { line-height: 1.4 } +@media only screen and (min-width: 320px) and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + body { + line-height: 1.4; + } } ``` @@ -172,11 +179,15 @@ Avec la mise à jour de la spécification pour les requêtes média, une nouvell ```css @media (height > 600px) { - body { line-height: 1.4; } + body { + line-height: 1.4; + } } @media (400px <= width <= 700px) { - body { line-height: 1.4; } + body { + line-height: 1.4; + } } ``` diff --git a/files/fr/web/css/@media/inverted-colors/index.md b/files/fr/web/css/@media/inverted-colors/index.md index 3a5e74f3f4483c..293f410810958f 100644 --- a/files/fr/web/css/@media/inverted-colors/index.md +++ b/files/fr/web/css/@media/inverted-colors/index.md @@ -23,14 +23,12 @@ Cette caractéristique est définie avec un des mots-clés parmi ceux qui suiven ```html

- Si vous utilisez les couleurs inversées, ce texte devrait - être bleu sur blanc (l'inverse de jaune sur noir). Sinon, - il devrait être rouge sur gris clair. + Si vous utilisez les couleurs inversées, ce texte devrait être bleu sur blanc + (l'inverse de jaune sur noir). Sinon, il devrait être rouge sur gris clair.

- Si le texte est gris, cela indique que votre navigateur - ne prend pas en charge la caractéristique média - `inverted-colors`. + Si le texte est gris, cela indique que votre navigateur ne prend pas en charge + la caractéristique média `inverted-colors`.

``` diff --git a/files/fr/web/css/@media/monochrome/index.md b/files/fr/web/css/@media/monochrome/index.md index 669f291924e513..8863e7d08c0be2 100644 --- a/files/fr/web/css/@media/monochrome/index.md +++ b/files/fr/web/css/@media/monochrome/index.md @@ -17,13 +17,9 @@ La caractéristique `monochrome` est un entier (type {{cssxref("<integer>" ### HTML ```html -

- Votre appareil prend en charge les - pixels monochrome ! -

+

Votre appareil prend en charge les pixels monochrome !

- Votre appareil ne prend pas en charge - les pixels monochromes. + Votre appareil ne prend pas en charge les pixels monochromes.

``` diff --git a/files/fr/web/css/@media/overflow-block/index.md b/files/fr/web/css/@media/overflow-block/index.md index eedb489c5817a4..a044a7e29c7e3b 100644 --- a/files/fr/web/css/@media/overflow-block/index.md +++ b/files/fr/web/css/@media/overflow-block/index.md @@ -26,7 +26,16 @@ La caractéristique `overflow-block` est définie avec un mot-clé de la liste s ### HTML ```html -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis + eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, + tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet + rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis + dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. + Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt + sed eget ex. +

``` ### CSS diff --git a/files/fr/web/css/@media/overflow-inline/index.md b/files/fr/web/css/@media/overflow-inline/index.md index 23e183579f78f7..2af500d89c8927 100644 --- a/files/fr/web/css/@media/overflow-inline/index.md +++ b/files/fr/web/css/@media/overflow-inline/index.md @@ -23,16 +23,14 @@ La caractéristique `overflow-inline` est définit avec un mot-clé parmi ceux d ```html

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. - Vestibulum ante ipsum primis in faucibus orci luctus et - ultrices posuere cubilia Curae; Nunc velit erat, tempus id - rutrum sed, dapibus ut urna. Integer vehicula nibh a justo - imperdiet rutrum. Nam faucibus pretium orci imperdiet - sollicitudin. Nunc id facilisis dui. Proin elementum et - massa et feugiat. Integer rutrum ullamcorper eleifend. - Proin sit amet tincidunt risus. Sed nec augue congue eros - accumsan tincidunt sed eget ex. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis + eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, + tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet + rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis + dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. + Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt + sed eget ex.

``` diff --git a/files/fr/web/css/@media/pointer/index.md b/files/fr/web/css/@media/pointer/index.md index e7a1a9328846db..d2c40c79129483 100644 --- a/files/fr/web/css/@media/pointer/index.md +++ b/files/fr/web/css/@media/pointer/index.md @@ -28,8 +28,7 @@ Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui d ### HTML ```html - - + ``` ### CSS diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.md b/files/fr/web/css/@media/prefers-color-scheme/index.md index 83fa908edac169..1f7ab8a32c9903 100644 --- a/files/fr/web/css/@media/prefers-color-scheme/index.md +++ b/files/fr/web/css/@media/prefers-color-scheme/index.md @@ -23,20 +23,39 @@ La caractéristique média **`prefers-color-scheme`** permet de détecter les pr ### CSS ```css -.day { background: #eee; color: black; } -.night { background: #333; color: white; } +.day { + background: #eee; + color: black; +} +.night { + background: #333; + color: white; +} @media (prefers-color-scheme: dark) { - .day.dark-scheme { background: #333; color: white; } - .night.dark-scheme { background: black; color: #ddd; } + .day.dark-scheme { + background: #333; + color: white; + } + .night.dark-scheme { + background: black; + color: #ddd; + } } @media (prefers-color-scheme: light) { - .day.light-scheme { background: white; color: #555; } - .night.light-scheme { background: #eee; color: black; } + .day.light-scheme { + background: white; + color: #555; + } + .night.light-scheme { + background: #eee; + color: black; + } } -.day, .night { +.day, +.night { display: inline-block; padding: 1em; width: 7em; @@ -49,12 +68,21 @@ La caractéristique média **`prefers-color-scheme`** permet de détecter les pr ```html
Jour (initial)
-
Jour (modifié si utilisation d'un thème clair)
-
Jour (modifié si utilisation d'un thème sombre)

+
+ Jour (modifié si utilisation d'un thème clair) +
+
+ Jour (modifié si utilisation d'un thème sombre) +
+
Nuit (initial)
-
Nuit (modifié si utilisation d'un thème clair)
-
Nuit (modifié si utilisation d'un thème sombre)
+
+ Nuit (modifié si utilisation d'un thème clair) +
+
+ Nuit (modifié si utilisation d'un thème sombre) +
``` ### Résultat diff --git a/files/fr/web/css/@media/prefers-contrast/index.md b/files/fr/web/css/@media/prefers-contrast/index.md index 6ba846c5c646a9..9b0d399e7d1822 100644 --- a/files/fr/web/css/@media/prefers-contrast/index.md +++ b/files/fr/web/css/@media/prefers-contrast/index.md @@ -61,7 +61,7 @@ Par défaut, cet exemple présente un contraste trop faible pour la lisibilité. ## Voir aussi -- La caractéristique média spécifique à Microsoft [`-ms-high-contrast`](https://docs.microsoft.com/fr-fr/previous-versions/hh771830(v=vs.85)) +- La caractéristique média spécifique à Microsoft [`-ms-high-contrast`]() - La caractéristique média [`forced-colors`](/fr/docs/Web/CSS/@media/forced-colors) {{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}} diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.md b/files/fr/web/css/@media/prefers-reduced-motion/index.md index 59abd92c93d2b4..b5598d02abae7b 100644 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.md +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md @@ -47,7 +47,7 @@ Cet exemple possède une animation désagréable qui sera exécutée à moins d' @media (prefers-reduced-motion: reduce) { .animation { - animation: none; + animation: none; } } ``` @@ -56,7 +56,10 @@ Cet exemple possède une animation désagréable qui sera exécutée à moins d' .animation { background-color: rebeccapurple; color: #fff; - font: 1.2em Helvetica, arial, sans-serif; + font: + 1.2em Helvetica, + arial, + sans-serif; width: 200px; padding: 1em; border-radius: 1em; @@ -76,22 +79,22 @@ Cet exemple possède une animation désagréable qui sera exécutée à moins d' @keyframes vibrate { 0% { - transform: translate(0); + transform: translate(0); } 20% { - transform: translate(-2px, 2px); + transform: translate(-2px, 2px); } 40% { - transform: translate(-2px, -2px); + transform: translate(-2px, -2px); } 60% { - transform: translate(2px, 2px); + transform: translate(2px, 2px); } 80% { - transform: translate(2px, -2px); + transform: translate(2px, -2px); } 100% { - transform: translate(0); + transform: translate(0); } } ``` diff --git a/files/fr/web/css/@media/scripting/index.md b/files/fr/web/css/@media/scripting/index.md index 0a1d8886cd79bf..c2355318af117a 100644 --- a/files/fr/web/css/@media/scripting/index.md +++ b/files/fr/web/css/@media/scripting/index.md @@ -25,7 +25,9 @@ La caractéristique `scripting` est définie avec un mot-clé parmi les suivants ```html

Les outils de script ne sont pas disponibles. :-(

-

Les outils de script sont uniquement disponibles au chargement initial.

+

+ Les outils de script sont uniquement disponibles au chargement initial. +

Les outils de script sont activés ! :-)

``` @@ -38,7 +40,7 @@ p { @media (scripting: none) { .script-none { - color: red; + color: red; } } diff --git a/files/fr/web/css/@media/shape/index.md b/files/fr/web/css/@media/shape/index.md index 7bca1e4c2b8005..2989c0bb02bbcd 100644 --- a/files/fr/web/css/@media/shape/index.md +++ b/files/fr/web/css/@media/shape/index.md @@ -59,9 +59,12 @@ Ce fragment de code HTML permettra d'appliquer une feuille de style particulièr ```html - - - + + + ``` diff --git a/files/fr/web/css/@media/update/index.md b/files/fr/web/css/@media/update/index.md index ceecc2e35faccf..8081973310a031 100644 --- a/files/fr/web/css/@media/update/index.md +++ b/files/fr/web/css/@media/update/index.md @@ -25,8 +25,8 @@ La caractéristique `update` est définie avec un mot-clé parmi ceux de la list ```html

- Si ce texte est animé, cela signifie que vous utilisez - un appareil avec un affichage qui évolue rapidement. + Si ce texte est animé, cela signifie que vous utilisez un appareil avec un + affichage qui évolue rapidement.

``` diff --git a/files/fr/web/css/@media/width/index.md b/files/fr/web/css/@media/width/index.md index 43bcb02afdfecb..ac924fd2370626 100644 --- a/files/fr/web/css/@media/width/index.md +++ b/files/fr/web/css/@media/width/index.md @@ -14,13 +14,16 @@ translation_of: Web/CSS/@media/width ```css /* Largeur exacte */ -@media (width: 300px) {} +@media (width: 300px) { +} /* Un viewport avec une largeur minimale */ -@media (min-width: 50em) {} +@media (min-width: 50em) { +} /* Un viewport avec une largeur maximale */ -@media (max-width: 1000px) {} +@media (max-width: 1000px) { +} ``` ## Exemples @@ -28,7 +31,9 @@ translation_of: Web/CSS/@media/width ### HTML ```html -
Observez cet élément lorsque vous redimensionnez la largeur du viewport.
+
+ Observez cet élément lorsque vous redimensionnez la largeur du viewport. +
``` ### CSS diff --git a/files/fr/web/css/@namespace/index.md b/files/fr/web/css/@namespace/index.md index 93ceca60f05eae..e502a87541c919 100644 --- a/files/fr/web/css/@namespace/index.md +++ b/files/fr/web/css/@namespace/index.md @@ -15,13 +15,16 @@ translation_of: Web/CSS/@namespace /* Cela correspond à tous les éléments XHTML car XHTML est l'espace de nom par défaut, sans préfixe. */ -a {} +a { +} /* Cela correspond à tous les éléments SVG */ -svg|a {} +svg|a { +} /* Cela correspond aux éléments XHTML et SVG */ -*|a {} +*|a { +} ``` Les règles `@namespace` doivent suivre les règles @ {{cssxref("@charset")}} et {{cssxref("@import")}} et précéder les autres règles @ ainsi que les déclarations de style contenus dans la feuille de style. diff --git a/files/fr/web/css/@property/index.md b/files/fr/web/css/@property/index.md index adf3dcc18737c8..4ffce16a979078 100644 --- a/files/fr/web/css/@property/index.md +++ b/files/fr/web/css/@property/index.md @@ -14,7 +14,7 @@ La règle `@property` permet l'enregistrement d'une propriété personnalisée d ```css @property --property-name { - syntax: ''; + syntax: ""; inherits: false; initial-value: #c0ffee; } @@ -43,7 +43,7 @@ Utilisation de la règle [CSS](/fr/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/At-r ```css @property --my-color { - syntax: ''; + syntax: ""; inherits: false; initial-value: #c0ffee; } @@ -53,10 +53,10 @@ Utilisation de la règle [CSS](/fr/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/At-r ```js window.CSS.registerProperty({ - name: '--my-color', - syntax: '', + name: "--my-color", + syntax: "", inherits: false, - initialValue: '#c0ffee', + initialValue: "#c0ffee", }); ``` diff --git a/files/fr/web/css/@supports/index.md b/files/fr/web/css/@supports/index.md index 2a618400c74687..5fe8422769984f 100644 --- a/files/fr/web/css/@supports/index.md +++ b/files/fr/web/css/@supports/index.md @@ -37,7 +37,8 @@ Une condition de prise en charge se compose d'une ou plusieurs déclarations com La plus simple expression est une déclaration CSS, c'est-à-dire un nom de propriété CSS suivi par deux points (:) puis une valeur. Ainsi, l'expression suivante : ```css -@supports ( transform-origin: 5% 5% ) { } +@supports (transform-origin: 5% 5%) { +} ``` renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur `5% 5%` est valide. @@ -53,7 +54,8 @@ La deuxième syntaxe permet d'utiliser une fonction. Cette syntaxe est prise en Dans l'exemple qui suit, on teste si le navigateur prend en charge la syntaxe du sélecteur passé en argument. Ici, le code renvoie VRAI si le navigateur prend en charge les [sélecteurs enfants](/fr/docs/Web/CSS/Sélecteurs_enfant) ```css -@supports selector(A > B) { } +@supports selector(A > B) { +} ``` ### L'opérateur `not` @@ -61,7 +63,8 @@ Dans l'exemple qui suit, on teste si le navigateur prend en charge la syntaxe du L'opérateur `not` peut être utilisée avant une expression afin de créer un expression dont le résultat logique est la négation du résultat de l'expression originale. Ainsi, l'expression suivante : ```css -@supports not ( transform-origin: 10em 10em 10em ) { } +@supports not (transform-origin: 10em 10em 10em) { +} ``` renvoie VRAI si la propriété {{cssxref("transform-origin")}} du navigateur ne considère pas la valeur `10em 10em 10em` comme valide. @@ -69,8 +72,10 @@ renvoie VRAI si la propriété {{cssxref("transform-origin")}} du navigateur ne Comme pour les autres opérateurs, on peut appliquer l'opérateur `not` à une déclaration, quelle que soit sa complexité. Les exemples qui suivent sont donc des expressions valides : ```css -@supports not ( not ( transform-origin: 2px ) ) { } -@supports (display: grid) and ( not (display: inline-grid) ) { } +@supports not (not (transform-origin: 2px)) { +} +@supports (display: grid) and (not (display: inline-grid)) { +} ``` > **Note :** Au niveau le plus haut, il n'est pas nécessaire d'encadrer l'opérateur `not` entre parenthèses. Si on souhaite le combiner avec d'autres opérateurs comme `and` ou `or`, il faudra utiliser des parenthèses. @@ -80,19 +85,22 @@ Comme pour les autres opérateurs, on peut appliquer l'opérateur `not` à une d L'opérateur `and` peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la conjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si et seulement si les deux expressions de départ sont vraies et FAUX sinon. Dans l'exemple suivant, l'expression complète ne sera vérifiée que si les deux expressions sont vérifiées : ```css -@supports (display: table-cell) and (display: list-item) { } +@supports (display: table-cell) and (display: list-item) { +} ``` On peut enchaîner plusieurs conjonctions sans avoir à ajouter de parenthèses (l'opérateur est commutatif). ```css -@supports (display: table-cell) and (display: list-item) and (display:run-in) { } +@supports (display: table-cell) and (display: list-item) and (display: run-in) { +} ``` sera équivalente à : ```css -@supports (display: table-cell) and ((display: list-item) and (display:run-in)) { } +@supports (display: table-cell) and ((display: list-item) and (display: run-in)) { +} ``` ### L'opérateur `or` @@ -100,21 +108,30 @@ sera équivalente à : L'opérateur `or` peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la disjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si au moins une des deux expressions est vraie. Dans l'exemple qui suit, l'expression complète est vérifiée si au moins une des deux (ce peuvent être les deux) expressions est vérifiée : ```css -@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) { } +@supports (transform-style: preserve) or (-moz-transform-style: preserve) { +} ``` On peut enchaîner plusieurs disjonctions sans qu'il soit nécessaire d'ajouter des parenthèses. ```css -@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) or - ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve ) { } +@supports (transform-style: preserve) or (-moz-transform-style: preserve) or + (-o-transform-style: preserve) or (-webkit-transform-style: preserve) { +} ``` sera ainsi équivalente à : ```css -@supports ( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or - (( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d ))) { } +@supports (transform-style: preserve-3d) or + ( + (-moz-transform-style: preserve-3d) or + ( + (-o-transform-style: preserve-3d) or + (-webkit-transform-style: preserve-3d) + ) + ) { +} ``` > **Note :** Lorsqu'on utilise à la fois l'opérateur `and` et l'opérateur `or`, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée. diff --git a/files/fr/web/css/_colon_-moz-broken/index.md b/files/fr/web/css/_colon_-moz-broken/index.md index 9b6a30e7288b09..0448f9b100ecb4 100644 --- a/files/fr/web/css/_colon_-moz-broken/index.md +++ b/files/fr/web/css/_colon_-moz-broken/index.md @@ -13,7 +13,7 @@ Ce sélecteur est principalement destiné à être utilisé par les développeur ## Syntaxe ```css -:-moz-broken +:-moz-broken {} ``` ## Exemples @@ -21,7 +21,7 @@ Ce sélecteur est principalement destiné à être utilisé par les développeur ### HTML ```html -Cette image ne fonctionne pas. :-( +Cette image ne fonctionne pas. :-( ``` ### CSS diff --git a/files/fr/web/css/_colon_-moz-loading/index.md b/files/fr/web/css/_colon_-moz-loading/index.md index 838ed1e899b7c7..fe8faf5562f999 100644 --- a/files/fr/web/css/_colon_-moz-loading/index.md +++ b/files/fr/web/css/_colon_-moz-loading/index.md @@ -13,7 +13,7 @@ Cette pseudo-classe est principalement destinée aux développeurs de thèmes. ## Syntaxe ```css -:-moz-loading +:-moz-loading {} ``` ## Exemples diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.md b/files/fr/web/css/_colon_-moz-only-whitespace/index.md index 73d2388582dace..3392a7f80a43dc 100644 --- a/files/fr/web/css/_colon_-moz-only-whitespace/index.md +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.md @@ -19,7 +19,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:-moz-only-whitespace`** ### HTML ```html -
+
``` ### CSS diff --git a/files/fr/web/css/_colon_-moz-submit-invalid/index.md b/files/fr/web/css/_colon_-moz-submit-invalid/index.md index dc399e87e9ef0b..912cae0dcdbb0a 100644 --- a/files/fr/web/css/_colon_-moz-submit-invalid/index.md +++ b/files/fr/web/css/_colon_-moz-submit-invalid/index.md @@ -13,7 +13,7 @@ Par défaut, aucun style n'est appliqué. Vous pouvez utiliser cette pseudo-clas ## Syntaxe ```css -:-moz-submit-invalid +:-moz-submit-invalid {} ``` ## Spécifications diff --git a/files/fr/web/css/_colon_-moz-suppressed/index.md b/files/fr/web/css/_colon_-moz-suppressed/index.md index 180fc20bec4782..8d0ae315d2aea3 100644 --- a/files/fr/web/css/_colon_-moz-suppressed/index.md +++ b/files/fr/web/css/_colon_-moz-suppressed/index.md @@ -13,7 +13,7 @@ Ce sélecteur est principalement destiné aux développeurs de thèmes. ## Syntaxe ```css -:-moz-suppressed +:-moz-suppressed {} ``` ## Exemple diff --git a/files/fr/web/css/_colon_-moz-user-disabled/index.md b/files/fr/web/css/_colon_-moz-user-disabled/index.md index b9e4d8eba17c76..1b5780c2e14520 100644 --- a/files/fr/web/css/_colon_-moz-user-disabled/index.md +++ b/files/fr/web/css/_colon_-moz-user-disabled/index.md @@ -13,7 +13,7 @@ Ce sélecteur est destiné principalement à une utilisation par les développeu ## Syntaxe ```css -:-moz-user-disabled +:-moz-user-disabled {} ``` ## Exemples diff --git a/files/fr/web/css/_colon_active/index.md b/files/fr/web/css/_colon_active/index.md index 0f463184d229ce..3671f0a610539a 100644 --- a/files/fr/web/css/_colon_active/index.md +++ b/files/fr/web/css/_colon_active/index.md @@ -33,21 +33,32 @@ La mise en forme associée peut être surchargée par les autres pseudo-classes #### CSS ```css -a:link { color: blue; } /* Liens non visités */ -a:visited { color: purple; } /* Liens visités */ -a:hover { background: yellow; } /* Liens survolés */ -a:active { color: red; } /* Liens actifs */ +a:link { + color: blue; +} /* Liens non visités */ +a:visited { + color: purple; +} /* Liens visités */ +a:hover { + background: yellow; +} /* Liens survolés */ +a:active { + color: red; +} /* Liens actifs */ -p:active { background: #eee; } /* Paragraphes actifs */ +p:active { + background: #eee; +} /* Paragraphes actifs */ ``` #### HTML ```html -

Ce paragraphe contient un lien : +

+ Ce paragraphe contient un lien : Ce lien devient rouge quand vous cliquez dessus. - Le paragraphe sera sur un fond gris quand vous cliquerez dessus - ou sur le lien. + Le paragraphe sera sur un fond gris quand vous cliquerez dessus ou sur le + lien.

``` @@ -74,7 +85,9 @@ form button { ```html
- +
``` diff --git a/files/fr/web/css/_colon_any-link/index.md b/files/fr/web/css/_colon_any-link/index.md index 30e605051d19bd..3e80a7258a5320 100644 --- a/files/fr/web/css/_colon_any-link/index.md +++ b/files/fr/web/css/_colon_any-link/index.md @@ -41,8 +41,8 @@ La pseudo-classe **`:any-link`** permet de représenter un élément qui agit co ### HTML ```html -Une page différente
-Une ancre
+Une page différente
+Une ancre
Un lien sans cible (n'est pas mis en forme) ``` diff --git a/files/fr/web/css/_colon_checked/index.md b/files/fr/web/css/_colon_checked/index.md index a4d372ec7c6202..327f3f516d8099 100644 --- a/files/fr/web/css/_colon_checked/index.md +++ b/files/fr/web/css/_colon_checked/index.md @@ -31,15 +31,15 @@ input:checked { ```html
- + - +
- +
diff --git a/files/fr/web/css/_colon_default/index.md b/files/fr/web/css/_colon_default/index.md index 15311397243f3a..60dd1678f9e0f7 100644 --- a/files/fr/web/css/_colon_default/index.md +++ b/files/fr/web/css/_colon_default/index.md @@ -51,16 +51,16 @@ input:default + label {
Saison préférée - + - + - + - +
``` diff --git a/files/fr/web/css/_colon_defined/index.md b/files/fr/web/css/_colon_defined/index.md index 1e0a2f5bb949df..5905c81c044b64 100644 --- a/files/fr/web/css/_colon_defined/index.md +++ b/files/fr/web/css/_colon_defined/index.md @@ -31,18 +31,19 @@ Les fragments de code qui suivent sont tirés [du dépôt `defined-pseudo-class` Pour cette démonstration on définit un élément personnalisé trivial : ```js -customElements.define('simple-custom', +customElements.define( + "simple-custom", class extends HTMLElement { constructor() { super(); - let divElem = document.createElement('div'); - divElem.textContent = this.getAttribute('text'); + let divElem = document.createElement("div"); + divElem.textContent = this.getAttribute("text"); - let shadowRoot = this.attachShadow({mode: 'open'}) - .appendChild(divElem); - } -}) + let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem); + } + }, +); ``` On insère ensuite une copie de cet élément dans le document, à côté d'un paragraphe classique `

` : diff --git a/files/fr/web/css/_colon_dir/index.md b/files/fr/web/css/_colon_dir/index.md index a72fcb58cb251c..83277d09fc1cbb 100644 --- a/files/fr/web/css/_colon_dir/index.md +++ b/files/fr/web/css/_colon_dir/index.md @@ -60,7 +60,8 @@ La pseudo-classe `:dir()` nécessite un paramètre qui indique la direction du t ```html

test1 -
test2 +
+ test2
עִבְרִית
diff --git a/files/fr/web/css/_colon_disabled/index.md b/files/fr/web/css/_colon_disabled/index.md index 01d89c805dd4ad..bdb047f7330e25 100644 --- a/files/fr/web/css/_colon_disabled/index.md +++ b/files/fr/web/css/_colon_disabled/index.md @@ -25,7 +25,9 @@ input[type="text"]:disabled { ### CSS ```css -input[type="text"]:disabled { background: #ccc; } +input[type="text"]:disabled { + background: #ccc; +} ``` ### HTML @@ -34,18 +36,24 @@ input[type="text"]:disabled { background: #ccc; }
Adresse de livraison - - - + + +
Adresse de facturation - - + +
- - - + + +
``` @@ -54,7 +62,9 @@ input[type="text"]:disabled { background: #ccc; } ```js function toggleBilling() { - var billingItems = document.querySelectorAll('#facturation input[type="text"]'); + var billingItems = document.querySelectorAll( + '#facturation input[type="text"]', + ); for (var i = 0; i < billingItems.length; i++) { billingItems[i].disabled = !billingItems[i].disabled; } diff --git a/files/fr/web/css/_colon_empty/index.md b/files/fr/web/css/_colon_empty/index.md index 2405a9f935f067..4ab3ae6cc51995 100644 --- a/files/fr/web/css/_colon_empty/index.md +++ b/files/fr/web/css/_colon_empty/index.md @@ -49,7 +49,7 @@ body {
Je serai rouge.
- +
``` diff --git a/files/fr/web/css/_colon_enabled/index.md b/files/fr/web/css/_colon_enabled/index.md index 3affa7b7a8822a..a8f5ab439543f6 100644 --- a/files/fr/web/css/_colon_enabled/index.md +++ b/files/fr/web/css/_colon_enabled/index.md @@ -11,7 +11,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:enabled`** permet de cib ```css /* Cible n'importe quel élément actif */ input:enabled { - color: #22AA22; + color: #22aa22; } ``` @@ -28,12 +28,16 @@ Dans cet exemple, les textes des éléments activés seront verts alors que ceux ```html
-
+
-
+
- +
``` @@ -41,13 +45,12 @@ Dans cet exemple, les textes des éléments activés seront verts alors que ceux ```css input:enabled { - color: #22AA22; + color: #22aa22; } input:disabled { - color: #D9D9D9; + color: #d9d9d9; } - ``` ### Résultat diff --git a/files/fr/web/css/_colon_first-child/index.md b/files/fr/web/css/_colon_first-child/index.md index fff2bc006b909c..9d37c8063dd71b 100644 --- a/files/fr/web/css/_colon_first-child/index.md +++ b/files/fr/web/css/_colon_first-child/index.md @@ -41,17 +41,21 @@ p:first-child { ```html
-

Ce paragraphe est mis en forme car c'est un élément - p ET que c'est le premier fils de l'élément div.

-

En revanche, ce paragraphe n'est pas mis en forme - car ce n'est pas le premier !

+

+ Ce paragraphe est mis en forme car c'est un élément p ET que c'est le + premier fils de l'élément div. +

+

+ En revanche, ce paragraphe n'est pas mis en forme car ce n'est pas le + premier ! +

-

Ce titre h2 n'est pas mis en forme car ce n'est pas - un paragraphe.

-

Et ce paragraphe n'est pas mis en forme car ce n'est pas - le premier fils !

+

Ce titre h2 n'est pas mis en forme car ce n'est pas un paragraphe.

+

+ Et ce paragraphe n'est pas mis en forme car ce n'est pas le premier fils ! +

``` @@ -64,12 +68,12 @@ p:first-child { #### CSS ```css -li{ - color:blue; +li { + color: blue; } -li:first-child{ - color:green; +li:first-child { + color: green; } ``` diff --git a/files/fr/web/css/_colon_first/index.md b/files/fr/web/css/_colon_first/index.md index f41aaf4c74a935..1bbe728a4b8653 100644 --- a/files/fr/web/css/_colon_first/index.md +++ b/files/fr/web/css/_colon_first/index.md @@ -55,7 +55,7 @@ p { ### JavaScript ```js -document.querySelector("button").addEventListener('click', () => { +document.querySelector("button").addEventListener("click", () => { window.print(); }); ``` diff --git a/files/fr/web/css/_colon_focus-visible/index.md b/files/fr/web/css/_colon_focus-visible/index.md index f12a80babf2fba..585baaaa05166f 100644 --- a/files/fr/web/css/_colon_focus-visible/index.md +++ b/files/fr/web/css/_colon_focus-visible/index.md @@ -15,7 +15,7 @@ On notera que Firefox prend en charge cette fonctionnalité via une ancienne pse ## Syntaxe ```css -:focus-visible +:focus-visible {} ``` ## Exemples @@ -27,18 +27,19 @@ Dans cet exemple, le sélecteur `:focus-visible` utilise le comportement de l'ag #### HTML ```html -
-
-
-
-
+
+
+
+
+
``` #### CSS ```css -input, button { +input, +button { margin: 10px; } diff --git a/files/fr/web/css/_colon_focus-within/index.md b/files/fr/web/css/_colon_focus-within/index.md index 18a1d25e3e7a6f..e3833cc1c0de46 100644 --- a/files/fr/web/css/_colon_focus-within/index.md +++ b/files/fr/web/css/_colon_focus-within/index.md @@ -46,17 +46,17 @@ input { ```html

- L'élément div ci-après aura un fond jaune - si l'un des deux champs de saisie a le focus. + L'élément div ci-après aura un fond jaune si l'un des deux champs de saisie a + le focus.

``` diff --git a/files/fr/web/css/_colon_focus/index.md b/files/fr/web/css/_colon_focus/index.md index 271b826e11d50e..aa04f758840d84 100644 --- a/files/fr/web/css/_colon_focus/index.md +++ b/files/fr/web/css/_colon_focus/index.md @@ -41,8 +41,8 @@ Cette pseudo-classe ne s'applique qu'aux éléments avec le focus, elle ne s'app ### HTML ```html - - + + ``` ### Résultat diff --git a/files/fr/web/css/_colon_fullscreen/index.md b/files/fr/web/css/_colon_fullscreen/index.md index 9699932fa631b1..15d27304ee959d 100644 --- a/files/fr/web/css/_colon_fullscreen/index.md +++ b/files/fr/web/css/_colon_fullscreen/index.md @@ -43,9 +43,11 @@ Lorsque le document est en mode plein écran, on utilise cette fois-ci la pseudo ```html

MDN Web Docs Demo: :fullscreen pseudo-class

-

This demo uses the :fullscreen pseudo-class to automatically +

+ This demo uses the :fullscreen pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, - entirely using CSS.

+ entirely using CSS. +

``` diff --git a/files/fr/web/css/_colon_future/index.md b/files/fr/web/css/_colon_future/index.md index 544098f820139e..c5580c45183a0b 100644 --- a/files/fr/web/css/_colon_future/index.md +++ b/files/fr/web/css/_colon_future/index.md @@ -34,7 +34,12 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ``` diff --git a/files/fr/web/css/_colon_has/index.md b/files/fr/web/css/_colon_has/index.md index 601f0dc796e590..3182fd83b947a2 100644 --- a/files/fr/web/css/_colon_has/index.md +++ b/files/fr/web/css/_colon_has/index.md @@ -20,7 +20,7 @@ Cette pseudo-classe `:has()` prend en paramètre une liste de sélecteurs. /* pas prise en charge par les navigateurs et */ /* n'est pas conçue pour fonctionner dans les */ /* feuilles de style */ -var test = document.querySelector('a:has(> img)'); +var test = document.querySelector("a:has(> img)"); ``` ## Syntaxe @@ -34,13 +34,13 @@ var test = document.querySelector('a:has(> img)'); Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} : ```css -a:has(> img) +a:has(> img) {} ``` Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} : ```css -h1:has(+ p) +h1:has(+ p) {} ``` ## Spécifications diff --git a/files/fr/web/css/_colon_host-context/index.md b/files/fr/web/css/_colon_host-context/index.md index 362836860a0123..078d867a500fa5 100644 --- a/files/fr/web/css/_colon_host-context/index.md +++ b/files/fr/web/css/_colon_host-context/index.md @@ -42,7 +42,7 @@ p { ## Syntaxe ```css -:host-context( ) +:host-context( ) {} ``` ## Exemples @@ -55,27 +55,29 @@ Dans cet exemple, on a un élément personnalisé, ``, dans lequel ```html

- Exemple pour les sélecteurs d'hôte + Exemple pour les sélecteurs + d'hôte

``` Dans le constructeur de l'élément, on crée des éléments `