+- 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.
-
- Ce paragraphe a un défilement inertiel. -
+Ce paragraphe a un défilement inertiel.
-
```
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
- Pas celui-ci. -
+Pas celui-ci.
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:- 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 ```htmlJour (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`](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: '
+
```
### 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
-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 {
```
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
-
-
-
-
-
+
+
+
+
+
``` #### 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
```
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
)
+:host-context( ) {}
```
## Exemples
@@ -55,27 +55,29 @@ Dans cet exemple, on a un élément personnalisé, ``, dans lequel
```html
-
```
Dans le constructeur de l'élément, on crée des éléments `
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; }
```
@@ -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 {
+ test2
עִבְרִית
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 ! +
-
```
@@ -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
-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 ! +
-
-
-
-
+
+
+
+
+
``` #### 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.
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.