diff options
50 files changed, 72 insertions, 72 deletions
diff --git a/files/fr/web/css/@document/index.md b/files/fr/web/css/@document/index.md index 3eaae20523..9df7d20450 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/") { diff --git a/files/fr/web/css/@keyframes/index.md b/files/fr/web/css/@keyframes/index.md index a2a57a15d6..b803960cde 100644 --- a/files/fr/web/css/@keyframes/index.md +++ b/files/fr/web/css/@keyframes/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/@keyframes --- {{CSSRef}} -La [règle ](/fr/docs/Web/CSS/R%C3%A8gles_@)**`@keyframes`** permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec [les transitions](/fr/docs/Web/CSS/CSS_Transitions). +La [règle](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@keyframes`** permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec [les transitions](/fr/docs/Web/CSS/CSS_Transitions). ```css @keyframes slidein { diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.md b/files/fr/web/css/@media/-ms-high-contrast/index.md index 746cd6a87c..c08bb9495a 100644 --- a/files/fr/web/css/@media/-ms-high-contrast/index.md +++ b/files/fr/web/css/@media/-ms-high-contrast/index.md @@ -12,7 +12,7 @@ original_slug: Web/CSS/-ms-high-contrast --- {{CSSRef}}{{Non-standard_header}} -La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#cibler_des_caract%c3%a9ristiques_m%c3%a9dia) **`-ms-high-contrast`**, relative à la règle @ [`@media`](/fr/docs/Web/CSS/@media), est une [extension Microsoft ](/en-US/docs/Web/CSS/Microsoft_extensions)qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée. +La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#cibler_des_caract%c3%a9ristiques_m%c3%a9dia) **`-ms-high-contrast`**, relative à la règle @ [`@media`](/fr/docs/Web/CSS/@media), est une [extension Microsoft](/en-US/docs/Web/CSS/Microsoft_extensions) qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée. Cette caractéristique média s'applique aux média de type matriciel (_bitmap_). Elle ne gère pas les préfixes `min` et `max`. diff --git a/files/fr/web/css/@media/display-mode/index.md b/files/fr/web/css/@media/display-mode/index.md index addb021017..ac0dbf89bf 100644 --- a/files/fr/web/css/@media/display-mode/index.md +++ b/files/fr/web/css/@media/display-mode/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/@media/display-mode **`display-mode`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau. -Cette caractéristique correspond à la propriété [`display` ](/fr/docs/Web/Manifest#display)du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non). +Cette caractéristique correspond à la propriété [`display`](/fr/docs/Web/Manifest#display) du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non). ## Syntaxe diff --git a/files/fr/web/css/_colon_-moz-broken/index.md b/files/fr/web/css/_colon_-moz-broken/index.md index 4e006e5f91..92b0e71726 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 [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. Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes. diff --git a/files/fr/web/css/_colon_not/index.md b/files/fr/web/css/_colon_not/index.md index 9aac424c0a..679a2616ff 100644 --- a/files/fr/web/css/_colon_not/index.md +++ b/files/fr/web/css/_colon_not/index.md @@ -23,7 +23,7 @@ La [spécificité](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance > **Note :** > -> - 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é. +> - 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")}}**. > - 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. diff --git a/files/fr/web/css/_doublecolon_after/index.md b/files/fr/web/css/_doublecolon_after/index.md index f186fffe33..9df2d0d767 100644 --- a/files/fr/web/css/_doublecolon_after/index.md +++ b/files/fr/web/css/_doublecolon_after/index.md @@ -92,9 +92,9 @@ On peut mettre en forme du texte ou des images avec la propriété {{cssxref("co ### Bulles d’information -Dans l'exemple suivant, on illustre le [pseudo-élément](/fr-FR/docs/Web/CSS/Pseudo-elements) `::after `avec l'expression CSS {{cssxref("attr()")}} et un attribut de données personnalisé `data-descr` afin de créer une _bulle d'information_ de type glossaire en CSS pur. +Dans l'exemple suivant, on illustre le [pseudo-élément](/fr-FR/docs/Web/CSS/Pseudo-elements) `::after` avec l'expression CSS {{cssxref("attr()")}} et un attribut de données personnalisé `data-descr` afin de créer une _bulle d'information_ de type glossaire en CSS pur. -On peut également aider les utilisateurs de clavier avec cette technique, en ajoutant un `tabindex` de `0` pour faire un `span` focusable, et en utilisant la sélection `:focus`. Cela montre à quel point les options `::before` and `::after `peuvent être flexibles, bien que, pour l'expérience la plus accessible, un widget de divulgation sémantique créé d'une autre manière serait probablement plus approprié.. +On peut également aider les utilisateurs de clavier avec cette technique, en ajoutant un `tabindex` de `0` pour faire un `span` focusable, et en utilisant la sélection `:focus`. Cela montre à quel point les options `::before` and `::after` peuvent être flexibles, bien que, pour l'expérience la plus accessible, un widget de divulgation sémantique créé d'une autre manière serait probablement plus approprié.. #### HTML diff --git a/files/fr/web/css/_doublecolon_before/index.md b/files/fr/web/css/_doublecolon_before/index.md index 10fe4f2b16..0c7b967909 100644 --- a/files/fr/web/css/_doublecolon_before/index.md +++ b/files/fr/web/css/_doublecolon_before/index.md @@ -24,7 +24,7 @@ a::before { {{csssyntax}} -La notation `::before` a été introduite par CSS 3 pour différencier les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) et les [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi la notation `:before `introduite par CSS 2. +La notation `::before` a été introduite par CSS 3 pour différencier les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) et les [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi la notation `:before` introduite par CSS 2. ## Exemples diff --git a/files/fr/web/css/angle/index.md b/files/fr/web/css/angle/index.md index 9c3efe64a9..d7ce3f0153 100644 --- a/files/fr/web/css/angle/index.md +++ b/files/fr/web/css/angle/index.md @@ -24,13 +24,13 @@ Pour les propriétés statiques et pour une unité donnée, un même angle pourr Pour représenter une valeur dans le type `<angle>`, on pourra utiliser les unités suivantes : - `deg` - - : Cette unité permet de représenter un angle exprimé en [degrés](<https://fr.wikipedia.org/wiki/Degr%C3%A9_(angle)>). Un cercle complet correspondra à `360deg`. Voici des valeurs pour l'exemple : `0deg`, `90deg`,` 360deg`. + - : Cette unité permet de représenter un angle exprimé en [degrés](<https://fr.wikipedia.org/wiki/Degr%C3%A9_(angle)>). Un cercle complet correspondra à `360deg`. Voici des valeurs pour l'exemple : `0deg`, `90deg`, `360deg`. - `grad` - - : Cette unité permet de représenter un angle exprimé en [grades](<https://fr.wikipedia.org/wiki/Grade_(angle)>). Un cercle complet correspondra à `400grad`. Voici des valeurs pour l'exemple : `0grad`, `100grad`,` 400grad`. + - : Cette unité permet de représenter un angle exprimé en [grades](<https://fr.wikipedia.org/wiki/Grade_(angle)>). Un cercle complet correspondra à `400grad`. Voici des valeurs pour l'exemple : `0grad`, `100grad`, `400grad`. - `rad` - - : Cette unité permet de représenter un angle exprimé en [radians](https://fr.wikipedia.org/wiki/Radian). Un cercle complet correspondra à 2π radians (soit environ `6.2832rad`). Un radian correspond à 180/π degrés. Voici des valeurs pour l'exemple : `0rad`, `1.0708rad`,` 6.2832rad`. + - : Cette unité permet de représenter un angle exprimé en [radians](https://fr.wikipedia.org/wiki/Radian). Un cercle complet correspondra à 2π radians (soit environ `6.2832rad`). Un radian correspond à 180/π degrés. Voici des valeurs pour l'exemple : `0rad`, `1.0708rad`, `6.2832rad`. - `turn` - - : Cette unité représente le nombre de tours qu'effectue l'angle. Un cercle complet correspondra à `1turn`. Voici des valeurs pour l'exemple : `0turn`, `0.25turn`,` 1turn`. + - : Cette unité représente le nombre de tours qu'effectue l'angle. Un cercle complet correspondra à `1turn`. Voici des valeurs pour l'exemple : `0turn`, `0.25turn`, `1turn`. Même si toutes les unités exprimeront une valeur nulle identique, l'unité **doit** **être indiquée** afin de lever l'ambiguïté entre un angle et une valeur de longueur (type {{cssxref("<length>")}}). diff --git a/files/fr/web/css/animation-timing-function/index.md b/files/fr/web/css/animation-timing-function/index.md index 126a446822..7a93b3ee20 100644 --- a/files/fr/web/css/animation-timing-function/index.md +++ b/files/fr/web/css/animation-timing-function/index.md @@ -48,7 +48,7 @@ animation-timing-function: initial; animation-timing-function: unset; ``` -Pour les animations cadencées (_keyframed_), la fonction s'applique entre chaque étape (ou _[keyframes](/fr/docs/Web/CSS/@keyframes)_) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de _timing_ est appliquée au début et à la fin de l'étape de l'animation. +Pour les animations cadencées (_keyframed_), la fonction s'applique entre chaque étape (ou [`@keyframes`](/fr/docs/Web/CSS/@keyframes)) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de _timing_ est appliquée au début et à la fin de l'étape de l'animation. Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée. diff --git a/files/fr/web/css/border-bottom/index.md b/files/fr/web/css/border-bottom/index.md index 249e2506d1..de4cd6ec0c 100644 --- a/files/fr/web/css/border-bottom/index.md +++ b/files/fr/web/css/border-bottom/index.md @@ -51,11 +51,11 @@ Les trois valeurs de la propriété raccourcie peuvent être définies dans n'im ### Valeurs -- `<br-width> ` +- `<br-width>` - : Voir {{cssxref("border-bottom-width")}}. -- `<br-style> ` +- `<br-style>` - : Voir {{cssxref("border-bottom-style")}}. -- `<color> ` +- `<color>` - : Voir {{cssxref("border-bottom-color")}}. ### Syntaxe formelle diff --git a/files/fr/web/css/border-left/index.md b/files/fr/web/css/border-left/index.md index b87333e02d..6a53105cb7 100644 --- a/files/fr/web/css/border-left/index.md +++ b/files/fr/web/css/border-left/index.md @@ -51,11 +51,11 @@ border-left: medium dashed green; ### Valeurs -- `<br-width> ` +- `<br-width>` - : Voir {{cssxref("border-left-width")}}. -- `<br-style> ` +- `<br-style>` - : Voir {{cssxref("border-left-style")}}. -- `<color> ` +- `<color>` - : Voir {{cssxref("border-left-color")}}. ### Syntaxe formelle diff --git a/files/fr/web/css/border-right/index.md b/files/fr/web/css/border-right/index.md index ebd2e09e93..680ec631d2 100644 --- a/files/fr/web/css/border-right/index.md +++ b/files/fr/web/css/border-right/index.md @@ -51,11 +51,11 @@ border-right: medium dashed green; ### Valeurs -- `<br-width> ` +- `<br-width>` - : Voir {{cssxref("border-right-width")}}. -- `<br-style> ` +- `<br-style>` - : Voir {{cssxref("border-right-style")}}. -- `<color> ` +- `<color>` - : Voir {{cssxref("border-right-color")}}. ### Syntaxe formelle diff --git a/files/fr/web/css/border-top/index.md b/files/fr/web/css/border-top/index.md index 97a5101d98..37e8ac83dc 100644 --- a/files/fr/web/css/border-top/index.md +++ b/files/fr/web/css/border-top/index.md @@ -51,11 +51,11 @@ Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe q ### Valeurs -- `<br-width> ` +- `<br-width>` - : Voir {{cssxref("border-top-width")}}. -- `<br-style> ` +- `<br-style>` - : Voir {{cssxref("border-top-style")}}. -- `<color> ` +- `<color>` - : Voir {{cssxref("border-top-color")}}. ### Syntaxe formelle diff --git a/files/fr/web/css/break-after/index.md b/files/fr/web/css/break-after/index.md index 8b7437aaf6..9ebb4b0d38 100644 --- a/files/fr/web/css/break-after/index.md +++ b/files/fr/web/css/break-after/index.md @@ -80,7 +80,7 @@ Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter - : Empêche toute saut de page après la boîte de l'élément. - `avoid-column` - : Empêche toute rupture de colonne après la boîte de l'élément. -- `avoid-region `{{experimental_inline}} +- `avoid-region` {{experimental_inline}} - : Empêche toute rupture de région après boîte de l'élément. ### Syntaxe formelle diff --git a/files/fr/web/css/clear/index.md b/files/fr/web/css/clear/index.md index 17dbd2c03d..4850c74b4c 100644 --- a/files/fr/web/css/clear/index.md +++ b/files/fr/web/css/clear/index.md @@ -13,7 +13,7 @@ La propriété **`clear`** indique si un élément peut être situé à côté d {{EmbedInteractiveExample("pages/css/clear.html")}} -Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace [le bord de la bordure](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) de l'élément sous [le bord de la marge](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) de tous les éléments flottants concernés. Il y aura[ fusion des marges (_margin collapsing_)](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants. +Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace [le bord de la bordure](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) de l'élément sous [le bord de la marge](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) de tous les éléments flottants concernés. Il y aura [fusion des marges (_margin collapsing_)](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants. Lorsqu'elle est appliquée aux éléments flottants, elle déplace [le bord de la marge](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) de l'élément sous [le bord de la marge](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) de tous les éléments flottants concernés. Cela impacte la position des éléments flottants suivants car ceux-ci ne peuvent pas être situés plus haut que les éléments flottants qui les précèdent. diff --git a/files/fr/web/css/clip/index.md b/files/fr/web/css/clip/index.md index 4c83372b40..21947f1069 100644 --- a/files/fr/web/css/clip/index.md +++ b/files/fr/web/css/clip/index.md @@ -36,7 +36,7 @@ clip: unset; ### Valeurs - `<shape>` - - : Une forme rectangulaire indiquée avec `rect(<haut>, <droite>, <bas>, <gauche>)` ou avec `rect(<haut> <droite> <bas> <gauche>)`. `<haut>` et `<bas>` indiquent les décalages à partir du haut de la boîte de bordure, `<gauche>` et `<droite>` indiquent les décalages à partir du bord gauche de la boîte de bordure.`<haut>`, `<droite>`, `<bas>` et `<gauche>` peuvent avoir une valeur de longueur (type {{cssxref("<length>")}}) ou` auto`. Si un des côtés vaut `auto`, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure. + - : Une forme rectangulaire indiquée avec `rect(<haut>, <droite>, <bas>, <gauche>)` ou avec `rect(<haut> <droite> <bas> <gauche>)`. `<haut>` et `<bas>` indiquent les décalages à partir du haut de la boîte de bordure, `<gauche>` et `<droite>` indiquent les décalages à partir du bord gauche de la boîte de bordure.`<haut>`, `<droite>`, `<bas>` et `<gauche>` peuvent avoir une valeur de longueur (type {{cssxref("<length>")}}) ou `auto`. Si un des côtés vaut `auto`, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure. - `auto` - : L'élément n'est pas rogné (la valeur par défaut). Attention, l'effet obtenu n'est pas le même que `rect(auto, auto, auto, auto)`. diff --git a/files/fr/web/css/color/index.md b/files/fr/web/css/color/index.md index 79b08cb308..0922b430ee 100644 --- a/files/fr/web/css/color/index.md +++ b/files/fr/web/css/color/index.md @@ -117,7 +117,7 @@ Le ratio de contraste est déterminé en comparant la luminosité de la couleur - [Contrôleur 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) -- _[Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0 ](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)_[(en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) +- _[Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) ## Spécifications diff --git a/files/fr/web/css/column-rule-style/index.md b/files/fr/web/css/column-rule-style/index.md index 39342417ce..93c394fb2d 100644 --- a/files/fr/web/css/column-rule-style/index.md +++ b/files/fr/web/css/column-rule-style/index.md @@ -38,7 +38,7 @@ La propriété `column-rule-style` avec une valeur unique de type `<br-style>`. ### Valeurs -- `<br-style> ` +- `<br-style>` - : Un mot-clé (défini comme pour {{cssxref("border-style")}}) qui permet de définir le style appliqué au trait. Les épaisseurs résultantes sont calculées avec la même méthode que pour les bordures (cf. _[collapsing border model](https://www.w3.org/TR/CSS2/tables.html#collapsing-borders)_). ### Syntaxe formelle diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md index 418c5a9568..62d06d5d45 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md @@ -16,7 +16,7 @@ Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("b } ``` -Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}},` `{{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}. +Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}. ## Exemples diff --git a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md index 7b43810ae6..62882b8e04 100644 --- a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md +++ b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md @@ -21,7 +21,7 @@ La fusion des marges se produit si on a l'un de ces trois cas : ``` - Aucun contenu séparant le parent et ses descendants - - : S'il n'y a aucune bordure, remplissage, contenu en ligne (_inline_), lorsqu' un [contexte de formatage de blocs ](/fr/docs/Web/CSS/Block_formatting_context)est créé ou _[dégagement](/fr/docs/Web/CSS/clear)_ pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent. + - : S'il n'y a aucune bordure, remplissage, contenu en ligne (_inline_), lorsqu' un [contexte de formatage de blocs](/fr/docs/Web/CSS/Block_formatting_context) est créé ou _[dégagement](/fr/docs/Web/CSS/clear)_ pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent. - Des blocs vides - : S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées. 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 9bc898e4b8..f2e6f0e060 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 @@ -13,7 +13,7 @@ Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la ## Quelques notions de bases sur la fragmentation -[Le module de spécification CSS Fragmentation ](https://www.w3.org/TR/css-break-3/)détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne. +[Le module de spécification CSS Fragmentation](https://www.w3.org/TR/css-break-3/) détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne. Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures. diff --git a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md index b8eaaeb065..f7397f25f5 100644 --- a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md +++ b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md @@ -66,7 +66,7 @@ Dans l'exemple qui suit, la valeur d'`align-items` est `stretch`. Vous pouvez es La propriété `align-items` définit la valeur de la propriété `align-self` pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété `align-self` de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété `align-self` prend en charge les mêmes valeurs que `align-items` ainsi qu'un mot-clé `auto` qui reprendra la valeur définie sur le conteneur flexible. -Dans le prochain exemple, le conteneur flexible a `align-items: flex-start`, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur `first-child` afin de cibler le premier élément fils pour lequel on indique `align-self: stretch` ; un autre élément a été sélectionné via la classe `selected` et est paramétré avec ` align-self: ``center`. Vous pouvez modifier la valeur de `align-items` ou changer les valeurs d'`align-self` sur les éléments afin d'observer le fonctionnement. +Dans le prochain exemple, le conteneur flexible a `align-items: flex-start`, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur `first-child` afin de cibler le premier élément fils pour lequel on indique `align-self: stretch` ; un autre élément a été sélectionné via la classe `selected` et est paramétré avec `align-self: center`. Vous pouvez modifier la valeur de `align-items` ou changer les valeurs d'`align-self` sur les éléments afin d'observer le fonctionnement. {{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 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 dc6d476af2..96526e656d 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_flow_layout/flow_layout_and_writing_modes/index.md b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md index 076c443908..25b3bccb80 100644 --- a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md @@ -14,7 +14,7 @@ Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en ## La spécification des modes d'écriture -Le module de spécification _CSS Writing Modes_ de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction [de la spécification ](https://drafts.csswg.org/css-writing-modes-3/#text-flow)quant aux modes d'écriture : +Le module de spécification _CSS Writing Modes_ de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction [de la spécification](https://drafts.csswg.org/css-writing-modes-3/#text-flow) quant aux modes d'écriture : > « En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (_inline_) et selon sa direction de bloc. » diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index e9f44396a2..be66356b62 100644 --- a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -500,7 +500,7 @@ Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. E ### Sous-grille -Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée _sous-grille_ qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. _Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer._ Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer `display: grid` par `display: subgrid, `et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments. +Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée _sous-grille_ qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. _Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer._ Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer `display: grid` par `display: subgrid`, et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments. Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer `grid-template-columns: repeat(3, 1fr)` en `grid-template-columns: subgrid`. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document. diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md index 50b9b76b05..e4afb29b33 100644 --- a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md @@ -461,7 +461,7 @@ Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup pl  -Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}`: dense `sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (_tab order_) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille. +Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}`: dense` sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (_tab order_) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille. ```html hidden <ul class="listing"> diff --git a/files/fr/web/css/dimension/index.md b/files/fr/web/css/dimension/index.md index cf2f1f9ce3..4473cac153 100644 --- a/files/fr/web/css/dimension/index.md +++ b/files/fr/web/css/dimension/index.md @@ -42,7 +42,7 @@ La syntaxe d'une valeur de type `<dimension>` est un nombre (valeur de type {{CS | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------- | | {{SpecName("CSS4 Values", "#dimensions", "<dimension>")}} | {{Spec2("CSS4 Values")}} | Adds `cap`, `ic`, `lh`, `rlh`, `vi`, `vb` | -| {{SpecName("CSS3 Values", "#dimensions", "<dimension>")}} | {{Spec2("CSS3 Values")}} | Adds `ch`, `rem`, `vw`, `vw`, `vmin`,` vmax`, `Q` | +| {{SpecName("CSS3 Values", "#dimensions", "<dimension>")}} | {{Spec2("CSS3 Values")}} | Adds `ch`, `rem`, `vw`, `vw`, `vmin`, `vmax`, `Q` | | {{SpecName("CSS2.1", "syndata.html#numbers", "<dimension>")}} | {{Spec2("CSS2.1")}} | Defined under Numbers and Length | | {{SpecName("CSS1", "", "<dimension>")}} | {{Spec2("CSS1")}} | Initial definition under "length units" | diff --git a/files/fr/web/css/font-smooth/index.md b/files/fr/web/css/font-smooth/index.md index c12ea354ac..b30dc7553d 100644 --- a/files/fr/web/css/font-smooth/index.md +++ b/files/fr/web/css/font-smooth/index.md @@ -28,7 +28,7 @@ font-smooth: 2em; > > - `auto` : c'est le navigateur qui décide la meilleure approche > - `none` - l'anti-crénelage est désactivé. -> - `antialiased `- lisse les caractères au niveau du pixel (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair. +> - `antialiased` - lisse les caractères au niveau du pixel (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair. > - `subpixel-antialiased` - sur la plupart des affichages non-Retina, cela donnera le texte le plus lisse. > **Note :** Firefox implémente **`-moz-osx-font-smoothing`** avec d'autres valeurs, **là aussi c'est une propriété non-standard qui ne devrait pas être utilisée**. diff --git a/files/fr/web/css/font-variant-caps/index.md b/files/fr/web/css/font-variant-caps/index.md index 7ad73cdda8..854377087c 100644 --- a/files/fr/web/css/font-variant-caps/index.md +++ b/files/fr/web/css/font-variant-caps/index.md @@ -57,7 +57,7 @@ La valeur de cette propriété peut être l'un des mots-clés définis ci-après - `petite-caps` - : Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond à la valeur OpenType `pcap` ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales. - `all-petite-caps` - - : Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond aux valeurs OpenType `pcap `et `c2pc` ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales. + - : Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond aux valeurs OpenType `pcap` et `c2pc` ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales. - `unicase` - : Ce mot-clé active l'utilisation de petites capitales pour les majuscules. Il correspond à la valeur OpenType `unic`. - `titling-caps` diff --git a/files/fr/web/css/font-variant/index.md b/files/fr/web/css/font-variant/index.md index 69a6f8120f..8cffe85cde 100644 --- a/files/fr/web/css/font-variant/index.md +++ b/files/fr/web/css/font-variant/index.md @@ -38,7 +38,7 @@ font-variant: unset; - `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps` - : Définit le mot-clé relatif à la propriété {{cssxref("font-variant-caps")}}. - `<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero` - - : Définit la valeur de la propriété {{cssxref("font-variant-numeric")}}. Les valeurs possibles sont `lining-nums`,` oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, et `slashed-zero.` + - : Définit la valeur de la propriété {{cssxref("font-variant-numeric")}}. Les valeurs possibles sont `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, et `slashed-zero.` - `<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby` - : Définit la valeur de la propriété {{cssxref("font-variant-east-asian")}}. Les valeurs possibles sont: `jis78`, `jis83`,`jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `ruby`. diff --git a/files/fr/web/css/height/index.md b/files/fr/web/css/height/index.md index f1f59aef85..0e63df781f 100644 --- a/files/fr/web/css/height/index.md +++ b/files/fr/web/css/height/index.md @@ -42,7 +42,7 @@ height: unset; - : Une valeur de longueur absolue. Voir la page {{cssxref("<length>")}} pour les unités qui peuvent être utilisées. - `<percentage>` - : La valeur exprimée correspond à un pourcentage (type {{cssxref("<percentage>")}}) de la hauteur du bloc englobant. -- `border-box `{{experimental_inline}} +- `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}} - : 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 diff --git a/files/fr/web/css/image/index.md b/files/fr/web/css/image/index.md index 4f8d315317..d308cb6ee7 100644 --- a/files/fr/web/css/image/index.md +++ b/files/fr/web/css/image/index.md @@ -35,7 +35,7 @@ Le CSS détermine la _taille concrète de l'objet_ en utilisant ces _dimensions | {{cssxref("shape-outside")}} | ? | | {{cssxref("mask-border-source")}} | ? | | {{cssxref("symbols()")}} pour `@counter-style` | Une fonctionnalité en cours de discussion. Si elle est prise en charge, la taille utilisée sera celle des curseurs utilisés par le système. | -| {{cssxref("content")}} avec les pseudo-éléments {{cssxref("::after")}} et {{cssxref("::before")}} | Un rectangle de ` 300px`` × 150px ` | +| {{cssxref("content")}} avec les pseudo-éléments {{cssxref("::after")}} et {{cssxref("::before")}} | Un rectangle de `300px × 150px` | La taille concrète de l'objet est calculée selon l'algorithme suivant : diff --git a/files/fr/web/css/justify-items/index.md b/files/fr/web/css/justify-items/index.md index 74301a9778..e0508e9fc8 100644 --- a/files/fr/web/css/justify-items/index.md +++ b/files/fr/web/css/justify-items/index.md @@ -69,7 +69,7 @@ Cette propriété peut être définie selon trois formes différentes : - Un mot-clé parmi : `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left` ou `right` - Puis éventuellement `safe` ou `unsafe` -- Grâce à un alignement tel que précédemment spécifié : le mot-clé` legacy` suivi de `left` ou de `right`. +- Grâce à un alignement tel que précédemment spécifié : le mot-clé `legacy` suivi de `left` ou de `right`. ### Valeurs diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.md b/files/fr/web/css/layout_cookbook/grid_wrapper/index.md index c48dd59563..13bdb2600a 100644 --- a/files/fr/web/css/layout_cookbook/grid_wrapper/index.md +++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.md @@ -75,5 +75,5 @@ Bien que les grilles CSS nous permettent potentiellement de positionner n'import - {{Cssxref("grid-template-columns")}} - [Les grilles CSS sur MDN](/fr/docs/Web/CSS/CSS_Grid_Layout) -- Article :[ Les grilles CSS, plus de flexibilité avec `minmax()` (en anglais)](https://css-irl.info/more-flexibility-with-minmax/) +- Article : [Les grilles CSS, plus de flexibilité avec `minmax()` (en anglais)](https://css-irl.info/more-flexibility-with-minmax/) - Article : [Isoler des éléments sur une grille CSS (en anglais)](https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/) diff --git a/files/fr/web/css/layout_cookbook/pagination/index.md b/files/fr/web/css/layout_cookbook/pagination/index.md index e9c268fc39..07f6e5ee37 100644 --- a/files/fr/web/css/layout_cookbook/pagination/index.md +++ b/files/fr/web/css/layout_cookbook/pagination/index.md @@ -70,7 +70,7 @@ Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en - {{Cssxref("justify-content")}} - {{Cssxref("column-gap")}} -- _[Know your ARIA: 'Hidden' vs 'None'](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html)_[ (en anglais)](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html) +- _[Know your ARIA: 'Hidden' vs 'None' (en anglais)](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html) - [Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)](https://webaim.org/techniques/css/invisiblecontent/#techniques) - [Écrire du CSS sans oublier l'accessibilité (en anglais)](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939) - [Guide stylistique d'accessibilité : la pagination](https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination) diff --git a/files/fr/web/css/margin/index.md b/files/fr/web/css/margin/index.md index 0838c9d3da..d59ed50cf2 100644 --- a/files/fr/web/css/margin/index.md +++ b/files/fr/web/css/margin/index.md @@ -57,7 +57,7 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type - `<percentage>` - : Une valeur relative, exprimée en pourcentage (type {{cssxref("<percentage>")}}, à la **largeur** du bloc englobant. On peut utiliser des valeurs négatives. - `auto` - - : `auto `est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, `div { width:50%; margin:0 auto; }` permet de centrer un conteneur `div` horizontalement). + - : `auto` est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, `div { width:50%; margin:0 auto; }` permet de centrer un conteneur `div` horizontalement). ### Syntaxe formelle @@ -127,9 +127,9 @@ margin: auto; /* boîte centrée horizontalement */ ### Centrer horizontalement -Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}`: flex; `{{cssxref("justify-content")}}`: center;`. +Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}`: flex;` {{cssxref("justify-content")}}`: center;`. -Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser `margin: 0 auto `pour centrer un élément au sein de son parent. +Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser `margin: 0 auto` pour centrer un élément au sein de son parent. ### Fusion des marges diff --git a/files/fr/web/css/mask-size/index.md b/files/fr/web/css/mask-size/index.md index f96a19398b..52a1b29e82 100644 --- a/files/fr/web/css/mask-size/index.md +++ b/files/fr/web/css/mask-size/index.md @@ -84,7 +84,7 @@ La taille de l'image affichée pour le masque est calculée de la façon suivant - : L'image est affichée avec la taille indiquée. - Si `mask-size` vaut `contain` ou `cover` : - : L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrire toute la zone du masque. Si l'image ne possède pas de proportions intrinsèques, sa taille d'affichage sera la taille de la zone du masque. -- Si `mask-size` vaut `auto` ou `auto auto `: +- Si `mask-size` vaut `auto` ou `auto auto` : - : Si l'image possède deux dimensions intrinsèques, elle sera affichée avec cette taille. Si elle ne possède pas de dimensions intrinsèques ni de proportions intrinsèques, elle sera affichée à la taille de la zone du masque. Si elle n'a aucune dimension intrinsèque mais possède des proportions intrinsèques elle sera affichée comme si `contain` avait été utilisé. Si l'image possède une dimension intrinsèque et des proportions intrinsèques, sa taille sera déterminée grâce à ses informations. Si l'image possède une dimension intrinsèque mais aucune proportion intrinsèque, la dimension connue sera utilisée pour cet axe et la seconde sera celle de la zone pour le masque. - Si `mask-size` possède un composant `auto` et un autre composant différent de `auto` : - : Si l'image possède des proportions intrinsèques, elle sera affichée avec la dimension connue et la deuxième sera calculée à partir de la proportion. Si l'image ne possède pas de proportions intrinsèques, la valeur définie sera utilisée pour l'axe correspondant et pour l'autre axe, on utilisera la dimension intrinsèque si elle est connue, sinon, on utilisera la dimension (sur cet axe) de la zone du masque. diff --git a/files/fr/web/css/outline-color/index.md b/files/fr/web/css/outline-color/index.md index e652cbedd9..74e13e5780 100644 --- a/files/fr/web/css/outline-color/index.md +++ b/files/fr/web/css/outline-color/index.md @@ -84,7 +84,7 @@ Le ratio de contraste est déterminé en comparaisant les luminosités des deux - [Vérificateur de contraste WebAIM (en anglais)](https://webaim.org/resources/contrastchecker/) - [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- _[Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)_[ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) +- _[Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) ## Spécifications diff --git a/files/fr/web/css/overflow/index.md b/files/fr/web/css/overflow/index.md index 65ac2e7b86..26f0aee259 100644 --- a/files/fr/web/css/overflow/index.md +++ b/files/fr/web/css/overflow/index.md @@ -54,11 +54,11 @@ La propriété `overflow` peut être définie grâce à un ou deux des mots-clé #### Extensions propres au moteur Mozilla -- `-moz-scrollbars-none `{{obsolete_inline}} +- `-moz-scrollbars-none` {{obsolete_inline}} - : `overflow:hidden` doit être utilisé à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans `about:config`, il faut passer `layout.css.overflow.moz-scrollbars.enabled` à `true`. -- `-moz-scrollbars-horizontal `{{Deprecated_inline}} +- `-moz-scrollbars-horizontal` {{Deprecated_inline}} - : Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans `about:config`, il faut passer `layout.css.overflow.moz-scrollbars.enabled` à `true`. -- `-moz-scrollbars-vertical `{{Deprecated_inline}} +- `-moz-scrollbars-vertical` {{Deprecated_inline}} - : Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans `about:config`, il faut passer `layout.css.overflow.moz-scrollbars.enabled` à `true`. - `-moz-hidden-unscrollable` {{non-standard_inline}} - : Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines `<html>`, `<body>` (avec les flèches du clavier et la roue de la souris). diff --git a/files/fr/web/css/overscroll-behavior-x/index.md b/files/fr/web/css/overscroll-behavior-x/index.md index 09914cd1c4..9b826e5fc1 100644 --- a/files/fr/web/css/overscroll-behavior-x/index.md +++ b/files/fr/web/css/overscroll-behavior-x/index.md @@ -45,7 +45,7 @@ La propriété `overscroll-behavior-x` est définie avec un des mots-clés défi ## Exemples -Dans l'exemple [`overscroll-behavior-x` ](https://mdn.github.io/css-examples/overscroll-behavior/overscroll-behavior-x)(cf. [le code source](https://github.com/mdn/css-examples/blob/master/overscroll-behavior/overscroll-behavior-x.html) associé), on dispose de deux boîtes de bloc, l'une contenue à l'intérieure de l'autre. La boîte englobante possède une grande largeur avec {{cssxref("width")}} afin que la page puisse défiler horizontalement. La boîte intérieure a une petite largeur (et une petite hauteur, définie avec {{cssxref("height")}}) afin de pouvoir être facilement contenue dans la zone d'affichage mais son contenu possède une grande largeur afin de défiler horizontalement. +Dans l'exemple [`overscroll-behavior-x`](https://mdn.github.io/css-examples/overscroll-behavior/overscroll-behavior-x) (cf. [le code source](https://github.com/mdn/css-examples/blob/master/overscroll-behavior/overscroll-behavior-x.html) associé), on dispose de deux boîtes de bloc, l'une contenue à l'intérieure de l'autre. La boîte englobante possède une grande largeur avec {{cssxref("width")}} afin que la page puisse défiler horizontalement. La boîte intérieure a une petite largeur (et une petite hauteur, définie avec {{cssxref("height")}}) afin de pouvoir être facilement contenue dans la zone d'affichage mais son contenu possède une grande largeur afin de défiler horizontalement. Par défaut, lorsqu'on fait défiler la boîte intérieure et qu'on atteint une limite de défilement, c'est toute la page qui commence à défiler. Si ce n'est pas le comportement souhaité, on peut empêcher ça en utilisant `overscroll-behavior-x: contain` sur la boîte intérieure : diff --git a/files/fr/web/css/ratio/index.md b/files/fr/web/css/ratio/index.md index 4582a43c85..cc926f417f 100644 --- a/files/fr/web/css/ratio/index.md +++ b/files/fr/web/css/ratio/index.md @@ -13,7 +13,7 @@ Le type de donnée CSS **`<ratio>`** permet de décrire les proportions [dans le ## Syntaxe -Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref("<integer>")}}, suivi d'une barre oblique ('/', Unicode` U+002F SOLIDUS`) puis d'un second entier strictement positif (type {{cssxref("<integer>")}}). Il est possible d'avoir des espaces avant et après la barre oblique. +Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref("<integer>")}}, suivi d'une barre oblique ('/', Unicode `U+002F SOLIDUS`) puis d'un second entier strictement positif (type {{cssxref("<integer>")}}). Il est possible d'avoir des espaces avant et après la barre oblique. ## Exemples diff --git a/files/fr/web/css/text-transform/index.md b/files/fr/web/css/text-transform/index.md index 87d76a62fe..60a963ed89 100644 --- a/files/fr/web/css/text-transform/index.md +++ b/files/fr/web/css/text-transform/index.md @@ -19,7 +19,7 @@ La propriété `text-transform` gère les différences liées aux langues, par e - En allemand (de), le `ß` devient `SS` en majuscule. - En néerlandais (nl), le digraphe `ij` devient `IJ`, y compris avec `text-transform: capitalize` qui ne met que la première lettre de chaque mot en majuscule. - En grec (el), les voyelles perdent leur accent lorsque tout le mot est écrit en capitales (`ά`/`Α`) à l'exception du eta disjonctif (`ή`/`Ή`). Les diphtongues avec un accent sur la première voyelle perde l'accent et récupère un tréma sur la seconde voyelle (`άι`/`ΑΪ`). La lettre sigma a deux formes minuscules : `σ` et `ς`. `ς` est utilisée uniquement lorsque c'est la dernière lettre du mot. Lorsque l'agent utilisateur applique `text-transform: lowercase` à un sigma majuscule (`Σ`), il doit choisir l'une des deux formes selon le contexte. -- En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, en appliquant `text-transform: uppercase` à `ar aon tslí`, on obtiendra `AR AON tSLÍ` et non `AR AON TSLÍ`. Dans certains cas, un trait d'union peut être retiré lors du passage en majuscules : `an t-uisce` deviendra `AN tUISCE `(le trait-d'union sera bien réinséré avec `text-transform: lowercase`) +- En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, en appliquant `text-transform: uppercase` à `ar aon tslí`, on obtiendra `AR AON tSLÍ` et non `AR AON TSLÍ`. Dans certains cas, un trait d'union peut être retiré lors du passage en majuscules : `an t-uisce` deviendra `AN tUISCE` (le trait-d'union sera bien réinséré avec `text-transform: lowercase`) La langue d'un document HTML est définie par l'attribut XML `xml:lang`, qui a la priorité sur l'attribut global [`lang`](/fr/docs/Web/HTML/Global_attributes/lang). diff --git a/files/fr/web/css/touch-action/index.md b/files/fr/web/css/touch-action/index.md index 40233d3923..fc6f6e79ef 100644 --- a/files/fr/web/css/touch-action/index.md +++ b/files/fr/web/css/touch-action/index.md @@ -104,7 +104,7 @@ ul > li { Une déclaration `touch action: none;` empêchera le navigateur de zoomer. Cela peut empêcher les personnes à faible vision de lire et de comprendre le contenu de la page. - [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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)_[ (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/used_value/index.md b/files/fr/web/css/used_value/index.md index a4af9602d5..894df5e40c 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). diff --git a/files/fr/web/css/value_definition_syntax/index.md b/files/fr/web/css/value_definition_syntax/index.md index 7983b0485c..8b54577326 100644 --- a/files/fr/web/css/value_definition_syntax/index.md +++ b/files/fr/web/css/value_definition_syntax/index.md @@ -102,7 +102,7 @@ Mais il ne correspondra pas à : - `bold` car les deux composants doivent apparaître. - `bold 1em bold` car les deux composants doivent apparaître exactement une fois. -> **Note :** La juxtaposition est prioritaire par rapport à la double esperluette. `bold thin && <length>` est donc équivalent à ` [ ``bold thin ] && <length>`. Il décrit `bold thin <length>` ou ` <length>`` bold thin ` mais pas ` bold <length>`` thin `. +> **Note :** La juxtaposition est prioritaire par rapport à la double esperluette. `bold thin && <length>` est donc équivalent à `[ bold thin ] && <length>`. Il décrit `bold thin <length>` ou `<length> bold thin` mais pas `bold <length> thin`. ### Double barre @@ -121,7 +121,7 @@ Mais il ne correspondra pas à : - `blue yellow` car le composant doit apparaître au plus une fois. - `bold` car le mot-clé n'est pas permis pour aucune valeur de l'entité. -> **Note :** La double esperluette est prioritaire par rapport à la double barre. `bold || thin && <length>` est équivalent à `bold || [ thin && <length> ]` qui décrit `bold`, `thin` `<length>`, `bold thin` `<length>`, ou `thin <length> bold` mais pas ` <length>`` bold thin ` car bold, s'il est présent doit apparaître avant `thin && <length>`. +> **Note :** La double esperluette est prioritaire par rapport à la double barre. `bold || thin && <length>` est équivalent à `bold || [ thin && <length> ]` qui décrit `bold`, `thin <length>`, `bold thin <length>`, ou `thin <length> bold` mais pas `<length> bold thin` car bold, s'il est présent doit apparaître avant `thin && <length>`. ### La barre verticale @@ -145,7 +145,7 @@ Mais il ne correspondra pas à : - `center 3%` car seul un seul des composants doit être présent. - `3em 4.5em` car un composant doit être présent au plus une seule fois. -> **Note :** La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi `bold | thin || <length>` est équivalent à `bold | [ thin || <length> ]` qui décrit `bold`, `thin`, `<length>`, `<length> thin` ou `thin <length> `mais pas `bold <length>` car seule entité peut être présente. +> **Note :** La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi `bold | thin || <length>` est équivalent à `bold | [ thin || <length> ]` qui décrit `bold`, `thin`, `<length>`, `<length> thin` ou `thin <length>` mais pas `bold <length>` car seule entité peut être présente. ## Les multiplicateurs diff --git a/files/fr/web/css/webkit_extensions/index.md b/files/fr/web/css/webkit_extensions/index.md index 73d10725e1..2ff486e5fc 100644 --- a/files/fr/web/css/webkit_extensions/index.md +++ b/files/fr/web/css/webkit_extensions/index.md @@ -290,7 +290,7 @@ Les applications basées sur WebKit ou Blink, telles que Safari et Chrome, prenn ## Spécificités prises en charge par Firefox -Les propriétés suivantes peuvent être utilisées avec le préfixe `-webkit-` sous Firefox. La plupart de ces propriétés peuvent également s'utiliser sans préfixes (voir la section sur les [propriétés anciennement spécifiques et désormais standard ](#spe_std)ci-avant). +Les propriétés suivantes peuvent être utilisées avec le préfixe `-webkit-` sous Firefox. La plupart de ces propriétés peuvent également s'utiliser sans préfixes (voir la section sur les [propriétés anciennement spécifiques et désormais standard](#spe_std) ci-avant). > **Note :** En raison du code historique utilisé dans de nombreux sites web et contenant des propriétés préfixées avec `-webkit-`, Edge et Firefox redirigent de nombreuses propriétés préfixées avec `-webkit-` vers les équivalents sans préfixe ou avec `-moz-` ou `-ms-`. diff --git a/files/fr/web/demos/index.md b/files/fr/web/demos/index.md index 807cde756a..5f15606a20 100644 --- a/files/fr/web/demos/index.md +++ b/files/fr/web/demos/index.md @@ -29,7 +29,7 @@ Mozilla supporte une large gamme de technologies open web vraiment intéressante - [Canvas ash2](https://glimr.rubyforge.org/cake/demos/canvas_ash2.html) - [Canvas ash8](https://glimr.rubyforge.org/cake/demos/canvas_ash8.html) - [3D on 2D Canvas](https://gyu.que.jp/jscloth/) -- [miniPaint - Image editor ](https://viliusle.github.io/miniPaint/)([source code](https://github.com/viliusle/miniPaint)) +- [miniPaint - Image editor](https://viliusle.github.io/miniPaint/) ([source code](https://github.com/viliusle/miniPaint)) ### SVG @@ -42,7 +42,7 @@ Mozilla supporte une large gamme de technologies open web vraiment intéressante - [Blobular](https://www.themaninblue.com/experiment/Blobular/) (interactif) - [Vidéo embarquées dans SVG](https://www.double.co.nz/video_test/video.svg) (ou utiliser le [téléchargement local](https://www.double.co.nz/video_test/video_svg.tar.bz2)) - [Summer HTML image map creator](https://summerstyle.github.io/summer/) ([code source](https://github.com/summerstyle/summer)) -- [démo firefox developer édition SVG/CSS ](https://s.codepen.io/SoftwareRVG/debug/JRJZVW)conçu par Rober Villar de chez Software RVG ([code source](https://github.com/SoftwareRVG/mde_design/blob/master/css_svg_dev)) ([mode debug](https://s.codepen.io/SoftwareRVG/debug/JRJZVW)) +- [démo firefox developer édition SVG/CSS](https://s.codepen.io/SoftwareRVG/debug/JRJZVW) conçu par Rober Villar de chez Software RVG ([code source](https://github.com/SoftwareRVG/mde_design/blob/master/css_svg_dev)) ([mode debug](https://s.codepen.io/SoftwareRVG/debug/JRJZVW)) ### Vidéos @@ -76,8 +76,8 @@ Mozilla supporte une large gamme de technologies open web vraiment intéressante ## CSS -- [logo flottant " mozilla " CSS développé par Rober Villar , de chez Software RVG. ](https://s.codepen.io/SoftwareRVG/debug/OXkOWj)(mode debug) -- [logo flottant " mozilla " CSS développé par Rober Villar , from Software RVG. ](https://codepen.io/SoftwareRVG/pen/OXkOWj/)(code source) +- [logo flottant "mozilla" CSS développé par Rober Villar, de chez Software RVG.](https://s.codepen.io/SoftwareRVG/debug/OXkOWj) (mode debug) +- [logo flottant "mozilla" CSS développé par Rober Villar, from Software RVG.](https://codepen.io/SoftwareRVG/pen/OXkOWj/) (code source) - [Conception de Formulaire de Contact Bootstrap](https://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php) - [Paperfold](https://felixniklas.com/paperfold/) - [CSS Blockout](https://ondras.github.io/blockout/) @@ -99,7 +99,7 @@ Mozilla supporte une large gamme de technologies open web vraiment intéressante ## HTML -- [Zen Photon Garden ](https://zenphoton.com)([code source](https://github.com/scanlime/zenphoton)) +- [Zen Photon Garden](https://zenphoton.com) ([code source](https://github.com/scanlime/zenphoton)) - [HTMl Meta Tags For SMO](https://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html) ## APIs Web diff --git a/files/fr/web/guide/api/index.md b/files/fr/web/guide/api/index.md index 93a1973792..9b244b43eb 100644 --- a/files/fr/web/guide/api/index.md +++ b/files/fr/web/guide/api/index.md @@ -16,7 +16,7 @@ Le Web peut être utilisé avec de nombreuses API, accessibles en JavaScript, qu ## Voir aussi -- [Référence des interfaces des API Web ](/fr/docs/Web/API)(un index de l'ensemble des interfaces qui composent ces API) +- [Référence des interfaces des API Web](/fr/docs/Web/API) (un index de l'ensemble des interfaces qui composent ces API) - [Le _Document Object Model_](/fr/docs/Web/API/Document_Object_Model) (DOM ou modèle objet de document) - [Référence des évènements associés aux API Web](/fr/docs/Web/Events) - [Apprendre le développement web](/fr/docs/Apprendre) diff --git a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md index df597ef6ad..394be3cf5f 100644 --- a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md +++ b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md @@ -16,7 +16,7 @@ Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé su Il est possible de faire un appel simple de personne à personne (y compris à ceux utilisant Chrome) à [apprtc.appspot.com](https://apprtc.appspot.com/). -Un article de [Hacks](https://hacks.mozilla.org/category/webrtc/) décrit avec précision ce qu'il se passe dans une connexion `RTCPeerConnecion `([lien](https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/)) : +Un article de [Hacks](https://hacks.mozilla.org/category/webrtc/) décrit avec précision ce qu'il se passe dans une connexion `RTCPeerConnecion` ([lien](https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/)) :  |