diff options
Diffstat (limited to 'files/fr/web/css')
336 files changed, 821 insertions, 821 deletions
diff --git a/files/fr/web/css/-moz-context-properties/index.md b/files/fr/web/css/-moz-context-properties/index.md index 5bb568a022..88a9f4343d 100644 --- a/files/fr/web/css/-moz-context-properties/index.md +++ b/files/fr/web/css/-moz-context-properties/index.md @@ -67,7 +67,7 @@ Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{c fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> ``` -Ici, l'attribut `src` de l'image correspond à une URI de données qui contient une simple image SVG. L'élément `<rect>` est paramétré afin de récupérer les valeurs `fill` et `stroke` telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément `<img>` grâce aux mots-clés `context-fill`/`context-stroke`. On utilise aussi une couleur de secours pour le remplissage (`fill`) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera. +Ici, l'attribut `src` de l'image correspond à une URI de données qui contient une simple image SVG. L'élément `<rect>` est paramétré afin de récupérer les valeurs `fill` et `stroke` telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément `<img>` grâce aux mots-clés `context-fill`/`context-stroke`. On utilise aussi une couleur de secours pour le remplissage (`fill`) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera. > **Note :** vous pouvez consulter [un exemple complet sur notre dépôt Github](https://mdn.github.io/css-examples/moz-context-properties/). diff --git a/files/fr/web/css/-moz-user-focus/index.md b/files/fr/web/css/-moz-user-focus/index.md index 9c79636659..c631b3cc21 100644 --- a/files/fr/web/css/-moz-user-focus/index.md +++ b/files/fr/web/css/-moz-user-focus/index.md @@ -25,7 +25,7 @@ La propriété **`-moz-user-focus`** est utilisée pour indiquer si l'élément En utilisant la valeur `ignore`, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation. -> **Note :** Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément `textbox` en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du `textbox` et que l'élément reçoit le focus. On peut empêcher le `textbox` de prendre le focus clavier en passant son index de tabulation à `-1`, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements `mousedown`. +> **Note :** Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément `textbox` en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du `textbox` et que l'élément reçoit le focus. On peut empêcher le `textbox` de prendre le focus clavier en passant son index de tabulation à `-1`, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements `mousedown`. ## Syntaxe diff --git a/files/fr/web/css/-webkit-line-clamp/index.md b/files/fr/web/css/-webkit-line-clamp/index.md index 6b9a4a80fc..408d26d0b1 100644 --- a/files/fr/web/css/-webkit-line-clamp/index.md +++ b/files/fr/web/css/-webkit-line-clamp/index.md @@ -46,8 +46,8 @@ Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au mil ```html <p> - Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, 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 <code>-webkit-line-clamp</code> vaut <code>3</code>, 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. </p> ``` @@ -55,10 +55,10 @@ Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au mil ```css p { - width: 300px; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; + width: 300px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; overflow: hidden; } ``` @@ -81,5 +81,5 @@ p { ## Voir aussi -- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/) +- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/) - {{cssxref("line-clamp")}} 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 dd2d49dc17..e0cdd0cd7e 100644 --- a/files/fr/web/css/-webkit-mask-box-image/index.md +++ b/files/fr/web/css/-webkit-mask-box-image/index.md @@ -51,7 +51,7 @@ Où : - `stretch` - : L'image de masque est étirée pour être contenue exactement dans la boîte de bordure. - `round` - - : L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure. + - : L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure. ## Exemples 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 45941093f2..1dc612d4b3 100644 --- a/files/fr/web/css/-webkit-mask-position-x/index.md +++ b/files/fr/web/css/-webkit-mask-position-x/index.md @@ -42,7 +42,7 @@ La propriété **`-webkit-mask-position-x`** permet de définir la position hori ### Valeurs - `<length-percentage>` - - : Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (_padding_). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (`0%` indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et `100%` indique que le bord droit de l'image est aligné avec le bord droit de la boîte de remplissage). + - : Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (_padding_). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (`0%` indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et `100%` indique que le bord droit de l'image est aligné avec le bord droit de la boîte de remplissage). - **`left`** - : Un mot-clé équivalent à `0%`. - **`right`** 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 b2568be318..b481bb80bf 100644 --- a/files/fr/web/css/-webkit-mask-repeat-x/index.md +++ b/files/fr/web/css/-webkit-mask-repeat-x/index.md @@ -66,7 +66,7 @@ On peut définir un style de répétition (`<repeat-style>`) différent pour cha ```css .exempletrois { -webkit-mask-image: url('mask1.png'), url('mask2.png'); - -webkit-mask-repeat-x: repeat, space; + -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 717f2f1aaa..8e828aa3b6 100644 --- a/files/fr/web/css/-webkit-mask-repeat-y/index.md +++ b/files/fr/web/css/-webkit-mask-repeat-y/index.md @@ -66,7 +66,7 @@ On peut définir un style de répétition (`<repeat-style>`) différent pour cha ```css .exempletrois { -webkit-mask-image: url('mask1.png'), url('mask2.png'); - -webkit-mask-repeat-y: repeat, space; + -webkit-mask-repeat-y: repeat, space; } ``` diff --git a/files/fr/web/css/@charset/index.md b/files/fr/web/css/@charset/index.md index daa7e6ceb9..a6642239ad 100644 --- a/files/fr/web/css/@charset/index.md +++ b/files/fr/web/css/@charset/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/@charset --- {{CSSRef}} -La [règle @](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@charset`** définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des [instructions imbriquées](/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS) et ne peut donc pas être utilisée [à l'intérieur des groupes conditionnels](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). Si plusieurs règles `@charset` sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut `style` d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte. +La [règle @](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@charset`** définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des [instructions imbriquées](/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS) et ne peut donc pas être utilisée [à l'intérieur des groupes conditionnels](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). Si plusieurs règles `@charset` sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut `style` d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte. ```css @charset "utf-8"; @@ -34,7 +34,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 diff --git a/files/fr/web/css/@counter-style/fallback/index.md b/files/fr/web/css/@counter-style/fallback/index.md index 88bd654e07..76cc1a18b2 100644 --- a/files/fr/web/css/@counter-style/fallback/index.md +++ b/files/fr/web/css/@counter-style/fallback/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/@counter-style/fallback Le descripteur **`fallback`**, associé à la règle @ {{cssxref("@counter-style")}} est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur `decimal` qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont : - Lorsque le descripteur {{cssxref('range')}} est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle. -- Lorsque le descripteur {{cssxref('system')}} vaut `fixed` et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste. +- Lorsque le descripteur {{cssxref('system')}} vaut `fixed` et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste. ## Syntaxe diff --git a/files/fr/web/css/@counter-style/system/index.md b/files/fr/web/css/@counter-style/system/index.md index e1c85ee212..d1a55dc889 100644 --- a/files/fr/web/css/@counter-style/system/index.md +++ b/files/fr/web/css/@counter-style/system/index.md @@ -47,7 +47,7 @@ Ce descripteur peut prendre l'une de ces trois formes : - : Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres `a` à `z` sont définies comme symbole dans un style de compteur dont le système est `alphabetic`, les 26 premières représentations du compteur seront `a`, `b`, etc. jusqu'à `z` (jusqu'ici, le comportement est identique à celui obtenu grâce à `symbolic`) mais ensuite, le système poursuivra avec `aa`, `ab`, `ac`, etc. Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme `1`, le suivant comme `2` et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives. - `numeric` - - : Les symboles sont interprétés comme les chiffres d'un [système de notation positionnelle](https://fr.wikipedia.org/wiki/Notation_positionnelle). Ce système est très proche de celui qu'on peut obtenir avec `alphabetic` sauf que, pour ce dernier, le premier symbole fourni par `symbols` sera interprété comme `1`, le suivant comme `2` et ainsi de suite alors que pour `numeric`, le premier symbole est interprété comme 0, le suivant comme `1`, puis `2` etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec `symbols`. Le premier symbole qui est fourni sera interprété comme `0`. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de `0` à `9` comme symboles, on obtiendra le même résultat qu'avec le système décimal. + - : Les symboles sont interprétés comme les chiffres d'un [système de notation positionnelle](https://fr.wikipedia.org/wiki/Notation_positionnelle). Ce système est très proche de celui qu'on peut obtenir avec `alphabetic` sauf que, pour ce dernier, le premier symbole fourni par `symbols` sera interprété comme `1`, le suivant comme `2` et ainsi de suite alors que pour `numeric`, le premier symbole est interprété comme 0, le suivant comme `1`, puis `2` etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec `symbols`. Le premier symbole qui est fourni sera interprété comme `0`. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de `0` à `9` comme symboles, on obtiendra le même résultat qu'avec le système décimal. - `additive` - : Ce système peut être utilisé pour représenter [des systèmes de numérotations additives](<https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)>) telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent. Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé 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 afin que le système soit valide. On voit dans l'exemple ci-après que `range` est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec `decimal` (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme `upper-roman` ou `lower-roman` afin d'éviter de réinventer la roue. - `extends` @@ -79,11 +79,11 @@ Ce descripteur peut prendre l'une de ces trois formes : ```html <ul class="list"> - <li>Un</li> - <li>Deux</li> - <li>Trois</li> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> <li>Quatre</li> - <li>Cinq</li> + <li>Cinq</li> </ul> ``` diff --git a/files/fr/web/css/@document/index.md b/files/fr/web/css/@document/index.md index 9df7d20450..cd62f4a518 100644 --- a/files/fr/web/css/@document/index.md +++ b/files/fr/web/css/@document/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/@document --- {{CSSRef}}{{SeeCompatTable}} -La [règle @ CSS](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@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. +La [règle @ CSS](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@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/") { @@ -24,15 +24,15 @@ La [règle @ CSS](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@document`** restreint les Une règle `@document` peut définir une ou plusieurs fonctions de correspondance. Si l'une quelconque des règles s'applique à l'URL donnée, la règle prendra effet sur cette URL. Les fonctions disponibles sont : -- `url()`, qui établit une correspondance avec une URL exacte ; -- `url-prefix()`, qui établit une correspondance si l'URL du document commence par la valeur fournie ; -- `domain()`, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ; +- `url()`, qui établit une correspondance avec une URL exacte ; +- `url-prefix()`, qui établit une correspondance si l'URL du document commence par la valeur fournie ; +- `domain()`, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ; - `media-document()` qui caractérise le type de document : vidéo, image, plugin, tout ; -- `regexp()`, qui établit une correspondance avec si l'URL du document vérifie une [expression rationnelle](/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions). L'expression doit correspondre à l'URL entière. +- `regexp()`, qui établit une correspondance avec si l'URL du document vérifie une [expression rationnelle](/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions). L'expression doit correspondre à l'URL entière. -Les valeurs fournies aux fonctions `url()`, `url-prefix()`, `media-document()` et `domain()` peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction `regexp()` _doivent_ être délimitées par des apostrophes. +Les valeurs fournies aux fonctions `url()`, `url-prefix()`, `media-document()` et `domain()` peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction `regexp()` _doivent_ être délimitées par des apostrophes. -Les valeurs échappées fournies à la fonction `regexp()` doivent être en outre échappées pour le CSS. Par exemple, un `.` (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en `\.`), puis d'échapper cette chaîne en utilisant les règles CSS (en `\\.`). +Les valeurs échappées fournies à la fonction `regexp()` doivent être en outre échappées pour le CSS. Par exemple, un `.` (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en `\.`), puis d'échapper cette chaîne en utilisant les règles CSS (en `\\.`). > **Note :** Il existe une version préfixée de cette propriété pour Mozilla : `@-moz-document`. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. {{bug(1035091)}}). @@ -67,7 +67,7 @@ Les valeurs échappées fournies à la fonction `regexp()` doivent être en ou ## Spécifications -[Initialement](https://www.w3.org/TR/css3-conditional/) dans {{SpecName('CSS3 Conditional')}}, `@document` a [été repoussée](http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes) au niveau 4. +[Initialement](https://www.w3.org/TR/css3-conditional/) dans {{SpecName('CSS3 Conditional')}}, `@document` a [été repoussée](http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes) au niveau 4. ## Compatibilité des navigateurs @@ -75,4 +75,4 @@ Les valeurs échappées fournies à la fonction `regexp()` doivent être en ou ## Voir aussi -- [Per-site user style sheet rules](http://lists.w3.org/Archives/Public/www-style/2004Aug/0135) sur la liste de diffusion www-style. +- [Per-site user style sheet rules](http://lists.w3.org/Archives/Public/www-style/2004Aug/0135) sur la liste de diffusion www-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 d536c50a2a..0089e97edd 100644 --- a/files/fr/web/css/@font-face/font-display/index.md +++ b/files/fr/web/css/@font-face/font-display/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/@font-face/font-display --- {{CSSRef}} -La propriété **`font-display`** détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée. +La propriété **`font-display`** détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée. ## Le déroulement de l'affichage d'une police 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 b1c2e35474..493ba219fb 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 @@ -10,7 +10,7 @@ translation_of: Web/CSS/@font-face/font-variation-settings --- {{CSSRef}} -Le descripteur **`font-variation-settings`**, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType. +Le descripteur **`font-variation-settings`**, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType. ## Syntaxe diff --git a/files/fr/web/css/@font-face/index.md b/files/fr/web/css/@font-face/index.md index 7084f72a43..502d694766 100644 --- a/files/fr/web/css/@font-face/index.md +++ b/files/fr/web/css/@font-face/index.md @@ -59,7 +59,7 @@ La règle `@font-face` peut être utilisée au niveau global d'une feuille de st Les types utilisables sont : `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"` et `"svg"`. - {{cssxref("@font-face/unicode-range", "unicode-range")}} - - : L'intervalle des points de code Unicode pour lesquels la règle `@font-face` s'applique. + - : L'intervalle des points de code Unicode pour lesquels la règle `@font-face` s'applique. ### Syntaxe formelle diff --git a/files/fr/web/css/@font-feature-values/index.md b/files/fr/web/css/@font-feature-values/index.md index 6b1211f0f1..03b945a2b4 100644 --- a/files/fr/web/css/@font-feature-values/index.md +++ b/files/fr/web/css/@font-feature-values/index.md @@ -15,7 +15,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) **`@font-feature-values`** permet aux au @font-feature-values Font One { /* On active la caractéristique nice-style sur Font One */ - @styleset { + @styleset { nice-style: 12; } } @@ -52,7 +52,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/@keyframes/index.md b/files/fr/web/css/@keyframes/index.md index b803960cde..e7e7053bb9 100644 --- a/files/fr/web/css/@keyframes/index.md +++ b/files/fr/web/css/@keyframes/index.md @@ -66,16 +66,16 @@ 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; } + margin-bottom: 100px; } + to { margin-top: 150px !important; /* ignorée */ + margin-bottom: 50px; } } ``` 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 9ec09a1821..c49fc851ef 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 @@ -11,7 +11,7 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio --- {{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}} -La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia) **`-moz-device-pixel-ratio`**, associée à [`@media`](/fr/docs/Web/CSS/@media "The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."), est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS. +La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia) **`-moz-device-pixel-ratio`**, associée à [`@media`](/fr/docs/Web/CSS/@media "The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."), est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS. > **Attention :** Ne pas utiliser cette fonctionnalité ! La caractéristique [`resolution`](/fr/docs/Web/CSS/@media/resolution) et l'unité `dppx` permettent d'obtenir le même mécanisme. > @@ -26,7 +26,7 @@ La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries# > > 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`. -> **Note :** Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`. +> **Note :** Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`. ## Syntaxe diff --git a/files/fr/web/css/@media/-webkit-animation/index.md b/files/fr/web/css/@media/-webkit-animation/index.md index d14a4b5549..8bb11bc1f1 100644 --- a/files/fr/web/css/@media/-webkit-animation/index.md +++ b/files/fr/web/css/@media/-webkit-animation/index.md @@ -22,7 +22,7 @@ translation_of: Web/CSS/@media/-webkit-animation ## Spécifications -Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). +Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.md b/files/fr/web/css/@media/-webkit-transform-2d/index.md index 90a9cf0635..f4231a0652 100644 --- a/files/fr/web/css/@media/-webkit-transform-2d/index.md +++ b/files/fr/web/css/@media/-webkit-transform-2d/index.md @@ -16,7 +16,7 @@ translation_of: Web/CSS/@media/-webkit-transform-2d ## Spécifications -Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) . +Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) . ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@media/-webkit-transition/index.md b/files/fr/web/css/@media/-webkit-transition/index.md index bc50ddcdbb..b87fada85f 100644 --- a/files/fr/web/css/@media/-webkit-transition/index.md +++ b/files/fr/web/css/@media/-webkit-transition/index.md @@ -29,7 +29,7 @@ S'il vous faut déterminer si les transitions CSS sont prises en charges, évite ## Spécifications -Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). +Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@media/device-height/index.md b/files/fr/web/css/@media/device-height/index.md index 117e647809..af5d16e56d 100644 --- a/files/fr/web/css/@media/device-height/index.md +++ b/files/fr/web/css/@media/device-height/index.md @@ -14,7 +14,7 @@ translation_of: Web/CSS/@media/device-height ## Syntaxe -La caractéristique `device-height` est définie comme une longueur (type {{cssxref("<length>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-device-height`** et **`max-device-height`** afin d'utiliser des critères de minimum et maximum. +La caractéristique `device-height` est définie comme une longueur (type {{cssxref("<length>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-device-height`** et **`max-device-height`** afin d'utiliser des critères de minimum et maximum. ## Exemples diff --git a/files/fr/web/css/@media/monochrome/index.md b/files/fr/web/css/@media/monochrome/index.md index 5d28532ff3..470aa8a161 100644 --- a/files/fr/web/css/@media/monochrome/index.md +++ b/files/fr/web/css/@media/monochrome/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/@media/monochrome --- {{CSSRef}} -**`monochrome`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. +**`monochrome`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. ## Syntaxe diff --git a/files/fr/web/css/@media/prefers-contrast/index.md b/files/fr/web/css/@media/prefers-contrast/index.md index 33d90f2617..b10eb3db17 100644 --- a/files/fr/web/css/@media/prefers-contrast/index.md +++ b/files/fr/web/css/@media/prefers-contrast/index.md @@ -34,12 +34,12 @@ Par défaut, cet exemple présente un contraste trop faible pour la lisibilité. ```css .contrast { - color: grey; + color: grey; } @media (prefers-contrast: high) { .contrast { - color: black; + color: black; } } ``` 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 6bd87e7c10..49fbd4b330 100644 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.md +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md @@ -21,7 +21,7 @@ La [requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_f Dans Firefox, la valeur `reduce` est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau : - Pour GTK/Gnome, si `gtk-enable-animation` vaut `false`. Cela peut être configuré par le menu « Ajustements » de Gnome. -- Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows +- Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows - Pour macOS : Préférences système > Accessibilité > Affichage > Réduire les animations. - Dans iOS : Paramètres > ; Général > ; Accessibilité > ; Réduire les animations. - Dans Android 9+ : Paramètres > ; Accessibilité > ; Supprimer les animations. diff --git a/files/fr/web/css/@media/shape/index.md b/files/fr/web/css/@media/shape/index.md index edf2c2a7f9..b758e23e5d 100644 --- a/files/fr/web/css/@media/shape/index.md +++ b/files/fr/web/css/@media/shape/index.md @@ -38,19 +38,19 @@ La caractéristique `shape` peut prendre une valeur parmi deux valeurs définies ```css h1 { - text-align: left; + text-align: left; } @media (shape: rect) { - h1 { - text-align: left; - } + h1 { + text-align: left; + } } @media (shape: round) { - h1 { - text-align: center; - } + h1 { + text-align: center; + } } ``` @@ -64,9 +64,9 @@ Ce fragment de code HTML permettra d'appliquer une feuille de style particulièr ```html <head> - <link rel="stylesheet" href="default.css" /> - <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> - <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> + <link rel="stylesheet" href="default.css" /> + <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> + <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> </head> ``` diff --git a/files/fr/web/css/@page/index.md b/files/fr/web/css/@page/index.md index 563e341e7e..57fe1e07ab 100644 --- a/files/fr/web/css/@page/index.md +++ b/files/fr/web/css/@page/index.md @@ -68,7 +68,7 @@ Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}} | {{Spec2('CSS Logical Properties')}} | Ajout des sélecteurs de page `:recto` et `:verso`. | -| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}} | {{Spec2('CSS3 Paged Media')}} | Aucun changement depuis {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle `@page`. | +| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}} | {{Spec2('CSS3 Paged Media')}} | Aucun changement depuis {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle `@page`. | | {{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@property/index.md b/files/fr/web/css/@property/index.md index bc30e0b52f..1ff14ce9c6 100644 --- a/files/fr/web/css/@property/index.md +++ b/files/fr/web/css/@property/index.md @@ -37,9 +37,9 @@ Les descripteurs inconnus ne sont pas valides et sont ignorés, mais n'invaliden ## Exemples -Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} `--my-color` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : +Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} `--my-color` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : -Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : +Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : ```css @property --my-color { @@ -49,7 +49,7 @@ Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/A } ``` -Équivalent avec la fonction [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}} : +Équivalent avec la fonction [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}} : ```js window.CSS.registerProperty({ diff --git a/files/fr/web/css/@supports/index.md b/files/fr/web/css/@supports/index.md index f142fe1ba4..53cbf5d437 100644 --- a/files/fr/web/css/@supports/index.md +++ b/files/fr/web/css/@supports/index.md @@ -43,7 +43,7 @@ La plus simple expression est une déclaration CSS, c'est-à-dire un nom de prop @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. +renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur `5% 5%` est valide. Une déclaration CSS est toujours encadrée par des parenthèses. @@ -161,9 +161,9 @@ sera ainsi équivalente à : ```css @supports (--toto: green) { - body { - color: --nomVar; - } + body { + color: --nomVar; + } } ``` diff --git a/files/fr/web/css/_colon_-moz-broken/index.md b/files/fr/web/css/_colon_-moz-broken/index.md index 92b0e71726..1b5fe193b3 100644 --- a/files/fr/web/css/_colon_-moz-broken/index.md +++ b/files/fr/web/css/_colon_-moz-broken/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/:-moz-broken --- {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}} -La [p](/en-US/docs/Web/CSS)[seudo-class CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-broken` s'adapte aux éléments qui représentent des liens cassés vers des images. +La [pseudo-class CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-broken` s'adapte aux éléments qui représentent des liens cassés vers des images. Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes. diff --git a/files/fr/web/css/_colon_-moz-first-node/index.md b/files/fr/web/css/_colon_-moz-first-node/index.md index 6007b9e0d4..7c444ffea4 100644 --- a/files/fr/web/css/_colon_-moz-first-node/index.md +++ b/files/fr/web/css/_colon_-moz-first-node/index.md @@ -37,7 +37,7 @@ span:-moz-first-node { </p> <p> Bip bop bip bop - <span>Cet élément n'est pas ciblé car il y a du texte avant.</span> + <span>Cet élément n'est pas ciblé car il y a du texte avant.</span> </p> ``` diff --git a/files/fr/web/css/_colon_-moz-last-node/index.md b/files/fr/web/css/_colon_-moz-last-node/index.md index b2d49eef88..f375956947 100644 --- a/files/fr/web/css/_colon_-moz-last-node/index.md +++ b/files/fr/web/css/_colon_-moz-last-node/index.md @@ -36,7 +36,7 @@ span:-moz-last-node { <span>:-moz-last-node</span> </p> <p> - <span>Cet élément n'est pas ciblé car il est suivi par du texte.</span> + <span>Cet élément n'est pas ciblé car il est suivi par du texte.</span> Bip bop bip bop. </p> ``` 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 5c0f9b29bc..adf074f24c 100644 --- a/files/fr/web/css/_colon_-moz-only-whitespace/index.md +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.md @@ -63,5 +63,5 @@ Cette pseudo-classe a été renommée en `:blank` dans {{SpecName("CSS4 Selector ## Voir aussi -- {{CSSxRef(":blank")}} {{Experimental_Inline}} +- {{CSSxRef(":blank")}} {{Experimental_Inline}} - {{CSSxRef(":empty")}} 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 46b0a59daf..64bcfbd499 100644 --- a/files/fr/web/css/_colon_-moz-user-disabled/index.md +++ b/files/fr/web/css/_colon_-moz-user-disabled/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/:-moz-user-disabled --- {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}} -La [pseudo-classe CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-user-disabled` correspond aux éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur. +La [pseudo-classe CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-user-disabled` correspond aux éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur. Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes. diff --git a/files/fr/web/css/_colon_active/index.md b/files/fr/web/css/_colon_active/index.md index 8317472411..0ac341a304 100644 --- a/files/fr/web/css/_colon_active/index.md +++ b/files/fr/web/css/_colon_active/index.md @@ -89,7 +89,7 @@ form button { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | | {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | | {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}} | Aucune modification. | diff --git a/files/fr/web/css/_colon_autofill/index.md b/files/fr/web/css/_colon_autofill/index.md index b1b7827003..140845954f 100644 --- a/files/fr/web/css/_colon_autofill/index.md +++ b/files/fr/web/css/_colon_autofill/index.md @@ -27,4 +27,4 @@ Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et - [Bug Chromium n°46543 : Le fond jaune des champs texte saisis automatiquement ne peut pas être désactivé.](https://code.google.com/p/chromium/issues/detail?id=46543) - [Bug WebKit n°66032 : Permettre aux auteurs de surcharger la couleur des champs remplis automatiquement.](https://bugs.webkit.org/show_bug.cgi?id=66032) -- [Bug Mozilla n°740979 : Implémentation de la pseudo-classe `:-moz-autofill` pour les éléments `input` avec une valeur saisie automatiquement.](https://bugzilla.mozilla.org/show_bug.cgi?id=740979) +- [Bug Mozilla n°740979 : Implémentation de la pseudo-classe `:-moz-autofill` pour les éléments `input` avec une valeur saisie automatiquement.](https://bugzilla.mozilla.org/show_bug.cgi?id=740979) diff --git a/files/fr/web/css/_colon_empty/index.md b/files/fr/web/css/_colon_empty/index.md index 87d8eb5f2f..1e3bbe4443 100644 --- a/files/fr/web/css/_colon_empty/index.md +++ b/files/fr/web/css/_colon_empty/index.md @@ -13,7 +13,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:empty`** correspond à u ```css /* Cible tous les éléments <div> qui */ -/* n'ont pas de contenu */ +/* n'ont pas de contenu */ div:empty { background: lime; } diff --git a/files/fr/web/css/_colon_first-child/index.md b/files/fr/web/css/_colon_first-child/index.md index dfbce41751..e62de1022b 100644 --- a/files/fr/web/css/_colon_first-child/index.md +++ b/files/fr/web/css/_colon_first-child/index.md @@ -107,4 +107,4 @@ li:first-child{ - {{cssxref(":last-child")}} - {{CSSxRef(":nth-child", ":nth-child()")}} - {{cssxref(":last-of-type")}} -- {{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}} +- {{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}} diff --git a/files/fr/web/css/_colon_first-of-type/index.md b/files/fr/web/css/_colon_first-of-type/index.md index 037dba0868..e225b8d815 100644 --- a/files/fr/web/css/_colon_first-of-type/index.md +++ b/files/fr/web/css/_colon_first-of-type/index.md @@ -31,7 +31,7 @@ p:first-of-type { ```css div :first-of-type { - background-color: lime; + background-color: lime; } ``` diff --git a/files/fr/web/css/_colon_focus-visible/index.md b/files/fr/web/css/_colon_focus-visible/index.md index f5deaa99f2..ad6173dfc1 100644 --- a/files/fr/web/css/_colon_focus-visible/index.md +++ b/files/fr/web/css/_colon_focus-visible/index.md @@ -14,7 +14,7 @@ La pseudo-classe **`:focus-visible`** s'applique lorsqu'un élément correspond Ce sélecteur peut être utile afin de fournir un indicateur de focus différent selon le mode de navigation de l'utilisateur (souris ou clavier). -On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée `:-moz-focusring`. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations. +On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée `:-moz-focusring`. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations. ## Syntaxe diff --git a/files/fr/web/css/_colon_focus-within/index.md b/files/fr/web/css/_colon_focus-within/index.md index 0b530933ca..4c40f35b73 100644 --- a/files/fr/web/css/_colon_focus-within/index.md +++ b/files/fr/web/css/_colon_focus-within/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:focus-within --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:focus-within`** s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du _Shadow DOM_. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire). +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:focus-within`** s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du _Shadow DOM_. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire). ```css /* Cible n'importe quel <div> lorsqu'un */ diff --git a/files/fr/web/css/_colon_focus/index.md b/files/fr/web/css/_colon_focus/index.md index 2188885f3e..05179d7ca0 100644 --- a/files/fr/web/css/_colon_focus/index.md +++ b/files/fr/web/css/_colon_focus/index.md @@ -79,5 +79,5 @@ Il ne faut jamais retirer l'indicateur de focus sans le remplacer par un autre i ## Voir aussi -- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}} +- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}} - {{cssxref(":focus-within")}} diff --git a/files/fr/web/css/_colon_fullscreen/index.md b/files/fr/web/css/_colon_fullscreen/index.md index 3855532430..dd1b4d71c1 100644 --- a/files/fr/web/css/_colon_fullscreen/index.md +++ b/files/fr/web/css/_colon_fullscreen/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/:fullscreen --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:fullscreen`** permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:fullscreen`** permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés. ## Syntaxe diff --git a/files/fr/web/css/_colon_future/index.md b/files/fr/web/css/_colon_future/index.md index ef82a54d5a..16b836e618 100644 --- a/files/fr/web/css/_colon_future/index.md +++ b/files/fr/web/css/_colon_future/index.md @@ -24,7 +24,7 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```css :future(p, span) { - display: none; + display: none; } ``` @@ -33,12 +33,12 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```html <video controls preload="metadata"> <source src="video.mp4" type="video/mp4" /> - <source src="video.webm" type="video/webm" /> - <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> + <source src="video.webm" type="video/webm" /> + <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> </video> ``` -### WebVTT +### WebVTT FICHIER WEBVTT diff --git a/files/fr/web/css/_colon_host()/index.md b/files/fr/web/css/_colon_host()/index.md index 1228857671..e0dfa1c855 100644 --- a/files/fr/web/css/_colon_host()/index.md +++ b/files/fr/web/css/_colon_host()/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/:host() La fonction de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host()`** permet de sélectionner l'hôte du _shadow DOM_ contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte. -Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}. +Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}. > **Note :** Cette fonction n'a aucun effet si elle est utilisée en dehors d'un _shadow DOM_. @@ -19,7 +19,7 @@ Le scénario principal pour utiliser cette fonction consiste à vouloir cibler u /* On cible l'hôte du shadow DOM uniquement s'il correspond au sélecteur passé en argument */ :host(.special-custom-element) { - font-weight: bold; + font-weight: bold; } ``` diff --git a/files/fr/web/css/_colon_host-context()/index.md b/files/fr/web/css/_colon_host-context()/index.md index f1c99619f4..cc5d41645f 100644 --- a/files/fr/web/css/_colon_host-context()/index.md +++ b/files/fr/web/css/_colon_host-context()/index.md @@ -21,7 +21,7 @@ Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — `h1 /* Cible un hôte uniquement si c'est un descendant du sélecteur passé en argument */ :host-context(h1) { - font-weight: bold; + font-weight: bold; } :host-context(main article) { diff --git a/files/fr/web/css/_colon_host/index.md b/files/fr/web/css/_colon_host/index.md index 83237f7080..def98a9b7d 100644 --- a/files/fr/web/css/_colon_host/index.md +++ b/files/fr/web/css/_colon_host/index.md @@ -16,7 +16,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host`** permet de cibler ```css /* Cible la racine d'un hôte de shadow DOM */ :host { - font-weight: bold; + font-weight: bold; } ``` @@ -28,7 +28,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host`** permet de cibler Les fragments de code qui suivent sont extraits du dépôt d'exemple [_host-selectors_](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([voir le résultat _live_](https://mdn.github.io/web-components-examples/host-selectors/)). -Dans cet exemple, on dispose d'un élément personnalisé `<context-span>` qui peut contenir du texte : +Dans cet exemple, on dispose d'un élément personnalisé `<context-span>` qui peut contenir du texte : ```html <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1> diff --git a/files/fr/web/css/_colon_hover/index.md b/files/fr/web/css/_colon_hover/index.md index c1ee18e528..e9a8e5d9fd 100644 --- a/files/fr/web/css/_colon_hover/index.md +++ b/files/fr/web/css/_colon_hover/index.md @@ -19,7 +19,7 @@ a:hover { } ``` -La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle `:hover` après les règles `:link` et `:visited` mais avant la règle `:active` (l'ordre est `:link` — `:visited` — `:hover` — `:active` – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent. +La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle `:hover` après les règles `:link` et `:visited` mais avant la règle `:active` (l'ordre est `:link` — `:visited` — `:hover` — `:active` – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent. La pseudo-classe `:hover` peut être appliquée à n'importe quel [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements). {{experimental_inline}} @@ -57,10 +57,10 @@ a:hover { | Spécification | Commentaires | Retours | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}} | | [_Issues_ GitHub du WHATWG HTML (en anglais)](https://github.com/whatwg/html/issues) | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}} | | [_Issues_ GitHub du WHATWG HTML (en anglais)](https://github.com/whatwg/html/issues) | | {{SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover')}} | Permet d'appliquer `:hover` à n'importe quel pseudo-élément. | [Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)](https://github.com/w3c/csswg-drafts/issues) | -| {{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}} | | | -| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}} | Définition initiale. | | +| {{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}} | | | +| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}} | Définition initiale. | | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/_colon_is/index.md b/files/fr/web/css/_colon_is/index.md index caaa2a95b3..c152116440 100644 --- a/files/fr/web/css/_colon_is/index.md +++ b/files/fr/web/css/_colon_is/index.md @@ -19,11 +19,11 @@ La plupart des navigateurs prennent encore en charge cette fonctionnalité via ` ```css /* Sélectionne n'importe quel paragraphe survolé - qui se trouve au sein d'un header, main, ou - footer */ + qui se trouve au sein d'un header, main, ou + footer */ :is(header, main, footer) p:hover { - color: red; - cursor: pointer; + color: red; + cursor: pointer; } /* La notation précédente est équivalente à */ @@ -31,7 +31,7 @@ header p:hover, main p:hover, footer p:hover { color: red; - cursor: pointer; + cursor: pointer; } @@ -166,7 +166,7 @@ pourra être remplacée par : } ``` -En revanche, le modèle d'usage suivant n'est pas recommandée (cf. [la section qui suit sur les performances](#issues_with_performance_and_specificity)) : +En revanche, le modèle d'usage suivant n'est pas recommandée (cf. [la section qui suit sur les performances](#issues_with_performance_and_specificity)) : ```css :matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) { @@ -178,7 +178,7 @@ En revanche, le modèle d'usage suivant n'est pas recommandée (cf. [la section La pseudo-classe `:matches` est particulièrement utile lorsqu'on manipule les [sections et en-têtes](/en-US/docs/Sections_and_Outlines_of_an_HTML5_document "Sections and Outlines of an HTML5 document") HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans `:matches()`) s'avèrerait plutôt compliqué. -Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser `:matches()`, on obtient ces règles plutôt compliquées : +Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser `:matches()`, on obtient ces règles plutôt compliquées : ```css /* Niveau 0 */ @@ -224,7 +224,7 @@ h1 { } ``` -### Éviter l'invalidation d'une liste de sélecteur +### Éviter l'invalidation d'une liste de sélecteur À la différence des listes de sélecteurs, la pseudo-classe `:is()` ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur. @@ -234,7 +234,7 @@ h1 { } ``` -Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler `:valid` même si les navigateurs ne prennent pas en charge le sélecteur `:incompatible`. En revanche : +Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler `:valid` même si les navigateurs ne prennent pas en charge le sélecteur `:incompatible`. En revanche : ```css :valid, :incompatible { @@ -242,13 +242,13 @@ Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler `:va } ``` -L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge `:incompatible`, même si `:valid` est bien pris en charge. +L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge `:incompatible`, même si `:valid` est bien pris en charge. ## Notes ### Problèmes de performances avec `any():` et la spécificité -{{Bug(561154)}} suit un problème de spécificité relatif à `:-moz-any()`. L'implémentation place `:-moz-any()` dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur. +{{Bug(561154)}} suit un problème de spécificité relatif à `:-moz-any()`. L'implémentation place `:-moz-any()` dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur. Ainsi : @@ -282,5 +282,5 @@ et cette dernière version sera plus rapide : ## Voir aussi -- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme `is()`, avec une spécificité nulle +- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme `is()`, avec une spécificité nulle - [Les composants web](/fr/docs/Web/Web_Components) diff --git a/files/fr/web/css/_colon_last-child/index.md b/files/fr/web/css/_colon_last-child/index.md index 97f45b245c..ab13e127a5 100644 --- a/files/fr/web/css/_colon_last-child/index.md +++ b/files/fr/web/css/_colon_last-child/index.md @@ -65,4 +65,4 @@ li:last-child { - {{cssxref(":first-child")}} - {{cssxref(":nth-child")}} - {{cssxref(":last-of-type")}} -- {{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}} +- {{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}} diff --git a/files/fr/web/css/_colon_link/index.md b/files/fr/web/css/_colon_link/index.md index 17e37bbabf..c4d6739dc9 100644 --- a/files/fr/web/css/_colon_link/index.md +++ b/files/fr/web/css/_colon_link/index.md @@ -64,7 +64,7 @@ a:link { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('CSS4 Selectors', '#link', ':link')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | | {{SpecName('CSS3 Selectors', '#link', ':link')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | | {{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link')}} | {{Spec2('CSS2.1')}} | Levée de la restriction limitant l'utilisation de cette pseudo-classe à l'élément {{HTMLElement("a")}}. | diff --git a/files/fr/web/css/_colon_local-link/index.md b/files/fr/web/css/_colon_local-link/index.md index 585db97844..bbb7009e8d 100644 --- a/files/fr/web/css/_colon_local-link/index.md +++ b/files/fr/web/css/_colon_local-link/index.md @@ -48,4 +48,4 @@ a:local-link { ## Voir aussi -- Pseudo-classes relatives aux liens : {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}} +- Pseudo-classes relatives aux liens : {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}} diff --git a/files/fr/web/css/_colon_not/index.md b/files/fr/web/css/_colon_not/index.md index 679a2616ff..45f4c0f620 100644 --- a/files/fr/web/css/_colon_not/index.md +++ b/files/fr/web/css/_colon_not/index.md @@ -25,7 +25,7 @@ La [spécificité](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance > > - Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, `:not(*)` va exclure tous les éléments et ne sera jamais appliqué. > - À l'inverse, il est possible d'augmenter la [spécificitié](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) d'un sélecteur. Ainsi. `toto:not(truc)` ciblera les mêmes éléments que `toto`, mais avec une spécificité plus forte. -> - `:not(toto){}` ciblera tout élément qui n'est pas `toto`, **notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}**. +> - `:not(toto){}` ciblera tout élément qui n'est pas `toto`, **notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}**. > - Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, `body :not(table) a` s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie `:not()` du sélecteur. ## Syntaxe diff --git a/files/fr/web/css/_colon_nth-last-of-type/index.md b/files/fr/web/css/_colon_nth-last-of-type/index.md index 7c87c93290..fe04b5e476 100644 --- a/files/fr/web/css/_colon_nth-last-of-type/index.md +++ b/files/fr/web/css/_colon_nth-last-of-type/index.md @@ -32,7 +32,7 @@ La pseudo-classe `nth-last-of-type` prend un seul argument qui représente le mo ## Exemples -Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin : +Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin : ### CSS diff --git a/files/fr/web/css/_colon_nth-of-type/index.md b/files/fr/web/css/_colon_nth-of-type/index.md index 0d76ca640d..56404e6f94 100644 --- a/files/fr/web/css/_colon_nth-of-type/index.md +++ b/files/fr/web/css/_colon_nth-of-type/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/:nth-of-type --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:nth-of-type()`** correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:nth-of-type()`** correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs. ```css /* Sélectionne chaque élément de type <p> dont diff --git a/files/fr/web/css/_colon_only-child/index.md b/files/fr/web/css/_colon_only-child/index.md index 9f04b643c6..a4c19c6c39 100644 --- a/files/fr/web/css/_colon_only-child/index.md +++ b/files/fr/web/css/_colon_only-child/index.md @@ -48,11 +48,11 @@ span:only-child { </div> <div> - <span> + <span> Ce span est l'un des deux enfants de son parent </span> - <span> + <span> Ce span est l'un des deux enfants de son parent </span> diff --git a/files/fr/web/css/_colon_optional/index.md b/files/fr/web/css/_colon_optional/index.md index 01d467a2af..78f13cfb6e 100644 --- a/files/fr/web/css/_colon_optional/index.md +++ b/files/fr/web/css/_colon_optional/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:optional --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:optional`** permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:optional`** permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire. ```css /* Cible les élméents <input> qui sont optionnels */ diff --git a/files/fr/web/css/_colon_past/index.md b/files/fr/web/css/_colon_past/index.md index 46d313140c..d44c6cb8fb 100644 --- a/files/fr/web/css/_colon_past/index.md +++ b/files/fr/web/css/_colon_past/index.md @@ -24,7 +24,7 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```css :past(p, span) { - display: none; + display: none; } ``` @@ -33,8 +33,8 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```html <video controls preload="metadata"> <source src="video.mp4" type="video/mp4" /> - <source src="video.webm" type="video/webm" /> - <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> + <source src="video.webm" type="video/webm" /> + <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> </video> ``` diff --git a/files/fr/web/css/_colon_placeholder-shown/index.md b/files/fr/web/css/_colon_placeholder-shown/index.md index 6bc13d87d0..c05e159f1f 100644 --- a/files/fr/web/css/_colon_placeholder-shown/index.md +++ b/files/fr/web/css/_colon_placeholder-shown/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:placeholder-shown --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:placeholder-shown`** permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant [un texte de substitution](/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute). +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:placeholder-shown`** permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant [un texte de substitution](/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute). ```css /* Cible tout élément <input> ou <textarea> avec un */ diff --git a/files/fr/web/css/_colon_right/index.md b/files/fr/web/css/_colon_right/index.md index d869d73b36..12c7a0ae20 100644 --- a/files/fr/web/css/_colon_right/index.md +++ b/files/fr/web/css/_colon_right/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:right --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:right`**, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:right`**, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite. ```css /* Sélectionne le contenu des pages droites */ @@ -31,7 +31,7 @@ La position de la page (à gauche ou à droite) dépend de la direction d'écrit ```css @page :right { - margin: 2cm 3cm; + margin: 2cm 3cm; } ``` diff --git a/files/fr/web/css/_colon_target-within/index.md b/files/fr/web/css/_colon_target-within/index.md index c083b22e9a..e87e29f67b 100644 --- a/files/fr/web/css/_colon_target-within/index.md +++ b/files/fr/web/css/_colon_target-within/index.md @@ -30,14 +30,14 @@ La pseudo-classe `:target-within` peut être utilisée pour mettre en avant un a ```html <h3>Table des matières</h3> <ol> - <li><a href="#p1">Aller au premier paragraphe !</a></li> - <li><a href="#p2">Aller au second paragraphe !</a></li> + <li><a href="#p1">Aller au premier paragraphe !</a></li> + <li><a href="#p2">Aller au second paragraphe !</a></li> </ol> <article> <h3>Mon bel article</h3> - <p id="p1">Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !</p> - <p id="p2">Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?</p> + <p id="p1">Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !</p> + <p id="p2">Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?</p> </article> ``` diff --git a/files/fr/web/css/_colon_target/index.md b/files/fr/web/css/_colon_target/index.md index 5d3ca51a11..b16934c949 100644 --- a/files/fr/web/css/_colon_target/index.md +++ b/files/fr/web/css/_colon_target/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:target --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:target`** permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:target`** permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document. ```css /* Cible un élément dont l'identifiant */ @@ -82,9 +82,9 @@ La pseudo-classe `:target` s'accommode également des éléments qui ne sont pas ```html <p><a href="#newcomment">Ajouter un commentaire</a></p> <div id="newcomment"> - <form> - <p>Saisir un commentaire :<br /> - <textarea></textarea></p> + <form> + <p>Saisir un commentaire :<br /> + <textarea></textarea></p> </form> </div> ``` diff --git a/files/fr/web/css/_colon_visited/index.md b/files/fr/web/css/_colon_visited/index.md index 2de38cc227..d0aa46737a 100644 --- a/files/fr/web/css/_colon_visited/index.md +++ b/files/fr/web/css/_colon_visited/index.md @@ -17,13 +17,13 @@ a:visited { } ``` -Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : `:visited` doit être utilisée après une règle basée sur `:link`, mais avant les autres (`:link` — `:visited` — `:hover` — `:active`). +Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : `:visited` doit être utilisée après une règle basée sur `:link`, mais avant les autres (`:link` — `:visited` — `:hover` — `:active`). ## Restrictions Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe : -- Les propriétés CSS autorisées sont {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("outline-color")}}, {{cssxref("column-rule-color")}} +- Les propriétés CSS autorisées sont {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("outline-color")}}, {{cssxref("column-rule-color")}} - Les attributs SVG autorisés sont {{SVGAttr("fill")}} and {{SVGAttr("stroke")}}. - La composante alpha sera ignorée : la composante alpha d'un lien non-visité est utilisé à la place (sauf quand l'opacité est `0`, dans ce cas, toute la couleur est ignorée, ainsi que celle de la règle non-visité). - Bien qu'on puisse modifier la couleur d'un lien, la méthode {{domxref("window.getComputedStyle")}} mentira et indiquera toujours la valeur de la couleur de la règle pour les liens non-visités. diff --git a/files/fr/web/css/_colon_where/index.md b/files/fr/web/css/_colon_where/index.md index 2ebec4bdd2..d96f066576 100644 --- a/files/fr/web/css/_colon_where/index.md +++ b/files/fr/web/css/_colon_where/index.md @@ -31,5 +31,5 @@ La différence entre `:where()` et {{CSSxRef(":is", ":is()")}} est la suivante : ## Voir aussi -- {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} +- {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} - [Les composants web](/fr/docs/Web/Web_Components) diff --git a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md index 6003a42e0c..1437195349 100644 --- a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md +++ b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/::-moz-color-swatch Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::-moz-color-swatch`** est [un pseudo-élément spécifique à Mozilla](/fr/docs/Web/CSS/Extensions_Mozilla) qui représente la couleur sélectionnée d'un élément {{HTMLElement("input")}} avec `type="color"`. -> **Note :** Utiliser `::-moz-color-swatch` sur tout autre élément qu'un `<input type="color">` n'aura aucun effet. +> **Note :** Utiliser `::-moz-color-swatch` sur tout autre élément qu'un `<input type="color">` n'aura aucun effet. ## Syntax diff --git a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md index 3c000979d9..e01f931059 100644 --- a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md @@ -44,4 +44,4 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink e - {{cssxref("::-webkit-outer-spin-button")}} - {{cssxref("::-webkit-textfield-decoration-container")}} -- [Mettre en forme les contrôles de formulaires – WebKit (en anglais)](https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement) +- [Mettre en forme les contrôles de formulaires – WebKit (en anglais)](https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement) diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md index 0b9d310140..0d300c9bf4 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md @@ -20,11 +20,11 @@ Le pseudo-élément **`::-webkit-progress-value`** permet de représenter la por ```css progress { - -webkit-appearance: none; + -webkit-appearance: none; } ::-webkit-progress-value { - background-color: orange; + background-color: orange; } ``` diff --git a/files/fr/web/css/_doublecolon_after/index.md b/files/fr/web/css/_doublecolon_after/index.md index 9df2d0d767..584a693711 100644 --- a/files/fr/web/css/_doublecolon_after/index.md +++ b/files/fr/web/css/_doublecolon_after/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/::after --- {{CSSRef}} -En CSS, **`::after`** crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « [en ligne](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte) ». +En CSS, **`::after`** crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « [en ligne](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte) ». ```css /* Ajoute une flèche après les liens */ @@ -20,19 +20,19 @@ a:after { } ``` -> **Note :** les pseudo-éléments générés par `::before` et `::after` sont [contenus dans la boîte de mise en forme de l'élément](https://www.w3.org/TR/CSS2/generate.html#before-after-content). Aussi, `::before` et `::after` ne s'appliquent pas aux *[éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé)* tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}. +> **Note :** les pseudo-éléments générés par `::before` et `::after` sont [contenus dans la boîte de mise en forme de l'élément](https://www.w3.org/TR/CSS2/generate.html#before-after-content). Aussi, `::before` et `::after` ne s'appliquent pas aux *[éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé)* tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}. ## Syntaxe {{csssyntax}} -> **Note :** CSS3 a introduit la notation `::after` (avec deux deux-points) pour distinguer les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi`:after`, introduite dans CSS2. +> **Note :** CSS3 a introduit la notation `::after` (avec deux deux-points) pour distinguer les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi`:after`, introduite dans CSS2. ## Exemples ### Utilisation simple -Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux. +Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux. #### HTML diff --git a/files/fr/web/css/_doublecolon_first-letter/index.md b/files/fr/web/css/_doublecolon_first-letter/index.md index 9527c6b0a9..1adb0c69cd 100644 --- a/files/fr/web/css/_doublecolon_first-letter/index.md +++ b/files/fr/web/css/_doublecolon_first-letter/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/::first-letter --- {{CSSRef}} -Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::first-letter`** sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne. +Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::first-letter`** sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne. ```css /* Sélectionne la première lettre */ @@ -59,7 +59,7 @@ Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un b - Toutes les propriétés liées à `padding` : {{cssxref("padding")}}, {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}. - Toutes les propriétés liées aux bordures : les raccourcis {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-radius")}}, {{cssxref("border-image")}}, et les propriétés détaillées. - La propriété {{cssxref("color")}} . -- Les propriétés {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si `float` vaut `none`). +- Les propriétés {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si `float` vaut `none`). Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne. diff --git a/files/fr/web/css/_doublecolon_first-line/index.md b/files/fr/web/css/_doublecolon_first-line/index.md index 6fadbb0d69..8041e157fc 100644 --- a/files/fr/web/css/_doublecolon_first-line/index.md +++ b/files/fr/web/css/_doublecolon_first-line/index.md @@ -28,7 +28,7 @@ Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de d - Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}} - La propriété {{cssxref("color")}} -- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} +- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} - {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}} - {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}. diff --git a/files/fr/web/css/_doublecolon_part/index.md b/files/fr/web/css/_doublecolon_part/index.md index 190d0fb172..8d928ebd60 100644 --- a/files/fr/web/css/_doublecolon_part/index.md +++ b/files/fr/web/css/_doublecolon_part/index.md @@ -30,7 +30,7 @@ custom-element::part(foo) { ### `<tabbed-custom-element>` -#### Arbre fantôme `<tabbed-custom-element>` +#### Arbre fantôme `<tabbed-custom-element>` ```html <style type="text/css"> @@ -85,7 +85,7 @@ tabbed-custom-element::part(active tab) { ## Spécifications -| Spécification | État | Commentaires | +| Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------------------- | -------------------- | | {{SpecName("CSS Shadow Parts", "#part", "::part")}} | {{Spec2("CSS Shadow Parts")}} | Définition initiale. | @@ -95,6 +95,6 @@ tabbed-custom-element::part(active tab) { ## Voir aussi -- L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur `::part()` +- L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur `::part()` - L'attribut {{HTMLattrxref("exportparts")}} qui est utilisé pour exporter les parties d'un arbre _shadow_ imbriqué vers un arbre classique - [Utilisation de CSS Shadow : `::part` et `::theme`](https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md) diff --git a/files/fr/web/css/_doublecolon_placeholder/index.md b/files/fr/web/css/_doublecolon_placeholder/index.md index e5a5a5f7bd..c5e708bbb1 100644 --- a/files/fr/web/css/_doublecolon_placeholder/index.md +++ b/files/fr/web/css/_doublecolon_placeholder/index.md @@ -22,7 +22,7 @@ Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteu - Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}} - La propriété {{cssxref("color")}} -- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} +- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} - {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}} - {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}. @@ -38,7 +38,7 @@ Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteu ```css input::placeholder { - color: red; + color: red; } ``` diff --git a/files/fr/web/css/_doublecolon_slotted/index.md b/files/fr/web/css/_doublecolon_slotted/index.md index 1f7e5f9bc4..8c30297085 100644 --- a/files/fr/web/css/_doublecolon_slotted/index.md +++ b/files/fr/web/css/_doublecolon_slotted/index.md @@ -17,12 +17,12 @@ Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément {{htmle ```css /* Cible n'importe quel élément placé dans un emplacement */ ::slotted(*) { - font-weight: bold; + font-weight: bold; } /* Cible n'importe quel élément <span> placé dans un emplacement */ ::slotted(span) { - font-weight: bold; + font-weight: bold; } ``` diff --git a/files/fr/web/css/_doublecolon_target-text/index.md b/files/fr/web/css/_doublecolon_target-text/index.md index 77125839b7..61a88952b9 100644 --- a/files/fr/web/css/_doublecolon_target-text/index.md +++ b/files/fr/web/css/_doublecolon_target-text/index.md @@ -10,7 +10,7 @@ Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) [CSS](/en-US/docs/Web/CS ```css ::target-text { - background-color: pink; + background-color: pink; } ``` diff --git a/files/fr/web/css/accent-color/index.md b/files/fr/web/css/accent-color/index.md index 3b1da90c80..8d4ecd66fa 100644 --- a/files/fr/web/css/accent-color/index.md +++ b/files/fr/web/css/accent-color/index.md @@ -85,4 +85,4 @@ input.custom { - L'élément {{HTMLElement("input")}} - [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color) - Le type de donnée {{cssxref("<color>")}} -- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} +- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} diff --git a/files/fr/web/css/adjacent_sibling_combinator/index.md b/files/fr/web/css/adjacent_sibling_combinator/index.md index edd67d5fde..6ca2059096 100644 --- a/files/fr/web/css/adjacent_sibling_combinator/index.md +++ b/files/fr/web/css/adjacent_sibling_combinator/index.md @@ -52,7 +52,7 @@ li:first-of-type + li { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------ | | {{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}} | {{Spec2('CSS4 Selectors')}} | Renomme ce sélecteur en « _next-sibling combinator_ ». | -| {{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}} | {{Spec2('CSS3 Selectors')}} | | | {{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/align-items/index.md b/files/fr/web/css/align-items/index.md index c28220d0e1..ab7c6615d6 100644 --- a/files/fr/web/css/align-items/index.md +++ b/files/fr/web/css/align-items/index.md @@ -240,7 +240,7 @@ display.addEventListener('change', function (evt) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}} | {{Spec2("CSS3 Box Alignment")}} | | +| {{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}} | {{Spec2("CSS3 Box Alignment")}} | | | {{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. | {{cssinfo}} diff --git a/files/fr/web/css/align-self/index.md b/files/fr/web/css/align-self/index.md index f06d597f72..3648cc14a9 100644 --- a/files/fr/web/css/align-self/index.md +++ b/files/fr/web/css/align-self/index.md @@ -125,9 +125,9 @@ align-self: unset; ```html <div class="flex-container"> - <p class="element-flex center">Milieu</p> - <p class="element-flex baseline">Base</p> - <p class="element-flex stretch">Étiré</p> + <p class="element-flex center">Milieu</p> + <p class="element-flex baseline">Base</p> + <p class="element-flex stretch">Étiré</p> </div> ``` @@ -139,7 +139,7 @@ align-self: unset; | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Box Alignment")}} | | +| {{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Box Alignment")}} | | | {{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Flexbox")}} | Définition initiale. | {{cssinfo}} diff --git a/files/fr/web/css/all/index.md b/files/fr/web/css/all/index.md index eb9cec8e9d..62e2dfd057 100644 --- a/files/fr/web/css/all/index.md +++ b/files/fr/web/css/all/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/all --- {{CSSRef}} -La [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) **`all`** permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style. +La [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) **`all`** permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style. {{EmbedInteractiveExample("pages/css/all.html")}} diff --git a/files/fr/web/css/angle-percentage/index.md b/files/fr/web/css/angle-percentage/index.md index 3e88cfb95e..079d9089a2 100644 --- a/files/fr/web/css/angle-percentage/index.md +++ b/files/fr/web/css/angle-percentage/index.md @@ -23,7 +23,7 @@ Lorsqu'il est possible d'utiliser une valeur de type `<angle-percentage>` dans u | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------- | -| {{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}} | {{Spec2('CSS3 Values')}} | Définition du type `<angle-percentage>`. Ajout de `calc()` | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/angle/index.md b/files/fr/web/css/angle/index.md index d7ce3f0153..7799da0269 100644 --- a/files/fr/web/css/angle/index.md +++ b/files/fr/web/css/angle/index.md @@ -82,7 +82,7 @@ Même si toutes les unités exprimeront une valeur nulle identique, l'unité **d | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('CSS4 Values', '#angles', '<angle>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#angles', '<angle>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#angles', '<angle>')}} | {{Spec2('CSS3 Values')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/animation-delay/index.md b/files/fr/web/css/animation-delay/index.md index 6d7b65d0e6..22d240ecdc 100644 --- a/files/fr/web/css/animation-delay/index.md +++ b/files/fr/web/css/animation-delay/index.md @@ -31,7 +31,7 @@ animation-delay: 2s, 4ms; - `<time>` - : La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (`s` comme suffixe) ou en millisecondes (`ms` comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide. -> **Note :** Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). +> **Note :** Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). ### Syntaxe formelle diff --git a/files/fr/web/css/animation-direction/index.md b/files/fr/web/css/animation-direction/index.md index 7a45e9ebaa..d0ff9ae665 100644 --- a/files/fr/web/css/animation-direction/index.md +++ b/files/fr/web/css/animation-direction/index.md @@ -92,8 +92,8 @@ p { </p> <p class="retour"> - « Revenez, » lui cria la Chenille. « J’ai quelque chose - d’important à vous dire ! » + « Revenez, » lui cria la Chenille. « J’ai quelque chose + d’important à vous dire ! » </p> ``` diff --git a/files/fr/web/css/animation-iteration-count/index.md b/files/fr/web/css/animation-iteration-count/index.md index f2441ca1f0..1c2d07952c 100644 --- a/files/fr/web/css/animation-iteration-count/index.md +++ b/files/fr/web/css/animation-iteration-count/index.md @@ -37,9 +37,9 @@ La propriété `animation-iteration-count` est définie avec une ou plusieurs va ### Valeurs - `infinite` - - : L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété **`animation-direction`**. + - : L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété **`animation-direction`**. - `<number>` - - : Le nombre de répétitions pour l'animation. La valeur par défaut est `1` (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi `0.5` indiquera une moitié du cycle de l'animation). + - : Le nombre de répétitions pour l'animation. La valeur par défaut est `1` (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi `0.5` indiquera une moitié du cycle de l'animation). > **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). @@ -89,7 +89,7 @@ p { </p> <p class="dix"> - Voyons si je me souviendrai de tout ce que je savais : quatre fois + Voyons si je me souviendrai de tout ce que je savais : quatre fois cinq font douze, quatre fois six font treize, quatre fois sept font — je n’arriverai jamais à vingt de ce train-là. </p> diff --git a/files/fr/web/css/animation-play-state/index.md b/files/fr/web/css/animation-play-state/index.md index 9a1e643d7a..5bd168d765 100644 --- a/files/fr/web/css/animation-play-state/index.md +++ b/files/fr/web/css/animation-play-state/index.md @@ -39,7 +39,7 @@ animation-play-state: unset; - `paused` - : L'animation est en pause. -> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : [paramétrer les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). +> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : [paramétrer les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). ### Syntaxe formelle diff --git a/files/fr/web/css/animation-timing-function/index.md b/files/fr/web/css/animation-timing-function/index.md index 7a93b3ee20..cb1f9c9a39 100644 --- a/files/fr/web/css/animation-timing-function/index.md +++ b/files/fr/web/css/animation-timing-function/index.md @@ -94,7 +94,7 @@ Une fonction de progression pour une animation qui est définie pour une étape - `step-end` - : Synonyme de `steps(1, jump-end)` -> **Note :** Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété `animation-*`, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir [Paramétrer plusieurs valeurs de propriétés pour les animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations). +> **Note :** Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété `animation-*`, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir [Paramétrer plusieurs valeurs de propriétés pour les animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations). ### Syntaxe formelle diff --git a/files/fr/web/css/animation/index.md b/files/fr/web/css/animation/index.md index 2c15a43411..2bbd9880e7 100644 --- a/files/fr/web/css/animation/index.md +++ b/files/fr/web/css/animation/index.md @@ -239,7 +239,7 @@ L'ordre des valeurs est également important pour chaque définition d'animation ### Valeurs - `<single-animation-iteration-count>` - - : Le nombre de fois où l'animation est jouée, cf. {{cssxref("animation-iteration-count")}}. + - : Le nombre de fois où l'animation est jouée, cf. {{cssxref("animation-iteration-count")}}. - `<single-animation-direction>` - : La direction dans laquelle s'effectue l'animation, cf. {{cssxref("animation-direction")}}. - `<single-animation-fill-mode>` diff --git a/files/fr/web/css/aspect-ratio/index.md b/files/fr/web/css/aspect-ratio/index.md index 4e7925541b..0309ff17b0 100644 --- a/files/fr/web/css/aspect-ratio/index.md +++ b/files/fr/web/css/aspect-ratio/index.md @@ -6,7 +6,7 @@ browser-compat: css.properties.aspect-ratio --- {{CSSRef}} -La propriété [CSS](/fr/docs/Web/CSS) **`aspect-ratio`** définit un **ratio d'affichage préférentiel** pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page. +La propriété [CSS](/fr/docs/Web/CSS) **`aspect-ratio`** définit un **ratio d'affichage préférentiel** pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page. ```css aspect-ratio: 1 / 1; @@ -44,9 +44,9 @@ aspect-ratio: 16 / 9; ## Correspondance entre largeur et hauteur avec aspect-ratio -Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) et à d'autres éléments liés qui acceptent les attributs `width` et `height`. Cela se passe dans la feuille de styles interne du navigateur. +Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) et à d'autres éléments liés qui acceptent les attributs `width` et `height`. Cela se passe dans la feuille de styles interne du navigateur. -Sur Firefox, la règle de la feuille de styles interne ressemble à cela : +Sur Firefox, la règle de la feuille de styles interne ressemble à cela : ```css img, input[type="image"], video, embed, iframe, marquee, object, table { diff --git a/files/fr/web/css/attribute_selectors/index.md b/files/fr/web/css/attribute_selectors/index.md index 8ab8566828..cb79757ed6 100644 --- a/files/fr/web/css/attribute_selectors/index.md +++ b/files/fr/web/css/attribute_selectors/index.md @@ -51,15 +51,15 @@ a[class~="logo"] { - `[attr~=valeur]` - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est `valeur`. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé. - `[attr|=valeur]` - - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est exactement `valeur` ou dont la valeur commence par `valeur` suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues. + - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est exactement `valeur` ou dont la valeur commence par `valeur` suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues. - `[attr^=valeur]` - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur commence par `valeur`. - `[attr$=valeur]` - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur se termine par `valeur`. - `[attr*=valeur]` - - : Permet de cibler un élément qui possède un attribut `attr` et dont la valeur contient au moins une occurrence de `valeur` dans la chaîne de caractères. + - : Permet de cibler un élément qui possède un attribut `attr` et dont la valeur contient au moins une occurrence de `valeur` dans la chaîne de caractères. - `[attr operateur valeur i]` - - : On peut ajouter un `i` (ou `I`) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII). + - : On peut ajouter un `i` (ou `I`) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII). - `[attr operateur valeur s]` {{experimental_inline}} - : Ajouter un `s` (ou `S`) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII). @@ -214,7 +214,7 @@ ol[type="A" s] { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------- | | {{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS4 Selectors')}} | Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse. | -| {{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS3 Selectors')}} | | | {{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/background-color/index.md b/files/fr/web/css/background-color/index.md index 474f17a985..b0feacda10 100644 --- a/files/fr/web/css/background-color/index.md +++ b/files/fr/web/css/background-color/index.md @@ -35,7 +35,7 @@ background-color: rgb(255, 255, 128); background-color: rgba(117, 190, 218, 0.0); /* 0.0 - transparent */ background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */ background-color: rgba(117, 190, 218, 1.0); /* 1.0 - opaque */ - + /* Valeur HSLA */ background-color: hsla(50, 33%, 25%, 0.75); @@ -116,8 +116,8 @@ Le ratio de contraste entre les couleurs est déterminé en comparant la luminos | Spécification | Commentaires | Retours | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}} | Le mot-clé `transparent` a été retiré de la propriété pour être intégré au type de données {{cssxref("<color>")}} (dans la pratique, il n'y a aucune différence). | [_Issues_ GitHub pour la spécification Background de niveau 3 (en anglais)](https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3) | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}} | Aucune modification. | | -| {{SpecName('CSS1', '#background-color', 'background-color')}} | Définition initiale. | | +| {{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}} | Aucune modification. | | +| {{SpecName('CSS1', '#background-color', 'background-color')}} | Définition initiale. | | {{cssinfo}} diff --git a/files/fr/web/css/background-position-x/index.md b/files/fr/web/css/background-position-x/index.md index 03d62fdef2..c8ed834f44 100644 --- a/files/fr/web/css/background-position-x/index.md +++ b/files/fr/web/css/background-position-x/index.md @@ -16,7 +16,7 @@ Pour plus d'informations, se référer à la documentation de la propriété {{c {{EmbedInteractiveExample("pages/css/background-position-x.html")}} -> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de `background-position-x`. +> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de `background-position-x`. ## Syntaxe diff --git a/files/fr/web/css/background-position-y/index.md b/files/fr/web/css/background-position-y/index.md index ac91b537cf..8e3cdd11c1 100644 --- a/files/fr/web/css/background-position-y/index.md +++ b/files/fr/web/css/background-position-y/index.md @@ -14,7 +14,7 @@ La propriété **`background-position-y`** définit la position verticale initia {{EmbedInteractiveExample("pages/css/background-position-y.html")}} -> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration. +> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration. ## Syntaxe diff --git a/files/fr/web/css/basic-shape/index.md b/files/fr/web/css/basic-shape/index.md index 759f147f5e..bb2b9447ef 100644 --- a/files/fr/web/css/basic-shape/index.md +++ b/files/fr/web/css/basic-shape/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/basic-shape --- {{CSSRef}} -Le type **`<basic-shape>`** permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}. +Le type **`<basic-shape>`** permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}. {{EmbedInteractiveExample("pages/css/type-basic-shape.html")}} @@ -85,7 +85,7 @@ Les arguments qui ne sont pas définis ci-avant suivent cette syntaxe : Les valeurs d'une fonction `<basic-shape>` sont calculées comme indiqué, avec ces exceptions : - Les valeurs absentes sont incluses et leurs valeurs calculées sont leurs valeurs par défaut. -- Une valeur {{cssxref("<position>")}} pour `circle()` ou `ellipse()` est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage. +- Une valeur {{cssxref("<position>")}} pour `circle()` ou `ellipse()` est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage. - Pour `inset()`, une valeur {{cssxref("border-radius")}} est calculée comme une liste développée de de huit valeurs {{cssxref("length")}} ou de huit pourcentages. ## L'interpolation des formes simples diff --git a/files/fr/web/css/border-block-end-color/index.md b/files/fr/web/css/border-block-end-color/index.md index 0ec14f6de2..3c10d3fcd5 100644 --- a/files/fr/web/css/border-block-end-color/index.md +++ b/files/fr/web/css/border-block-end-color/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-block-end-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-end-color.html")}} diff --git a/files/fr/web/css/border-block-end-style/index.md b/files/fr/web/css/border-block-end-style/index.md index 4ca9575ace..15d3b4c18d 100644 --- a/files/fr/web/css/border-block-end-style/index.md +++ b/files/fr/web/css/border-block-end-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-block-end-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-end-style.html")}} diff --git a/files/fr/web/css/border-block-end-width/index.md b/files/fr/web/css/border-block-end-width/index.md index 114e01a91e..57c32bf80c 100644 --- a/files/fr/web/css/border-block-end-width/index.md +++ b/files/fr/web/css/border-block-end-width/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-block-end-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-end-width`** définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-end-width`** définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-end-width.html")}} diff --git a/files/fr/web/css/border-block-end/index.md b/files/fr/web/css/border-block-end/index.md index e449f9d7a3..058f278605 100644 --- a/files/fr/web/css/border-block-end/index.md +++ b/files/fr/web/css/border-block-end/index.md @@ -14,7 +14,7 @@ La propriété **`border-block-end`** est une propriété raccourcie qui permet {{EmbedInteractiveExample("pages/css/border-block-end.html")}} -Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : diff --git a/files/fr/web/css/border-block-start-color/index.md b/files/fr/web/css/border-block-start-color/index.md index e2330aab8f..4c7398898b 100644 --- a/files/fr/web/css/border-block-start-color/index.md +++ b/files/fr/web/css/border-block-start-color/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-block-start-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-start-color.html")}} diff --git a/files/fr/web/css/border-block-start-style/index.md b/files/fr/web/css/border-block-start-style/index.md index ddf1ca944b..531b72bb5c 100644 --- a/files/fr/web/css/border-block-start-style/index.md +++ b/files/fr/web/css/border-block-start-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-block-start-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-start-style.html")}} diff --git a/files/fr/web/css/border-block-start-width/index.md b/files/fr/web/css/border-block-start-width/index.md index 06219322dd..06e02919a1 100644 --- a/files/fr/web/css/border-block-start-width/index.md +++ b/files/fr/web/css/border-block-start-width/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-block-start-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-start-width`** définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-start-width`** définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-start-width.html")}} diff --git a/files/fr/web/css/border-block-start/index.md b/files/fr/web/css/border-block-start/index.md index e57a88172e..044c96e803 100644 --- a/files/fr/web/css/border-block-start/index.md +++ b/files/fr/web/css/border-block-start/index.md @@ -14,7 +14,7 @@ La propriété **`border-block-start`** est une propriété raccourcie qui perme {{EmbedInteractiveExample("pages/css/border-block-start.html")}} -Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : diff --git a/files/fr/web/css/border-block-width/index.md b/files/fr/web/css/border-block-width/index.md index eda1599a20..df5fdd60b9 100644 --- a/files/fr/web/css/border-block-width/index.md +++ b/files/fr/web/css/border-block-width/index.md @@ -20,7 +20,7 @@ border-block-width: 5px; border-block-width: thick; ``` -The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}. +The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}. {{cssinfo}} @@ -77,5 +77,5 @@ div { ## Voir aussi -- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} +- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} - {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/border-bottom-left-radius/index.md b/files/fr/web/css/border-bottom-left-radius/index.md index ce5f525dba..af1a59c803 100644 --- a/files/fr/web/css/border-bottom-left-radius/index.md +++ b/files/fr/web/css/border-bottom-left-radius/index.md @@ -88,10 +88,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-bottom-right-radius/index.md b/files/fr/web/css/border-bottom-right-radius/index.md index 1295e667a0..105daffed7 100644 --- a/files/fr/web/css/border-bottom-right-radius/index.md +++ b/files/fr/web/css/border-bottom-right-radius/index.md @@ -88,10 +88,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-end-end-radius/index.md b/files/fr/web/css/border-end-end-radius/index.md index 55f37d7d98..51d1a563c5 100644 --- a/files/fr/web/css/border-end-end-radius/index.md +++ b/files/fr/web/css/border-end-end-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-end-end-radius: 10px; + border-end-end-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-end-end-radius: 10px; + border-end-end-radius: 10px; } ``` diff --git a/files/fr/web/css/border-end-start-radius/index.md b/files/fr/web/css/border-end-start-radius/index.md index 3278a15a09..3f0d1a5269 100644 --- a/files/fr/web/css/border-end-start-radius/index.md +++ b/files/fr/web/css/border-end-start-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-end-start-radius: 10px; + border-end-start-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-end-start-radius: 10px; + border-end-start-radius: 10px; } ``` diff --git a/files/fr/web/css/border-inline-end-color/index.md b/files/fr/web/css/border-inline-end-color/index.md index a94c5a31da..8b5576c33f 100644 --- a/files/fr/web/css/border-inline-end-color/index.md +++ b/files/fr/web/css/border-inline-end-color/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-end-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}} diff --git a/files/fr/web/css/border-inline-end-style/index.md b/files/fr/web/css/border-inline-end-style/index.md index 24047c8bd9..524d5e1abf 100644 --- a/files/fr/web/css/border-inline-end-style/index.md +++ b/files/fr/web/css/border-inline-end-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-end-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}} diff --git a/files/fr/web/css/border-inline-end-width/index.md b/files/fr/web/css/border-inline-end-width/index.md index c348f4e6bc..73c3019d47 100644 --- a/files/fr/web/css/border-inline-end-width/index.md +++ b/files/fr/web/css/border-inline-end-width/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-end-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-end-width`** définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-end-width`** définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}} diff --git a/files/fr/web/css/border-inline-end/index.md b/files/fr/web/css/border-inline-end/index.md index 46b6334f11..7d43dac070 100644 --- a/files/fr/web/css/border-inline-end/index.md +++ b/files/fr/web/css/border-inline-end/index.md @@ -14,7 +14,7 @@ La propriété **`border-inline-end`** est une propriété raccourcie qui permet {{EmbedInteractiveExample("pages/css/border-inline-end.html")}} -Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : diff --git a/files/fr/web/css/border-inline-start-color/index.md b/files/fr/web/css/border-inline-start-color/index.md index 36dd98be35..ce24365c8f 100644 --- a/files/fr/web/css/border-inline-start-color/index.md +++ b/files/fr/web/css/border-inline-start-color/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-inline-start-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}} diff --git a/files/fr/web/css/border-inline-start-style/index.md b/files/fr/web/css/border-inline-start-style/index.md index 77aa7d211a..99aba40c7b 100644 --- a/files/fr/web/css/border-inline-start-style/index.md +++ b/files/fr/web/css/border-inline-start-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-start-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}} diff --git a/files/fr/web/css/border-inline-start-width/index.md b/files/fr/web/css/border-inline-start-width/index.md index abbb5ca252..88c3a08115 100644 --- a/files/fr/web/css/border-inline-start-width/index.md +++ b/files/fr/web/css/border-inline-start-width/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-inline-start-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-start-width`** définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-start-width`** définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}} diff --git a/files/fr/web/css/border-inline-width/index.md b/files/fr/web/css/border-inline-width/index.md index 79285d5a85..2deb0c5d71 100644 --- a/files/fr/web/css/border-inline-width/index.md +++ b/files/fr/web/css/border-inline-width/index.md @@ -20,7 +20,7 @@ border-inline-width: 5px; border-inline-width: thick; ``` -The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}. +The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}. ## Syntaxe @@ -77,5 +77,5 @@ div { ## Voir aussi -- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} +- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} - {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/border-spacing/index.md b/files/fr/web/css/border-spacing/index.md index 20248d7b61..80257a448b 100644 --- a/files/fr/web/css/border-spacing/index.md +++ b/files/fr/web/css/border-spacing/index.md @@ -14,7 +14,7 @@ La propriété **`border-spacing`** définit la distance qu'il y a entre les bor {{EmbedInteractiveExample("pages/css/border-spacing.html")}} -La valeur de `border-spacing` est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du `border-spacing` approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left). +La valeur de `border-spacing` est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du `border-spacing` approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left). > **Note :** La propriété `border-spacing` équivaut à l'attribut déprécié `cellspacing` de l'élément `<table>`, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux. @@ -62,7 +62,7 @@ table { td { border: 1px solid #000; - padding: 5px; + padding: 5px; } .unevaleur { diff --git a/files/fr/web/css/border-start-end-radius/index.md b/files/fr/web/css/border-start-end-radius/index.md index 8be51ce81f..8270ffcd1b 100644 --- a/files/fr/web/css/border-start-end-radius/index.md +++ b/files/fr/web/css/border-start-end-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-start-end-radius: 10px; + border-start-end-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-start-end-radius: 10px; + border-start-end-radius: 10px; } ``` diff --git a/files/fr/web/css/border-start-start-radius/index.md b/files/fr/web/css/border-start-start-radius/index.md index 6396962872..13812605cc 100644 --- a/files/fr/web/css/border-start-start-radius/index.md +++ b/files/fr/web/css/border-start-start-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-start-start-radius: 10px; + border-start-start-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-start-start-radius: 10px; + border-start-start-radius: 10px; } ``` diff --git a/files/fr/web/css/border-top-left-radius/index.md b/files/fr/web/css/border-top-left-radius/index.md index c6de181fc3..41f804e617 100644 --- a/files/fr/web/css/border-top-left-radius/index.md +++ b/files/fr/web/css/border-top-left-radius/index.md @@ -83,10 +83,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-top-right-radius/index.md b/files/fr/web/css/border-top-right-radius/index.md index 1032da0ec7..691b9bfc7f 100644 --- a/files/fr/web/css/border-top-right-radius/index.md +++ b/files/fr/web/css/border-top-right-radius/index.md @@ -85,10 +85,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-width/index.md b/files/fr/web/css/border-width/index.md index b4a0b769d6..cf552c7a8b 100644 --- a/files/fr/web/css/border-width/index.md +++ b/files/fr/web/css/border-width/index.md @@ -126,7 +126,7 @@ La propriété `border-width` peut être définie avec une, deux, trois ou quatr } p { - width: auto; + width: auto; margin: 0.25em; padding: 0.25em; } diff --git a/files/fr/web/css/bottom/index.md b/files/fr/web/css/bottom/index.md index ff56016ccf..9cc24e6f45 100644 --- a/files/fr/web/css/bottom/index.md +++ b/files/fr/web/css/bottom/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/bottom La propriété **`bottom`** contribue à la définition de l'emplacement vertical des [éléments positionnés](/fr/docs/Web/CSS/position). Elle n'a aucun effet pour les éléments non-positionnés. -{{EmbedInteractiveExample("pages/css/bottom.html")}}Pour les **éléments positionnés de façon absolue**, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut `absolute` ou `fixed`, la propriété `bottom` définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément. +{{EmbedInteractiveExample("pages/css/bottom.html")}}Pour les **éléments positionnés de façon absolue**, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut `absolute` ou `fixed`, la propriété `bottom` définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément. Pour les **éléments positionnés de façon relative**, c'est-à-dire ceux dont la valeur de propriété {{cssxref("position")}} est `relative`, la propriété `bottom` définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale. diff --git a/files/fr/web/css/box-orient/index.md b/files/fr/web/css/box-orient/index.md index 2ca254e1d1..eb3568c30f 100644 --- a/files/fr/web/css/box-orient/index.md +++ b/files/fr/web/css/box-orient/index.md @@ -29,7 +29,7 @@ box-orient: initial; box-orient: unset; ``` -Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que {{XULElem("vbox")}} organise son contenu de façon verticale par défaut. +Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que {{XULElem("vbox")}} organise son contenu de façon verticale par défaut. Les éléments HTML disposent leurs contenus selon l'axe _inline_ par défaut. Cette propriété CSS ne s'applique qu'aux éléments HTML pour lesquels la propriété {{cssxref("display")}} vaut {{cssxref("box")}} ou {{cssxref("inline-box")}}. diff --git a/files/fr/web/css/box-pack/index.md b/files/fr/web/css/box-pack/index.md index ac0ce20858..4fba78cd7a 100644 --- a/files/fr/web/css/box-pack/index.md +++ b/files/fr/web/css/box-pack/index.md @@ -77,8 +77,8 @@ div.exemple { -webkit-box-align: center; /* WebKit */ /* On groupe les éléments fils en bas de la boîte */ - -moz-box-pack: end; /* Mozilla */ - -webkit-box-pack: end; /* WebKit */ + -moz-box-pack: end; /* Mozilla */ + -webkit-box-pack: end; /* WebKit */ } div.exemple p { @@ -108,7 +108,7 @@ Le « début » et la « fin » de la boîte dépendent de l'orientation et de l <table class="standard-table"> <tbody> <tr> - <th> </th> + <th></th> <th><strong>Normal</strong></th> <th><strong>Inverse</strong></th> </tr> diff --git a/files/fr/web/css/box-sizing/index.md b/files/fr/web/css/box-sizing/index.md index 02c3527212..bca6e68f6b 100644 --- a/files/fr/web/css/box-sizing/index.md +++ b/files/fr/web/css/box-sizing/index.md @@ -29,7 +29,7 @@ La propriété `box-sizing` peut être utilisée afin d'ajuster ce comportement - `content-box` est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée. - `border-box` indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments. -> **Note :** Il est souvent utile de définir `box-sizing` à `border-box` aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu. D'autre part, lors de l'utilisation de la `position: relative` ou `position: absolute`, l'utilisation de `box-sizing: content-box` permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable. +> **Note :** Il est souvent utile de définir `box-sizing` à `border-box` aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu. D'autre part, lors de l'utilisation de la `position: relative` ou `position: absolute`, l'utilisation de `box-sizing: content-box` permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable. ## Syntaxe @@ -49,7 +49,7 @@ La propriété `box-sizing` peut être définie avec l'un des mots-clés suivant ### Valeurs - `content-box` - - : C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (_padding_)). Ainsi, `.box {width: 350px; border:10px solid black;}` fournira une boîte dont la largeur vaut `370px`. + - : C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (_padding_)). Ainsi, `.box {width: 350px; border:10px solid black;}` fournira une boîte dont la largeur vaut `370px`. - `border-box` - : Les propriétés {{cssxref("width")}} et {{cssxref("height")}} incluent le contenu, le remplissage (_padding_), la bordure, mais pas la marge. C'est le [modèle de boîte](/fr/docs/CSS/Modèle_de_boîte) utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser `border-box` pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (_padding_) et du contenu. diff --git a/files/fr/web/css/calc()/index.md b/files/fr/web/css/calc()/index.md index 1131d1c309..514e951b1a 100644 --- a/files/fr/web/css/calc()/index.md +++ b/files/fr/web/css/calc()/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/calc() --- {{CSSRef}} -La fonction **`calc()`** peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à `calc()`, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. +La fonction **`calc()`** peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à `calc()`, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. ```css /* property: calc(expression) */ @@ -39,7 +39,7 @@ L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur - Une division par zéro aboutit à une erreur qui est générée par le parseur HTML. - Les opérateurs `+` et `-` **doivent toujours être entouré d'espaces**. Par exemple l'opérande de `calc(50% -8px)` sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de `calc(50% - 8px)` est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, `calc(8px + -50%)` est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif. - Les opérateurs `*` et `/` ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé. -- Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était `auto` qui avait été utilisé. +- Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était `auto` qui avait été utilisé. - Il est possible d'imbriquer des fonctions `calc()`, auquel cas, les appels « internes » sont considérés comme des parenthèses. ### Syntaxe formelle @@ -50,7 +50,7 @@ L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur ### Positionner un objet sur l’écran avec une marge -`calc()` rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre : +`calc()` rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre : ```css .banniere { diff --git a/files/fr/web/css/child_combinator/index.md b/files/fr/web/css/child_combinator/index.md index b53d3eda68..8ad93c987f 100644 --- a/files/fr/web/css/child_combinator/index.md +++ b/files/fr/web/css/child_combinator/index.md @@ -60,7 +60,7 @@ div > span { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}} | {{Spec2('CSS4 Selectors')}} | | +| {{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}} | {{Spec2('CSS4 Selectors')}} | | | {{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | | {{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}} | {{Spec2('CSS2.1')}} | Définition initiale. | diff --git a/files/fr/web/css/clamp()/index.md b/files/fr/web/css/clamp()/index.md index f9b2c755f8..f692d1920f 100644 --- a/files/fr/web/css/clamp()/index.md +++ b/files/fr/web/css/clamp()/index.md @@ -9,9 +9,9 @@ translation_of: Web/CSS/clamp() --- {{CSSRef}} -La fonction CSS **`clamp()`** permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction `clamp()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} peut être utilisée. +La fonction CSS **`clamp()`** permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction `clamp()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} peut être utilisée. -> **Note :** l'expression `clamp(MIN, VAL, MAX)` sera résolue comme `max(MIN, min(VAL, MAX)))`. +> **Note :** l'expression `clamp(MIN, VAL, MAX)` sera résolue comme `max(MIN, min(VAL, MAX)))`. ```css width: clamp(10px, 4em, 80px); @@ -41,7 +41,7 @@ La valeur préférée correspond à la valeur qui sera utilisée si elle est sup La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure. -Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans `calc()` et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées. +Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans `calc()` et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées. Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions. @@ -89,7 +89,7 @@ Ici on utilise l'unité `rem` pour fixer un maximum correspondant à deux fois l | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}} | {{Spec2('CSS4 Values')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/class_selectors/index.md b/files/fr/web/css/class_selectors/index.md index 1d44d777df..85535097ed 100644 --- a/files/fr/web/css/class_selectors/index.md +++ b/files/fr/web/css/class_selectors/index.md @@ -70,8 +70,8 @@ Cela est exactement équivalent à l'utilisation du [sélecteur d'attribut](/fr/ | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | | {{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | -| {{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS3 Selectors')}} | | -| {{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1', '#class-as-selector', 'child selectors')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/clip-path/index.md b/files/fr/web/css/clip-path/index.md index 6f036cfd9b..8bf96194ff 100644 --- a/files/fr/web/css/clip-path/index.md +++ b/files/fr/web/css/clip-path/index.md @@ -492,10 +492,10 @@ p { .shape1 { clip-path: circle(25%); } .shape2 { clip-path: circle(25% at 25% 25%); } .shape3 { clip-path: fill-box circle(25% at 25% 25%); } -.shape4 { clip-path: stroke-box circle(25% at 25% 25%); } +.shape4 { clip-path: stroke-box circle(25% at 25% 25%); } .shape5 { clip-path: view-box circle(25% at 25% 25%); } -.shape6 { clip-path: margin-box circle(25% at 25% 25%); } -.shape7 { clip-path: border-box circle(25% at 25% 25%); } +.shape6 { clip-path: margin-box circle(25% at 25% 25%); } +.shape7 { clip-path: border-box circle(25% at 25% 25%); } .shape8 { clip-path: padding-box circle(25% at 25% 25%); } .shape9 { clip-path: content-box circle(25% at 25% 25%); } diff --git a/files/fr/web/css/clip/index.md b/files/fr/web/css/clip/index.md index 21947f1069..4d07894cb9 100644 --- a/files/fr/web/css/clip/index.md +++ b/files/fr/web/css/clip/index.md @@ -99,7 +99,7 @@ clip: unset; | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS Masks', '#clip-property', 'clip')}} | {{Spec2('CSS Masks')}} | Dépréciation de la propriété `clip` et proposition de {{cssxref("clip-path")}} comme remplacement. | +| {{SpecName('CSS Masks', '#clip-property', 'clip')}} | {{Spec2('CSS Masks')}} | Dépréciation de la propriété `clip` et proposition de {{cssxref("clip-path")}} comme remplacement. | | {{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}} | {{Spec2('CSS3 Transitions')}} | `clip` peut être animée. | | {{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}} | {{Spec2('CSS2.1')}} | Définition initiale. | diff --git a/files/fr/web/css/color-scheme/index.md b/files/fr/web/css/color-scheme/index.md index 0f4b726826..04118a45b9 100644 --- a/files/fr/web/css/color-scheme/index.md +++ b/files/fr/web/css/color-scheme/index.md @@ -67,6 +67,6 @@ Pour activer la préférence de jeu de couleurs de l'utilisateur sur l'ensemble ## Voir aussi - [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color) -- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} +- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} - {{cssxref("background-image")}} - {{cssxref("-webkit-print-color-adjust")}} diff --git a/files/fr/web/css/color/index.md b/files/fr/web/css/color/index.md index 0922b430ee..52cffcaca6 100644 --- a/files/fr/web/css/color/index.md +++ b/files/fr/web/css/color/index.md @@ -95,11 +95,11 @@ La propriété `color` est définie grâce à une valeur de type {{cssxref("< En passant elle prit sur un rayon un pot de confiture portant cette étiquette, <span class="confiture"> - « MARMELADE D’ORANGES. » + « MARMELADE D’ORANGES. » </span> - Mais, à son grand regret, le pot était vide : + Mais, à son grand regret, le pot était vide : elle n’osait le laisser tomber dans la crainte - de tuer quelqu’un ; aussi s’arrangea-t-elle de + de tuer quelqu’un ; aussi s’arrangea-t-elle de manière à le déposer en passant dans une des armoires. </p> diff --git a/files/fr/web/css/color_value/index.md b/files/fr/web/css/color_value/index.md index d658dfd023..55f729a490 100644 --- a/files/fr/web/css/color_value/index.md +++ b/files/fr/web/css/color_value/index.md @@ -12,7 +12,7 @@ original_slug: Web/CSS/Type_color Le type de données CSS **`<color>`** permet de représenter des couleurs dans [l'espace de couleurs sRGB](https://fr.wikipedia.org/wiki/SRGB). Une couleur pourra être décrite de trois façons : -- grâce à un mot-clé (comme `blue` ou `transparent` par exemple) +- grâce à un mot-clé (comme `blue` ou `transparent` par exemple) - en utilisant [le système de coordonnées cubiques RGB](https://fr.wikipedia.org/wiki/Couleur_du_Web#Triplet_hexad.C3.A9cimal) (grâce à la notation #-hexadecimal ou aux notations fonctionnelles `rgb()` et `rgba()`) - en utilisant [le système de coordonnées cylindriques HSL](https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re) (grâce aux notations fonctionnelles `hsl()` et `hsla()`) diff --git a/files/fr/web/css/columns/index.md b/files/fr/web/css/columns/index.md index 71a22e246c..52528a656d 100644 --- a/files/fr/web/css/columns/index.md +++ b/files/fr/web/css/columns/index.md @@ -57,10 +57,10 @@ La propriété `columns` se définit avec un ou deux valeurs parmi celles décri ```css .exemple { - margin: 0; - height: 90px; - border: 3px solid black; - columns: 3; + margin: 0; + height: 90px; + border: 3px solid black; + columns: 3; } ``` diff --git a/files/fr/web/css/contain/index.md b/files/fr/web/css/contain/index.md index dd2b464a31..7f7cb4ca5f 100644 --- a/files/fr/web/css/contain/index.md +++ b/files/fr/web/css/contain/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/contain --- {{CSSRef}}{{SeeCompatTable}} -La propriété CSS **`contain`** permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les _peintures_ ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète. +La propriété CSS **`contain`** permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les _peintures_ ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète. ```css /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/containing_block/index.md b/files/fr/web/css/containing_block/index.md index 386a998680..2587b0cff0 100644 --- a/files/fr/web/css/containing_block/index.md +++ b/files/fr/web/css/containing_block/index.md @@ -35,7 +35,7 @@ Les dimensions et la position d'un élément sont souvent dépendants du bloc en Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément : -- Si la propriété `position` vaut **`static`**, **`relative`** ou **`sticky`**, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec `display` qui vaut `inline-block`, `block` ou `list-item`) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même). +- Si la propriété `position` vaut **`static`**, **`relative`** ou **`sticky`**, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec `display` qui vaut `inline-block`, `block` ou `list-item`) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même). - Si la propriété `position` vaut **`absolute`**, le bloc englobant est constitué par le bord de la boîte de remplissage (_padding_) de l'ancêtre le plus proche dont la valeur de `position` est différente de `static` (`fixed`, `absolute`, `relative` ou `sticky`). - Si la propriété `position` vaut **`fixed`**, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés). - Si la propriété `position` vaut **`absolute`** ou `fixed`, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a : diff --git a/files/fr/web/css/counter()/index.md b/files/fr/web/css/counter()/index.md index beaca7828e..659de2ece3 100644 --- a/files/fr/web/css/counter()/index.md +++ b/files/fr/web/css/counter()/index.md @@ -29,7 +29,7 @@ Un [compteur](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) CSS n' ### Valeurs - {{cssxref("<custom-ident>")}} - - : Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés `none`, `unset`, `initial` ou `inherit`. + - : Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés `none`, `unset`, `initial` ou `inherit`. - `<counter-style>` - : Un nom de style de compteur ou une fonction [`symbols()`](</fr/docs/Web/CSS/symbols()>). Le nom d'un style de compteur peut indiquer un compteur [alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien](/fr/docs/Web/CSS/list-style-type#valeurs) ou un autre [style de compteur prédéfini](/fr/docs/Web/CSS/CSS_Counter_Styles). Si cette valeur n'est pas fournie, le style par défaut est décimal. - `none` @@ -63,7 +63,7 @@ li { counter-increment: listCounter; } li::after { - content: "[" counter(listCounter) "] == [" + content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]"; } ``` diff --git a/files/fr/web/css/counter-set/index.md b/files/fr/web/css/counter-set/index.md index a2c2cbe72b..de8d517491 100644 --- a/files/fr/web/css/counter-set/index.md +++ b/files/fr/web/css/counter-set/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/counter-set --- {{CSSRef}} -La propriété CSS **`counter-set`** définit un [compteur CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS) avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément. +La propriété CSS **`counter-set`** définit un [compteur CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS) avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément. > **Note :** La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}. diff --git a/files/fr/web/css/counters()/index.md b/files/fr/web/css/counters()/index.md index 96ed5b7e88..b663dfb9ed 100644 --- a/files/fr/web/css/counters()/index.md +++ b/files/fr/web/css/counters()/index.md @@ -90,7 +90,7 @@ li::marker { content: counters(listCounter, '.', upper-roman) ') '; } li::before { - content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ; + content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ; } ``` @@ -141,7 +141,7 @@ li::marker { content: counters(count, '.', upper-alpha) ') '; } li::before { - content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); + content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); } ``` diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.md b/files/fr/web/css/css_animations/detecting_css_animation_support/index.md index de84d1848a..1000237d2c 100644 --- a/files/fr/web/css/css_animations/detecting_css_animation_support/index.md +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.md @@ -24,7 +24,7 @@ var animation = false, keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = '', - elem = document.createElement('div'); + elem = document.createElement('div'); if( elem.style.animationName !== undefined ) { animation = true; } @@ -43,7 +43,7 @@ if( animation === false ) { Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant `animation` avec `false`. On utilise la chaîne de caractères `animationstring` avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable `pfx` qu'on définit pour le moment avec la chaîne vide. -Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}} on est définie sur l'élément représenté par la variable `elem`. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe. +Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}} on est définie sur l'élément représenté par la variable `elem`. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe. Si le navigateur ne prend pas en charge la version sans préfixe et que `animation` vaut toujours `false`, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de `AnimationName` de la même façon. diff --git a/files/fr/web/css/css_animations/tips/index.md b/files/fr/web/css/css_animations/tips/index.md index 2f3ea5c601..a8e36ee3c4 100644 --- a/files/fr/web/css/css_animations/tips/index.md +++ b/files/fr/web/css/css_animations/tips/index.md @@ -107,7 +107,7 @@ document.querySelector(".runButton").addEventListener("click", play, false); Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes : -1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur `animation-direction: alternate`. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle. +1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur `animation-direction: alternate`. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle. 2. Utiliser JavaScript pour retirer l'animation lorsque l'évènement `animationiteration` se déclenche. Ces pistes sont utilisées dans la démonstration suivante : diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.md b/files/fr/web/css/css_backgrounds_and_borders/index.md index cfcdb58e26..7aeead0149 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/index.md @@ -83,6 +83,6 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('CSS3 Backgrounds')}} | {{Spec2('CSS3 Backgrounds')}} | | -| {{SpecName('CSS2.1', 'box.html')}} | {{Spec2('CSS2.1')}} | | -| {{SpecName('CSS1', '#border')}} | {{Spec2('CSS1')}} | | +| {{SpecName('CSS3 Backgrounds')}} | {{Spec2('CSS3 Backgrounds')}} | | +| {{SpecName('CSS2.1', 'box.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS1', '#border')}} | {{Spec2('CSS1')}} | | diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md index 6688539186..d340b7c1de 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md @@ -11,11 +11,11 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images --- {{CSSRef}} -La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image. +La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image. ## Carreler une image de grande taille -Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante. +Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.  @@ -33,11 +33,11 @@ On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu : } ``` -On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à `auto`. +On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à `auto`. ## Étirer une image -Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px. +Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px. ```css background-size: 300px 150px; @@ -69,13 +69,13 @@ On remarque que la feuille de style utilisée est identique à la précédente, ## Valeurs spéciales : `contain` et `cover` -En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : `contain` et `cover`. +En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : `contain` et `cover`. ### `contain` La valeur `contain` spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur. -Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur `contain` en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan). +Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur `contain` en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan). {{EmbedLiveSample("contain", "100%", "220")}} diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md index 54bb94fdb9..e9a1c0b2a5 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md @@ -45,9 +45,9 @@ Avant l'apparition des boîtes flexibles (_flexbox_), l'alignement horizontal é ```css .container { - width: 20em; - margin-left: auto; - margin-right: auto; + width: 20em; + margin-left: auto; + margin-right: auto; } ``` diff --git a/files/fr/web/css/css_box_model/index.md b/files/fr/web/css/css_box_model/index.md index 7dbf6c1104..e7a04d0a0c 100644 --- a/files/fr/web/css/css_box_model/index.md +++ b/files/fr/web/css/css_box_model/index.md @@ -40,7 +40,7 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS - {{cssxref("margin-left")}} - {{cssxref("margin-right")}} - {{cssxref("margin-top")}} -- {{CSSxRef("margin-trim")}} {{Experimental_Inline}} +- {{CSSxRef("margin-trim")}} {{Experimental_Inline}} #### Les propriétés qui définissent le remplissage (_padding_) d'une boîte @@ -69,5 +69,5 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName("CSS3 Box")}} | {{Spec2("CSS3 Box")}} | Added `margin-trim` | -| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}} | | | {{SpecName("CSS1")}} | {{Spec2("CSS1")}} | Définition initiale. | diff --git a/files/fr/web/css/css_color/index.md b/files/fr/web/css/css_color/index.md index 2ebf2f0b60..ebcaef8a8b 100644 --- a/files/fr/web/css/css_color/index.md +++ b/files/fr/web/css/css_color/index.md @@ -40,9 +40,9 @@ translation_of: Web/CSS/CSS_Color | Spécification | État | Commentaires | | ------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('CSS4 Colors')}} | {{Spec2('CSS4 Colors')}} | | -| {{SpecName('CSS3 Colors')}} | {{Spec2('CSS3 Colors')}} | | -| {{SpecName('CSS2.1', 'colors.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS4 Colors')}} | {{Spec2('CSS4 Colors')}} | | +| {{SpecName('CSS3 Colors')}} | {{Spec2('CSS3 Colors')}} | | +| {{SpecName('CSS2.1', 'colors.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md index 74f2583388..8a518d5223 100644 --- a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md @@ -71,7 +71,7 @@ La [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) `columns` Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où `column-count` vaut 3. .container { - columns: 3; + columns: 3; } Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où `column-width` vaut `200px`. diff --git a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md index f2e6f0e060..d191290e31 100644 --- a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md @@ -52,7 +52,7 @@ Avec l'exemple suivant, on force une rupture avant chaque élément de titre `h2 ## Les ruptures entre les lignes -On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété `orphans` contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété `widows` contrôle le nombre de lignes qui restent au début d'un fragment. +On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété `orphans` contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété `widows` contrôle le nombre de lignes qui restent au début d'un fragment. Les propriétés `orphans` et `widows` prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble. diff --git a/files/fr/web/css/css_columns/index.md b/files/fr/web/css/css_columns/index.md index e5d4cc5ffa..4e62a99372 100644 --- a/files/fr/web/css/css_columns/index.md +++ b/files/fr/web/css/css_columns/index.md @@ -14,7 +14,7 @@ translation_of: Web/CSS/CSS_Columns ## Exemple simple -Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}} sur l'élément qui possède la classe `container`. La valeur de la propriété `column-count` est `3`, et le contenu est donc arrangé entre trois colonnes de tailles égales. +Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}} sur l'élément qui possède la classe `container`. La valeur de la propriété `column-count` est `3`, et le contenu est donc arrangé entre trois colonnes de tailles égales. {{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}} diff --git a/files/fr/web/css/css_columns/using_multi-column_layouts/index.md b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md index faf44e11f3..55695a1a37 100644 --- a/files/fr/web/css/css_columns/using_multi-column_layouts/index.md +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md @@ -34,23 +34,23 @@ On utilisera la propriété `column-count` pour définir le nombre de colonnes q ```html <div id="col"> - <p> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. - </p> - <p> - Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. - </p> - <p> - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. - </p> - <p> - Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - </p> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. + </p> + <p> + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. + </p> + <p> + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. + </p> + <p> + Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + </p> </div> ``` @@ -76,14 +76,14 @@ La propriété `column-width` permet quant à elle de définir la largeur minima ```html <div id="wid"> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum </div> ``` @@ -111,14 +111,14 @@ Ainsi, la déclaration `column-width:12em` pourra être remplacée de la façon ```html <div id="col_short"> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum </div> ``` diff --git a/files/fr/web/css/css_counter_styles/using_css_counters/index.md b/files/fr/web/css/css_counter_styles/using_css_counters/index.md index f37a4b8ca4..f2d8ef91e3 100644 --- a/files/fr/web/css/css_counter_styles/using_css_counters/index.md +++ b/files/fr/web/css/css_counter_styles/using_css_counters/index.md @@ -18,7 +18,7 @@ La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref( ### Manipuler la valeur d'un compteur -Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être `none`, `inherit` ou `initial`. +Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être `none`, `inherit` ou `initial`. ### Afficher un compteur diff --git a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md index 62be3b5fb5..7ec7f854e0 100644 --- a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md +++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md @@ -139,7 +139,7 @@ La propriété {{cssxref("flex-flow")}} est [une propriété raccourcie](/fr/doc ### `order` -La propriété {{cssxref("order")}} contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux. +La propriété {{cssxref("order")}} contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux. - Valeur : un entier ({{cssxref("<integer>")}} (0 est la valeur par défaut) - [Spécification](https://drafts.csswg.org/css-flexbox/#order-property) diff --git a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md index 9ae3730f10..c35dc8ba21 100644 --- a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md +++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md @@ -44,7 +44,7 @@ Avant de rentrer dans le détail des propriétés, définissons certains concept Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ? -CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis [dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque](https://drafts.csswg.org/css-sizing-3/#width-height-keywords) et ces valeurs peuvent être utilisées comme [unité de longueurs](/fr/docs/Web/CSS/length). +CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis [dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque](https://drafts.csswg.org/css-sizing-3/#width-height-keywords) et ces valeurs peuvent être utilisées comme [unité de longueurs](/fr/docs/Web/CSS/length). Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est `min-content`. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur `min-content` correspond à la taille du plus grand mot du paragraphe. @@ -74,7 +74,7 @@ Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-dir ## La propriété `flex-basis` -La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est `auto`. Si `flex-basis` vaut `auto`, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour `flex-basis` (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour `flex-basis` pour cet élément). +La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est `auto`. Si `flex-basis` vaut `auto`, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour `flex-basis` (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour `flex-basis` pour cet élément). Si la taille initiale de l'élément n'est pas définie de façon absolue, `auto` correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de `min-` et `max-content`, car la boîte flexible utilisera `max-content` comme valeur pour `flex-basis`. Dans l'exemple suivant, nous verrons comment en tirer parti. @@ -152,7 +152,7 @@ Le premier, expliqué de façon subtile dans la spécification est la différenc > “Note : Le coefficient `flex-shrink` est multiplié par la taille de base (`flex-basis`) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.” -Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille `min-content` — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles. +Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille `min-content` — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles. On peut observer ce seuil avec `min-content` dans l'exemple qui suit où `flex-basis` est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que `min-content`. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément. @@ -174,10 +174,10 @@ Comprendre le dimensionnement des objets flexibles revient avant tout à compren ### Quelle est la taille de base de l'objet ? -1. Si `flex-basis` vaut `auto` et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée. -2. Si `flex-basis` vaut `auto` ou `content` (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément +1. Si `flex-basis` vaut `auto` et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée. +2. Si `flex-basis` vaut `auto` ou `content` (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément 3. Si `flex-basis` est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément. -4. Si `flex-basis` vaut `0`, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace. +4. Si `flex-basis` vaut `0`, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace. ### De l'espace est-il disponible ? diff --git a/files/fr/web/css/css_flexible_box_layout/index.md b/files/fr/web/css/css_flexible_box_layout/index.md index 96526e656d..f10fc12be3 100644 --- a/files/fr/web/css/css_flexible_box_layout/index.md +++ b/files/fr/web/css/css_flexible_box_layout/index.md @@ -15,7 +15,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout ## Exemple -Dans l'exemple qui suit, on utilise `display: flex` pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété `justify-content` a été paramétrée avec la valeur `space-between` afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (_cross axis_) car la valeur par défaut de la propriété `align-items` est `stretch`. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments. +Dans l'exemple qui suit, on utilise `display: flex` pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété `justify-content` a été paramétrée avec la valeur `space-between` afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (_cross axis_) car la valeur par défaut de la propriété `align-items` est `stretch`. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments. {{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}} diff --git a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 195322f484..8c22214d0f 100644 --- a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -73,7 +73,7 @@ Cette contrainte sera levée lorsque les propriétés de gouttières seront impl La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique `visibility: collapse` (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit : -> “Indiquer `visibility:collapse` sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de `visibility:collapse` sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - [Éléments repliés](https://www.w3.org/TR/css-flexbox-1/#visibility-collapse) +> “Indiquer `visibility:collapse` sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de `visibility:collapse` sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - [Éléments repliés](https://www.w3.org/TR/css-flexbox-1/#visibility-collapse) Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario. diff --git a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md index 87383e908a..9557dd4ecb 100644 --- a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md +++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md @@ -37,7 +37,7 @@ Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les l  -Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment `row` et `row-reverse` fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), `row` correspondrait au côté droit et `row-reverse` au côté gauche. +Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment `row` et `row-reverse` fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), `row` correspondrait au côté droit et `row-reverse` au côté gauche.  @@ -69,17 +69,17 @@ Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les vale - Premier élément selon la source : `order: 2` - Deuxième élément selon la source : `order: 3` -- Troisième élément selon la source : `order: 1` -- Quatrième élément selon la source :`order: 3` -- Cinquième élément selon la source :`order: 1` +- Troisième élément selon la source : `order: 1` +- Quatrième élément selon la source :`order: 3` +- Cinquième élément selon la source :`order: 1` Les éléments seront affichés sur la page dans l'ordre suivant : -- Troisième élément selon la source : `order: 1` -- Cinquième élément selon la source : `order: 1` -- Premier élément selon la source : `order: 2` -- Deuxième élément selon la source : `order: 3` -- Quatrième élément selon la source : `order: 3` +- Troisième élément selon la source : `order: 1` +- Cinquième élément selon la source : `order: 1` +- Premier élément selon la source : `order: 2` +- Deuxième élément selon la source : `order: 3` +- Quatrième élément selon la source : `order: 3`  diff --git a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md index ea7df31530..5c802dd3a4 100644 --- a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md +++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md @@ -35,7 +35,7 @@ Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille natu ### L'espace distribué au sein des éléments -On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). +On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera `flex: auto` qui correspond à la notation raccourcie de `flex: 1 1 auto` — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace. @@ -106,7 +106,7 @@ On peut également permettre aux deux côtés de grandir/rétrécir proportionne } ``` -On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser `flex: 1` pour le côté avec l'image et `flex: 3` pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base `flex-basis` `0` et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de `flex-grow`. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). +On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser `flex: 1` pour le côté avec l'image et `flex: 3` pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base `flex-basis` `0` et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de `flex-grow`. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). ```css .media .content { @@ -127,7 +127,7 @@ Si on souhaite échanger la position de l'image dans l'objet média pour l'affic ## Les contrôles de formulaire -Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique). +Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique). Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément `<button>` et l'élément `<input>` dans un conteneur auquel on ajoute une bordure et pour lequel on a `display: flex`. On utilise ensuite les propriétés flexibles afin de permettre à l'élément `<input>` de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible. diff --git a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md index 96a22400e7..327f825130 100644 --- a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md +++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md @@ -31,7 +31,7 @@ Au delà de l'élément racine du document (ici l'élément `html`), un nouveau - Les légendes de tableau ou les éléments avec `display: table-caption` - Les éléments de blocs pour lesquels `overflow` a une valeur différente de `visible` - `display: flow-root` -- Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, `content` ou `strict` +- Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, `content` ou `strict` - [Les élément flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox) - [Les éléments de grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base) - [Les conteneurs multi-colonnes](fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes) @@ -79,7 +79,7 @@ Dans ce guide, nous avons approfondi les notions relatives aux contextes de form ## Voir aussi -- [Contexte de formatage de bloc (ou *Block Formatting Context* (BFC) en anglais)](/fr/docs/Web/CSS/Block_formatting_context) +- [Contexte de formatage de bloc (ou *Block Formatting Context* (BFC) en anglais)](/fr/docs/Web/CSS/Block_formatting_context) - [Modèle de formatage visuel](/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle) - [Modèle de boîte CSS](/fr/docs/Web/CSS/Modèle_de_boîte_CSS) diff --git a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md index 70da8b93a5..c609aebc7f 100644 --- a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md @@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType --- {{CSSRef}} -Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (_kerning_ en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS. +Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (_kerning_ en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS. Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations. @@ -55,7 +55,7 @@ Le crénage correspond à l'espace entre les caractères pour certaines combinai Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement. -{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}} Dans ce cas, `@stylistic(alternates)` affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique `@styleset(alt-a)`, seule l'apparence de la lettre a minuscule changera. +{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}} Dans ce cas, `@stylistic(alternates)` affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique `@styleset(alt-a)`, seule l'apparence de la lettre a minuscule changera. Vous pouvez modifier : @@ -130,7 +130,7 @@ Cette caractéristique permet d'accéder à différentes formes alternatives de ### Propriété raccourcie ({{Cssxref("font-variant")}}) -La propriété raccourcie `font-variant` permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur `normal`, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant `none`, `font-variant-ligatures` vaudra `none` et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque `none` est fourni). +La propriété raccourcie `font-variant` permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur `normal`, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant `none`, `font-variant-ligatures` vaudra `none` et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque `none` est fourni). {{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}} diff --git a/files/fr/web/css/css_fonts/variable_fonts_guide/index.md b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md index c8f7e28163..bddae8fabf 100644 --- a/files/fr/web/css/css_fonts/variable_fonts_guide/index.md +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md @@ -66,9 +66,9 @@ Cette propriété fut le premier mécanisme implémenté pour tester les premiè ### La graisse (_weight_) -La graisse (représenté par l'étiquette `wght`) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que `normal` ou `bold` qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables. +La graisse (représenté par l'étiquette `wght`) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que `normal` ou `bold` qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables. -On notera qu'il n'est pas possible d'utiliser la déclaration `@font-face` afin qu'un point donné sur cet axe corresponde au mot-clé `bold` (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS : +On notera qu'il n'est pas possible d'utiliser la déclaration `@font-face` afin qu'un point donné sur cet axe corresponde au mot-clé `bold` (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS : ```css font-weight: 375; @@ -138,7 +138,7 @@ Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de `font-size` mais on peut tout à fait les manipuler avec la syntaxe de bas niveau `font-variation-settings`. -Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur `font-optical-sizing` permet uniquement d'utiliser les valeurs `auto` ou `none` et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec `font-variation-settings: 'opsz' <num>`, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour `font-size` et pour `opsz`. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique. +Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur `font-optical-sizing` permet uniquement d'utiliser les valeurs `auto` ou `none` et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec `font-variation-settings: 'opsz' <num>`, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour `font-size` et pour `opsz`. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique. ```css font-optical-sizing: auto; @@ -180,7 +180,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: normal; + font-style: normal; } ``` @@ -192,7 +192,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: oblique 0deg 20deg; + font-style: oblique 0deg 20deg; } ``` @@ -206,7 +206,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: italic; + font-style: italic; } ``` @@ -218,7 +218,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: oblique 0deg 12deg; + font-style: oblique 0deg 12deg; } ``` diff --git a/files/fr/web/css/css_generated_content/index.md b/files/fr/web/css/css_generated_content/index.md index be8fda6c8a..59f85b6e9e 100644 --- a/files/fr/web/css/css_generated_content/index.md +++ b/files/fr/web/css/css_generated_content/index.md @@ -23,5 +23,5 @@ translation_of: Web/CSS/CSS_Generated_Content | Spécification | État | Commentaires | | ------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName("CSS3 Content")}} | {{Spec2("CSS3 Content")}} | | +| {{SpecName("CSS3 Content")}} | {{Spec2("CSS3 Content")}} | | | {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md index 119d3ec21a..860c6c8a43 100644 --- a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md @@ -133,13 +133,13 @@ On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de <div>Deux</div> <div>Trois</div> <div>Quatre - <br>Cette cellule - <br>a du contenu - <br>supplémentaire - <br>et max vaut auto - <br>afin que la ligne + <br>Cette cellule + <br>a du contenu + <br>supplémentaire + <br>et max vaut auto + <br>afin que la ligne <br>se développe. - </div> + </div> <div>Five</div> </div> ``` @@ -256,7 +256,7 @@ Une grille peut contenir un mélange d'éléments. Certains éléments peuvent a ### Modification de l'ordre du document -Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _“order modified document order”_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source. +Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _“order modified document order”_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source. ### Les éléments avec des propriétés de placement @@ -508,7 +508,7 @@ Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui s {{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}} -Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément `dt` démarre sur la première ligne et que l'élément `dd` sur la ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme. +Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément `dt` démarre sur la première ligne et que l'élément `dd` sur la ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme. ### Autre exemple diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md index 2ae251e3d2..d38377a622 100644 --- a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md @@ -14,7 +14,7 @@ Chaque méthode de disposition qui implémente cette nouvelle spécification se ## Les deux axes d'une grille -Lorsqu'on manipule une grille, on dispose de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (_block layout_). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre. +Lorsqu'on manipule une grille, on dispose de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (_block layout_). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.  diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md index 2bddcda1bb..19cbf7d487 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md @@ -206,7 +206,7 @@ Les requêtes de fonctionnalité ressemblent beaucoup aux [requêtes de média]( La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante. -On utilise donc `@supports` pour vérifier la prise en charge de `display: grid`;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec `auto` pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre. +On utilise donc `@supports` pour vérifier la prise en charge de `display: grid`;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec `auto` pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md index f22c645dc6..8290c60297 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md @@ -95,7 +95,7 @@ Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement ### Mode d'écriture par défaut -Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc. +Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md index aba4861212..faae69d8ab 100644 --- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md @@ -87,9 +87,9 @@ Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de pl ```html <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -151,9 +151,9 @@ Dans l'exemple précédent, toute la grille est occupée… On peut également u ```html <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -217,9 +217,9 @@ La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n' ```html hidden <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -305,9 +305,9 @@ On peut ensuite redéfinir la disposition à l'intérieur des différentes _medi ```html hidden <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -359,9 +359,9 @@ Pour la zone dédiée à l'image, on crée une zone de grille intitulée `img` e <div class="image"></div> <div class="text"> Dans cet exemple, on peut utiliser - grid-template-areas pour échanger les + grid-template-areas pour échanger les places du texte et du media. - </div> + </div> </div> ``` @@ -410,7 +410,7 @@ Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une Dans cet exemple, on peut utiliser grid-template-areas pour échanger les places du texte et du media. - </div> + </div> </div> ``` diff --git a/files/fr/web/css/css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/index.md index 44d108bb14..c12be3bbbc 100644 --- a/files/fr/web/css/css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/index.md @@ -16,7 +16,7 @@ Comme les tableaux, la grille permet d'aligner des éléments sous forme de colo ## Un exemple simple -Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales. +Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md index 645a3b0972..a4dcf27d56 100644 --- a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md +++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md @@ -135,7 +135,7 @@ On peut placer chacun des éléments individuellement et on peut également choi ## Les propriétés raccourcies `grid-column` et `grid-row` -On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}. +On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md index 8e870e90e8..6acffcf68d 100644 --- a/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md +++ b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md @@ -39,7 +39,7 @@ Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url() } ``` -L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe `toolbtn`). +L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe `toolbtn`). De la même manière, vous pouvez faire un effet de transition au survol : diff --git a/files/fr/web/css/css_images/index.md b/files/fr/web/css/css_images/index.md index 5641ddd5f8..6fae47de3f 100644 --- a/files/fr/web/css/css_images/index.md +++ b/files/fr/web/css/css_images/index.md @@ -54,6 +54,6 @@ translation_of: Web/CSS/CSS_Images | {{SpecName("CSS4 Images")}} | {{Spec2("CSS4 Images")}} | Ajout de {{CSSxRef("image-resolution")}},{{CSSxRef("conic-gradient")}} et {{CSSxRef("_image", "image()")}}. | | {{SpecName("CSS3 Images")}} | {{Spec2("CSS3 Images")}} | Ajout de {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}} et {{CSSxRef("object-position")}} | | {{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}} | {{Spec2("Compat")}} | Standardisation de la version préfixée avec `-webkit` pour les valeurs de fonctions de dégradé | -| {{SpecName("CSS3 Values", "#urls", "<url>")}} | {{Spec2("CSS3 Values")}} | | -| {{Specname("CSS2.1", "syndata.html#uri", "<uri>")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS3 Values", "#urls", "<url>")}} | {{Spec2("CSS3 Values")}} | | +| {{Specname("CSS2.1", "syndata.html#uri", "<uri>")}} | {{Spec2("CSS2.1")}} | | | {{SpecName("CSS1", "#url", "<url>")}} | {{Spec2("CSS1")}} | Définition intiale. | diff --git a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md index 80180ce972..960e22c062 100644 --- a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md +++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md @@ -34,13 +34,13 @@ On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'un  -Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément `ul`, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments `li`. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque `li`. +Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément `ul`, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments `li`. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque `li`. -C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément `li`, dès lors que la propriété {{cssxref("list-style-position")}} vaut `outside`. Si cette valeur est changée en `inside`, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments `li`, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci. +C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément `li`, dès lors que la propriété {{cssxref("list-style-position")}} vaut `outside`. Si cette valeur est changée en `inside`, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments `li`, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci. ### Obtenir une double indentation -Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles : +Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles : ```css ul, li { @@ -53,8 +53,8 @@ Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune ind Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes : -1. Doter chaque élément `li` d'une marge gauche ; -2. Doter chaque élément `ul` d'une marge gauche ; +1. Doter chaque élément `li` d'une marge gauche ; +2. Doter chaque élément `ul` d'une marge gauche ; 3. Doter chaque élément `ul` d'un padding gauche quelconque. Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci. @@ -71,7 +71,7 @@ Comme nous pouvons le voir, les marqueurs restent attachés aux éléments `li`, ## Obtenir un rendu homogène -Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier _à la fois_ la marge gauche et le _padding_ gauche de l'élément `ul`. L'élément `li` peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez : +Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier _à la fois_ la marge gauche et le _padding_ gauche de l'élément `ul`. L'élément `li` peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez : ```css ul { @@ -80,7 +80,7 @@ ul { } ``` -Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors : +Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors : ```css ul { @@ -89,7 +89,7 @@ ul { } ``` -Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à `1.25em` si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un _padding_ et une marge nuls : +Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à `1.25em` si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un _padding_ et une marge nuls : ```css ul { diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md index b8d49e34f8..7de0ca1f9f 100644 --- a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md +++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md @@ -71,7 +71,7 @@ De nouvelles propriétés raccourcies sont également apparues et permettent de ## Exemples de marges -Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge. +Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge. Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure. @@ -97,7 +97,7 @@ Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une mar ## Exemples pour le remplissage -Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique. +Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique. Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture `horizontal-tb`, les deux boîtes auront la même apparence. diff --git a/files/fr/web/css/css_masking/index.md b/files/fr/web/css/css_masking/index.md index 6699d3a116..59a063413c 100644 --- a/files/fr/web/css/css_masking/index.md +++ b/files/fr/web/css/css_masking/index.md @@ -42,5 +42,5 @@ original_slug: Web/CSS/CSS_Masks | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks")}} | {{Spec2("CSS Masks")}} | | +| {{SpecName("CSS Masks")}} | {{Spec2("CSS Masks")}} | | | {{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}} | {{Spec2('SVG1.1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_overflow/index.md b/files/fr/web/css/css_overflow/index.md index 1bf9216960..7134252e2d 100644 --- a/files/fr/web/css/css_overflow/index.md +++ b/files/fr/web/css/css_overflow/index.md @@ -32,9 +32,9 @@ L'exempel interactif suivant illustre comment la modification de la valeur de la - {{CSSxRef("overflow-x")}} - {{CSSxRef("overflow-y")}} - {{CSSxRef("text-overflow")}} -- {{CSSxRef("block-overflow")}} {{experimental_inline}} -- {{CSSxRef("line-clamp")}} {{experimental_inline}} -- {{CSSxRef("max-lines")}} {{experimental_inline}} +- {{CSSxRef("block-overflow")}} {{experimental_inline}} +- {{CSSxRef("line-clamp")}} {{experimental_inline}} +- {{CSSxRef("max-lines")}} {{experimental_inline}} - {{CSSxRef("continue")}} {{experimental_inline}} ### Propriétés spécifiques diff --git a/files/fr/web/css/css_pages/index.md b/files/fr/web/css/css_pages/index.md index 52e54869af..b5404c6e1f 100644 --- a/files/fr/web/css/css_pages/index.md +++ b/files/fr/web/css/css_pages/index.md @@ -35,6 +35,6 @@ translation_of: Web/CSS/CSS_Pages | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('CSS3 Paged Media')}} | {{Spec2('CSS3 Paged Media')}} | | -| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} | | -| {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Paged Media')}} | {{Spec2('CSS3 Paged Media')}} | | +| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} | | +| {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | | diff --git a/files/fr/web/css/css_positioning/index.md b/files/fr/web/css/css_positioning/index.md index b4ca0b565a..4ebd5e5926 100644 --- a/files/fr/web/css/css_positioning/index.md +++ b/files/fr/web/css/css_positioning/index.md @@ -34,5 +34,5 @@ translation_of: Web/CSS/CSS_Positioning | Spécification | État | Commentaires | | ---------------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('CSS3 Positioning')}} | {{Spec2('CSS3 Positioning') }} | | -| {{SpecName('CSS2.1', 'visuren.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Positioning')}} | {{Spec2('CSS3 Positioning') }} | | +| {{SpecName('CSS2.1', 'visuren.html')}} | {{Spec2('CSS2.1')}} | | diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md index 1526b9350c..7dbe95e542 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index ## Ajouter `z-index` -Dans le premier exemple, [« empilement sans `z-index` »](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index), illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}. +Dans le premier exemple, [« empilement sans `z-index` »](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index), illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}. Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de `z-index` est affichée par dessus toutes celles dont la valeur est inférieure à la sienne. @@ -36,7 +36,7 @@ Cette propriété, dont l'attribut est une valeur entière (positive ou négativ > - Lorsque la propriété `z-index` n'est pas définie, les éléments sont rendus sur la couche 0 par défaut. > - Si plusieurs éléments possède la même valeur de `z-index` (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans [empilement sans `z-index`](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index) s'appliquent. -Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant `z-index`. Le `z-index` du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné. +Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant `z-index`. Le `z-index` du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné. {{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}} diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/index.md index e60cd463a0..4e8f5ed861 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.md @@ -22,12 +22,12 @@ Cela signifie que les règles de style CSS permettent de positionner des boîtes Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples. -1. [L'empilement sans `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index) : Règles d'empilement par défaut -2. [L'empilement et `float`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float) : Comportement des éléments flottants -3. [Ajouter `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index) : Utiliser `z-index` pour modifier l'empilement par défaut -4. [L'empilement de couches](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches) : Remarques sur l'empilement de couches -5. [Exemple d'empilement n°1](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1) : Hiérarchie HTML à 2 niveaux, `z-index` sur le dernier niveau -6. [Exemple d'empilement n°2](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2) : Hiérarchie HTML à 2 niveaux, `z-index` sur tous les éléments -7. [Exemple d'empilement n°3](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3) : Hiérarchie HTML à 3 niveaux, `z-index` sur le deuxième niveau +1. [L'empilement sans `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index) : Règles d'empilement par défaut +2. [L'empilement et `float`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float) : Comportement des éléments flottants +3. [Ajouter `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index) : Utiliser `z-index` pour modifier l'empilement par défaut +4. [L'empilement de couches](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches) : Remarques sur l'empilement de couches +5. [Exemple d'empilement n°1](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1) : Hiérarchie HTML à 2 niveaux, `z-index` sur le dernier niveau +6. [Exemple d'empilement n°2](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2) : Hiérarchie HTML à 2 niveaux, `z-index` sur tous les éléments +7. [Exemple d'empilement n°3](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3) : Hiérarchie HTML à 3 niveaux, `z-index` sur le deuxième niveau {{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}} diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md index 964ea9c510..27b332db66 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md @@ -11,21 +11,21 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement : 1. L'arrière-plan et les bordures de l'élément racine du document -2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ; -3. Les blocs flottants ; +2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ; +3. Les blocs flottants ; 4. Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML). En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}. Ce comportement peut être expliqué en améliorant la liste précédente : -1. L'arrière-plan et les bordures de l'élément racine ; -2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ; -3. Les blocs flottants ; -4. Les éléments « en-ligne » enfants dans le flux normal ; +1. L'arrière-plan et les bordures de l'élément racine ; +2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ; +3. Les blocs flottants ; +4. Les éléments « en-ligne » enfants dans le flux normal ; 5. Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML). -> **Note :** Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) de Philip Walton ou son excellente traduction de Vincent De Oliveira, [Ce que personne ne vous a dit sur z-index](https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement) et, bien-sûr, la [spécification](https://www.w3.org/TR/CSS2/zindex.html)). +> **Note :** Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) de Philip Walton ou son excellente traduction de Vincent De Oliveira, [Ce que personne ne vous a dit sur z-index](https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement) et, bien-sûr, la [spécification](https://www.w3.org/TR/CSS2/zindex.html)). {{EmbedLiveSample("Code_source_de_lexemple", 600, 250)}} diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md index 2ba5b4585f..7c66e5d4e9 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md @@ -16,19 +16,19 @@ Commençons par un exemple simple, dans le contexte d'empilement racine nous avo Le seul et unique contexte d'empilement est le contexte racine. Sans `z-index`, les éléments sont empilés dans leur ordre d'apparition dans le code HTML. - + Si on assigne au bloc _DIV #2_ une valeur de `z-index` positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs. - + Si maintenant on assigne également au bloc _DIV #4_ une valeur de `z-index` positive, plus grande que celle du _DIV #2_, le bloc _DIV #4_ est rendu par dessus tous les autres, y compris par dessus le bloc _DIV #2_. - + Dans le dernier exemple, vous pouvez voir que les blocs _DIV #2_ et _DIV #4_ ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc _DIV #4_, tout en respectant le bloc _DIV #2_, peut être contrôlé avec la propriété `z-index`. Il se fait que les éléments _DIV #1_ et _DIV #3_ n'ayant pas de `z-index` défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs _DIV #2_ et _DIV #3_, appartient au contexte d'empilement de la racine. -Dans le contexte d'empilement, les blocs _DIV #1_ et _DIV #3_ sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante : +Dans le contexte d'empilement, les blocs _DIV #1_ et _DIV #3_ sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante : - Contexte d'empilement racine diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md index 78b9dca877..c71f81e5bd 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md @@ -16,11 +16,11 @@ Ce deuxième exemple est très simple, mais il est essentiel à la compréhensio {{ EmbedLiveSample('Exemple', '352', '270') }} -Vous pouvez voir que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #3_ (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de `z-index` régissent l'empilement des éléments. +Vous pouvez voir que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #3_ (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de `z-index` régissent l'empilement des éléments. -Ce qui peut apparaitre comme étrange, c'est que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #4_ (z-index : 10), malgré leurs valeurs de `z-index`. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc _DIV #4_ appartient au contexte d'empilement créé par le bloc _DIV #3_, et, comme expliqué précédemment, le bloc _DIV #3_ (et tout son contenu) est au dessous du bloc _DIV #2_. +Ce qui peut apparaitre comme étrange, c'est que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #4_ (z-index : 10), malgré leurs valeurs de `z-index`. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc _DIV #4_ appartient au contexte d'empilement créé par le bloc _DIV #3_, et, comme expliqué précédemment, le bloc _DIV #3_ (et tout son contenu) est au dessous du bloc _DIV #2_. -Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : +Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : - Contexte d'empilement racine diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md index d41a4a98f4..7326f2438e 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md @@ -26,21 +26,21 @@ Le menu de deuxième niveau est positionné en absolu à l'intérieur de son él Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de `z-index` et que les règles d'empilement par défaut s'appliquent. -Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : +Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : - Contexte d'empilement racine - Niveau #1 - - Niveau #2 (z-index : 1) + - Niveau #2 (z-index : 1) - Niveau #3 - … - Niveau #3 - - Niveau #2 (z-index : 1) + - Niveau #2 (z-index : 1) - … - - Niveau #2 (z-index : 1) + - Niveau #2 (z-index : 1) - Niveau #1 - … diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md index 9fdfb30422..3714bbbdbd 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index ## Empilement sans `z-index` -Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) : +Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) : 1. Arrière-plans et bordures de l'élément racine 2. Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML) diff --git a/files/fr/web/css/css_properties_reference/index.md b/files/fr/web/css/css_properties_reference/index.md index 01e4929b82..7fb3817754 100644 --- a/files/fr/web/css/css_properties_reference/index.md +++ b/files/fr/web/css/css_properties_reference/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Properties_Reference ## Référence des propriétés CSS usuelles -Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM, habituellement utilisée avec JavaScript : +Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM, habituellement utilisée avec JavaScript : > **Note :** Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir [la référence CSS](/fr/docs/Web/CSS/Reference) et [les extensions CSS spécifiques à Mozilla](/fr/docs/Web/CSS/Mozilla_Extensions). diff --git a/files/fr/web/css/css_scroll_snap/basic_concepts/index.md b/files/fr/web/css/css_scroll_snap/basic_concepts/index.md index 181d8097fc..d92dab4d6f 100644 --- a/files/fr/web/css/css_scroll_snap/basic_concepts/index.md +++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.md @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base --- {{CSSRef}} -[Le module de spécification CSS _Scroll Snap_](https://drafts.csswg.org/css-scroll-snap-1/) fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non). +[Le module de spécification CSS _Scroll Snap_](https://drafts.csswg.org/css-scroll-snap-1/) fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non). ## Principes fondamentaux diff --git a/files/fr/web/css/css_selectors/index.md b/files/fr/web/css/css_selectors/index.md index 7c77728cab..f4f08d3274 100644 --- a/files/fr/web/css/css_selectors/index.md +++ b/files/fr/web/css/css_selectors/index.md @@ -30,7 +30,7 @@ original_slug: Web/CSS/Sélecteurs_CSS **Exemple :** `#toc` permettra de cibler l'élément qui possède l'identifiant `toc` (vraisemblablement défini avec un attribut `id="toc"`). - [Le sélecteur universel](/fr/docs/Web/CSS/Universal_selectors) - : Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms. - **Syntaxe :** `*` `ns|*` `*|*` + **Syntaxe :** `*` `ns|*` `*|*` **Exemple :** `*` permettra de cibler tous les éléments du document. - [Les sélecteurs d'attribut](/fr/docs/Web/CSS/Attribute_selectors) - : Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs. @@ -42,17 +42,17 @@ original_slug: Web/CSS/Sélecteurs_CSS - [Les sélecteurs de voisin direct](/fr/docs/Web/CSS/Adjacent_sibling_combinator) - : Le combinateur `'+'` permet de sélectionner les nœuds qui suivent immédiatement un élément donné. **Syntaxe :** `A + B` - **Exemple :** `div + p` permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}. + **Exemple :** `div + p` permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}. - [Les sélecteurs de voisins](/fr/docs/Web/CSS/General_sibling_combinator) - : Le combinateur `'~'` permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent. **Syntaxe :** `A ~ B` **Exemple :** `p ~ span` permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent. - [Les sélecteurs d'éléments enfants](/fr/docs/Web/CSS/Child_combinator) - - : Le combinateur `'>'` permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné. + - : Le combinateur `'>'` permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné. **Syntaxe :** `A > B` **Exemple :** `ul > li` permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}. - [Les sélecteurs d'éléments descendants](/fr/docs/Web/CSS/Descendant_combinator) - - : Le combinateur ` ` (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné. + - : Le combinateur ` ` (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné. **Syntaxe :** `A B` **Exemple :** `div span` permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}. - [Le combinateur de colonne](/fr/docs/Web/CSS/Column_combinator){{experimental_inline}} @@ -85,7 +85,7 @@ original_slug: Web/CSS/Sélecteurs_CSS <td>{{Spec2('CSS4 Selectors')}}</td> <td> Ajout du combinateur de colonne (<code>||</code>), des sélecteurs - structurels pour la grille, des combinateurs logiques, des + structurels pour la grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md index cd979bb8e2..d0cd480f9c 100644 --- a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md +++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md @@ -10,13 +10,13 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un --- {{CSSRef}} -Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les [sélecteurs CSS3](https://www.w3.org/TR/css3-selectors/#target-pseudo) ont introduit [la pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) {{cssxref(":target")}}. +Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les [sélecteurs CSS3](https://www.w3.org/TR/css3-selectors/#target-pseudo) ont introduit [la pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) {{cssxref(":target")}}. ## Choisir une cible -La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL `https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple` contient le fragment d'identifiant `#Exemple`. En HTML, les identifiants correspondent aux valeurs des attributs `id` et `name`, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document. +La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL `https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple` contient le fragment d'identifiant `#Exemple`. En HTML, les identifiants correspondent aux valeurs des attributs `id` et `name`, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document. -Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement : +Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement : ```css h2:target { @@ -24,7 +24,7 @@ h2:target { } ``` -On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment `#Exemple`, on pourra écrire : +On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment `#Exemple`, on pourra écrire : ```css #Exemple:target { @@ -34,7 +34,7 @@ On peut également créer des styles particuliers pour une portion spécifique d ## Cibler tous les éléments -Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique : +Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique : ```css :target { @@ -44,7 +44,7 @@ Si le but est de créer un style commun qui s'appliquera à tous les éléments ## Exemple -Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le` <h1 id="un"> `devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien. +Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le` <h1 id="un"> `devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien. ```html <h4 id="un">...</h4> <p id="deux">...</p> @@ -59,7 +59,7 @@ Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même doc ## Conclusion -Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion. +Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion. ## Voir aussi diff --git a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md index 36d7003216..73aedbaaa1 100644 --- a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md +++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md @@ -67,7 +67,7 @@ Pour en savoir plus, voir [le guide sur les formes et les boîtes](/fr/docs/Web/ ### Générer une forme à partir d'une image -Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha : le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que l'image soit visible). +Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha : le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que l'image soit visible). Attention, les images utilisées ainsi doivent être [compatibles avec les règles CORS](/en-US/docs/Web/HTTP/CORS). Se n'est pass le cas, `shape-outside` se comportera comme si elle avait reçu la valeur `none` et il n'y aura alors aucune forme. @@ -95,7 +95,7 @@ Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute `shape-mar ## Utiliser du contenu généré comme objet flottant -Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS. +Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS. Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte. @@ -105,7 +105,7 @@ Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élé Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs. -Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec `shape-outside: ellipse(40% 50%);` puis utilisé `clip-path: ellipse(40% 50%);` afin de rogner l'image pour suivre la forme. +Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec `shape-outside: ellipse(40% 50%);` puis utilisé `clip-path: ellipse(40% 50%);` afin de rogner l'image pour suivre la forme. {{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}} diff --git a/files/fr/web/css/css_text/index.md b/files/fr/web/css/css_text/index.md index d8056a8cc1..7381cd2933 100644 --- a/files/fr/web/css/css_text/index.md +++ b/files/fr/web/css/css_text/index.md @@ -37,6 +37,6 @@ translation_of: Web/CSS/CSS_Text | Spécification | État | Commentaires | | ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------ | | {{SpecName('CSS Logical Properties')}} | {{Spec2('CSS Logical Properties')}} | Actualise certaines propriétés pour être indépendant de la direction du texte. | -| {{SpecName('CSS3 Text')}} | {{Spec2('CSS3 Text')}} | | -| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Text')}} | {{Spec2('CSS3 Text')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_text_decoration/index.md b/files/fr/web/css/css_text_decoration/index.md index d7f695ed7a..b21ac55ad0 100644 --- a/files/fr/web/css/css_text_decoration/index.md +++ b/files/fr/web/css/css_text_decoration/index.md @@ -36,6 +36,6 @@ translation_of: Web/CSS/CSS_Text_Decoration | Spécification | État | Commentaires | | ------------------------------------------------ | -------------------------------------------- | -------------------- | -| {{SpecName('CSS3 Text Decoration')}} | {{Spec2('CSS3 Text Decoration')}} | | -| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Text Decoration')}} | {{Spec2('CSS3 Text Decoration')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_transitions/index.md b/files/fr/web/css/css_transitions/index.md index d7fb6abc82..48f7c37130 100644 --- a/files/fr/web/css/css_transitions/index.md +++ b/files/fr/web/css/css_transitions/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Transitions --- {{CSSRef}} -Les **transitions CSS** permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage. +Les **transitions CSS** permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage. ## Référence @@ -24,8 +24,8 @@ Les **transitions CSS** permettent de créer des transitions harmonieuses entre ## Guides -- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) - - : Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent. +- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) + - : Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent. ## Spécifications @@ -35,4 +35,4 @@ Les **transitions CSS** permettent de créer des transitions harmonieuses entre ## Voir aussi -- Apparentées aux transitions CSS, les [animations CSS](/fr/docs/Web/CSS/Animations_CSS) peuvent déclencher des animations indépendamment du changement des valeurs spécifiées. +- Apparentées aux transitions CSS, les [animations CSS](/fr/docs/Web/CSS/Animations_CSS) peuvent déclencher des animations indépendamment du changement des valeurs spécifiées. diff --git a/files/fr/web/css/css_values_and_units/index.md b/files/fr/web/css/css_values_and_units/index.md index 5f15cc7d9a..c601cdd5ea 100644 --- a/files/fr/web/css/css_values_and_units/index.md +++ b/files/fr/web/css/css_values_and_units/index.md @@ -82,7 +82,7 @@ Une valeur de type {{cssxref("<url>")}} s'utilise avec une notation foncti ```css .box { - background-image: url("images/mon-arriere-plan.png"); + background-image: url("images/mon-arriere-plan.png"); } .box { @@ -173,7 +173,7 @@ Les valeurs temporelles sont de type {{cssxref("<time>")}} et utilisent le | Unité | Nom | Description | | ----- | ------------- | ----------------------- | -| `s` | Secondes | | +| `s` | Secondes | | | `ms` | Millisecondes | Un millième de seconde. | #### Unités de fréquence @@ -269,8 +269,8 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td> Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> et <code>rlh</code>.<br />Ajout des - notations fonctionnelles <code>min()</code>, <code>max()</code> et - <code>clamp()</code>.<br />Ajout de <code>toggle()</code> + notations fonctionnelles <code>min()</code>, <code>max()</code> et + <code>clamp()</code>.<br />Ajout de <code>toggle()</code> </td> </tr> <tr> @@ -279,7 +279,7 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td> Ajout de <code>calc()</code - >, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code + >, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code >Q</code > </td> @@ -289,13 +289,13 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td>{{Spec2("CSS4 Colors")}}</td> <td> Ajout des syntaxes sans virgule pour les fonctions - <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et - <code>hsla()</code>. Ajout des valeurs alpha pour <code>rgb()</code> et + <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et + <code>hsla()</code>. Ajout des valeurs alpha pour <code>rgb()</code> et <code>hsl()</code>, transformant ainsi <code>rgba()</code> et <code>hsla()</code> en alias respectifs (dépréciés).<br />Ajout du mot-clé de couleur <code>rebeccapurple</code>.<br />Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la - valeur alpha.<br />Ajout des fonctions <code>hwb()</code>, <code + valeur alpha.<br />Ajout des fonctions <code>hwb()</code>, <code >device-cmyk()</code > et <code>color()</code>. @@ -306,7 +306,7 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td>{{Spec2("CSS3 Colors")}}</td> <td> Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des - fonctions <code>rgba()</code>, <code>hsl()</code> et + fonctions <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>. </td> </tr> @@ -329,7 +329,7 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <tr> <td>{{SpecName("CSS2.1")}}</td> <td>{{Spec2("CSS2.1")}}</td> - <td> </td> + <td></td> </tr> <tr> <td>{{SpecName("CSS1")}}</td> diff --git a/files/fr/web/css/css_writing_modes/index.md b/files/fr/web/css/css_writing_modes/index.md index 1b106f5ad6..874b88744a 100644 --- a/files/fr/web/css/css_writing_modes/index.md +++ b/files/fr/web/css/css_writing_modes/index.md @@ -27,6 +27,6 @@ translation_of: Web/CSS/CSS_Writing_Modes | Spécification | État | Commentaires | | ------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Writing Modes')}} | {{Spec2('CSS3 Writing Modes')}} | | -| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Writing Modes')}} | {{Spec2('CSS3 Writing Modes')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | diff --git a/files/fr/web/css/descendant_combinator/index.md b/files/fr/web/css/descendant_combinator/index.md index 2886d00fc1..e4c941fcfc 100644 --- a/files/fr/web/css/descendant_combinator/index.md +++ b/files/fr/web/css/descendant_combinator/index.md @@ -11,7 +11,7 @@ original_slug: Web/CSS/Sélecteurs_descendant --- {{CSSRef("Selectors")}} -Le **combinateur de descendance**, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs (sous la forme `sélecteur₁ sélecteur₂`) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants. +Le **combinateur de descendance**, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs (sous la forme `sélecteur₁ sélecteur₂`) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants. ```css /* Les éléments <li> qui sont des descendants */ @@ -70,9 +70,9 @@ li li { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}} | {{Spec2("CSS4 Selectors")}} | | -| {{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}} | {{Spec2('CSS3 Selectors')}} | | -| {{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}} | {{Spec2("CSS4 Selectors")}} | | +| {{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/direction/index.md b/files/fr/web/css/direction/index.md index 6fe130080a..4e621b5253 100644 --- a/files/fr/web/css/direction/index.md +++ b/files/fr/web/css/direction/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/direction --- {{CSSRef}} -La propriété **`direction`** doit être paramétrée afin de correspondre à la direction du texte: `rtl` (_Right To Left_ pour droite à gauche) pour les textes en hébreu ou en arabe et `ltr` (_Left To Right_ pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant [l'attribut `dir` en HTML](/fr/docs/Web/HTML/Attributs_universels/dir)) plutôt qu'avec une feuille de style CSS. +La propriété **`direction`** doit être paramétrée afin de correspondre à la direction du texte: `rtl` (_Right To Left_ pour droite à gauche) pour les textes en hébreu ou en arabe et `ltr` (_Left To Right_ pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant [l'attribut `dir` en HTML](/fr/docs/Web/HTML/Attributs_universels/dir)) plutôt qu'avec une feuille de style CSS. {{EmbedInteractiveExample("pages/css/direction.html")}} @@ -59,7 +59,7 @@ blockquote { ```html <blockquote> Du reste, depuis son bain dans la mare aux larmes, - tout était changé : la salle, la table de verre, et + tout était changé : la salle, la table de verre, et la petite porte avaient complétement disparu. </blockquote> ``` diff --git a/files/fr/web/css/display-box/index.md b/files/fr/web/css/display-box/index.md index 59d50659ec..0fdc63cc1c 100644 --- a/files/fr/web/css/display-box/index.md +++ b/files/fr/web/css/display-box/index.md @@ -9,7 +9,7 @@ Ces mots-clés définissent si un élément génère des boîtes d'affichage ou ## Syntaxe -- `contents` {{Experimental_Inline}} +- `contents` {{Experimental_Inline}} - : L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur `contents` affecte les éléments « inhabituels » tels que les éléments remplacés. Voir [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) pour plus de détails. diff --git a/files/fr/web/css/display-inside/index.md b/files/fr/web/css/display-inside/index.md index 298e80c95c..dd4940a7a9 100644 --- a/files/fr/web/css/display-inside/index.md +++ b/files/fr/web/css/display-inside/index.md @@ -15,7 +15,7 @@ Ces mots-clés définissent le type d'affichage ({{CSSxRef("display")}}) pour l' Une valeur `<display-inside>` est définie avec l'un des mots-clés suivants : -- `flow` {{Experimental_Inline}} +- `flow` {{Experimental_Inline}} - : L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « _block and inline layout_ » en anglais). @@ -23,7 +23,7 @@ Une valeur `<display-inside>` est définie avec l'un des mots-clés suivants : Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau [contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context) (BFC) pour son contenu ou intègre son contenu dans le contexte parent. -- `flow-root` {{Experimental_Inline}} +- `flow-root` {{Experimental_Inline}} - : L'élément génère un bloc qui établit un nouveau [contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context), définissant ainsi une nouvelle racine pour le formatage. - `table` - : L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc. @@ -31,7 +31,7 @@ Une valeur `<display-inside>` est définie avec l'un des mots-clés suivants : - : L'élément se comporte comme un élément de bloc et dispose son contenu selon [le modèle des boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout). - `grid` - : L'élément se comporte comme un élément de bloc et dispose son contenu selon [le modèle des grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). -- `ruby` {{Experimental_Inline}} +- `ruby` {{Experimental_Inline}} - : L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}. > **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que `<display-inside>` lorsque c'est cohérent. Ainsi, avec `display: flex` ou `display: grid`, la valeur utilisée de `<display-outside>` sera nécessairement `block`. On a ainsi le résultat attendu car on doit avoir `display: grid` avec un conteneur qui soit un bloc. diff --git a/files/fr/web/css/display-internal/index.md b/files/fr/web/css/display-internal/index.md index c2c6e47a43..9bfa2daafc 100644 --- a/files/fr/web/css/display-internal/index.md +++ b/files/fr/web/css/display-internal/index.md @@ -31,13 +31,13 @@ Sauf mention contraire, le type d'affichage intérieur et extérieur sont défin - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("col")}}. - `table-caption` - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("caption")}}. -- `ruby-base` {{Experimental_Inline}} +- `ruby-base` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rb")}}. -- `ruby-text` {{Experimental_Inline}} +- `ruby-text` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rt")}}. -- `ruby-base-container` {{Experimental_Inline}} +- `ruby-base-container` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rbc")}} générés comme des boîtes anonymes. -- `ruby-text-container` {{Experimental_Inline}} +- `ruby-text-container` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rtc")}}. ## Compatibilité des navigateurs diff --git a/files/fr/web/css/display-listitem/index.md b/files/fr/web/css/display-listitem/index.md index 3506944425..07bb6c0fcf 100644 --- a/files/fr/web/css/display-listitem/index.md +++ b/files/fr/web/css/display-listitem/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/display-listitem --- {{CSSRef}} -Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker` dont le contenu est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément. +Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker` dont le contenu est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément. ## Syntaxe diff --git a/files/fr/web/css/display-outside/index.md b/files/fr/web/css/display-outside/index.md index 96e20d0c7d..404890c63f 100644 --- a/files/fr/web/css/display-outside/index.md +++ b/files/fr/web/css/display-outside/index.md @@ -29,7 +29,7 @@ Une valeur `<display-outside>` peut être l'un des mots-clés suivants. > **Note :** Browsers that support the two value syntax, on finding the outer value only, such as when `display: block` or `display: inline` is specified, will set the inner value to `flow`. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout. > -> **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut `flow` pour le mode intérieur si `display: block` ou `display: inline`. On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne). +> **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut `flow` pour le mode intérieur si `display: block` ou `display: inline`. On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne). ### Syntaxe formelle diff --git a/files/fr/web/css/filter-function/opacity()/index.md b/files/fr/web/css/filter-function/opacity()/index.md index 1b106fa0c2..42bee1f745 100644 --- a/files/fr/web/css/filter-function/opacity()/index.md +++ b/files/fr/web/css/filter-function/opacity()/index.md @@ -21,7 +21,7 @@ opacity(multiplicateur) ### Paramètres - `multiplicateur` - - : L'intensité de l'opacité, indiquée comme un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou comme un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`. + - : L'intensité de l'opacité, indiquée comme un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou comme un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`. ## Exemples diff --git a/files/fr/web/css/fit-content/index.md b/files/fr/web/css/fit-content/index.md index 9774d75c30..3943bc2629 100644 --- a/files/fr/web/css/fit-content/index.md +++ b/files/fr/web/css/fit-content/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/fit-content --- {{CSSRef}}{{SeeCompatTable}} -La fonction CSS **`fit-content()`** permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule `min(taille maximale, max(taille minimale, argument))`. +La fonction CSS **`fit-content()`** permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule `min(taille maximale, max(taille minimale, argument))`. ```css /* Valeurs de type <length> */ @@ -35,7 +35,7 @@ Elle peut également être utilisée pour définir la taille d'une boîte avec { - `<length>` - : Une longueur (valeur de type {{cssxref("<length>")}}) exprimée de façon absolue. - `<percentage>` - - : Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé. + - : Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé. ### Syntaxe formelle @@ -84,7 +84,7 @@ Elle peut également être utilisée pour définir la taille d'une boîte avec { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}} | {{Spec2("CSS3 Sizing")}} | Définition de la fonction pour les dimensions de boîte avec les propriétés {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}. | +| {{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}} | {{Spec2("CSS3 Sizing")}} | Définition de la fonction pour les dimensions de boîte avec les propriétés {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}. | | {{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}} | {{Spec2("CSS Grid")}} | Définition initiale, la fonction peut être utilisée pour définir la taille d'une piste au sein d'une grille CSS. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/flex-basis/index.md b/files/fr/web/css/flex-basis/index.md index 63769f6da2..ae072a187c 100644 --- a/files/fr/web/css/flex-basis/index.md +++ b/files/fr/web/css/flex-basis/index.md @@ -54,7 +54,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content > **Note :** Voici un rapide historique pour cette propriété : > - > - Au début, `flex-basis:auto` signifiait « se référer à ma propriété `width` ou `height` » + > - Au début, `flex-basis:auto` signifiait « se référer à ma propriété `width` ou `height` » > - Ensuite, `flex-basis:auto` a été modifiée pour indiquer un dimensionnement automatique et le mot-clé `main-size` fut introduit pour faire référence à la propriété `width` ou `height`. L'implémentation dans Gecko a été suivie avec le bug {{bug("1032922")}}. > - Cette modification a été annulée avec le bug {{bug("1093316")}} afin qu'`auto` fasse à nouveau référence à la propriété `height` ou `width`. Le mot-clé `content` a été introduit pour déclencher un dimensionnement automatique (c'est le bug {{bug("1105111")}} qui couvre cette implémentation). diff --git a/files/fr/web/css/flex-direction/index.md b/files/fr/web/css/flex-direction/index.md index aba2fa317d..2883799798 100644 --- a/files/fr/web/css/flex-direction/index.md +++ b/files/fr/web/css/flex-direction/index.md @@ -63,15 +63,15 @@ flex-direction: unset; ```html <h4>Un exemple avec column-reverse</h4> <div id="content"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> </div> <h4>Un exemple avec row-reverse</h4> <div id="content1"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> </div> ``` diff --git a/files/fr/web/css/flex/index.md b/files/fr/web/css/flex/index.md index a0e2170ebb..b29d872871 100644 --- a/files/fr/web/css/flex/index.md +++ b/files/fr/web/css/flex/index.md @@ -212,8 +212,8 @@ La propriété `flex` peut être définie avec une, deux ou trois valeurs. ```html <div id="flex-container"> - <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div> - <div class="raw-item" id="raw">Boîte « normale » </div> + <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div> + <div class="raw-item" id="raw">Boîte « normale » </div> </div> ``` diff --git a/files/fr/web/css/flex_value/index.md b/files/fr/web/css/flex_value/index.md index 9392f894be..1c62484ed0 100644 --- a/files/fr/web/css/flex_value/index.md +++ b/files/fr/web/css/flex_value/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/flex_value --- {{CSSRef}} -Le type de donnée [CSS](/fr/docs/Web/CSS) **`<flex>`** permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité `fr`. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres. +Le type de donnée [CSS](/fr/docs/Web/CSS) **`<flex>`** permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité `fr`. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres. ## Syntaxe diff --git a/files/fr/web/css/float/index.md b/files/fr/web/css/float/index.md index 7dcc237af4..9668e3b4ba 100644 --- a/files/fr/web/css/float/index.md +++ b/files/fr/web/css/float/index.md @@ -56,7 +56,7 @@ float: unset; - `left` - : Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient. - `right` - - : Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient. + - : Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient. - `none` - : Un mot-clé indiquant que l'élément ne doit pas flotter - `inline-start` @@ -126,7 +126,7 @@ Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en p.avecBoitesRouges { overflow: hidden; height: auto; } ``` -> **Note :** En utilisant `overflow`: `scroll` on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons `auto` pour `height` afin d'indiquer que le conteneur doit s'agrandir si nécessaire. +> **Note :** En utilisant `overflow`: `scroll` on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons `auto` pour `height` afin d'indiquer que le conteneur doit s'agrandir si nécessaire. ## Spécifications diff --git a/files/fr/web/css/font-feature-settings/index.md b/files/fr/web/css/font-feature-settings/index.md index 4b3b8cae1b..e7e30ec353 100644 --- a/files/fr/web/css/font-feature-settings/index.md +++ b/files/fr/web/css/font-feature-settings/index.md @@ -83,7 +83,7 @@ td.tabular { font-feature-settings: "tnum"; } } ``` -## Spécifications +## Spécifications | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | diff --git a/files/fr/web/css/font-kerning/index.md b/files/fr/web/css/font-kerning/index.md index bc3fe72aa0..5451a1b01c 100644 --- a/files/fr/web/css/font-kerning/index.md +++ b/files/fr/web/css/font-kerning/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/font-kerning --- {{CSSRef}} -La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est *bien crénée*, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable. +La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est *bien crénée*, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable. ```css font-kerning: auto; diff --git a/files/fr/web/css/font-language-override/index.md b/files/fr/web/css/font-language-override/index.md index 97225330f3..81b3f23c5d 100644 --- a/files/fr/web/css/font-language-override/index.md +++ b/files/fr/web/css/font-language-override/index.md @@ -53,7 +53,7 @@ p.para1 { } p.para2 { - font-language-override: "DAN"; + font-language-override: "DAN"; } ``` diff --git a/files/fr/web/css/font-optical-sizing/index.md b/files/fr/web/css/font-optical-sizing/index.md index 05abd409e2..29c2129e7a 100644 --- a/files/fr/web/css/font-optical-sizing/index.md +++ b/files/fr/web/css/font-optical-sizing/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/font-optical-sizing --- {{CSSRef}} -La propriété CSS **`font-optical-sizing`** permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille. Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique. +La propriété CSS **`font-optical-sizing`** permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille. Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique. Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (_serifs_) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais. @@ -77,7 +77,7 @@ p { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}} | {{Spec2('CSS4 Fonts')}} | | +| {{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}} | {{Spec2('CSS4 Fonts')}} | | {{cssinfo}} diff --git a/files/fr/web/css/font-size/index.md b/files/fr/web/css/font-size/index.md index 0512e7882f..17fc0c2872 100644 --- a/files/fr/web/css/font-size/index.md +++ b/files/fr/web/css/font-size/index.md @@ -56,9 +56,9 @@ La propriété `font-size` peut être définie de deux façons : - `larger, smaller` - : La taille de la fonte est plus grande (`larger`) ou plus petite (`smaller`) que celle de l'élément parent. Le ratio d'agrandissement/réduction est le même que celui qui sépare les mots-clés présentés avant. - `<length>` - - : Une longueur positive (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}}). Lorsque les valeurs sont exprimées avec les unités `em` ou `ex`, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de `0.5em` indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est `rem`, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine `html`. + - : Une longueur positive (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}}). Lorsque les valeurs sont exprimées avec les unités `em` ou `ex`, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de `0.5em` indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est `rem`, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine `html`. - `<percentage>` - - : Les valeurs exprimées en pourcentages (type {{cssxref("<percentage>")}}) sont proportionnelles à la taille de fonte de l'élément parent. + - : Les valeurs exprimées en pourcentages (type {{cssxref("<percentage>")}}) sont proportionnelles à la taille de fonte de l'élément parent. > **Note :** Il est généralement préférable d'utiliser des valeurs relatives à la taille par défaut choisie par l'utilisateur. @@ -80,7 +80,7 @@ L'utilisation des pixels (`px`) permet d'obtenir un résultat statique, absolu e ### Les ems -On peut également définir la taille de la fonte en `em`. La taille d'une valeur exprimée en `em` est dynamique. Lorsqu'on définit la propriété `font-size`, un `em` est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit `font-size` avec une valeur de `20px` sur l'élément `body`, `1em` correspondra à `20px` et `2em` à `40px`. Ici, la valeur 2 est un facteur multiplicateur de la taille. +On peut également définir la taille de la fonte en `em`. La taille d'une valeur exprimée en `em` est dynamique. Lorsqu'on définit la propriété `font-size`, un `em` est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit `font-size` avec une valeur de `20px` sur l'élément `body`, `1em` correspondra à `20px` et `2em` à `40px`. Ici, la valeur 2 est un facteur multiplicateur de la taille. Pour calculer une équivalence entre `em` et un résultat exprimé en pixels, on peut utiliser cette formule : @@ -119,7 +119,7 @@ On obtiendra le résultat suivant : {{EmbedLiveSample("Les_ems", 400, 40)}} -Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de `font-size` pour le bloc `span` vaut `1.6em` et cette valeur est relative à la valeur de `font-size` pour son élément parent, elle-même relative à la valeur de `font-size` pour son élément parent. C'est ce qu'on appelle **la composition**. +Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de `font-size` pour le bloc `span` vaut `1.6em` et cette valeur est relative à la valeur de `font-size` pour son élément parent, elle-même relative à la valeur de `font-size` pour son élément parent. C'est ce qu'on appelle **la composition**. ### Les rems diff --git a/files/fr/web/css/font-variant-position/index.md b/files/fr/web/css/font-variant-position/index.md index 78b9d97af8..b88604ffac 100644 --- a/files/fr/web/css/font-variant-position/index.md +++ b/files/fr/web/css/font-variant-position/index.md @@ -60,7 +60,7 @@ La valeur de cette propriété est définie grâce à l'un des mots-clés défin ```html <p> Alice <span class="exemple">ne s’était pas fait le moindre mal.</span> - Vite elle se remet sur ses pieds et regarde en l’air ; mais tout + Vite elle se remet sur ses pieds et regarde en l’air ; mais tout est noir là-haut. Elle voit devant elle un long passage et le Lapin Blanc qui court à toutes jambes. </p> diff --git a/files/fr/web/css/font/index.md b/files/fr/web/css/font/index.md index 15ddc96075..3e02aa4788 100644 --- a/files/fr/web/css/font/index.md +++ b/files/fr/web/css/font/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/font La propriété **`font`** est : -- une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}} +- une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}} - ou une propriété permettant d'utiliser une police système pour la police de caractères d'un élément grâce à certains mots-clés spécifiques. {{EmbedInteractiveExample("pages/css/font.html")}} @@ -67,7 +67,7 @@ Si `font` est définie comme une propriété raccourcie : - Les valeurs pour `font-style`, `font-variant` et `font-weight` doivent précéder la valeur pour `font-size` - La valeur de `font-variant` ne peut utiliser que les valeurs définies en CSS 2.1 : `normal` et `small-caps` - La valeur de `font-stretch` ne peut être qu'un mot-clé. -- La valeur pour `line-height` doit immédiatement suivre la valeur pour `font-size`, séparée par une barre oblique (par exemple "`16px/3`") +- La valeur pour `line-height` doit immédiatement suivre la valeur pour `font-size`, séparée par une barre oblique (par exemple "`16px/3`") - La valeur pour `font-family` doit être la dernière fournie. ### Valeurs @@ -140,7 +140,7 @@ Si `font` est définie comme une propriété raccourcie : ### CSS ```css -/* La corps de la police sera 12px */ +/* La corps de la police sera 12px */ /* La hauteur de ligne 14px et la */ /* famille de polices sans-serif */ diff --git a/files/fr/web/css/forced-color-adjust/index.md b/files/fr/web/css/forced-color-adjust/index.md index 821fa8e2da..11118681ce 100644 --- a/files/fr/web/css/forced-color-adjust/index.md +++ b/files/fr/web/css/forced-color-adjust/index.md @@ -74,11 +74,11 @@ En utilisant la fonctionnalité média [`forced-colors`](/fr/docs/Web/CSS/@media ```html <div class="box"> - <p>Voici une boîte qui utilisera vos préférences de couleurs.</p> + <p>Voici une boîte qui utilisera vos préférences de couleurs.</p> </div> <div class="box forced"> - <p>Voici une boîte qui conservera les couleurs définies par le site.</p> + <p>Voici une boîte qui conservera les couleurs définies par le site.</p> </div> ``` diff --git a/files/fr/web/css/frequency-percentage/index.md b/files/fr/web/css/frequency-percentage/index.md index 4b3f9f032d..2fa40a4e7a 100644 --- a/files/fr/web/css/frequency-percentage/index.md +++ b/files/fr/web/css/frequency-percentage/index.md @@ -23,7 +23,7 @@ Lorsqu'une valeur de type `<frequency-percentage>` peut être utilisée dans une | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------- | -| {{SpecName('CSS4 Values', '#mixed-percentages', '<frequency-percentage>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#mixed-percentages', '<frequency-percentage>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#mixed-percentages', '<frequency-percentage>')}} | {{Spec2('CSS3 Values')}} | Définition du type `<frequency-percentage>`. Ajout de `calc()` | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/gradient/linear-gradient()/index.md b/files/fr/web/css/gradient/linear-gradient()/index.md index c32f3caf0b..7889def802 100644 --- a/files/fr/web/css/gradient/linear-gradient()/index.md +++ b/files/fr/web/css/gradient/linear-gradient()/index.md @@ -75,7 +75,7 @@ Un dégradé linéaire est défini par un axe : la _ligne du dégradé_ et La ligne du dégradé est définie par le centre de la boîte contenant l'image et par un angle. Les couleurs du dégradé sont déterminées par deux ou plusieurs points : le point de départ, le point d'arrivée et, éventuellement entre, des points d'arrêts de couleur. -Le _point de départ_ est situé sur la ligne du dégradé où la première couleur commence. Le _point d'arrivée_ est situé là où la dernière couleur finit. Chacun de ces deux points est défini par l'intersection de la ligne du dégradé avec une ligne perpendiculaire du coin de la boîte correspondant. Le point de fin peut être considéré comme le symétrique du point de départ. Ces définitions relativement complexes peuvent mener à des effets intéressants intitulés « coins magiques » : les coins les plus proches des points de départ et d'arrivée ont la même couleur (respectivement) que ces deux points. +Le _point de départ_ est situé sur la ligne du dégradé où la première couleur commence. Le _point d'arrivée_ est situé là où la dernière couleur finit. Chacun de ces deux points est défini par l'intersection de la ligne du dégradé avec une ligne perpendiculaire du coin de la boîte correspondant. Le point de fin peut être considéré comme le symétrique du point de départ. Ces définitions relativement complexes peuvent mener à des effets intéressants intitulés « coins magiques » : les coins les plus proches des points de départ et d'arrivée ont la même couleur (respectivement) que ces deux points. #### Personnaliser des dégradés diff --git a/files/fr/web/css/grid-area/index.md b/files/fr/web/css/grid-area/index.md index 58950b4c06..cfea297802 100644 --- a/files/fr/web/css/grid-area/index.md +++ b/files/fr/web/css/grid-area/index.md @@ -19,7 +19,7 @@ Lorsqu'il n'y a pas de valeur pour `grid-column-end`, si `grid-column-start` est Lorsqu'il n'y a pas de valeur pour `grid-row-end`, si `grid-row-start` est un identifiant de zone, `grid-row-end` sera défini avec cet identifiant, sinon il sera défini avec `auto`. -Lorsqu'il n'y a pas de valeur pour `grid-column-start`, si `grid-row-start` est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront `auto`. +Lorsqu'il n'y a pas de valeur pour `grid-column-start`, si `grid-row-start` est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront `auto`. La propriété `grid-area` peut également prendre comme valeur un identifiant personnalisé ({{cssxref("<custom-ident>")}}) qui pourra être utilisé comme nom pour une zone de la grille placée grâce à la propriété {{cssxref("grid-template-areas")}}. diff --git a/files/fr/web/css/grid-auto-columns/index.md b/files/fr/web/css/grid-auto-columns/index.md index 2456688ecb..5ecffb429a 100644 --- a/files/fr/web/css/grid-auto-columns/index.md +++ b/files/fr/web/css/grid-auto-columns/index.md @@ -52,9 +52,9 @@ grid-auto-columns: fit-content(20%); /* Gestion de plusieurs pistes */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100px 150px 390px; -grid-auto-columns: 10% 33.3%; +grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; -grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); +grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* Valeurs globales */ @@ -85,7 +85,7 @@ grid-auto-columns: unset; - : Cette notation représente la formule `min(max-content, max(auto, argument))` qui est calculée de façon semblable à `auto`, sauf qu'ici, la taille de la piste est écrétée à _argument_ s'i elle est plus grande que le minimum `auto`. - `auto` - - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. + - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. @@ -115,9 +115,9 @@ grid-auto-columns: unset; ```html <div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> </div> ``` diff --git a/files/fr/web/css/grid-auto-flow/index.md b/files/fr/web/css/grid-auto-flow/index.md index 3e14e8cc58..f3eee3cc0c 100644 --- a/files/fr/web/css/grid-auto-flow/index.md +++ b/files/fr/web/css/grid-auto-flow/index.md @@ -91,15 +91,15 @@ Cette propriété peut prendre deux formes : ```html <div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> - <div id="item4"></div> - <div id="item5"></div> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> + <div id="item4"></div> + <div id="item5"></div> </div> <select id="direction" onchange="changeGridAutoFlow()"> - <option value="column">column</option> - <option value="row">row</option> + <option value="column">column</option> + <option value="row">row</option> </select> <input id="dense" type="checkbox" onchange="changeGridAutoFlow()"> <label for="dense">dense</label> diff --git a/files/fr/web/css/grid-auto-rows/index.md b/files/fr/web/css/grid-auto-rows/index.md index aa3ec3e501..b3de100bd7 100644 --- a/files/fr/web/css/grid-auto-rows/index.md +++ b/files/fr/web/css/grid-auto-rows/index.md @@ -46,9 +46,9 @@ grid-auto-rows: minmax(20%, 80vmax); /* Gestion de plusieurs pistes */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 150px 390px; -grid-auto-rows: 10% 33.3%; +grid-auto-rows: 10% 33.3%; grid-auto-rows: 0.5fr 3fr 1fr; -grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); +grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); @@ -78,7 +78,7 @@ grid-auto-rows: unset; - : Une notation fonctionnelle qui définit un intervalle de taille entre `min` et `max`. Si `max` est inférieur à `min`, `max` est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur `<flex>` qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal). - `auto` - - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. + - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. @@ -108,9 +108,9 @@ grid-auto-rows: unset; ```html <div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> </div> ``` diff --git a/files/fr/web/css/grid-column-end/index.md b/files/fr/web/css/grid-column-end/index.md index b650f7110c..d1953ae90d 100644 --- a/files/fr/web/css/grid-column-end/index.md +++ b/files/fr/web/css/grid-column-end/index.md @@ -47,7 +47,7 @@ grid-column-end: unset; > **Note :** Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, `grid-column-end: foo;` permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec `foo-end`). - Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). + Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). - `<integer> && <custom-ident>?` diff --git a/files/fr/web/css/grid-row-end/index.md b/files/fr/web/css/grid-row-end/index.md index 375de17056..b05d4b4f9a 100644 --- a/files/fr/web/css/grid-row-end/index.md +++ b/files/fr/web/css/grid-row-end/index.md @@ -47,7 +47,7 @@ grid-row-end: unset; > **Note :** Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, `grid-row-end: foo;` permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec `foo-end`). - Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). + Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). ` <custom-ident``> ` ne peut pas prendre la valeur `span`. diff --git a/files/fr/web/css/grid-template-areas/index.md b/files/fr/web/css/grid-template-areas/index.md index dfca09d8a0..3c0a67c57b 100644 --- a/files/fr/web/css/grid-template-areas/index.md +++ b/files/fr/web/css/grid-template-areas/index.md @@ -65,8 +65,8 @@ grid-template-areas: unset; width: 100%; height: 250px; grid-template-areas: "head head" - "nav main" - "nav foot"; + "nav main" + "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } diff --git a/files/fr/web/css/grid-template/index.md b/files/fr/web/css/grid-template/index.md index 24be99d5ae..cab6a41013 100644 --- a/files/fr/web/css/grid-template/index.md +++ b/files/fr/web/css/grid-template/index.md @@ -70,8 +70,8 @@ grid-template: unset; width: 100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] - [main-left] "nav main" 1fr [main-right] - [footer-left] "nav foot" 30px [footer-right] + [main-left] "nav main" 1fr [main-right] + [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } diff --git a/files/fr/web/css/height/index.md b/files/fr/web/css/height/index.md index 0e63df781f..0a689da27f 100644 --- a/files/fr/web/css/height/index.md +++ b/files/fr/web/css/height/index.md @@ -44,19 +44,19 @@ height: unset; - : La valeur exprimée correspond à un pourcentage (type {{cssxref("<percentage>")}}) de la hauteur du bloc englobant. - `border-box` {{experimental_inline}} - : Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de bordure de l'élément. -- `content-box` {{experimental_inline}} +- `content-box` {{experimental_inline}} - : Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de contenu de l'élément - `auto` - : Le navigateur calculera une valeur et sélectionnera une hauteur pour l'élément ciblé. - `fill` {{experimental_inline}} - : Utilise la taille `fill-available` dans l'axe du sens de lecture ou la taille `fill-available` dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture. -- `max-content` {{experimental_inline}} +- `max-content` {{experimental_inline}} - : La hauteur intrinsèque préférrée. -- `min-content` {{experimental_inline}} +- `min-content` {{experimental_inline}} - : La hauteur intrinsèque minimale. -- `available` {{experimental_inline}} +- `available` {{experimental_inline}} - : La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (_padding_) vertical. -- `fit-content` {{experimental_inline}} +- `fit-content` {{experimental_inline}} - : La plus grande des valeurs entre : diff --git a/files/fr/web/css/id_selectors/index.md b/files/fr/web/css/id_selectors/index.md index 63096c058a..ba6922128f 100644 --- a/files/fr/web/css/id_selectors/index.md +++ b/files/fr/web/css/id_selectors/index.md @@ -53,9 +53,9 @@ Un sélecteur d'identifiant (_ID selector_) permet, pour un document HTML, de ci | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS4 Selectors")}} | | -| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS3 Selectors")}} | | -| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS4 Selectors")}} | | +| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS3 Selectors")}} | | +| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | {{Spec2("CSS2.1")}} | | | {{SpecName("CSS1", "#id-as-selector", "ID selectors")}} | {{Spec2("CSS1")}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/index.md b/files/fr/web/css/index.md index d9f3ad85f8..521425ff54 100644 --- a/files/fr/web/css/index.md +++ b/files/fr/web/css/index.md @@ -25,12 +25,12 @@ CSS est l'un des langages principaux du **Web ouvert** et a été standardisé [ ## Tutoriels -La section [Apprendre le Web](/fr/docs/Learn/CSS) fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable. +La section [Apprendre le Web](/fr/docs/Learn/CSS) fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable. - [Introduction à CSS](/fr/docs/Learn/Getting_started_with_the_web/CSS_basics) - : Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS. - [Mettre en forme le texte](/fr/docs/Learn/CSS/Styling_text) - - : Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens. + - : Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens. - [Mettre en forme les boîtes](/fr/docs/Learn/CSS/Styling_boxes) - : Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définir des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes. - [La disposition en CSS](/fr/docs/Learn/CSS/CSS_layout) @@ -47,7 +47,7 @@ La section [Apprendre le Web](/fr/docs/Learn/CSS) fournit différents modules q - [la syntaxe et les formes du langage](/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured) - [la spécificité](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) et [l'héritage](/fr/docs/Web/CSS/inheritance) - [les unités et valeurs CSS](/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS) - - [le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) et [la fusion des marges](/fr/docs/CSS/margin_collapsing) + - [le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) et [la fusion des marges](/fr/docs/CSS/margin_collapsing) - [le bloc conteneur](/fr/docs/Web/CSS/All_About_The_Containing_Block) - [l'empilement](/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches) et [le contexte de formatage de blocs](/fr/docs/Web/Guide/CSS/Block_formatting_context) - les concepts de [valeur initiale](/fr/docs/Web/CSS/initial_value), [valeur calculée](/fr/docs/Web/CSS/computed_value), [valeur utilisée](/fr/docs/Web/CSS/used_value) et [valeur réelle](/fr/docs/Web/CSS/actual_value) diff --git a/files/fr/web/css/inheritance/index.md b/files/fr/web/css/inheritance/index.md index 4e1d5e1331..494780af56 100644 --- a/files/fr/web/css/inheritance/index.md +++ b/files/fr/web/css/inheritance/index.md @@ -16,13 +16,13 @@ Pour [chaque propriété CSS](fr/R%c3%a9f%c3%a9rence_CSS), la spécification ind Lorsqu'aucune valeur n'est spécifiée pour une _propriété héritée_ sur un élément, l'élément récupère la [valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) donnée via la spécification. -Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style : +Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style : ```css p { color: green; } ``` -Sur le fragment HTML suivant : +Sur le fragment HTML suivant : ```html <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p> @@ -32,13 +32,13 @@ On obtient le résultat suivant : {{EmbedLiveSample("Propriétés_héritées")}} -Les mots « texte mis en emphase » apparaîtront en vert, car l'élément `em` a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément `p`. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur). +Les mots « texte mis en emphase » apparaîtront en vert, car l'élément `em` a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément `p`. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur). ## Propriétés non héritées Lorsqu'aucune valeur n'est définie pour un élément, pour une _propriété non héritée_, l'élément prendra [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) de cette propriété (telle qu'indiquée par la spécification). -Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style : +Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style : ```css p { border: medium solid; } @@ -54,7 +54,7 @@ On obtient le résultat suivant : {{EmbedLiveSample("Propriétés_non_héritées")}} -Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est `none`). +Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est `none`). ## Notes diff --git a/files/fr/web/css/initial-letter-align/index.md b/files/fr/web/css/initial-letter-align/index.md index b764aba02a..454e9055ac 100644 --- a/files/fr/web/css/initial-letter-align/index.md +++ b/files/fr/web/css/initial-letter-align/index.md @@ -66,12 +66,12 @@ La valeur de cette propriété peut être l'un des mots-clés parmi ceux défini ```html <p class="exemple"> - Tombe, tombe, tombe ! « Cette chute n’en finira - donc pas ! Je suis curieuse de savoir combien de - milles j’ai déjà faits, » dit-elle tout haut. « Je + Tombe, tombe, tombe ! « Cette chute n’en finira + donc pas ! Je suis curieuse de savoir combien de + milles j’ai déjà faits, » dit-elle tout haut. « Je dois être bien près du centre de la terre. Voyons donc, cela serait à quatre mille milles de profondeur, - il me semble. » </p> + il me semble. » </p> ``` ### Résultat diff --git a/files/fr/web/css/initial-letter/index.md b/files/fr/web/css/initial-letter/index.md index 4888679849..53a2494a7c 100644 --- a/files/fr/web/css/initial-letter/index.md +++ b/files/fr/web/css/initial-letter/index.md @@ -61,7 +61,7 @@ La valeur de cette propriété peut être le mot-clé `normal` ou un nombre (`<n ```html <p class="exemple"> - Un grand rosier se trouvait à l’entrée du jardin ; + Un grand rosier se trouvait à l’entrée du jardin ; les roses qu’il portait étaient blanches, mais trois jardiniers étaient en train de les peindre en rouge. </p> diff --git a/files/fr/web/css/initial/index.md b/files/fr/web/css/initial/index.md index 4fbaf7f596..9bd02dc5ca 100644 --- a/files/fr/web/css/initial/index.md +++ b/files/fr/web/css/initial/index.md @@ -43,7 +43,7 @@ La propriété {{cssxref("all")}} peut être utilisée avec cette valeur afin de ce texte est avec la couleur initiale (noire) </em> ce texte est rouge aussi - </p> + </p> ``` ### Résultat diff --git a/files/fr/web/css/initial_value/index.md b/files/fr/web/css/initial_value/index.md index 83bed2e8e6..90089dae25 100644 --- a/files/fr/web/css/initial_value/index.md +++ b/files/fr/web/css/initial_value/index.md @@ -20,7 +20,7 @@ Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------ | --------------------- | -| [CSS Cascade 4](https://drafts.csswg.org/css-cascade-4/#initial-values) | | Définition formelle. | +| [CSS Cascade 4](https://drafts.csswg.org/css-cascade-4/#initial-values) | | Définition formelle. | | {{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}} | {{Spec2("CSS2.1")}} | Définition implicite. | ## Voir aussi diff --git a/files/fr/web/css/inset-block-end/index.md b/files/fr/web/css/inset-block-end/index.md index b25e191d87..4c0a30468d 100644 --- a/files/fr/web/css/inset-block-end/index.md +++ b/files/fr/web/css/inset-block-end/index.md @@ -11,7 +11,7 @@ original_slug: inset-block-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-block-end`** définit la fin du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-block-end`** définit la fin du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-block-end`. Firefox 63 a mis à jour le nom de la propriété afin de s'accorder avec les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-block-start/index.md b/files/fr/web/css/inset-block-start/index.md index bc2066dafc..53a98c0daf 100644 --- a/files/fr/web/css/inset-block-start/index.md +++ b/files/fr/web/css/inset-block-start/index.md @@ -11,7 +11,7 @@ original_slug: inset-block-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-block-start`** définit le début du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-block-start`** définit le début du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-block-start`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-block/index.md b/files/fr/web/css/inset-block/index.md index c545bea997..3721212dd2 100644 --- a/files/fr/web/css/inset-block/index.md +++ b/files/fr/web/css/inset-block/index.md @@ -91,5 +91,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} +- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} - Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/inset-inline-end/index.md b/files/fr/web/css/inset-inline-end/index.md index 2371e342bf..81114a78d2 100644 --- a/files/fr/web/css/inset-inline-end/index.md +++ b/files/fr/web/css/inset-inline-end/index.md @@ -11,7 +11,7 @@ original_slug: inset-inline-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-inline-end`** définit la fin du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-inline-end`** définit la fin du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-inline-end`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-inline-start/index.md b/files/fr/web/css/inset-inline-start/index.md index a9b9356153..b36a505100 100644 --- a/files/fr/web/css/inset-inline-start/index.md +++ b/files/fr/web/css/inset-inline-start/index.md @@ -11,7 +11,7 @@ original_slug: inset-inline-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-inline-start`** définit le début du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-inline-start`** définit le début du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-inline-start`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-inline/index.md b/files/fr/web/css/inset-inline/index.md index bd8758ada6..5344c43652 100644 --- a/files/fr/web/css/inset-inline/index.md +++ b/files/fr/web/css/inset-inline/index.md @@ -91,5 +91,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} +- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} - Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/integer/index.md b/files/fr/web/css/integer/index.md index 6b35f764da..4dad5413a0 100644 --- a/files/fr/web/css/integer/index.md +++ b/files/fr/web/css/integer/index.md @@ -61,6 +61,6 @@ _5 Les caractères spéciaux ne sont pas acceptés {{Compat("css.types.integer")}} -## Voir aussi +## Voir aussi - {{cssxref("<number>")}} diff --git a/files/fr/web/css/isolation/index.md b/files/fr/web/css/isolation/index.md index df078f89d1..2bddc10ac3 100644 --- a/files/fr/web/css/isolation/index.md +++ b/files/fr/web/css/isolation/index.md @@ -73,12 +73,12 @@ La propriété `isolation` est définie avec l'un des mots-clés suivants. ```html <div id="b" class="a"> - <div id="d"> - <div class="a c">auto</div> - </div> + <div id="d"> + <div class="a c">auto</div> + </div> <div id="e"> - <div class="a c">isolate</div> - </div> + <div class="a c">isolate</div> + </div> </div> ``` diff --git a/files/fr/web/css/justify-self/index.md b/files/fr/web/css/justify-self/index.md index 9bace72a4f..e46a4340a8 100644 --- a/files/fr/web/css/justify-self/index.md +++ b/files/fr/web/css/justify-self/index.md @@ -79,7 +79,7 @@ Cette propriété peut être définie selon trois formes différentes : - `start` - : L'élément est aligné vers le début du conteneur pour l'axe en ligne. - `end` - - : L'élément est aligné vers la fin du conteneur pour l'axe en ligne. + - : L'élément est aligné vers la fin du conteneur pour l'axe en ligne. - `flex-start` - : L'élément est aligné vers le début du conteneur flexible pour l'axe en ligne. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `start`. @@ -87,7 +87,7 @@ Cette propriété peut être définie selon trois formes différentes : - : L'élément est aligné vers la fin du conteneur flexible pour l'axe en ligne. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `end`. - `self-start` - - : L'élément est aligné sur le bord du conteneur au début de l'axe en ligne. + - : L'élément est aligné sur le bord du conteneur au début de l'axe en ligne. - `self-end` - : L'élément est aligné sur le bord du conteneur à la fin de l'axe en ligne. - `center` @@ -95,7 +95,7 @@ Cette propriété peut être définie selon trois formes différentes : - `left` - : L'élément est aligné vers la gauche du conteneur dans le sens de l'axe en ligne. - `right` - - : L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne. + - : L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne. - `baseline first baseline` `last baseline` - : Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse. diff --git a/files/fr/web/css/layout_cookbook/card/index.md b/files/fr/web/css/layout_cookbook/card/index.md index eea4811054..2ab2bb1c52 100644 --- a/files/fr/web/css/layout_cookbook/card/index.md +++ b/files/fr/web/css/layout_cookbook/card/index.md @@ -72,5 +72,5 @@ Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en ## Voir aussi -- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}} +- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}} - [_Inclusive Components: Card_ (en anglais)](https://inclusive-components.design/cards/) diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.md b/files/fr/web/css/layout_cookbook/center_an_element/index.md index 13c7c36aa0..88190e59f1 100644 --- a/files/fr/web/css/layout_cookbook/center_an_element/index.md +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.md @@ -13,13 +13,13 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element --- {{CSSRef}} -Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (_flexbox_), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification _Box Alignment_. +Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (_flexbox_), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification _Box Alignment_.  ## Spécifications sommaires -Centrer un élément à la fois horizontalement et verticalement dans un autre élément. +Centrer un élément à la fois horizontalement et verticalement dans un autre élément. ## Recette @@ -31,10 +31,10 @@ Centrer un élément à la fois horizontalement et verticalement dans un autre Pour centrer une boîte dans une autre, on a donné au contenant une propriété `display: flex`. -Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur `center` pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur `center` pour centrer horizontalement. +Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur `center` pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur `center` pour centrer horizontalement. -À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique. -Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste. +À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique. +Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste. ## Compatibilité des navigateurs diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.md b/files/fr/web/css/layout_cookbook/column_layouts/index.md index a6c52ced06..8daedbc5b0 100644 --- a/files/fr/web/css/layout_cookbook/column_layouts/index.md +++ b/files/fr/web/css/layout_cookbook/column_layouts/index.md @@ -54,7 +54,7 @@ Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en col > **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html) -Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur `wrap` sur le conteneur. Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois. +Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur `wrap` sur le conteneur. Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois. {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}} diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md index 769108c896..5fe179b381 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md @@ -31,7 +31,7 @@ _Il faut modifier le lien pour cibler la version téléchargeable de votre exemp ## Choix effectués -_Expliquez ici les décisions prises pour réaliser cette recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement._ +_Expliquez ici les décisions prises pour réaliser cette recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement._ ## Méthodes de recours ou alternatives diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md index 62d542e3ef..8825c24ab8 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md @@ -55,7 +55,7 @@ Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les élém Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe `preview` puis dans l'élément `textarea` `playable-html`. -Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section `playable-css`. +Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section `playable-css`. Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter [center.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html) qui est utilisé sur la page [Comment centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Center_an_element). diff --git a/files/fr/web/css/layout_cookbook/index.md b/files/fr/web/css/layout_cookbook/index.md index 9a7a809a9d..3ba09e0f5f 100644 --- a/files/fr/web/css/layout_cookbook/index.md +++ b/files/fr/web/css/layout_cookbook/index.md @@ -21,7 +21,7 @@ Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fr | [Colonnes](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | | [Centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element) | Comment centrer un élément horizontalement et verticalement. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | | [Bas de page adhérant](/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant) | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (_viewport_) lorsque le contenu est plus petit que la zone ou le conteneur. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | -| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | +| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | | [Navigation avec un fil d'Ariane (_breadcrumb_)](/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | | [Liste de groupes avec indicateurs](/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs) | Afficher une liste d'éléments avec chacun un indicateur numérique. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | | [Pagination](/fr/docs/Web/CSS/Layout_cookbook/Pagination) | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple). | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | diff --git a/files/fr/web/css/layout_cookbook/pagination/index.md b/files/fr/web/css/layout_cookbook/pagination/index.md index 07f6e5ee37..a531196b4d 100644 --- a/files/fr/web/css/layout_cookbook/pagination/index.md +++ b/files/fr/web/css/layout_cookbook/pagination/index.md @@ -38,11 +38,11 @@ Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implément ```css .pagination { - list-style: none; - margin: 0; - padding: 0; - display: flex; - column-gap: 2px; + list-style: none; + margin: 0; + padding: 0; + display: flex; + column-gap: 2px; } ``` diff --git a/files/fr/web/css/line-height-step/index.md b/files/fr/web/css/line-height-step/index.md index 83db5a0e6f..531843f6ab 100644 --- a/files/fr/web/css/line-height-step/index.md +++ b/files/fr/web/css/line-height-step/index.md @@ -36,13 +36,13 @@ Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraph ```css :root { - font-size: 12pt; - --my-grid: 18pt; - line-height-step: var(--my-grid); + font-size: 12pt; + --my-grid: 18pt; + line-height-step: var(--my-grid); } h1 { - font-size: 20pt; - margin-top: calc(2 * var(--my-grid)); + font-size: 20pt; + margin-top: calc(2 * var(--my-grid)); } ``` diff --git a/files/fr/web/css/line-height/index.md b/files/fr/web/css/line-height/index.md index 8282f70b7f..69adec2fa3 100644 --- a/files/fr/web/css/line-height/index.md +++ b/files/fr/web/css/line-height/index.md @@ -52,7 +52,7 @@ La propriété `line-height` peut être définie grâce : ### Valeurs - `normal` - - : Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de `font-family`. + - : Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de `font-family`. - `<number>` - : La valeur utilisée est **sans unité** (type {{cssxref("<number>")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec `<number>`. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir `line-height` et éviter les effets de l'héritage. - `<length>` @@ -75,7 +75,7 @@ La propriété `line-height` peut être définie grâce : div { line-height: 1.2; font-size: 10pt } /* number */ div { line-height: 1.2em; font-size: 10pt } /* length */ div { line-height: 120%; font-size: 10pt } /* percentage */ -div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } +div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } ``` ### Notes diff --git a/files/fr/web/css/margin-block-end/index.md b/files/fr/web/css/margin-block-end/index.md index 4729fd9213..55eda0fd63 100644 --- a/files/fr/web/css/margin-block-end/index.md +++ b/files/fr/web/css/margin-block-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-block-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-block-end`** définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-block-end`** définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-block-end.html")}}Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément. diff --git a/files/fr/web/css/margin-block-start/index.md b/files/fr/web/css/margin-block-start/index.md index 4dc2eea34d..91e9cc9344 100644 --- a/files/fr/web/css/margin-block-start/index.md +++ b/files/fr/web/css/margin-block-start/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-block-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-block-start`** définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-block-start`** définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-block-start.html")}} diff --git a/files/fr/web/css/margin-block/index.md b/files/fr/web/css/margin-block/index.md index 0e5ed13c26..8815879177 100644 --- a/files/fr/web/css/margin-block/index.md +++ b/files/fr/web/css/margin-block/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/margin-block --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-block`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`margin-block`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ @@ -86,5 +86,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} +- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} - Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/margin-inline-end/index.md b/files/fr/web/css/margin-inline-end/index.md index bbe3597bf1..3f53da9a6a 100644 --- a/files/fr/web/css/margin-inline-end/index.md +++ b/files/fr/web/css/margin-inline-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-inline-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-inline-end`** définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-inline-end`** définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-inline-end.html")}} diff --git a/files/fr/web/css/margin-inline-start/index.md b/files/fr/web/css/margin-inline-start/index.md index f457427a1c..338eea724d 100644 --- a/files/fr/web/css/margin-inline-start/index.md +++ b/files/fr/web/css/margin-inline-start/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-inline-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-inline-start`** définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-inline-start`** définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-inline-start.html")}} diff --git a/files/fr/web/css/margin-inline/index.md b/files/fr/web/css/margin-inline/index.md index 9a374a5564..25a58195fb 100644 --- a/files/fr/web/css/margin-inline/index.md +++ b/files/fr/web/css/margin-inline/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/margin-inline --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-inline`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`margin-inline`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ @@ -86,5 +86,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} +- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} - Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/margin-left/index.md b/files/fr/web/css/margin-left/index.md index e80263ac29..cdf9dce017 100644 --- a/files/fr/web/css/margin-left/index.md +++ b/files/fr/web/css/margin-left/index.md @@ -164,13 +164,13 @@ La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<le </p> <p class=exemple> Alice s’avança pour les regarder, et, au moment où - elle approchait, elle en entendit un qui disait : - « Fais donc attention, Cinq, et ne m’éclabousse pas - ainsi avec ta peinture. » + elle approchait, elle en entendit un qui disait : + « Fais donc attention, Cinq, et ne m’éclabousse pas + ainsi avec ta peinture. » </p> <p> - « Ce n’est pas de ma faute, » dit Cinq d’un ton - bourru, « c’est Sept qui m’a poussé le coude. » + « Ce n’est pas de ma faute, » dit Cinq d’un ton + bourru, « c’est Sept qui m’a poussé le coude. » </p> ``` diff --git a/files/fr/web/css/margin-right/index.md b/files/fr/web/css/margin-right/index.md index 7bf9c09f0e..100ce0fa9a 100644 --- a/files/fr/web/css/margin-right/index.md +++ b/files/fr/web/css/margin-right/index.md @@ -162,13 +162,13 @@ La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<le </p> <p class=exemple> Alice s’avança pour les regarder, et, au moment où - elle approchait, elle en entendit un qui disait : - « Fais donc attention, Cinq, et ne m’éclabousse pas - ainsi avec ta peinture. » + elle approchait, elle en entendit un qui disait : + « Fais donc attention, Cinq, et ne m’éclabousse pas + ainsi avec ta peinture. » </p> <p> - « Ce n’est pas de ma faute, » dit Cinq d’un ton - bourru, « c’est Sept qui m’a poussé le coude. » + « Ce n’est pas de ma faute, » dit Cinq d’un ton + bourru, « c’est Sept qui m’a poussé le coude. » </p> ``` diff --git a/files/fr/web/css/margin/index.md b/files/fr/web/css/margin/index.md index d59ed50cf2..d8647fbf8a 100644 --- a/files/fr/web/css/margin/index.md +++ b/files/fr/web/css/margin/index.md @@ -71,13 +71,13 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type ```css .ex1 { - margin: auto; - background: gold; - width: 66%; + margin: auto; + background: gold; + width: 66%; } .ex2 { - margin: 20px 0px 0 -20px; - background: gold; + margin: 20px 0px 0 -20px; + background: gold; width: 66%; } ``` @@ -86,14 +86,14 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type ```html <div class="ex1"> - margin: auto; - background: gold; - width: 66%; + margin: auto; + background: gold; + width: 66%; </div> <div class="ex2"> - margin: 20px 0px 0px -20px; - background: gold; - width: 66%; + margin: 20px 0px 0px -20px; + background: gold; + width: 66%; </div> ``` diff --git a/files/fr/web/css/mask-border-slice/index.md b/files/fr/web/css/mask-border-slice/index.md index 9809d2497f..8bc2240b08 100644 --- a/files/fr/web/css/mask-border-slice/index.md +++ b/files/fr/web/css/mask-border-slice/index.md @@ -22,7 +22,7 @@ Le diagramme ci-avant illustre l'emplacement de chaque région. - Les zones 5 à 8 sont les zones de côtés. Ces zones peuvent être [répétées, redimensionnées, ou modifiées](/fr/docs/Web/CSS/mask-border-repeat) afin que le masque de bordule final aient les mêmes dimensions que l'élément. - La zone 9 est la zone centrale. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé `fill` est utilisé. -Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final. +Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final. ## Syntaxe diff --git a/files/fr/web/css/mask/index.md b/files/fr/web/css/mask/index.md index 3b86121fda..80e7d2e677 100644 --- a/files/fr/web/css/mask/index.md +++ b/files/fr/web/css/mask/index.md @@ -78,7 +78,7 @@ mask: unset; ```css .exemple{ - mask:url(https://developer.mozilla.org/static/img/favicon72.png) luminance 20%; + mask:url(https://developer.mozilla.org/static/img/favicon72.png) luminance 20%; } ``` diff --git a/files/fr/web/css/max-height/index.md b/files/fr/web/css/max-height/index.md index 6e20a91a3a..b93c839434 100644 --- a/files/fr/web/css/max-height/index.md +++ b/files/fr/web/css/max-height/index.md @@ -52,7 +52,7 @@ max-height: unset; - `min-content` {{experimental_inline}} - : La hauteur intrinsèque minimale. - `fill-available`{{experimental_inline}} - - : La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un ancien nom : `available`. + - : La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un ancien nom : `available`. - `fit-content` {{experimental_inline}} - : Un synonyme pour `max-content`. @@ -66,10 +66,10 @@ max-height: unset; ```html <div> Lorem ipsum tralala sit amet, consectetur adipisicing - <p> + <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - </p> + </p> </div> ``` diff --git a/files/fr/web/css/max-width/index.md b/files/fr/web/css/max-width/index.md index 330c750484..79273a5def 100644 --- a/files/fr/web/css/max-width/index.md +++ b/files/fr/web/css/max-width/index.md @@ -66,10 +66,10 @@ max-width: unset; ```html <div> Lorem ipsum tralala sit amet, consectetur adipisicing - <p> + <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - </p> + </p> </div> ``` diff --git a/files/fr/web/css/media_queries/index.md b/files/fr/web/css/media_queries/index.md index b53dfe7249..352384133b 100644 --- a/files/fr/web/css/media_queries/index.md +++ b/files/fr/web/css/media_queries/index.md @@ -39,10 +39,10 @@ Vous pouvez en découvrir plus dans l'article [Tester des requêtes media](/fr/d | Spécification | État | Commentaires | | ------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS5 Media Queries')}} | {{Spec2('CSS5 Media Queries')}} | | -| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | | -| {{SpecName('CSS4 Media Queries')}} | {{Spec2('CSS4 Media Queries')}} | | -| {{SpecName('CSS3 Media Queries')}} | {{Spec2('CSS3 Media Queries')}} | | +| {{SpecName('CSS5 Media Queries')}} | {{Spec2('CSS5 Media Queries')}} | | +| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | | +| {{SpecName('CSS4 Media Queries')}} | {{Spec2('CSS4 Media Queries')}} | | +| {{SpecName('CSS3 Media Queries')}} | {{Spec2('CSS3 Media Queries')}} | | | {{SpecName('CSS2.1', 'media.html')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/css/media_queries/testing_media_queries/index.md b/files/fr/web/css/media_queries/testing_media_queries/index.md index 072c3e63c5..c407a9a6bf 100644 --- a/files/fr/web/css/media_queries/testing_media_queries/index.md +++ b/files/fr/web/css/media_queries/testing_media_queries/index.md @@ -61,7 +61,7 @@ function handleOrientationChange(mql) { ## Terminer la réception des notifications -Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser `removeListener()` sur l'objet {{domxref("MediaQueryList") }} : +Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser `removeListener()` sur l'objet {{domxref("MediaQueryList") }} : ```js mql.removeListener(handleOrientationChange); diff --git a/files/fr/web/css/min-block-size/index.md b/files/fr/web/css/min-block-size/index.md index 3ce41af49e..ececdb5ae2 100644 --- a/files/fr/web/css/min-block-size/index.md +++ b/files/fr/web/css/min-block-size/index.md @@ -14,7 +14,7 @@ La propriété **`min-block-size`** définit la taille minimale horizontale ou v {{EmbedInteractiveExample("pages/css/min-block-size.html")}} -Si le mode d'écriture est orienté verticalement, `min-block-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne. +Si le mode d'écriture est orienté verticalement, `min-block-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne. ## Syntaxe diff --git a/files/fr/web/css/min-inline-size/index.md b/files/fr/web/css/min-inline-size/index.md index 3b7bc6590d..013d1656c8 100644 --- a/files/fr/web/css/min-inline-size/index.md +++ b/files/fr/web/css/min-inline-size/index.md @@ -15,7 +15,7 @@ La propriété **`min-inline-size`** définit la taille minimale horizontale ou {{EmbedInteractiveExample("pages/css/min-inline-size.html")}} -Si le mode d'écriture est orienté verticalement, `min-inline-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs. +Si le mode d'écriture est orienté verticalement, `min-inline-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs. ## Syntaxe diff --git a/files/fr/web/css/min-width/index.md b/files/fr/web/css/min-width/index.md index b2b29ec525..f87bbbec5f 100644 --- a/files/fr/web/css/min-width/index.md +++ b/files/fr/web/css/min-width/index.md @@ -65,10 +65,10 @@ min-width: unset; ```html <div> Lorem ipsum tralala sit amet, consectetur adipisicing - <p> - Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - </p> + <p> + Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + </p> </div> ``` diff --git a/files/fr/web/css/offset-position/index.md b/files/fr/web/css/offset-position/index.md index 6338de06f9..ecf9e8b56a 100644 --- a/files/fr/web/css/offset-position/index.md +++ b/files/fr/web/css/offset-position/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/offset-position --- {{CSSRef}}{{seecompattable}} -La propriété [CSS](/fr/docs/Web/CSS) **`offset-position`** définit la [position initiale](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position) de {{cssxref("offset-path")}}. +La propriété [CSS](/fr/docs/Web/CSS) **`offset-position`** définit la [position initiale](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position) de {{cssxref("offset-path")}}. ## Syntax @@ -43,7 +43,7 @@ offset-position: unset; - `auto` - : La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}. - `<position>` - - : Une {{cssxref("<position>")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme `center`. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}. + - : Une {{cssxref("<position>")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme `center`. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}. ## Définition formelle diff --git a/files/fr/web/css/opacity/index.md b/files/fr/web/css/opacity/index.md index 1f6f054b5f..ca25297b2b 100644 --- a/files/fr/web/css/opacity/index.md +++ b/files/fr/web/css/opacity/index.md @@ -125,7 +125,7 @@ img.opacity:hover { Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision. -Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du [WCAG](https://www.w3.org/WAI/intro/wcag) conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus). +Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du [WCAG](https://www.w3.org/WAI/intro/wcag) conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus). - [Vérificateur de contraste WebAIM](https://webaim.org/resources/contrastchecker/) - [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) diff --git a/files/fr/web/css/order/index.md b/files/fr/web/css/order/index.md index 1c00e89369..b34c47a7ad 100644 --- a/files/fr/web/css/order/index.md +++ b/files/fr/web/css/order/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/order --- {{CSSRef}} -La propriété **`order`** définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de `order`. Les éléments ayant la même valeur pour `order` seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document. +La propriété **`order`** définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de `order`. Les éléments ayant la même valeur pour `order` seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document. {{EmbedInteractiveExample("pages/css/order.html")}} diff --git a/files/fr/web/css/outline-color/index.md b/files/fr/web/css/outline-color/index.md index 74e13e5780..cc4800266f 100644 --- a/files/fr/web/css/outline-color/index.md +++ b/files/fr/web/css/outline-color/index.md @@ -62,9 +62,9 @@ La propriété `outline-color` est définie avec une des valeurs listées ci-apr ```css .exemple { - /* Tout d'abord on utiliser outline */ + /* Tout d'abord on utiliser outline */ /* pour définir le contour */ - outline: 2px solid; + outline: 2px solid; /* Ensuite on précise sa couleur avec */ /* outline-color */ diff --git a/files/fr/web/css/outline/index.md b/files/fr/web/css/outline/index.md index 25c76f72da..1b59d4c6ed 100644 --- a/files/fr/web/css/outline/index.md +++ b/files/fr/web/css/outline/index.md @@ -117,7 +117,7 @@ Utiliser la propriété `outline` avec une valeur `0` ou `none` supprimera le st - {{cssxref(":focus")}} - [Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/) -- [_Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) +- [_Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) ## Spécifications diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md index ea37884c8f..856b706b44 100644 --- a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md @@ -35,7 +35,7 @@ Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la pr ```css body { - overflow-anchor: none; + overflow-anchor: none; } ``` @@ -43,7 +43,7 @@ Pour désactiver cette fonctionnalité sur une certaine partie du document, on c ```css .container { - overflow-anchor: none; + overflow-anchor: none; } ``` diff --git a/files/fr/web/css/overflow-block/index.md b/files/fr/web/css/overflow-block/index.md index 5d6a858d0f..9a46f393db 100644 --- a/files/fr/web/css/overflow-block/index.md +++ b/files/fr/web/css/overflow-block/index.md @@ -104,7 +104,7 @@ La propriété `overflow-block` se définit avec un mot-clé parmi ceux de la li | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow-inline/index.md b/files/fr/web/css/overflow-inline/index.md index 645ef86b07..6b591d8042 100644 --- a/files/fr/web/css/overflow-inline/index.md +++ b/files/fr/web/css/overflow-inline/index.md @@ -104,7 +104,7 @@ La propriété `overflow-inline` se définit avec un mot-clé parmi ceux de la l | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow-wrap/index.md b/files/fr/web/css/overflow-wrap/index.md index 3339efb978..21f7847642 100644 --- a/files/fr/web/css/overflow-wrap/index.md +++ b/files/fr/web/css/overflow-wrap/index.md @@ -70,7 +70,7 @@ p { } .hyphens { - -webkit-hyphens: auto; + -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } diff --git a/files/fr/web/css/overflow-x/index.md b/files/fr/web/css/overflow-x/index.md index 8dc2978616..2c2e8127e5 100644 --- a/files/fr/web/css/overflow-x/index.md +++ b/files/fr/web/css/overflow-x/index.md @@ -113,7 +113,7 @@ La propriété `overflow-x` est définie avec l'un des mots-clés définis ci-ap | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow-y/index.md b/files/fr/web/css/overflow-y/index.md index b4aa6b9e1c..6cd79717f8 100644 --- a/files/fr/web/css/overflow-y/index.md +++ b/files/fr/web/css/overflow-y/index.md @@ -117,7 +117,7 @@ La propriété `overflow-y` est définie avec un des mots-clés définis ci-apr | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow/index.md b/files/fr/web/css/overflow/index.md index 26f0aee259..ef7313308e 100644 --- a/files/fr/web/css/overflow/index.md +++ b/files/fr/web/css/overflow/index.md @@ -11,7 +11,7 @@ La propriété CSS **`overflow`** est une [propriété raccourcie](/fr/docs/Web/ Lorsqu'on utilise la propriété `overflow` avec une autre valeur que `visible` (la valeur par défaut), cela entraîne la création [d'un nouveau contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context). Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée -Afin que la propriété `overflow` puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir `white-space` avec la valeur `nowrap.` +Afin que la propriété `overflow` puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir `white-space` avec la valeur `nowrap.` > **Note :** Si on définit un axe avec `visible` (la valeur par défaut) et qu'on définit l'autre axe avec une valeur différente, alors la valeur du premier axe (`visible`) sera considérée comme `auto`. diff --git a/files/fr/web/css/overscroll-behavior-x/index.md b/files/fr/web/css/overscroll-behavior-x/index.md index 9b826e5fc1..7fc4fbdf01 100644 --- a/files/fr/web/css/overscroll-behavior-x/index.md +++ b/files/fr/web/css/overscroll-behavior-x/index.md @@ -65,7 +65,7 @@ main > div { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------ | -| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}} | {{Spec2('Overscroll Behavior')}} | | +| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}} | {{Spec2('Overscroll Behavior')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overscroll-behavior-y/index.md b/files/fr/web/css/overscroll-behavior-y/index.md index d0b61a6242..ea4cdaf7eb 100644 --- a/files/fr/web/css/overscroll-behavior-y/index.md +++ b/files/fr/web/css/overscroll-behavior-y/index.md @@ -53,13 +53,13 @@ La propriété `overscroll-behavior-x` est définie avec un des mots-clés défi } ``` -Voir {{cssxref("overscroll-behavior")}} pour un exemple complet et plus de détails. +Voir {{cssxref("overscroll-behavior")}} pour un exemple complet et plus de détails. ## Spécifications | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------ | -| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}} | {{Spec2('Overscroll Behavior')}} | | +| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}} | {{Spec2('Overscroll Behavior')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overscroll-behavior/index.md b/files/fr/web/css/overscroll-behavior/index.md index 16e2cc1003..8056f3384e 100644 --- a/files/fr/web/css/overscroll-behavior/index.md +++ b/files/fr/web/css/overscroll-behavior/index.md @@ -81,7 +81,7 @@ Jusqu'à ce que le CSSWG publie son propre brouillon, la spécification est cons | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------ | -| {{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}} | {{Spec2('CSS Overscroll Behavior')}} | | +| {{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}} | {{Spec2('CSS Overscroll Behavior')}} | | {{cssinfo}} diff --git a/files/fr/web/css/padding-block-end/index.md b/files/fr/web/css/padding-block-end/index.md index 46d4e35eac..a4f5c71ef6 100644 --- a/files/fr/web/css/padding-block-end/index.md +++ b/files/fr/web/css/padding-block-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/padding-block-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-block-end`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-block-end`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Elle est à rapprocher des propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément. diff --git a/files/fr/web/css/padding-block-start/index.md b/files/fr/web/css/padding-block-start/index.md index f9be8d7d0c..24d0594623 100644 --- a/files/fr/web/css/padding-block-start/index.md +++ b/files/fr/web/css/padding-block-start/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/padding-block-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-block-start`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-block-start`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Elle est à rapprocher des propriétés {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément. diff --git a/files/fr/web/css/padding-block/index.md b/files/fr/web/css/padding-block/index.md index cb96016492..83dc9d4598 100644 --- a/files/fr/web/css/padding-block/index.md +++ b/files/fr/web/css/padding-block/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/padding-block --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-block`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-block`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-inline-end/index.md b/files/fr/web/css/padding-inline-end/index.md index 5e11b47f70..d1538c3310 100644 --- a/files/fr/web/css/padding-inline-end/index.md +++ b/files/fr/web/css/padding-inline-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/padding-inline-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-inline-end`** définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-inline-end`** définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-start")}}. diff --git a/files/fr/web/css/padding-inline/index.md b/files/fr/web/css/padding-inline/index.md index 136ee341a6..c9c830559e 100644 --- a/files/fr/web/css/padding-inline/index.md +++ b/files/fr/web/css/padding-inline/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/padding-inline --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-inline`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-inline`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-left/index.md b/files/fr/web/css/padding-left/index.md index 3116605b51..282bd3ef25 100644 --- a/files/fr/web/css/padding-left/index.md +++ b/files/fr/web/css/padding-left/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/padding-left --- {{CSSRef}} -La propriété **`padding-left`** d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) correspond à l'espace entre le contenu et la bordure. `padding-left` ne peut pas recevoir de valeurs négatives. +La propriété **`padding-left`** d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) correspond à l'espace entre le contenu et la bordure. `padding-left` ne peut pas recevoir de valeurs négatives. {{EmbedInteractiveExample("pages/css/padding-left.html")}} diff --git a/files/fr/web/css/padding-right/index.md b/files/fr/web/css/padding-right/index.md index d28a0c6494..49333223b0 100644 --- a/files/fr/web/css/padding-right/index.md +++ b/files/fr/web/css/padding-right/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/padding-right --- {{CSSRef}} -La propriété **`padding-right`** d'un élément correspond à l'espace nécessaire à la droite d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte "http://developer.mozilla.org/en/CSS/Box_model#padding") correspond à l'espace entre le contenu et la bordure. `padding-right` ne peut pas recevoir de valeurs négatives. +La propriété **`padding-right`** d'un élément correspond à l'espace nécessaire à la droite d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte "http://developer.mozilla.org/en/CSS/Box_model#padding") correspond à l'espace entre le contenu et la bordure. `padding-right` ne peut pas recevoir de valeurs négatives. {{EmbedInteractiveExample("pages/css/padding-right.html")}} diff --git a/files/fr/web/css/path()/index.md b/files/fr/web/css/path()/index.md index cfc0fcd2c1..fb6b5f61a6 100644 --- a/files/fr/web/css/path()/index.md +++ b/files/fr/web/css/path()/index.md @@ -10,7 +10,7 @@ La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`path()` ## Syntaxe ```css -path( [[<'fill-rule'>,]?<string>) +path( [[<'fill-rule'>,]?<string>) ``` ### Paramètres diff --git a/files/fr/web/css/perspective/index.md b/files/fr/web/css/perspective/index.md index 26a72c66ee..4566cac26b 100644 --- a/files/fr/web/css/perspective/index.md +++ b/files/fr/web/css/perspective/index.md @@ -14,7 +14,7 @@ La propriété **`perspective`** détermine la distance entre le plan d'équatio {{EmbedInteractiveExample("pages/css/perspective.html")}} -Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété `perspective`) ne sont pas dessiné. +Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété `perspective`) ne sont pas dessiné. Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}. @@ -138,7 +138,7 @@ perspective: unset; perspective: 500px; } .pers650 { - perspective: 650px; + perspective: 650px; } /* On définit le div pour le conteneur, */ diff --git a/files/fr/web/css/place-content/index.md b/files/fr/web/css/place-content/index.md index 8b658a4163..2510d39bca 100644 --- a/files/fr/web/css/place-content/index.md +++ b/files/fr/web/css/place-content/index.md @@ -115,12 +115,12 @@ div > div { ```html <div id="container"> - <div class="small">Lorem</div> - <div class="small">Lorem<br/>ipsum</div> - <div class="large">Lorem</div> - <div class="large">Lorem<br/>impsum</div> - <div class="large"></div> - <div class="large"></div> + <div class="small">Lorem</div> + <div class="small">Lorem<br/>ipsum</div> + <div class="large">Lorem</div> + <div class="large">Lorem<br/>impsum</div> + <div class="large"></div> + <div class="large"></div> </div> ``` @@ -151,7 +151,7 @@ div > div { <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> </select> -<select id="justifyContentAlignment"> +<select id="justifyContentAlignment"> <option value="normal">normal</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> diff --git a/files/fr/web/css/place-items/index.md b/files/fr/web/css/place-items/index.md index 33a3d4b4d5..c2b1d82d0f 100644 --- a/files/fr/web/css/place-items/index.md +++ b/files/fr/web/css/place-items/index.md @@ -183,26 +183,26 @@ select { <div class="row"> <label for="values">place-items: </label> <select id="values"> - <option value="start">start</option> - <option value="center">center</option> - <option value="end">end</option> - <option value="left">left</option> - <option value="right">right</option> - <option value="auto center">auto center</option> - <option value="normal start">normal start</option> - <option value="center normal">center normal</option> - <option value="start auto">start auto</option> - <option value="end normal">end normal</option> - <option value="self-start auto">self-start auto</option> - <option value="self-end normal">self-end normal</option> - <option value="flex-start auto">flex-start auto</option> - <option value="flex-end normal">flex-end normal</option> - <option value="left auto">left auto</option> - <option value="right normal">right normal</option> - <option value="baseline normal">baseline normal</option> - <option value="first baseline auto">first baseline auto</option> - <option value="last baseline normal">last baseline normal</option> - <option value="stretch auto">stretch auto</option> + <option value="start">start</option> + <option value="center">center</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + <option value="auto center">auto center</option> + <option value="normal start">normal start</option> + <option value="center normal">center normal</option> + <option value="start auto">start auto</option> + <option value="end normal">end normal</option> + <option value="self-start auto">self-start auto</option> + <option value="self-end normal">self-end normal</option> + <option value="flex-start auto">flex-start auto</option> + <option value="flex-end normal">flex-end normal</option> + <option value="left auto">left auto</option> + <option value="right normal">right normal</option> + <option value="baseline normal">baseline normal</option> + <option value="first baseline auto">first baseline auto</option> + <option value="last baseline normal">last baseline normal</option> + <option value="stretch auto">stretch auto</option> </select> </div> ``` diff --git a/files/fr/web/css/place-self/index.md b/files/fr/web/css/place-self/index.md index 0e96a5452e..7dff47e681 100644 --- a/files/fr/web/css/place-self/index.md +++ b/files/fr/web/css/place-self/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/place-self --- {{CSSRef}} -La propriété **`place-self`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et {{cssxref("justify-self")}}. La première valeur sera utilisée pour `align-self` et la seconde pour `justify-self`. S'il n'y a pas de seconde valeur, la première sera également utilisée pour `justify-self`. +La propriété **`place-self`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et {{cssxref("justify-self")}}. La première valeur sera utilisée pour `align-self` et la seconde pour `justify-self`. S'il n'y a pas de seconde valeur, la première sera également utilisée pour `justify-self`. {{EmbedInteractiveExample("pages/css/place-self.html")}} diff --git a/files/fr/web/css/pseudo-classes/index.md b/files/fr/web/css/pseudo-classes/index.md index 1c844c04d1..079577412f 100644 --- a/files/fr/web/css/pseudo-classes/index.md +++ b/files/fr/web/css/pseudo-classes/index.md @@ -92,7 +92,7 @@ Les pseudo-classes permettent d'appliquer un style à un élément non seulement - {{CSSxRef(":user-invalid")}} {{Experimental_Inline}} - {{CSSxRef(":valid")}} - {{CSSxRef(":visited")}} -- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} +- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} ## Exemples @@ -113,19 +113,19 @@ p:nth-child(2n+1) { ```html <div> <p class="survol"> - La Reine devint pourpre de colère ; et après + La Reine devint pourpre de colère ; et après l’avoir considérée un moment avec des yeux flamboyants comme ceux d’une bête fauve, elle - se mit à crier : « Qu’on lui coupe la tête ! » + se mit à crier : « Qu’on lui coupe la tête ! » </p> <p> - « Quelle idée ! » dit Alice très-haut et d’un + « Quelle idée ! » dit Alice très-haut et d’un ton décidé. La Reine se tut. </p> <p> Le Roi lui posa la main sur le bras, et lui - dit timidement : « Considérez donc, ma chère - amie, que ce n’est qu’une enfant. » + dit timidement : « Considérez donc, ma chère + amie, que ce n’est qu’une enfant. » </p> </div> ``` @@ -174,7 +174,7 @@ p:nth-child(2n+1) { </p> <p> Changement afin que <code>:empty</code> se comporte comme - {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}. + {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}. </p> <p> Aucune modification significative pour les pseudo-classes définies @@ -222,7 +222,7 @@ p:nth-child(2n+1) { <td> Définition de <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> et <code>:focus</code>.<br />Aucune modification - significative pour les pseudo-classes définies avec + significative pour les pseudo-classes définies avec {{SpecName('CSS1')}}. </td> </tr> diff --git a/files/fr/web/css/quotes/index.md b/files/fr/web/css/quotes/index.md index 02fcdbb876..7036eaf34f 100644 --- a/files/fr/web/css/quotes/index.md +++ b/files/fr/web/css/quotes/index.md @@ -73,7 +73,7 @@ q { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("CSS3 Content", "#quotes", "quotes")}} | {{Spec2("CSS3 Content")}} | | +| {{SpecName("CSS3 Content", "#quotes", "quotes")}} | {{Spec2("CSS3 Content")}} | | | {{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}} | {{Spec2('CSS2.1')}} | Définition initiale | {{cssinfo}} diff --git a/files/fr/web/css/ratio/index.md b/files/fr/web/css/ratio/index.md index cc926f417f..8a58889b12 100644 --- a/files/fr/web/css/ratio/index.md +++ b/files/fr/web/css/ratio/index.md @@ -25,7 +25,7 @@ Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref ### Ratios fréquemment utilisés -| | Ratio | Utilisation | +| | Ratio | Utilisation | | -------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | |  | `4/3` | Format traditionnel utilisé par les télévisions au XX<sup>e</sup> siècle. | |  | `16/9` | Format « moderne » des télévisions. | diff --git a/files/fr/web/css/resize/index.md b/files/fr/web/css/resize/index.md index 4a28c415f3..9ce19a1dbc 100644 --- a/files/fr/web/css/resize/index.md +++ b/files/fr/web/css/resize/index.md @@ -63,7 +63,7 @@ Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensio ```css textarea.exemple { - resize: none; + resize: none; } ``` @@ -108,7 +108,7 @@ p { <p class="redimensionnable"> Ce paragraphe peut être redimensionné car la propriété CSS resize vaut 'both' sur cet élément. - </p> + </p> </div> ``` diff --git a/files/fr/web/css/right/index.md b/files/fr/web/css/right/index.md index 206f0785a9..c3c30c827e 100644 --- a/files/fr/web/css/right/index.md +++ b/files/fr/web/css/right/index.md @@ -53,7 +53,7 @@ right: unset; - pour les éléments à positionnement relatif : le décalage à droite que l'élément subit par rapport à sa position dans le flux normal s'il n'était pas positionné. - `<percentage>` - - : Une valeur de type {{cssxref("<percentage>")}} représentant le pourcentage de la largeur du bloc englobant. + - : Une valeur de type {{cssxref("<percentage>")}} représentant le pourcentage de la largeur du bloc englobant. - `auto` - : Un mot-clé qui représente : diff --git a/files/fr/web/css/rotate/index.md b/files/fr/web/css/rotate/index.md index 853720f5a9..c4f5572552 100644 --- a/files/fr/web/css/rotate/index.md +++ b/files/fr/web/css/rotate/index.md @@ -52,7 +52,7 @@ rotate: 1 1 1 90deg; ```html <div> - <p class="rotate">Rotation</p> + <p class="rotate">Rotation</p> </div> ``` diff --git a/files/fr/web/css/ruby-position/index.md b/files/fr/web/css/ruby-position/index.md index 2897165c1c..ddf0332933 100644 --- a/files/fr/web/css/ruby-position/index.md +++ b/files/fr/web/css/ruby-position/index.md @@ -45,8 +45,8 @@ Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-posi ```html <ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> ``` @@ -54,14 +54,14 @@ Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-posi ```html hidden <ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> ``` ```css ruby { - ruby-position:over; + ruby-position:over; } ``` @@ -73,14 +73,14 @@ On obtiendra le résultat suivant : ```html hidden <ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> ``` ```css ruby { - ruby-position:under; + ruby-position:under; } ``` diff --git a/files/fr/web/css/scale/index.md b/files/fr/web/css/scale/index.md index 2d6a6ebcc5..65ec03ee20 100644 --- a/files/fr/web/css/scale/index.md +++ b/files/fr/web/css/scale/index.md @@ -47,7 +47,7 @@ scale: 2 0.5 2; ```html <div> - <p class="scale">Scaling</p> + <p class="scale">Scaling</p> </div> ``` diff --git a/files/fr/web/css/scroll-snap-destination/index.md b/files/fr/web/css/scroll-snap-destination/index.md index b92ac8f852..a5b2aa4811 100644 --- a/files/fr/web/css/scroll-snap-destination/index.md +++ b/files/fr/web/css/scroll-snap-destination/index.md @@ -42,27 +42,27 @@ scroll-snap-destination: unset; <div> <p>Coordonnées (0, 0)</p> <div class="scrollContainer destination0"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> </div> <div> <p>Coordonnées (25, 0)</p> <div class="scrollContainer destination25"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> </div> <div> <p>Coordonnées (50, 0)</p> <div class="scrollContainer destination50"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> </div> </div> diff --git a/files/fr/web/css/scroll-snap-points-x/index.md b/files/fr/web/css/scroll-snap-points-x/index.md index 752ecde0f1..1eb8066c03 100644 --- a/files/fr/web/css/scroll-snap-points-x/index.md +++ b/files/fr/web/css/scroll-snap-points-x/index.md @@ -44,9 +44,9 @@ scroll-snap-points-x: unset; ```html <div id="container"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> ``` @@ -54,12 +54,12 @@ scroll-snap-points-x: unset; ```css #container { - width: 200px; - overflow: auto; - white-space: nowrap; - scroll-snap-points-x: repeat(100%); - scroll-snap-type: mandatory; - font-size: 0; + width: 200px; + overflow: auto; + white-space: nowrap; + scroll-snap-points-x: repeat(100%); + scroll-snap-type: mandatory; + font-size: 0; } #container > div { diff --git a/files/fr/web/css/scroll-snap-points-y/index.md b/files/fr/web/css/scroll-snap-points-y/index.md index f8d1e9f162..a1a0640bea 100644 --- a/files/fr/web/css/scroll-snap-points-y/index.md +++ b/files/fr/web/css/scroll-snap-points-y/index.md @@ -45,9 +45,9 @@ scroll-snap-points-y: unset; ```html <div id="container"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> ``` diff --git a/files/fr/web/css/scroll-snap-type/index.md b/files/fr/web/css/scroll-snap-type/index.md index 2961d1ffb3..57ece68cd8 100644 --- a/files/fr/web/css/scroll-snap-type/index.md +++ b/files/fr/web/css/scroll-snap-type/index.md @@ -56,7 +56,7 @@ scroll-snap-type: unset; - `mandatory` - : Le _viewport_ visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche. - `proximity` - - : Le _viewport_ visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche. + - : Le _viewport_ visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche. ### Syntaxe formelle diff --git a/files/fr/web/css/selector_list/index.md b/files/fr/web/css/selector_list/index.md index 24e47e6a8d..3da51d89cd 100644 --- a/files/fr/web/css/selector_list/index.md +++ b/files/fr/web/css/selector_list/index.md @@ -87,4 +87,4 @@ h3 { font-family: sans-serif } ## Voir aussi -- Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs. +- Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs. diff --git a/files/fr/web/css/text-align/index.md b/files/fr/web/css/text-align/index.md index 78cabf13aa..f5d1f49380 100644 --- a/files/fr/web/css/text-align/index.md +++ b/files/fr/web/css/text-align/index.md @@ -177,7 +177,7 @@ La méthode la plus générique pour centrer un bloc plutot que de centrer son c L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs. - [Comprendre les règles WCAG 1.4](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [_Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) +- [_Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) ## Spécifications diff --git a/files/fr/web/css/text-decoration/index.md b/files/fr/web/css/text-decoration/index.md index b8fc9e345b..d4196bb280 100644 --- a/files/fr/web/css/text-decoration/index.md +++ b/files/fr/web/css/text-decoration/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/text-decoration La propriété **`text-decoration`** est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}. -{{EmbedInteractiveExample("pages/css/text-decoration.html")}}Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML `<p>Ce texte a <em> des mots mis en avant</em> dedans.</p>`, et cette règle CSS `p { text-decoration: underline; }`, on aura tout le paragraphe souligné, même si on applique la règle `em { text-decoration: none; }`, cela n'aurait aucun impact. En revanche, ajouter la règle `em { text-decoration: overline; }` entraînerait un cumul des décorations pour « des mots mis en avant ». +{{EmbedInteractiveExample("pages/css/text-decoration.html")}}Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML `<p>Ce texte a <em> des mots mis en avant</em> dedans.</p>`, et cette règle CSS `p { text-decoration: underline; }`, on aura tout le paragraphe souligné, même si on applique la règle `em { text-decoration: none; }`, cela n'aurait aucun impact. En revanche, ajouter la règle `em { text-decoration: overline; }` entraînerait un cumul des décorations pour « des mots mis en avant ». > **Note :** La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie. diff --git a/files/fr/web/css/text-emphasis-position/index.md b/files/fr/web/css/text-emphasis-position/index.md index 723c88c987..a1609f5de4 100644 --- a/files/fr/web/css/text-emphasis-position/index.md +++ b/files/fr/web/css/text-emphasis-position/index.md @@ -33,7 +33,7 @@ text-emphasis-position: unset; ## Position privilégiée -La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais : +La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais : <table> <caption> diff --git a/files/fr/web/css/text-justify/index.md b/files/fr/web/css/text-justify/index.md index 7cb0bb2de3..380c5e88e3 100644 --- a/files/fr/web/css/text-justify/index.md +++ b/files/fr/web/css/text-justify/index.md @@ -32,7 +32,7 @@ La propriété `text-justify` peut être définie grâce à l'un des mots-clés - `inter-word` - : Le texte est justifié en ajustant les espaces entre les mots (en faisant varier {{cssxref("word-spacing")}}) ; cette propriété est appropriée pour les langues qui séparent les mots avec des espaces, comme le Français ou le Coréen. - `inter-character` - - : Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ; cette propritété est plus appropriée pour des langues comme le Japonais. + - : Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ; cette propritété est plus appropriée pour des langues comme le Japonais. - `distribute` {{deprecated_inline}} - : Même effet que `inter-character` ; cette valeur sert uniquement à de fins de compatibilité. @@ -87,7 +87,7 @@ p { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}} | {{Spec2('CSS3 Text')}} | | +| {{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}} | {{Spec2('CSS3 Text')}} | | {{cssinfo}} diff --git a/files/fr/web/css/text-overflow/index.md b/files/fr/web/css/text-overflow/index.md index 4fd812b457..2fbdf2d945 100644 --- a/files/fr/web/css/text-overflow/index.md +++ b/files/fr/web/css/text-overflow/index.md @@ -11,9 +11,9 @@ La propriété **`text-overflow`** définit la façon dont le contenu textuel qu Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide (`''`). -Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec `white-space: nowrap`) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur. +Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec `white-space: nowrap`) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur. -Cette propriété CSS ne force pas le dépassement. Pour ce faire et afin que `text-overflow` soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec `hidden` et {{cssxref("white-space")}} avec `nowrap`. +Cette propriété CSS ne force pas le dépassement. Pour ce faire et afin que `text-overflow` soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec `hidden` et {{cssxref("white-space")}} avec `nowrap`. ## Syntaxe diff --git a/files/fr/web/css/text-shadow/index.md b/files/fr/web/css/text-shadow/index.md index 33daa71ad3..bdc5fcfc4d 100644 --- a/files/fr/web/css/text-shadow/index.md +++ b/files/fr/web/css/text-shadow/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/text-shadow --- {{CSSRef}} -La propriété **`text-shadow`** ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux [décorations](/fr/docs/Web/CSS/text-decoration) de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur. +La propriété **`text-shadow`** ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux [décorations](/fr/docs/Web/CSS/text-decoration) de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur. {{EmbedInteractiveExample("pages/css/text-shadow.html")}} @@ -36,20 +36,20 @@ text-shadow: unset; Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules. -Chaque ombre est spécifiée par deux ou trois valeurs `<length>`, suivies d'une valeur `<color>`. Les deux premières valeurs `<length>` sont les valeurs `<decalage-x>` et `<decalage-y>`. La troisième valeur `<length>`, facultative, est le `<rayon-de-flou>`. La valeur `<color>` est la couleur de l'ombre. +Chaque ombre est spécifiée par deux ou trois valeurs `<length>`, suivies d'une valeur `<color>`. Les deux premières valeurs `<length>` sont les valeurs `<decalage-x>` et `<decalage-y>`. La troisième valeur `<length>`, facultative, est le `<rayon-de-flou>`. La valeur `<color>` est la couleur de l'ombre. -Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus. +Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus. Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments) {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}. ### Valeurs - {{cssxref("<color>")}} - - : Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement. + - : Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement. - \<decalage-x> \<decalage-y> - - : Obligatoires. Ces valeurs {{cssxref("<length>")}} définissent la distance de l'ombre par rapport au texte. `<decalage-x>` définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. `<decalage-y>` définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à `0`, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du `<rayon-de-flou>`). + - : Obligatoires. Ces valeurs {{cssxref("<length>")}} définissent la distance de l'ombre par rapport au texte. `<decalage-x>` définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. `<decalage-y>` définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à `0`, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du `<rayon-de-flou>`). - \<rayon-de-flou> - - : Optionnel. C'est une valeur {{cssxref("<length>")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut `0`. + - : Optionnel. C'est une valeur {{cssxref("<length>")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut `0`. ### Syntaxe formelle @@ -95,8 +95,8 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}} | {{Spec2('CSS3 Transitions')}} | Spécifie `text-shadow` comme animable. | -| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}} | {{Spec2('CSS3 Text Decoration')}} | La propriété CSS `text-shadow` était [incorrectement définie dans CSS2](https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props) et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans [CSS Text Decoration Module Level 3](https://www.w3.org/TR/css-text-decor-3/). | +| {{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}} | {{Spec2('CSS3 Transitions')}} | Spécifie `text-shadow` comme animable. | +| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}} | {{Spec2('CSS3 Text Decoration')}} | La propriété CSS `text-shadow` était [incorrectement définie dans CSS2](https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props) et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans [CSS Text Decoration Module Level 3](https://www.w3.org/TR/css-text-decor-3/). | {{cssinfo}} @@ -104,13 +104,13 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud {{Compat("css.properties.text-shadow")}} -### Notes CSS Quantum +### Notes CSS Quantum -- Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une `text-shadow` avec une couleur spécifiée et une `ext-shadow` sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo)), prévu pour être disponible dans Firefox 57. +- Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une `text-shadow` avec une couleur spécifiée et une `ext-shadow` sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo)), prévu pour être disponible dans Firefox 57. ## Voir aussi -- [Text Shadow Generator](https://cssgenerator.org/text-shadow-css-generator.html) - Un générateur CSS d'ombre de texte interactif +- [Text Shadow Generator](https://cssgenerator.org/text-shadow-css-generator.html) - Un générateur CSS d'ombre de texte interactif - {{cssxref("box-shadow")}} - Le type de données {{cssxref("<color>")}} (pour spécifier la couleur d'ombre) - [Appliquer des couleurs sur des éléments HTML](/fr/docs/Web/HTML/Applying_color) diff --git a/files/fr/web/css/time-percentage/index.md b/files/fr/web/css/time-percentage/index.md index 7d979c4362..61f85952df 100644 --- a/files/fr/web/css/time-percentage/index.md +++ b/files/fr/web/css/time-percentage/index.md @@ -23,7 +23,7 @@ Lorsqu'une valeur de type `<time-percentage>` est autorisée dans une déclarati | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------- | -| {{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#mixed-percentages', '<time-percentage>')}} | {{Spec2('CSS3 Values')}} | Définition du type `<time-percentage>`. Ajout de `calc()` | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/time/index.md b/files/fr/web/css/time/index.md index c60d751bfc..f96c31af0c 100644 --- a/files/fr/web/css/time/index.md +++ b/files/fr/web/css/time/index.md @@ -51,7 +51,7 @@ La conversion entre `s` et `ms` suit la logique suivante : `1s = 1000ms`. | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | -------------------------------- | ------------------------------------ | -| {{SpecName('CSS4 Values','#time','<time>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values','#time','<time>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values','#time','<time>')}} | {{Spec2('CSS3 Values')}} | Définition normative de `s` et `ms` | | {{SpecName('CSS2.1','aural.html#times','<time>')}} | {{Spec2('CSS2.1')}} | Définition informelle de `s` et `ms` | diff --git a/files/fr/web/css/top/index.md b/files/fr/web/css/top/index.md index ed3aa1d772..de84e8a8a2 100644 --- a/files/fr/web/css/top/index.md +++ b/files/fr/web/css/top/index.md @@ -115,13 +115,13 @@ p.relatif { ```css div { - border: 2px black dashed; + border: 2px black dashed; } p.absolu { - position: absolute; - top: 5em; - border: 2px black solid; + position: absolute; + top: 5em; + border: 2px black solid; } ``` diff --git a/files/fr/web/css/transform-function/index.md b/files/fr/web/css/transform-function/index.md index c82da2eb3b..5edd5bb473 100644 --- a/files/fr/web/css/transform-function/index.md +++ b/files/fr/web/css/transform-function/index.md @@ -95,7 +95,7 @@ Plusieurs fonctions sont disponibles en CSS pour décrire des transformations. C - [`translate3d()`](</fr/docs/Web/CSS/transform-function/translate3d()>) - : La fonction `translate3d()` permet de déplacer un élément dans l'espace en 3D. Cette transformation est caractérisée par un vecteur en 3 dimensions dont les coordonnées définissent les quantités de déplacement respectives aux trois axes. - [`translateX()`](/fr/docs/orphaned/Web/CSS/transform-function/translateX) - - : La fonction `translateX()` permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement horizontal. `translateX(tx)`est une notation raccourcie pour `translate(tx, 0)`. + - : La fonction `translateX()` permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement horizontal. `translateX(tx)`est une notation raccourcie pour `translate(tx, 0)`. - [`translateY()`](</fr/docs/Web/CSS/transform-function/translateY()>) - : La fonction `translateY()` permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement vertical. `translateY(ty)` est une notation raccourcie pour `translate(0, ty)`. - [`translateZ()`](</fr/docs/Web/CSS/transform-function/translateZ()>) diff --git a/files/fr/web/css/transform-function/rotate3d()/index.md b/files/fr/web/css/transform-function/rotate3d()/index.md index eae07a3074..0dde6dc4b9 100644 --- a/files/fr/web/css/transform-function/rotate3d()/index.md +++ b/files/fr/web/css/transform-function/rotate3d()/index.md @@ -10,7 +10,7 @@ La fonction **`rotate3d()`** définit une transformation qui déplace un éléme {{EmbedInteractiveExample("pages/css/rotate3d.html")}} -Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide. +Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide. > **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. diff --git a/files/fr/web/css/transform-function/scaley()/index.md b/files/fr/web/css/transform-function/scaley()/index.md index 0b1d7315d5..7120a92d34 100644 --- a/files/fr/web/css/transform-function/scaley()/index.md +++ b/files/fr/web/css/transform-function/scaley()/index.md @@ -30,7 +30,7 @@ scaleY(s) <tr> <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> - <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> + <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> </tr> </thead> diff --git a/files/fr/web/css/transform-function/translate()/index.md b/files/fr/web/css/transform-function/translate()/index.md index c51a505285..8c2bb5b265 100644 --- a/files/fr/web/css/transform-function/translate()/index.md +++ b/files/fr/web/css/transform-function/translate()/index.md @@ -28,7 +28,7 @@ transform: translate(30%, 50%); ### Valeurs - Avec une seule valeur `<length-percentage>` - - : Cette valeur est de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). + - : Cette valeur est de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). - Avec deux valeurs `<length-percentage>` - : Ces valeurs sont de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) et décrivent respectivement l'abscisse (la coordonnée horizontale) et l'ordonnée (la coordonnée verticale) du vecteur de translation. Un premier pourcentage sera relatif à la largeur de la boîte de référence et un deuxième pourcentage sera relatif à sa hauteur (la boîte de référence étant définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box)). diff --git a/files/fr/web/css/transform-function/translate3d()/index.md b/files/fr/web/css/transform-function/translate3d()/index.md index feb4b031dc..f70578696e 100644 --- a/files/fr/web/css/transform-function/translate3d()/index.md +++ b/files/fr/web/css/transform-function/translate3d()/index.md @@ -21,9 +21,9 @@ translate3d(tx, ty, tz) ### Valeurs - `tx` - - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). - `ty` - - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). - `tz` - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type [`<percentage>`](/fr/docs/Web/CSS/percentage), si c'est le cas, la règle décrivant la transformation sera considérée comme invalide. diff --git a/files/fr/web/css/transform-function/translatey()/index.md b/files/fr/web/css/transform-function/translatey()/index.md index fdd27c602c..e2c7779624 100644 --- a/files/fr/web/css/transform-function/translatey()/index.md +++ b/files/fr/web/css/transform-function/translatey()/index.md @@ -30,7 +30,7 @@ transform: translateY(50%); <tr> <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> - <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> + <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> </tr> </thead> diff --git a/files/fr/web/css/translate/index.md b/files/fr/web/css/translate/index.md index 0016830cda..ac7256551b 100644 --- a/files/fr/web/css/translate/index.md +++ b/files/fr/web/css/translate/index.md @@ -35,7 +35,7 @@ translate: 50% 105px 5rem; - Une seule valeur de longueur/pourcentage ({{cssxref("<length-percentage>")}}) - : Une longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction `translate()` (translation en deux dimensions) avec une seule valeur. - Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) - - : Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction `translate()` appelée avec ces deux arguments. + - : Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction `translate()` appelée avec ces deux arguments. - Trois valeurs - : Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) et une longueur ({{cssxref("<length>")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction `translate3d()` appelée avec ces trois arguments. - `none` @@ -51,7 +51,7 @@ translate: 50% 105px 5rem; ```html <div> - <p class="translate">Translation</p> + <p class="translate">Translation</p> </div> ``` diff --git a/files/fr/web/css/translation-value/index.md b/files/fr/web/css/translation-value/index.md index 369e797128..689e9e7992 100644 --- a/files/fr/web/css/translation-value/index.md +++ b/files/fr/web/css/translation-value/index.md @@ -19,7 +19,7 @@ Un argument `<translation-value>` peut être une valeur de type {{cssxref("<l | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Transforms', '#transform-functions', 'The Transform Functions')}} | {{Spec2('CSS3 Transforms')}} | | +| {{SpecName('CSS3 Transforms', '#transform-functions', 'The Transform Functions')}} | {{Spec2('CSS3 Transforms')}} | | ## Voir aussi diff --git a/files/fr/web/css/type_selectors/index.md b/files/fr/web/css/type_selectors/index.md index 307773af45..89af40603d 100644 --- a/files/fr/web/css/type_selectors/index.md +++ b/files/fr/web/css/type_selectors/index.md @@ -51,7 +51,7 @@ span { | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | | {{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | | {{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | -| {{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1', '#basic-concepts', 'type selectors')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/unicode-bidi/index.md b/files/fr/web/css/unicode-bidi/index.md index 485461bb80..09d4ba0d18 100644 --- a/files/fr/web/css/unicode-bidi/index.md +++ b/files/fr/web/css/unicode-bidi/index.md @@ -58,8 +58,8 @@ unicode-bidi: unset; ```css .bible-quote { - direction: rtl; - unicode-bidi: embed; + direction: rtl; + unicode-bidi: embed; } ``` diff --git a/files/fr/web/css/used_value/index.md b/files/fr/web/css/used_value/index.md index 894df5e40c..74ec2c2d3f 100644 --- a/files/fr/web/css/used_value/index.md +++ b/files/fr/web/css/used_value/index.md @@ -13,7 +13,7 @@ original_slug: Web/CSS/Valeur_utilisée La **valeur utilisée** de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés. -Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple `width`, `height`) sont exprimées en pixels et les propriétés raccourcies (comme `background`) sont cohérentes avec leurs propriétés composantes (par exemple `background-color`), `display` est cohérente avec `position` et `float`. +Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple `width`, `height`) sont exprimées en pixels et les propriétés raccourcies (comme `background`) sont cohérentes avec leurs propriétés composantes (par exemple `background-color`), `display` est cohérente avec `position` et `float`. Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript [`window.getComputedStyle()`](/fr/docs/DOM/window.getComputedStyle). @@ -24,7 +24,7 @@ Quatre étapes permettent de déterminer la valeur finale de n'importe quelle pr 1. Tout d'abord, la [valeur spécifiée](/fr/docs/CSS/Valeur_spécifiée) est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'[héritage](/fr/docs/CSS/Héritage) (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée. 2. Ensuite, la [valeur calculée](/fr/docs/CSS/Valeur_calculée) est déterminée selon la spécification (par exemple, un `span` avec `position: absolute` aura `display` qui passera à `block` pour la valeur calculée). 3. Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur `auto` ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la **valeur utilisée**. -4. Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est [la valeur réelle](/fr/docs/Web/CSS/valeur_reelle). La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à [`window.getComputedStyle`](/fr/docs/DOM/window.getComputedStyle) (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée [valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)). +4. Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est [la valeur réelle](/fr/docs/Web/CSS/valeur_reelle). La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à [`window.getComputedStyle`](/fr/docs/DOM/window.getComputedStyle) (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée [valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)). ## Différence avec les valeurs calculées diff --git a/files/fr/web/css/user-select/index.md b/files/fr/web/css/user-select/index.md index df5a54f37b..c39adabb62 100644 --- a/files/fr/web/css/user-select/index.md +++ b/files/fr/web/css/user-select/index.md @@ -50,8 +50,8 @@ user-select: unset; - Pour les pseudo-éléments `::before` et `::after`, la valeur calculée sera `none` - Si l'élément est un élément éditable, la valeur calculée est `contain` - - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `all` - - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `none` + - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `all` + - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `none` - Sinon, la valeur calculée est `text` - `text` diff --git a/files/fr/web/css/using_css_custom_properties/index.md b/files/fr/web/css/using_css_custom_properties/index.md index 8151f52856..f8961efef3 100644 --- a/files/fr/web/css/using_css_custom_properties/index.md +++ b/files/fr/web/css/using_css_custom_properties/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties --- {{CSSRef}} -**Les propriétés personnalisées CSS** (_custom properties_ en anglais, aussi parfois appelés **variables CSS**) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple **`--main-color: black;`**) et accessibles en utilisant la notation spécifique {{cssxref("var", "var()")}} (par exemple : **`color: var(--main-color);`**). +**Les propriétés personnalisées CSS** (_custom properties_ en anglais, aussi parfois appelés **variables CSS**) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple **`--main-color: black;`**) et accessibles en utilisant la notation spécifique {{cssxref("var", "var()")}} (par exemple : **`color: var(--main-color);`**). Des sites et applications web complexes peuvent avoir des feuilles de style où de nombreuses valeurs sont répétées. Ainsi, la même couleur pourra être utilisée à des centaines d'endroits où il faudra la mettre à jour si besoin. Les propriétés personnalisées permettent de stocker une valeur à un endroit puis de réutiliser cette valeur (on factorise ainsi le code). @@ -31,18 +31,18 @@ element { Lors de l'élaboration de sites de grande envergure, leurs auteurs font parfois face à des soucis de maintenabilité. De grandes feuilles de styles sont utilisées et de nombreuses informations se répètent. Par exemple, maintenir un thème de couleurs à travers un document nécessite la réutilisation des valeurs des couleurs à plusieurs endroits dans les fichiers CSS. Modifier un thème, en changeant une couleur ou en le récrivant entièrement, devient alors une tâche complexe demandant de la précision, là où un simple trouver et remplacer ne suffit pas. -Le problème peut s'aggraver en utilisant les _frameworks_ CSS puisque modifier une couleur demande de modifier le framework lui-même. Les pré-processeurs comme [LESS](https://lesscss.org/) ou [Sass](https://sass-lang.com/) peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation. Les propriétés personnalisées permettent d'utiliser une des principales fonctionnalités des pré-processeurs, sans cette étape de compilation. +Le problème peut s'aggraver en utilisant les _frameworks_ CSS puisque modifier une couleur demande de modifier le framework lui-même. Les pré-processeurs comme [LESS](https://lesscss.org/) ou [Sass](https://sass-lang.com/) peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation. Les propriétés personnalisées permettent d'utiliser une des principales fonctionnalités des pré-processeurs, sans cette étape de compilation. -Le deuxième avantage de ces variables vient du fait que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre : écrire `main-text-color` permet de mieux s'y retrouver au fur et à mesure de la lecture qu'une valeur hexadécimale comme `#00ff00`, surtout si la même couleur est utilisée dans un autre contexte. +Le deuxième avantage de ces variables vient du fait que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre : écrire `main-text-color` permet de mieux s'y retrouver au fur et à mesure de la lecture qu'une valeur hexadécimale comme `#00ff00`, surtout si la même couleur est utilisée dans un autre contexte. ## Définition Les propriétés personnalisées ont actuellement deux formes : -- les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle `var()` : `var(--example-variable)` retourne la valeur de `--example-variable`. -- les propriétés personnalisées, qui sont des propriétés spéciales notées `--*` où `*` représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : `--example-variable: 20px;` est une déclaration en CSS, utilisant la propriété personnalisée `--*` pour initialiser la valeur de la variable CSS `--example-variable` à `20px`. +- les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle `var()` : `var(--example-variable)` retourne la valeur de `--example-variable`. +- les propriétés personnalisées, qui sont des propriétés spéciales notées `--*` où `*` représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : `--example-variable: 20px;` est une déclaration en CSS, utilisant la propriété personnalisée `--*` pour initialiser la valeur de la variable CSS `--example-variable` à `20px`. -> **Note :** Le préfixe de propriété personnalisée était noté `var-` dans les précédentes spécifications, mais a ensuite été changé pour `--`. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}}) +> **Note :** Le préfixe de propriété personnalisée était noté `var-` dans les précédentes spécifications, mais a ensuite été changé pour `--`. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}}) Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies. @@ -103,7 +103,7 @@ ce qui donne ceci : {{EmbedLiveSample("Exemple_1",600,180)}} -Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à `brown` à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable. +Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à `brown` à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable. ### Exemple 2 @@ -217,7 +217,7 @@ Le premier argument passé à la fonction est le nom de la [propriété personna } ``` -> **Note :** La syntaxe pour la valeur de recours, comme celle des [propriétés personnalisées](https://www.w3.org/TR/css-variables/#custom-property), permet d'utiliser une virgule. Ainsi, `var(--toto, red, blue)` définit une valeur de recours égale à `red, blue`, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide. +> **Note :** La syntaxe pour la valeur de recours, comme celle des [propriétés personnalisées](https://www.w3.org/TR/css-variables/#custom-property), permet d'utiliser une virgule. Ainsi, `var(--toto, red, blue)` définit une valeur de recours égale à `red, blue`, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide. > > La syntaxe de la deuxième règle (sur `.trois`) permet d'utiliser une autre variable comme variable de secours et une autre valeur (`pink`) dans le cas où cette deuxième variable ne fonctionne pas. @@ -225,7 +225,7 @@ Le premier argument passé à la fonction est le nom de la [propriété personna ## Validité et valeurs -Le concept classique de validité en CSS, lié à chaque propriété, n'est pas très utile en ce qui concerne les propriétés personnalisées. Quand la valeur d'une propriété personnalisée est lue, le navigateur ne sait pas à quel moment elle sera utilisée. Il doit donc considérer quasiment toutes les valeurs comme _valides_. +Le concept classique de validité en CSS, lié à chaque propriété, n'est pas très utile en ce qui concerne les propriétés personnalisées. Quand la valeur d'une propriété personnalisée est lue, le navigateur ne sait pas à quel moment elle sera utilisée. Il doit donc considérer quasiment toutes les valeurs comme _valides_. Malheureusement, ces valeurs valides peuvent être utilisées, via la notation fonctionnelle `var()`, dans un contexte où cela n'aurait pas de sens. Les propriétés et variables personnalisées peuvent mener à des déclarations CSS invalides, conduisant à un nouveau concept de _valide lors de l'exécution_. @@ -279,7 +279,7 @@ element.style.setProperty("--ma-variable", varJS + 4); {{Compat("css.properties.custom-property")}} -> **Note :** Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était `var-`. Ce préfixe a ensuite été modifié en `--`. et Firefox 31 et les versions ultérieures respectent cette spécification (cf. {{bug(985838)}}) +> **Note :** Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était `var-`. Ce préfixe a ensuite été modifié en `--`. et Firefox 31 et les versions ultérieures respectent cette spécification (cf. {{bug(985838)}}) ## Voir aussi diff --git a/files/fr/web/css/value_definition_syntax/index.md b/files/fr/web/css/value_definition_syntax/index.md index 8b54577326..f557232db0 100644 --- a/files/fr/web/css/value_definition_syntax/index.md +++ b/files/fr/web/css/value_definition_syntax/index.md @@ -271,7 +271,7 @@ Mais pas à : <th colspan="4">Combinateurs</th> </tr> <tr> - <td> </td> + <td></td> <td>Juxtaposition</td> <td> Les composants sont obligatoires et doivent apparaître dans cet ordre. @@ -317,7 +317,7 @@ Mais pas à : <th colspan="4">Multiplicateurs</th> </tr> <tr> - <td> </td> + <td></td> <td>Aucun multiplicateur</td> <td>Exactement 1 fois.</td> <td><code>solid</code></td> diff --git a/files/fr/web/css/var()/index.md b/files/fr/web/css/var()/index.md index f57afd0f16..4cefbea53b 100644 --- a/files/fr/web/css/var()/index.md +++ b/files/fr/web/css/var()/index.md @@ -34,7 +34,7 @@ Le premier argument de la fonction est le nom de la propriété qu'on veut subst - `<declaration-value>` - : Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici. -## Exemples +## Exemples ```css :root{ diff --git a/files/fr/web/css/viewport_concepts/index.md b/files/fr/web/css/viewport_concepts/index.md index 54c2a8f1fc..c9c9e09d63 100644 --- a/files/fr/web/css/viewport_concepts/index.md +++ b/files/fr/web/css/viewport_concepts/index.md @@ -113,8 +113,8 @@ Lorsqu'on utilise une requête média à l'intérieur du document de l'_iframe_, ```css @media screen and (min-width: 500px) { p { - color: red; - } + color: red; + } } ``` diff --git a/files/fr/web/css/visual_formatting_model/index.md b/files/fr/web/css/visual_formatting_model/index.md index d1972480ec..e8dddca2bc 100644 --- a/files/fr/web/css/visual_formatting_model/index.md +++ b/files/fr/web/css/visual_formatting_model/index.md @@ -59,7 +59,7 @@ Si on prend le code HTML suivant, mis en forme avec les règles par défaut (`di ``` On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante : -  +  À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur `initial`. diff --git a/files/fr/web/css/width/index.md b/files/fr/web/css/width/index.md index 8822ee52d2..f4aec06454 100644 --- a/files/fr/web/css/width/index.md +++ b/files/fr/web/css/width/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/width --- {{CSSRef}} -La propriété **`width`** permet de définir la largeur de la [boîte du contenu](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) d'un élément. Par défaut, sa valeur est **`auto`**, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut `border-box`, la valeur appliquée incluera les dimensions de la boîte d'encadrement (_border_) et de la boîte de remplissage (_padding_). +La propriété **`width`** permet de définir la largeur de la [boîte du contenu](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) d'un élément. Par défaut, sa valeur est **`auto`**, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut `border-box`, la valeur appliquée incluera les dimensions de la boîte d'encadrement (_border_) et de la boîte de remplissage (_padding_). {{EmbedInteractiveExample("pages/css/width.html")}} @@ -173,7 +173,7 @@ p.minblue { Il faut s'assurer que les éléments sur lesquels on utilise `width` ne sont pas tronqués et ne masquent pas d'autre contenu sur la page lorsque l'utilisateur zoome afin d'agrandir la taille du texte. - [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [_Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) +- [_Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) ## Spécifications diff --git a/files/fr/web/css/zoom/index.md b/files/fr/web/css/zoom/index.md index 43612f3a43..480eee20ab 100644 --- a/files/fr/web/css/zoom/index.md +++ b/files/fr/web/css/zoom/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/zoom --- {{CSSRef}}{{Non-standard_header}} -La propriété non-standard **`zoom`** permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser [les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms), si possible. Cependant, contrairement aux transformations CSS, **`zoom`** affecte la taille de l'élément. +La propriété non-standard **`zoom`** permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser [les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms), si possible. Cependant, contrairement aux transformations CSS, **`zoom`** affecte la taille de l'élément. ## Syntaxe @@ -62,7 +62,7 @@ zoom: unset; - {{cssxref("<percentage>")}} - : Le facteur de zoom à appliquer. `100%` est équivalent au mot-clé `normal`. Les valeurs supérieures à `100%` agrandissent l'élément et les valeurs inférieures le réduisent. - {{cssxref("<number>")}} - - : Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages : `1.0` correspond à `normal` (ou `100%`) , les valeurs supérieures à `1.0` agrandissent l'élément et les valeurs inférieures le réduisent. + - : Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages : `1.0` correspond à `normal` (ou `100%`) , les valeurs supérieures à `1.0` agrandissent l'élément et les valeurs inférieures le réduisent. ### Syntaxe formelle |