diff --git a/.prettierignore b/.prettierignore index 34df48ab7b678d..bfd59a26d3edbf 100644 --- a/.prettierignore +++ b/.prettierignore @@ -24,11 +24,12 @@ build/ /files/fr/web/css/justify-content/index.md /files/fr/web/css/place-items/index.md /files/fr/web/css/place-self/index.md +/files/fr/web/javascript/reference/global_objects/array/includes/index.md +/files/fr/web/javascript/reference/global_objects/intl/displaynames/of/index.md /files/pt-br/learn/server-side/django/forms/index.md /files/ru/learn/server-side/django/forms/index.md /files/ru/learn/server-side/django/introduction/index.md /files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md -/files/zh-cn/learn/css/howto/css_faq/index.md /files/zh-cn/learn/server-side/django/forms/index.md # A full pass on all Markdown files is being performed. @@ -38,11 +39,7 @@ build/ /files/es/web/css/**/*.md /files/es/web/javascript/reference/**/*.md -# fr -/files/fr/web/javascript/**/*.md - # ja -/files/ja/learn/javascript/**/*.md /files/ja/mdn/**/*.md /files/ja/web/api/**/*.md /files/ja/web/css/**/*.md @@ -91,6 +88,4 @@ build/ /files/zh-cn/web/api/**/*.md /files/zh-cn/web/css/**/*.md /files/zh-cn/web/html/**/*.md -/files/zh-cn/web/http/**/*.md /files/zh-cn/web/javascript/reference/**/*.md -/files/zh-cn/web/svg/**/*.md diff --git a/files/fr/web/css/shorthand_properties/index.md b/files/fr/web/css/shorthand_properties/index.md index 848d0d75a0cdef..9c75697b945e48 100644 --- a/files/fr/web/css/shorthand_properties/index.md +++ b/files/fr/web/css/shorthand_properties/index.md @@ -1,138 +1,106 @@ --- title: Propriétés raccourcies slug: Web/CSS/Shorthand_properties -translation_of: Web/CSS/Shorthand_properties +l10n: + sourceCommit: be7a098e6af7b820c06a2d5169a9221ee2065e82 --- {{CSSRef}} -_Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité_. - -La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (_font_) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}. - -## Quelques cas aux limites épineux - -Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir : - -1. Une valeur qui n'est pas définie pour la propriété raccourcie **sera réinitialisée avec sa valeur initiale**. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi : - - ```css - background-color: red; - background: url(images/bg.gif) no-repeat top right; - ``` - - ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} `transparent` car la deuxième déclaration prend le pas sur la première. - -2. L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé `inherit.` -3. Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes : - - 1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - - -
border1.png - 1 valeur : border-width: 1em — La valeur unique - s'adresse à tous les côtés. -
border2.png - 2 valeurs : border-width: 1em 2em — La première - valeur représente les côtés horizontaux en haut et en bas. La seconde - valeur représente les côtés verticaux, à gauche et à droite. -
border3.png - 3 valeurs : border-width: 1em 2em 3em — La - première valeur représente le côté haut, la deuxième les côtés gauche et - droit et la troisième représente le côté bas. -
border4.png -

- 4 valeurs : border-width: 1em 2em 3em 4em — Les - quatre valeurs représentent respectivement le côté haut, le côté - droit, le côté bas et le côté haut, toujours dans cet ordre (le sens - horaire). -

-
- - 2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - - -
corner1.png - 1 valeur : border-radius: 1em — La valeur - s'applique à tous les coins. -
corner2.png - 2 valeurs : border-radius: 1em 2em — La première - valeur s'applique aux coins en haut à gauche et en bas à droite et la - deuxième s'applique aux coins en haut à droite et en bas à gauche. -
corner3.png - 3 valeurs : border-radius: 1em 2em 3em — La - première valeur représente le coin en haut à gauche, la deuxième - représente les coins en haut à droite et en bas à gauche et la troisième - valeur représente le coin en bas à droite. -
corner4.png -

- 4 valeurs : border-radius: 1em 2em 3em 4em — Les - quatre valeurs s'appliquent respectivement au coin en haut à gauche, - en haut à droite, en bas à droite et en bas à gauche, toujours dans - cet ordre (le sens horaire). -

-
- -## Les propriétés concernant l'arrière-plan - -Lorsqu'on décrit un arrière-plan avec les propriétés suivantes : +**_Les propriétés raccourcies_** sont des propriétés CSS permettant de paramétrer simultanément les valeurs de plusieurs propriétés CSS. Utiliser une propriété raccourcie permet d'obtenir des feuilles de style plus concises (et souvent plus lisibles). + +La spécification CSS définit des propriétés raccourcies qui regroupent des propriétés courantes portant sur le même thème. Ainsi, la propriété [`background`](/fr/docs/Web/CSS/background) est une propriété raccourcie qui permet de définir les valeurs de [`background-color`](/fr/docs/Web/CSS/background-color), [`background-image`](/fr/docs/Web/CSS/background-image), [`background-repeat`](/fr/docs/Web/CSS/background-repeat), et [`background-position`](/fr/docs/Web/CSS/background-position). De la même façon, la plupart des propriétés communes relatives aux polices peuvent être définies grâce à la propriété raccourcie [`font`](/fr/docs/Web/CSS/font), et celles portant sur les marges autour d'une boîte peuvent être paramétrées grâce à la propriété raccourcie [`margin`](/fr/docs/Web/CSS/margin). + +## Quelques cas aux limites délicats + +Il existe quelques cas aux limites qu'il convient de garder à l'esprit lorsqu'on utilise les propriétés raccourcies. + +### L'omission de propriétés + +Lorsqu'une valeur n'est pas fournie dans la propriété raccourcie, la propriété correspondante utilise alors sa valeur initiale. Cela signifie que la déclaration de la propriété raccourcie **l'emportera** sur les valeurs des éventuelles déclarations précédentes. Prenons par exemple : + +```css +p { + background-color: red; + background: url(images/bg.gif) no-repeat left top; +} +``` + +La couleur de l'arrière-plan ne sera pas rouge (`red`), ce sera la valeur par défaut de [`background-color`](/fr/docs/Web/CSS/background-color) qui sera utilisée : `transparent`. + +Seules les propriétés détaillées permettent l'héritage. Comme les valeurs manquantes dans une déclaration raccourcie sont remplacées par les valeurs initiales correspondantes, il est impossible de permettre l'héritage des propriétés détaillées en les omettant. Le mot-clé `inherit` peut être appliqué à une propriété, mais uniquement dans son ensemble et non comme un mot-clé pour une valeur parmi d'autres. Cela signifie que la seule façon pour qu'une valeur donnée soit héritée consiste à utiliser la propriété détaillée avec le mot-clé `inherit`. + +### L'ordre des propriétés + +Les propriétés raccourcies essaient de ne pas imposer un ordre spécifique pour les valeurs des propriétés qu'elles synthétisent. Cela fonctionne bien lorsque les propriétés détaillées sont de différents types, l'ordre n'ayant alors pas d'importance. En revanche, cela ne peut pas fonctionner si plusieurs des propriétés détaillées permettent d'utiliser des mêmes valeurs. + +Il y a deux thèmes pour lesquels l'ordre est important : + +- Les propriétés relatives aux bords d'une boîte, comme [`border-style`](/fr/docs/Web/CSS/border-style), [`margin`](/fr/docs/Web/CSS/margin) ou [`padding`](/fr/docs/Web/CSS/padding). +- Les propriétés relatives aux coins d'une boîte, comme [`border-radius`](/fr/docs/Web/CSS/border-radius) + +#### Propriétés pour les bords d'une boîte + +Les propriétés raccourcies qui portent sur les bords d'une boîte, comme [`border-style`](/fr/docs/Web/CSS/border-style), [`margin`](/fr/docs/Web/CSS/margin) ou [`padding`](/fr/docs/Web/CSS/padding), utilisent toutes une syntaxe cohérente ayant 1 à 4 valeurs : + +- Syntaxe avec une valeur + + - : `border-width: 1em` — la valeur représente tous les bords : ![Les bords de la boîte avec une syntaxe utilisant une valeur.](border1.png) + +- Syntaxe avec deux valeurs + + - : `border-width: 1em 2em` — la première valeur représente les bords sur l'axe vertical, c'est-à-dire les bords haut et bas ; la seconde représente les bords sur l'axe horizontal, c'est-à-dire les bords gauche et droit : ![Les bords de la boîte avec une syntaxe utilisant deux valeurs.](border2.png) + +- Syntaxe avec trois valeurs + + - : `border-width: 1em 2em 3em` — la première valeur représente le bord haut, la deuxième représente les bords de l'axe horizontal : gauche et droit, et la troisième représente le bord bas : ![Les bords de la boîte avec une syntaxe utilisant trois valeurs.](border3.png) + +- Syntaxe avec quatre valeurs + - : `border-width: 1em 2em 3em 4em` — les quatre valeurs représentent respectivement les bords haut, droit, bas et gauche (et toujours dans cet ordre), soit un sens horaire à partir du haut : ![Les bords de la boîte avec une syntaxe utilisant quatre valeurs.](border4.png) Un moyen mnémotechnique pour mémoriser l'ordre consiste à visualiser le mouvement des aiguilles sur une horloge : la première valeur (ici `1em`) commence à midi, puis la deuxième (ici `2em`) à 15h, puis la troisième (ici `3em`) à 18h, et la dernière (`4em` dans notre exemple) à 21h. + +#### Propriétés pour les coins d'une boîte + +De la même manière, les propriétés raccourcies qui portent sur les coins d'une boîte (par exemple [`border-radius`](/fr/docs/Web/CSS/border-radius)) utilisent toutes une syntaxe cohérente ayant 1 à 4 valeurs : + +- Syntaxe avec une valeur + + - : `border-radius: 1em` — la valeur unique représente tous les coins : ![Les coins de la boîte avec une syntaxe utilisant une valeur.](corner1.png) + +- Syntaxe avec deux valeurs + + - : `border-radius: 1em 2em` — la première valeur porte sur les coins supérieur gauche et inférieur droit, la seconde porte sur les coins supérieur droit et inférieur gauche : ![Les coins de la boîte avec une syntaxe utilisant deux valeurs.](corner2.png) + +- Syntaxe avec trois valeurs + + - : `border-radius: 1em 2em 3em` — la première valeur représente le coin supérieur gauche, la deuxième les coins supérieur droit et inférieur gauche, la troisième le coin inférieur droit : ![Les coins de la boîte avec une syntaxe utilisant trois valeurs.](corner3.png) + +- Syntaxe avec quatre valeurs + - : `border-radius: 1em 2em 3em 4em` — les quatre valeurs représentent respectivement les coins supérieur gauche, supérieur droit, inférieur droit et inférieur gauche (et toujours dans cet ordre), soit un sens horaire à partir du coin supérieur gauche : ![Les coins de la boîte avec une syntaxe utilisant quatre valeurs.](corner4.png) + +## Propriétés pour l'arrière-plan + +Prenons un arrière-plan déclaré comme tel : ```css background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; -background-position: top right; +background-position: left top; ``` -On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent : +On pourra synthétiser ces quatre déclarations en une : ```css -background: #000 url(images/bg.gif) no-repeat top right; +background: #000 url(images/bg.gif) no-repeat left top; ``` -> **Note :** Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute `background-attachment: scroll` et d'autres propriétés avec CSS3). +Voir [`background`](/fr/docs/Web/CSS/background) pour plus d'informations. -Pour plus d'informations, voir {{cssxref("background")}}. +> **Note :** La forme raccourcie correspond plus précisément aux propriétés détaillées indiquées ici avec également, `background-attachment: scroll` et d'autres propriétés supplémentaires. -## Les propriétés liées à la police (_font_) +## Propriétés typographiques -Les déclarations suivantes : +Prenons les déclarations suivantes : ```css font-style: italic; @@ -142,7 +110,7 @@ line-height: 1.2; font-family: Arial, sans-serif; ``` -Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie : +On pourra les raccourcir ainsi : ```css font: @@ -150,11 +118,13 @@ font: sans-serif; ``` -> **Note :** Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera `font-variant: normal` et `font-size-adjust: none` (CSS2.0 / CSS3), `font-stretch: normal` (CSS3). +Voir [`font`](/fr/docs/Web/CSS/font) pour plus d'informations sur cette propriété. + +> **Note :** Cette déclaration raccourcie avec [`font`](/fr/docs/Web/CSS/font) est en réalité équivalente aux déclarations détaillées présentes ici, avec en plus `font-variant: normal`, `font-size-adjust: none`, et `font-stretch: normal`. -## Les propriétés liées aux bordures +## Propriétés pour les bordures -Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple, +Les épaisseurs, couleurs et styles d'une bordure peuvent être exprimés avec une seule déclaration. Si on part du fragment de CSS suivant : ```css border-width: 1px; @@ -162,15 +132,17 @@ border-style: solid; border-color: #000; ``` -peut être écrit ainsi : +On pourra le simplifier de la façon suivante : ```css border: 1px solid #000; ``` -## Les propriétés liées à la marge et au remplissage (_padding_) +Voir [`border`](/fr/docs/Web/CSS/border) pour plus d'informations sur cette propriété. -Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (_padding_) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes : +## Propriétés pour les marges et le remplissage (padding) + +Les propriétés raccourcies pour les marges et le remplissage fonctionnent de la même façon. La propriété [`margin`](/fr/docs/Web/CSS/margin) permet une syntaxe avec une, deux, trois ou quatre valeurs. Prenons les déclarations de ce fragment : ```css margin-top: 10px; @@ -179,19 +151,100 @@ margin-bottom: 10px; margin-left: 5px; ``` -sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à _trouble_) : +On pourra les condenser en une seule déclaration équivalente (on notera l'ordre dans le sens horaire : haut, droit, bas, gauche) : ```css margin: 10px 5px 10px 5px; ``` +## Propriétés de position + +Pour positionner un élément, plutôt que d'utiliser les propriétés détaillées `top`, `right`, `bottom` et `left` comme ceci : + +```css +top: 0; +right: 20px; +bottom: 0; +left: 20px; +``` + +On pourra utiliser la propriété [`inset`](/fr/docs/Web/CSS/inset) qui les synthétise : + +```css +inset: 0 20px 0 20px; +``` + +À l'instar des marges et du remplissage, les valeurs suivent l'ordre horaire (haut, droit, bas, puis gauche). + ## La propriété raccourcie universelle -CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}. +CSS fournit une propriété raccourcie universelle, [`all`](/fr/docs/Web/CSS/all), qui applique sa valeur à toutes les propriétés du document. Elle permet ainsi de changer le modèle d'héritage des propriétés. -Voir l'article sur [la cascade et l'héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) pour plus d'informations sur le fonctionnement de l'héritage. +Voir les articles [La cascade et l'héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) ou [Introduction à la cascade CSS](/fr/docs/Web/CSS/Cascade) pour plus d'informations sur le fonctionnement de l'héritage en CSS. ## Voir aussi -- [La référence CSS](/fr/docs/Web/CSS/Reference) -- Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}} +- Les concepts fondamentaux de CSS : + - [La syntaxe CSS](/fr/docs/Web/CSS/Syntax) + - [Les règles @](/fr/docs/Web/CSS/At-rule) + - [Les commentaires](/fr/docs/Web/CSS/Comments) + - [La spécificité](/fr/docs/Web/CSS/Specificity) + - [L'héritage](/fr/docs/Web/CSS/Inheritance) + - [Le modèle de boîtes](/fr/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) + - [Les modes de disposition](/fr/docs/Web/CSS/Layout_mode) + - [Les modèles de formatage visuel](/fr/docs/Web/CSS/Visual_formatting_model) + - [La fusion des marges](/fr/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) + - Les différentes valeurs + - [Les valeurs initiales](/fr/docs/Web/CSS/initial_value) + - [Les valeurs calculées](/fr/docs/Web/CSS/computed_value) + - [Les valeurs utilisées](/fr/docs/Web/CSS/used_value) + - [Les valeurs réelles](/fr/docs/Web/CSS/actual_value) + - [La syntaxe de définition des valeurs](/fr/docs/Web/CSS/Value_definition_syntax) + - [Les éléments remplacés](/fr/docs/Web/CSS/Replaced_element) +- Les propriétés raccourcies : + - [`all`](/fr/docs/Web/CSS/all) + - [`animation`](/fr/docs/Web/CSS/animation) + - [`background`](/fr/docs/Web/CSS/background) + - [`border`](/fr/docs/Web/CSS/border) + - [`border-block-end`](/fr/docs/Web/CSS/border-block-end) + - [`border-block-start`](/fr/docs/Web/CSS/border-block-start) + - [`border-bottom`](/fr/docs/Web/CSS/border-bottom) + - [`border-color`](/fr/docs/Web/CSS/border-color) + - [`border-image`](/fr/docs/Web/CSS/border-image) + - [`border-inline-end`](/fr/docs/Web/CSS/border-inline-end) + - [`border-inline-start`](/fr/docs/Web/CSS/border-inline-start) + - [`border-left`](/fr/docs/Web/CSS/border-left) + - [`border-radius`](/fr/docs/Web/CSS/border-radius) + - [`border-right`](/fr/docs/Web/CSS/border-right) + - [`border-style`](/fr/docs/Web/CSS/border-style) + - [`border-top`](/fr/docs/Web/CSS/border-top) + - [`border-width`](/fr/docs/Web/CSS/border-width) + - [`column-rule`](/fr/docs/Web/CSS/column-rule) + - [`columns`](/fr/docs/Web/CSS/columns) + - [`contain-intrinsic-size`](/fr/docs/Web/CSS/contain-intrinsic-size) + - [`flex`](/fr/docs/Web/CSS/flex) + - [`flex-flow`](/fr/docs/Web/CSS/flex-flow) + - [`font`](/fr/docs/Web/CSS/font) + - [`gap`](/fr/docs/Web/CSS/gap) + - [`grid`](/fr/docs/Web/CSS/grid) + - [`grid-area`](/fr/docs/Web/CSS/grid-area) + - [`grid-column`](/fr/docs/Web/CSS/grid-column) + - [`grid-row`](/fr/docs/Web/CSS/grid-row) + - [`grid-template`](/fr/docs/Web/CSS/grid-template) + - [`inset`](/fr/docs/Web/CSS/inset) + - [`list-style`](/fr/docs/Web/CSS/list-style) + - [`margin`](/fr/docs/Web/CSS/margin) + - [`mask`](/fr/docs/Web/CSS/mask) + - [`offset`](/fr/docs/Web/CSS/offset) + - [`outline`](/fr/docs/Web/CSS/outline) + - [`overflow`](/fr/docs/Web/CSS/overflow) + - [`padding`](/fr/docs/Web/CSS/padding) + - [`place-content`](/fr/docs/Web/CSS/place-content) + - [`place-items`](/fr/docs/Web/CSS/place-items) + - [`place-self`](/fr/docs/Web/CSS/place-self) + - [`scroll-margin`](/fr/docs/Web/CSS/scroll-margin) + - [`scroll-padding`](/fr/docs/Web/CSS/scroll-padding) + - [`scroll-timeline`](/fr/docs/Web/CSS/scroll-timeline) + - [`text-decoration`](/fr/docs/Web/CSS/text-decoration) + - [`text-emphasis`](/fr/docs/Web/CSS/text-emphasis) + - [`transition`](/fr/docs/Web/CSS/transition) diff --git a/files/fr/web/http/content_negotiation/httpnego.png b/files/fr/web/http/content_negotiation/httpnego.png new file mode 100644 index 00000000000000..f8366b04481f81 Binary files /dev/null and b/files/fr/web/http/content_negotiation/httpnego.png differ diff --git a/files/fr/web/http/content_negotiation/httpnego3.png b/files/fr/web/http/content_negotiation/httpnego3.png new file mode 100644 index 00000000000000..bbfa474aebb87d Binary files /dev/null and b/files/fr/web/http/content_negotiation/httpnego3.png differ diff --git a/files/fr/web/http/content_negotiation/httpnegoserver.png b/files/fr/web/http/content_negotiation/httpnegoserver.png new file mode 100644 index 00000000000000..519c4d49203cfd Binary files /dev/null and b/files/fr/web/http/content_negotiation/httpnegoserver.png differ diff --git a/files/fr/web/http/content_negotiation/index.md b/files/fr/web/http/content_negotiation/index.md index 6d65083db640c0..228096f30d0f21 100644 --- a/files/fr/web/http/content_negotiation/index.md +++ b/files/fr/web/http/content_negotiation/index.md @@ -1,110 +1,106 @@ --- title: La négociation de contenu slug: Web/HTTP/Content_negotiation -translation_of: Web/HTTP/Content_negotiation +l10n: + sourceCommit: 8c4e47ca0a8d95ef49ea3b39f5eec454a3d15ae9 --- {{HTTPSidebar}} -En [HTTP](/fr/docs/Glossary/HTTP), la **_négociation de contenu_** est le mécanisme utilisé pour fournir différentes représentations d'une ressource à la même URI, afin que l'agent utilisateur puisse spécifier celle qui convient le mieux à l'utilisateur (par exemple, la langue d'un document, le format d'image, ou l'encodage du contenu). +En [HTTP](/fr/docs/Glossary/HTTP), **la négociation de contenu** est le mécanisme utilisé pour servir différentes [représentations](/fr/docs/Glossary/Representation_header) d'une ressource à partir du même URI pour aider l'agent utilisateur à indiquer la représentation la plus adaptée à l'utilisatrice ou à l'utilisateur (par exemple, la langue du document, le format d'image ou l'encodage à utiliser pour le contenu). -## Principes de la négociation de contenu +> **Note :** [Le wiki du WHATWG](https://wiki.whatwg.org/wiki/Why_not_conneg) explique certains inconvénients liés à la négociation de contenu HTTP. Sachez que HTML fournit des méthodes complémentaires pour la négociation de contenu, par exemple avec [l'élément ``](/fr/docs/Web/HTML/Element/source). -Un document spécifique s'appelle une _ressource_. Lorsqu'un client veut y accéder, il le demande en utilisant son URL. Le serveur utilise cette URL pour choisir une des différentes versions qu'il peut fournir - chaque version étant appelée une représentation - et renvoie cette représentation spécifique au client. La ressource globale, ainsi que chacune de ses représentations, ont une URL spécifique. La façon dont une représentation spécifique est choisie est déterminée par la _négociation de contenu_ et il existe plusieurs façons de négocier entre le client et le serveur. +## Les principes de la négociation de contenu -![](httpnego.png) +Un document donné est défini comme une _ressource_. Lorsqu'un client souhaite obtenir une ressource, il la demande via une URL. Le serveur utilise alors cette URL pour choisir l'une des variantes disponibles. Chaque variante est appelée une _représentation_. Le serveur renvoie alors une représentation donnée au client. La ressource, ainsi que chacune de ses représentations, dispose d'une URL spécifique. _La négociation de contenu_ détermine quelle représentation donnée est utilisée lorsque la ressource est demandée. Il existe plusieurs méthodes de négociation entre le client et le serveur. -La sélection de la représentation la mieux adaptée se fait par l'un des deux mécanismes suivants: +![Un client demandant une URL. Le serveur possède plusieurs ressources représentant cette URL, il renvoie le contenu approprié selon la requête.](httpnego.png) -- Des [en-têtes HTTP](/fr/docs/Web/HTTP/Headers) spécifiques envoyés par le client (_négociation pilotée par le serveur_ ou _négociation proactive_), qui est le moyen standard de négocier un type de ressource spécifique. -- Les [codes réponses](/fr/docs/Web/HTTP/Status) {{HTTPStatus("300")}} (Multiple Choices) ou {{HTTPStatus("406")}} (Not Acceptable) envoyés par le serveur (_négociation pilotée par le client_ ou _négociation réactive_), qui sont utilisés comme mécanismes de repli. +La représentation la plus adaptée est choisie selon l'un de ces deux mécanismes : -Au fil des ans, d'autres propositions de négociation de contenu, comme la négociation transparente du contenu et l'en-tête `Alternates`, ont été proposées. Elles n'ont pas réussi à emporter l'adhésion et ont été abandonnées. +- [Des en-têtes HTTP spécifiques](/fr/docs/Web/HTTP/Headers) envoyés par le client (_négociation menée par le serveur_ ou _négociation proactive_) : il s'agit de la méthode standard pour négocier un type de ressource donné. +- [Les codes de réponse HTTP](/fr/docs/Web/HTTP/Status) [`300 Multiple Choices`](/fr/docs/Web/HTTP/Status/300), [`406 Not Acceptable`](/fr/docs/Web/HTTP/Status/406) ou [`415 Unsupported Media Type`](/fr/docs/Web/HTTP/Status/415) envoyés par le serveur (_négociation menée par l'agent_ ou _négociation réactive_), sont utilisés comme mécanismes de recours. -## La négociation de contenu gérée par le serveur +Au fur et à mesure des années, d'autres propositions relatives à la négociation de contenu ont été faites, comme [la négociation de contenu transparente](https://datatracker.ietf.org/doc/html/rfc2295) et l'en-tête `Alternates`. Toutefois, elles n'ont pas suffisamment pris d'ampleur et ont finalement été abandonnées. -Dans la _négociation de contenu gérée par le serveur_, ou négociation proactive de contenu, le navigateur (ou tout autre type de client) envoie plusieurs en-têtes HTTP avec l'URL décrivant les choix préférés de l'utilisateur. Le serveur les utilise comme indications et un algorithme interne choisit le meilleur contenu à servir au client. L'algorithme est spécifique au serveur et n'est pas défini dans la norme. Voir, par exemple, l'[algorithme de négociation d'Apache 2.2](http://httpd.apache.org/docs/2.2/en/content-negotiation.html#algorithm). +## Négociation de contenu menée par le serveur -![](httpnegoserver.png) +Lors d'une _négociation de contenu menée par le serveur_ (aussi appelée négociation de contenu proactive), le navigateur (ou tout autre agent utilisateur) envoie plusieurs en-têtes HTTP avec l'URL. Ces en-têtes décrivent les préférences de la personne. Le serveur utilise alors ces en-têtes comme indications et un algorithme interne détermine le meilleur contenu à servir au client. Si le serveur ne peut fournir une ressource adéquate, il peut répondre avec les erreurs [`406 Not Acceptable`](/fr/docs/Web/HTTP/Status/406) ou [`415 Unsupported Media Type`](/fr/docs/Web/HTTP/Status/415) et renvoyer des en-têtes indiquant les types de média qu'il prend en charge (par exemple avec [`Accept-Post`](/fr/docs/Web/HTTP/Headers/Accept-Post) ou [`Accept-Patch`](/fr/docs/Web/HTTP/Headers/Accept-Patch) selon que la requête utilise respectivement le verbe `POST` ou `PATCH`). L'algorithme est propre au serveur et n'est pas défini par le standard. Comme exemple, vous pouvez consulter [l'algorithme de négociation utilisé par le serveur HTTP httpd d'Apache](https://httpd.apache.org/docs/current/en/content-negotiation.html#algorithm). -La norme HTTP/1.1 définit la liste des en-têtes standard qui initient la négociation pilotée par le serveur ({{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}). Bien qu'à proprement parler {{HTTPHeader("User-Agent")}} ne figure pas dans la liste, il est aussi parfois utilisé pour envoyer une représentation spécifique de la ressource demandée, bien que cela ne soit pas considéré comme une bonne pratique. Le serveur utilise l'en-tête {{HTTPHeader("Vary")}} pour indiquer quels en-têtes il a effectivement utilisés pour la négociation de contenu (ou plus précisément les en-têtes de réponse associés), pour que les [caches](/fr/docs/Web/HTTP/Caching) puissent fonctionner de manière optimale. +![Un client dem ande une URL avec des en-têtes indiquant une préférence pour des types de contenu. Le serveur possède plusieurs ressources représentant cette URL et renvoie le contenu associé à la langue préférée tout en compressant le corps de la requête avec la méthode demandée par le client dans les en-têtes de la requête.](httpnegoserver.png) -En outre, il existe une proposition expérimentale visant à ajouter d'autres en-têtes à la liste des en-têtes disponibles, appelés indications (_hints_) du client. Ces hints indiquent sur quel type de périphérique l'agent utilisateur fonctionne (par exemple, s'il s'agit d'un ordinateur de bureau ou d'un périphérique mobile). +Le standard HTTP/1.1 définit une liste des en-têtes standard qui initient la négociation menée par le serveur (comme [`Accept`](/fr/docs/Web/HTTP/Headers/Accept), [`Accept-Encoding`](/fr/docs/Web/HTTP/Headers/Accept-Encoding), et [`Accept-Language`](/fr/docs/Web/HTTP/Headers/Accept-Language)). Bien que l'en-tête [`User-Agent`](/fr/docs/Web/HTTP/Headers/User-Agent) ne soit pas dans cette liste, il est parfois utilisé en pratique pour déterminer la ressource à envoyer, bien que ce ne soit pas une bonne pratique. Le serveur utilise l'en-tête [`Vary`](/fr/docs/Web/HTTP/Headers/Vary) pour indiquer les en-têtes effectivement utilisés pour la négociation de contenu (ou, plus précisément, les en-têtes correspondants à ceux de la requête), afin que [les caches](/fr/docs/Web/HTTP/Caching) puissent fonctionner de façon optimale. -Même si la négociation de contenu gérée par le serveur est le moyen le plus courant de s'entendre sur une représentation spécifique d'une ressource, elle présente plusieurs inconvénients: +En complément de ces en-têtes, une proposition expérimentale décrit plusieurs en-têtes supplémentaires appelés _indications client_ (client hints). Ces indications exposent le type d'appareil sur lequel est utilisé l'agent utilisateur (par exemple un ordinateur de bureau ou un appareil). -- Le serveur n'a pas une connaissance totale du navigateur. Même avec l'extension _Client Hints_, il n'a pas une connaissance complète des capacités du navigateur. Contrairement à la négociation de contenu réactif où le client fait le choix, celui du serveur est toujours quelque peu arbitraire. -- L'information fournie par le client est assez verbeuse (la compression de l'en-tête HTTP/2 atténue ce problème) et est un risque d'atteinte à la vie privée (empreintes digitales HTTP) -- Comme plusieurs représentations d'une ressource donnée sont envoyées, les caches partagés sont moins efficaces et les implémentations des serveurs sont plus complexes. +Même si la négociation menée par le serveur est la méthode la plus fréquemment employée pour s'accorder sur la représentation spécifique d'une ressource, elle souffre de plusieurs inconvénients : -### The `Accept` header +- Le serveur ne connaît pas tout du navigateur. Même avec les indications client, le serveur ne peut connaître toutes les capacités du navigateur. Contrairement à la négociation de contenu menée par le client, où c'est ce dernier qui fait le choix, le choix du serveur repose toujours sur une partie d'arbitraire. +- Les informations envoyées par le client sont assez verbeuses (la compression des en-têtes HTTP/2 atténue ce problème) et peuvent être un risque quant à la vie privée (en permettant par exemple de construire [des empreintes HTTP uniques](/fr/docs/Glossary/Fingerprinting)). +- Lorsque plusieurs représentations d'une même ressource sont envoyées par le serveur, l'efficacité des caches est réduite et les implémentations des serveurs deviennent plus complexes. -The {{HTTPHeader("Accept")}} header lists the MIME types of media resources that the agent is willing to process. It is comma-separated lists of MIME types, each combined with a quality factor, a parameter indicating the relative degree of preference between the different MIME types. +### L'en-tête `Accept` -The {{HTTPHeader("Accept")}} header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an HTML page or an image, a video, or a script: It is different when fetching a document entered in the address bar or an element linked via an {{ HTMLElement("img") }}, {{ HTMLElement("video") }} or {{ HTMLElement("audio") }} element. Browsers are free to use the value of the header that they think is the most adequate; an exhaustive list of [default values for common browsers](/fr/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values) is available. +L'en-tête [`Accept`](/fr/docs/Web/HTTP/Headers/Accept) liste les types MIME des ressources média que l'agent accepte de traiter. Il s'agit d'une liste de types MIME séparés par des virgules, chacun associé avec un facteur de qualité indiquant la préférence relative entre chaque type MIME. -### The `Accept-CH` header {{experimental_inline}} +L'en-tête `Accept` est défini par le navigateur (ou tout autre agent utilisateur) et peut varier selon le contexte, par exemple que la ressource soit une page HTML, une image, une vidéo ou un script. Cet en-tête sera différent selon qu'on récupère un document demandé via la barre d'adresse, ou une ressource désignée par un élément [``](/fr/docs/Web/HTML/Element/img), [`