diff options
Diffstat (limited to 'files/fr/web')
46 files changed, 2467 insertions, 4189 deletions
diff --git a/files/fr/web/css/-moz-image-rect/index.md b/files/fr/web/css/-moz-image-rect/index.md index 0a0123b4e3..4ccfdeedeb 100644 --- a/files/fr/web/css/-moz-image-rect/index.md +++ b/files/fr/web/css/-moz-image-rect/index.md @@ -1,113 +1,108 @@ --- title: '-moz-image-rect' slug: Web/CSS/-moz-image-rect -tags: - - CSS - - Fonction - - Non-standard - - Reference translation_of: Web/CSS/-moz-image-rect +browser-compat: css.types.-moz-image-rect --- {{Non-standard_header}}{{CSSRef}} -La propriété **`-moz-image-rect`** permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs _sprites_ à différentes fins, ce qui permet de diminuer le nombre de transfert réseau. - -Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à `-moz-image-rect`, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS. - -La syntaxe de cette propriété est similaire à la fonction [`rect()`](</fr/docs/Web/CSS/shape#La_fonction_rect()>) qui génère une valeur de type {{cssxref("<shape>")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image. +La propriété **`-moz-image-rect`** permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à [`background-image`](/fr/docs/Web/CSS/background-image)). On peut ainsi utiliser une image qui regroupe plusieurs _sprites_ à différentes fins, ce qui permet de diminuer le nombre de transfert réseau. ## Syntaxe - -moz-image-rect({{cssxref("<uri>")}}, top, right, bottom, left); +```css +-moz-image-rect(url(), top, right, bottom, left); +``` ### Valeurs -- {{cssxref("<uri>")}} +- [`url()`](/fr/docs/Web/CSS/url()) - : L'URI de l'image dont on veut obtenir une portion. - `top` - - : La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. + - : La coordonnée du bord haut de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche. - `right` - - : La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. + - : La coordonnée du bord droit de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche. - `bottom` - - : La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. + - : La coordonnée du bord inférieur de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche. - `left` - - : La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. + - : La coordonnée du bord gauche de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche. + +## Description -### Syntaxe formelle +Cette propriété fonctionne de façon analogue à [`-moz-image-region`](/fr/docs/Web/CSS/-moz-image-region) qui peut être utilisée pour déterminer la partie d'une image utilisée pour [`list-style-image`](/fr/docs/Web/CSS/list-style-image) qui met en forme les puces d'une liste. Grâce à `-moz-image-rect`, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS. -{{CSSSyntax}} +La syntaxe de cette propriété est similaire à la fonction [`rect()`](/fr/docs/Web/CSS/shape#syntaxe) qui génère une valeur de type [`<shape>`](/fr/docs/Web/CSS/shape). Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image. ## Exemples -Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs. +Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments [`<div>`](/fr/docs/Web/HTML/Element/div). Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs. + +### HTML + +```html +<div id="container" onclick="rotate()"> + <div id="box1" style="left:0px; top:0px;">En haut à gauche</div> + <div id="box2" style="left:133px; top:0px;">En haut à droite</div> + <div id="box3" style="left:0px; top:136px;">En bas à gauche</div> + <div id="box4" style="left:133px; top:136px;">En bas à droite</div> +</div> +``` ### CSS ```css #container { - width:267px; - height:272px; - top:100px; - left:100px; - position:absolute; - font-size:16px; - text-shadow:white 0px 0px 6px; - text-align:center; + width: 267px; + height: 272px; + top: 100px; + left: 100px; + position: absolute; + font-size: 16px; + text-shadow: white 0px 0px 6px; + text-align: center; } #box1 { - background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%); - width:133px; - height:136px; - position:absolute; + background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%); + width: 133px; + height: 136px; + position: absolute; } #box2 { - background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%); - width:133px; - height:136px; - position:absolute; + background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%); + width: 133px; + height: 136px; + position: absolute; } #box3 { - background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); - width:133px; - height:136px; - position:absolute; + background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%); + width: 133px; + height: 136px; + position: absolute; } #box4 { - background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); - width:133px; - height:136px; - position:absolute; + background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%); + width: 133px; + height: 136px; + position: absolute; } ``` -### HTML - -```html -<div id="container" onclick="rotate()"> - <div id="box1" style="left:0px;top:0px;">Top left</div> - <div id="box2" style="left:133px;top:0px;">Top right</div> - <div id="box3" style="left:0px;top:136px;">Bottom left</div> - <div id="box4" style="left:133px;top:136px;">Bottom right</div> -</div> -``` - ### JavaScript ```js function rotate() { var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image"); - // Now that we've saved the last one, start rotating + // Récupérer le style du dernier élément, puis faire tourner les images for (var i=1; i<=4; i++) { var curId = "box" + i; - // Shift the background images - + // Décaler les images d'arrière-plan var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image"); document.getElementById(curId).style.backgroundImage = prevStyle; prevStyle = curStyle; @@ -115,12 +110,21 @@ function rotate() { } ``` -Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité. +Dans ce script, on utilise la méthode [`window.getComputedStyle()`](/fr/docs/Web/API/Window/getComputedStyle) afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de [`background-image`](/fr/docs/Web/CSS/background-image) d'un élément à l'autre lors du clic, on obtient l'effet souhaité. ### Résultat -{{EmbedLiveSample("Exemples","400","400")}} +{{EmbedLiveSample("","400","400")}} + +## Specifications + +Cette propriété ne fait partie d'aucun standard. ## Compatibilité des navigateurs -{{Compat("css.types.-moz-image-rect")}} +{{Compat}} + +## Voir aussi + +- [Les extensions spécifiques à Mozilla pour CSS extensions](/fr/docs/Web/CSS/Mozilla_Extensions) +- [Le module de spécification CSS sur les arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders) diff --git a/files/fr/web/css/@font-face/unicode-range/index.md b/files/fr/web/css/@font-face/unicode-range/index.md index c034e9d9bf..aefde94540 100644 --- a/files/fr/web/css/@font-face/unicode-range/index.md +++ b/files/fr/web/css/@font-face/unicode-range/index.md @@ -1,20 +1,12 @@ --- title: unicode-range slug: Web/CSS/@font-face/unicode-range -tags: - - CSS - - Descripteur - - Experimental - - Reference translation_of: Web/CSS/@font-face/unicode-range +browser-compat: css.at-rules.font-face.unicode-range --- {{cssref}} -Le descripteur **`unicode-range`**, associé à la règle @ {{cssxref("@font-face")}}, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée. - -Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées. - -{{cssinfo}} +Le descripteur **`unicode-range`**, associé à la règle @ [`@font-face`](/fr/docs/Web/CSS/@font-face), définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée. ## Syntaxe @@ -29,31 +21,45 @@ unicode-range: U+0025-00FF, U+4??; /* plusieurs valeurs */ ### Valeurs -Une valeur de type `<unicode-range>` peut se présenter de trois façons différentes : +Une valeur de type `<unicode-range>` peut se présenter de trois façons différentes : -- un seul point de code +- Un seul point de code - - Ex : `U+26` + - : Par exemple `U+26` -- un intervalle spécifique de points de code +- Un intervalle spécifique de points de code - - Ex : `U+0025-00FF` indique que l'intervalle contient tous les caractères contenus entre les points de code `U+0025` et `U+00FF` + - : Par exemple `U+0025-00FF` indique que l'intervalle contient tous les caractères contenus entre les points de code `U+0025` et `U+00FF` -- un intervalle de substitution indiqué par `?` +- Un intervalle de substitution indiqué par `?` - - Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, `U+4??` signifie « tous les caractères contenus dans l'intervalle entre les points de code `U+400` et `U+4FF`). + - : Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, `U+4??` signifie « tous les caractères contenus dans l'intervalle entre les points de code `U+400` et `U+4FF` ». + +## Description + +Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (_Helvetica_) et une police avec des empattements (_Times New Roman_) pour l'esperluette. +Dans cet exemple, on crée un élément HTML [`<div>`](/fr/docs/Web/HTML/Element/div) pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (_Helvetica_) et une police avec des empattements (_Times New Roman_) pour l'esperluette. + +### HTML + +```html +<div>Me & You = Us</div> +``` ### CSS -Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style. +Dans la feuille de style CSS, on définit une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément [`<span>`](/fr/docs/Web/HTML/Element/span) et appliquer une autre règle sur cet élément, mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style. ```css @font-face { @@ -68,26 +74,26 @@ div { } ``` -### HTML +### Résultat -```html -<div>Me & You = Us</div> -``` - -### Résultat de référence (image statique) - - - -### Résultat du navigateur - -{{EmbedLiveSample("Exemples", 500,104)}} +{{EmbedLiveSample("", 500,104)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.at-rules.font-face.unicode-range")}} +{{Compat}} + +## Voir aussi + +- [`font-display`](/fr/docs/Web/CSS/@font-face/font-display) +- [`font-family`](/fr/docs/Web/CSS/@font-face/font-family) +- [`font-stretch`](/fr/docs/Web/CSS/@font-face/font-stretch) +- [`font-style`](/fr/docs/Web/CSS/@font-face/font-style) +- [`font-weight`](/fr/docs/Web/CSS/@font-face/font-weight) +- [`font-variant`](/fr/docs/Web/CSS/@font-face/font-variant) +- [`font-feature-settings`](/fr/docs/Web/CSS/font-feature-settings) +- [`font-variation-settings`](/fr/docs/Web/CSS/@font-face/font-variation-settings) +- [`src`](/fr/docs/Web/CSS/@font-face/src) diff --git a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md index 1b7167364e..e74d283b5e 100644 --- a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md +++ b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md @@ -1,16 +1,12 @@ --- title: '::-moz-range-progress' slug: Web/CSS/::-moz-range-progress -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference translation_of: Web/CSS/::-moz-range-progress +browser-compat: css.selectors.-moz-range-progress --- {{CSSRef}}{{Non-standard_header}} -Le pseudo-élément **`::-moz-range-progress`** représente la portion de la piste d'un élément {{HTMLElement("input")}} de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur. +Le pseudo-élément **`::-moz-range-progress`** représente la portion de la piste d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur. > **Note :** Si `::-moz-range-progress` est utilisé sur autre chose qu'un élément `<input type="range">`, il n'aura aucun effet. @@ -20,28 +16,28 @@ Le pseudo-élément **`::-moz-range-progress`** représente la portion de la pis ## Exemples +### HTML + +```html +<input type="range" min="0" max="100" step="5" value="50"/> +``` + ### CSS ```css input[type=range]::-moz-range-progress { - background-color: green; + background-color: green; height: 1em; } ``` -### HTML - -```html -<input type="range" min="0" max="100" step="5" value="50"/> -``` - ### Résultat -{{EmbedLiveSample("Exemples", 300, 50)}} +{{EmbedLiveSample("", 300, 50)}} -Une barre de progression mise en forme avec cette déclaration devrait ressembler à : +Une barre de progression mise en forme avec cette déclaration devrait ressembler à : - + ## Spécifications @@ -49,15 +45,15 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla ## Compatibilité des navigateurs -{{Compat("css.selectors.-moz-range-progress")}} +{{Compat}} ## Voir aussi -- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` : +- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` : - - {{cssxref("::-moz-range-thumb")}} - - {{cssxref("::-moz-range-track")}} + - [`::-moz-range-thumb`](/fr/docs/Web/CSS/::-moz-range-thumb) + - [`::-moz-range-track`](/fr/docs/Web/CSS/::-moz-range-track) -- {{cssxref("::-ms-fill-upper")}} pris en charge par Internet Explorer et Ege -- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) -- [QuirksMode : Mettre en forme les pistes et curseurs](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) +- [`::-ms-fill-upper`](/fr/docs/Web/CSS/::-ms-fill-upper) pris en charge par Internet Explorer +- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) +- [QuirksMode : Mettre en forme les pistes et curseurs (en anglais)](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) diff --git a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md index d1a2f98238..b5dd9b7d45 100644 --- a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md +++ b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md @@ -1,18 +1,14 @@ --- title: '::-moz-range-thumb' slug: Web/CSS/::-moz-range-thumb -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference +browser-compat: css.selectors.-moz-range-thumb translation_of: Web/CSS/::-moz-range-thumb --- {{CSSRef}}{{Non-standard_header}} -Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se déplace le long de la piste dans un élément {{HTMLElement("input")}} de type `range` et qui permet de modifier la valeur numérique associée. +Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se déplace le long de la piste dans un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` et qui permet de modifier la valeur numérique associée. -> **Note :** Utiliser `::-moz-range-thumb` avec un autre élément que `<input type="range">` n'aura aucun effet. +> **Note :** Utiliser `::-moz-range-thumb` avec un autre élément que `<input type="range">` n'aura aucun effet. ## Syntaxe @@ -20,6 +16,12 @@ Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se dépl ## Exemples +### HTML + +```html +<input type="range" min="0" max="100" step="5" value="50"/> +``` + ### CSS ```css @@ -28,19 +30,13 @@ input[type=range]::-moz-range-thumb { } ``` -### HTML - -```html -<input type="range" min="0" max="100" step="5" value="50"/> -``` - ### Résultat -{{EmbedLiveSample("Exemples", 300, 50)}} +{{EmbedLiveSample("", 300, 50)}} -Une barre de progression mise en forme avec ces règles devrait ressembler à : +Une barre de progression mise en forme avec ces règles devrait ressembler à : - + ## Spécifications @@ -48,19 +44,19 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla ## Compatibilité des navigateurs -{{Compat("css.selectors.-moz-range-thumb")}} +{{Compat}} ## Voir aussi -- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` : +- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` : - - {{cssxref("::-moz-range-track")}} - - {{cssxref("::-moz-range-progress")}} + - [`::-moz-range-track`](/fr/docs/Web/CSS/::-moz-range-track) + - [`::-moz-range-progress`](/fr/docs/Web/CSS/::-moz-range-progress) -- Les pseudo-éléments utilisés par les autres navigateurs : +- Les pseudo-éléments utilisés par les autres navigateurs : - - {{cssxref("::-webkit-slider-thumb")}} pour WebKit/Blink (Safari, Chrome et Opera). - - {{cssxref("::-ms-thumb")}} pour Internet Explorer/Edge. + - [`::-webkit-slider-thumb`](/fr/docs/Web/CSS/::-webkit-slider-thumb) pour WebKit/Blink (Safari, Chrome et Opera). + - [`::-ms-thumb`](/fr/docs/Web/CSS/::-ms-thumb) pour Internet Explorer/Edge. -- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) -- [QuirksMode : Mettre en forme les pistes et curseurs](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) +- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) +- [QuirksMode : Mettre en forme les pistes et curseurs (en anglais)](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) diff --git a/files/fr/web/css/_doublecolon_-moz-range-track/index.md b/files/fr/web/css/_doublecolon_-moz-range-track/index.md index 440c9bde5e..d529f072d6 100644 --- a/files/fr/web/css/_doublecolon_-moz-range-track/index.md +++ b/files/fr/web/css/_doublecolon_-moz-range-track/index.md @@ -1,16 +1,12 @@ --- title: '::-moz-range-track' slug: Web/CSS/::-moz-range-track -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference +browser-compat: css.selectors.-moz-range-track translation_of: Web/CSS/::-moz-range-track --- {{CSSRef}}{{Non-standard_header}} -Le pseudo-élément **`::-moz-range-track`** est un pseudo-élément spsécifique à Mozilla et représente la piste d'un élément {{HTMLElement("input")}} de type `range`. +Le pseudo-élément **`::-moz-range-track`** est un pseudo-élément spécifique à Mozilla et représente la piste d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`. > **Note :** `::-moz-range-track` n'aura aucun effet s'il est utilisé sur autre chose qu'un élément `<input type="range">`. @@ -20,6 +16,12 @@ Le pseudo-élément **`::-moz-range-track`** est un pseudo-élément spsécifiqu ## Exemples +### HTML + +```html +<input type="range" min="0" max="100" step="5" value="50"/> +``` + ### CSS ```css @@ -28,19 +30,13 @@ input[type=range]::-moz-range-track { } ``` -### HTML - -```html -<input type="range" min="0" max="100" step="5" value="50"/> -``` - ### Résultat -{{EmbedLiveSample("Exemples", 300, 50)}} +{{EmbedLiveSample("", 300, 50)}} -Une barre de progression mise en forme de cette façon devrait ressembler à : +Une barre de progression mise en forme de cette façon devrait ressembler à : - + ## Spécifications @@ -48,18 +44,18 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla ## Compatibilité des navigateurs -{{Compat("css.selectors.-moz-range-track")}} +{{Compat}} ## Voir aussi -- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` : +- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` : - - {{cssxref("::-moz-range-thumb")}} qui représente le curseur qui se déplace le long de la piste. - - {{cssxref("::-moz-range-progress")}} qui représente la partie inférieure de la piste (ce qui est déjà « couvert »). + - [`::-moz-range-thumb`](/fr/docs/Web/CSS/::-moz-range-thumb) qui représente le curseur qui se déplace le long de la piste. + - [`::-moz-range-progress`](/fr/docs/Web/CSS/::-moz-range-progress) qui représente la partie inférieure de la piste (ce qui est déjà « couvert »). -- Les pseudo-éléments utilisés par les autres navigateurs : +- Les pseudo-éléments utilisés par les autres navigateurs : - - {{cssxref("::-webkit-slider-runnable-track")}} pour WebKit/Blink (Safari, Chrome et Opera). - - {{cssxref("::-ms-track")}} pour Internet Explorer/Edge. + - [`::-webkit-slider-runnable-track`](/fr/docs/Web/CSS/::-webkit-slider-runnable-track) pour WebKit/Blink (Safari, Chrome et Opera). + - [`::-ms-track`](/fr/docs/Web/CSS/::-ms-track) pour Internet Explorer/Edge. -- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) +- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md index ac3b173d3c..ca9616fa6a 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md @@ -1,18 +1,14 @@ --- title: '::-webkit-progress-inner-element' slug: Web/CSS/::-webkit-progress-inner-element -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference +browser-compat: css.selectors.-webkit-progress-inner-element translation_of: Web/CSS/::-webkit-progress-inner-element --- {{CSSRef}}{{Non-standard_header}} -Le pseudo-élément **`::-webkit-progress-inner-element`** représente le cadre extérieur de l'élément {{HTMLElement("progress")}}. C'est un pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-bar")}}. +Le pseudo-élément **`::-webkit-progress-inner-element`** représente le cadre extérieur de l'élément [`<progress>`](/fr/docs/Web/HTML/Element/Progress). C'est un pseudo-élément parent du pseudo-élément [`::-webkit-progress-bar`](/fr/docs/Web/CSS/::-webkit-progress-bar). -> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille `none` sur l'élément `<progress>`. +> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que [`-webkit-appearance`](/fr/docs/Web/CSS/-webkit-appearance) vaille `none` sur l'élément `<progress>`. ## Exemples @@ -36,11 +32,11 @@ progress { ### Résultat -{{EmbedLiveSample("Exemples", 200, 50)}} +{{EmbedLiveSample("", 200, 50)}} -Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon : +Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon : - + ## Spécifications @@ -48,14 +44,14 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink e ## Compatibilité des navigateurs -{{Compat("css.selectors.-webkit-progress-inner-element")}} +{{Compat}} ## Voir aussi -- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} +- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments [`<progress>`](/fr/docs/Web/HTML/Element/Progress) - - {{cssxref("::-webkit-progress-bar")}} - - {{cssxref("::-webkit-progress-value")}} + - [`::-webkit-progress-bar`](/fr/docs/Web/CSS/::-webkit-progress-bar) + - [`::-webkit-progress-value`](/fr/docs/Web/CSS/::-webkit-progress-value) -- {{cssxref("::-moz-progress-bar")}} -- {{cssxref("::-ms-fill")}} +- [`::-moz-progress-bar`](/fr/docs/Web/CSS/::-moz-progress-bar) +- [`::-ms-fill`](/fr/docs/Web/CSS/::-ms-fill) diff --git a/files/fr/web/css/background-attachment/index.md b/files/fr/web/css/background-attachment/index.md index c4074f7289..5ec59fa33a 100644 --- a/files/fr/web/css/background-attachment/index.md +++ b/files/fr/web/css/background-attachment/index.md @@ -1,15 +1,12 @@ --- title: background-attachment slug: Web/CSS/background-attachment -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-attachment translation_of: Web/CSS/background-attachment --- {{CSSRef}} -La propriété **`background-attachment`** définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (_viewport_) ou si celle-ci défile avec le bloc englobant. +La propriété **`background-attachment`** définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (<i lang="en">viewport</i>) ou si celle-ci défile avec le bloc englobant. {{EmbedInteractiveExample("pages/css/background-attachment.html")}} @@ -24,6 +21,7 @@ background-attachment: local; /* Valeurs globales */ background-attachment: inherit; background-attachment: initial; +background-attachment: revert; background-attachment: unset; ``` @@ -32,13 +30,17 @@ La propriété `background-attachment` est définie avec un des mots-clés de la ### Valeurs - `fixed` - - : Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (_viewport_). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec {{cssxref("background-clip", "background-clip: text", "#text")}}). + - : Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (<i lang="en">viewport</i>). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec [`background-clip: text`](/fr/docs/Web/CSS/background-clip)). - `local` - : Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur. - `scroll` - : Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -50,7 +52,7 @@ La propriété `background-attachment` est définie avec un des mots-clés de la ```css p { - background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-image: url("starsolid.gif"); background-attachment: fixed; } ``` @@ -68,7 +70,7 @@ p { #### Résultat -{{EmbedLiveSample("Exemple_simple")}} +{{EmbedLiveSample("")}} ### Gestion de plusieurs arrière-plans @@ -78,7 +80,7 @@ On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en ```css p { - background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); + background-image: url("starsolid.gif"), url("startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } @@ -106,22 +108,16 @@ p { #### Résultat -{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}} +{{EmbedLiveSample("")}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}} | {{Spec2('CSS3 Backgrounds')}} | La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur `local`. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}} | {{Spec2('CSS2.1')}} | Aucune modification significative. | -| {{SpecName('CSS1', '#background-attachment', 'background-attachment')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-attachment")}} +{{Compat}} ## Voir aussi -- [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans "CSS/Multiple backgrounds") +- [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/fr/web/css/background-blend-mode/index.md b/files/fr/web/css/background-blend-mode/index.md index 4f642b32e5..7dfca3d56f 100644 --- a/files/fr/web/css/background-blend-mode/index.md +++ b/files/fr/web/css/background-blend-mode/index.md @@ -1,10 +1,7 @@ --- title: background-blend-mode slug: Web/CSS/background-blend-mode -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-blend-mode translation_of: Web/CSS/background-blend-mode --- {{CSSRef}} @@ -13,7 +10,7 @@ La propriété CSS **`background-blend-mode`** définit la façon dont les image {{EmbedInteractiveExample("pages/css/background-blend-mode.html")}} -Les modes de fusions (_blending modes_) doivent être définis dans le même ordre que les images sont définies avec {{cssxref("background-image")}}. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales. +Les modes de fusions (<i lang="en">blending modes</i>) doivent être définis dans le même ordre que les images sont définies avec [`background-image`](/fr/docs/Web/CSS/background-image). Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales. ## Syntaxe @@ -27,17 +24,22 @@ background-blend-mode: darken, luminosity; /* Valeurs globales */ background-blend-mode: initial; background-blend-mode: inherit; +background-blend-mode: revert; background-blend-mode: unset; ``` ### Valeurs - `<blend-mode>` - - : Une valeur décrivant un mode de fusion (type {{cssxref("<blend-mode>")}}) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules. + - : Une valeur décrivant un mode de fusion (type [`<blend-mode>`](/fr/docs/Web/CSS/blend-mode)) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules. -### Syntaxe formelle +## Définition formelle - Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity +{{cssinfo}} + +## Syntaxe formelle + +{{csssyntax}} ## Exemples @@ -45,10 +47,10 @@ background-blend-mode: unset; ```css #div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: screen; + width: 300px; + height: 300px; + background: url('br.png'),url('tr.png'); + background-blend-mode: screen; } ``` @@ -58,22 +60,22 @@ background-blend-mode: unset; <div id="div"></div> <select id="select"> - <option>normal</option> - <option>multiply</option> - <option selected>screen</option> - <option>overlay</option> - <option>darken</option> - <option>lighten</option> - <option>color-dodge</option> - <option>color-burn</option> - <option>hard-light</option> - <option>soft-light</option> - <option>difference</option> - <option>exclusion</option> - <option>hue</option> - <option>saturation</option> - <option>color</option> - <option>luminosity</option> + <option>normal</option> + <option>multiply</option> + <option selected>screen</option> + <option>overlay</option> + <option>darken</option> + <option>lighten</option> + <option>color-dodge</option> + <option>color-burn</option> + <option>hard-light</option> + <option>soft-light</option> + <option>difference</option> + <option>exclusion</option> + <option>hue</option> + <option>saturation</option> + <option>color</option> + <option>luminosity</option> </select> ``` @@ -81,26 +83,24 @@ background-blend-mode: unset; ```js document.getElementById("select").onchange = function(event) { - document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; + document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; } console.log(document.getElementById('div')); ``` -{{EmbedLiveSample('Exemples', "330", "330")}} +### Résultat -## Spécifications +{{EmbedLiveSample('', "330", "350")}} -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}} | {{Spec2('Compositing')}} | Définition initiale. | +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-blend-mode")}} +{{Compat}} ## Voir aussi -- {{cssxref("<blend-mode>")}} -- {{cssxref("mix-blend-mode")}} +- [`<blend-mode>`](/fr/docs/Web/CSS/blend-mode) +- [`mix-blend-mode`](/fr/docs/Web/CSS/mix-blend-mode) diff --git a/files/fr/web/css/background-image/index.md b/files/fr/web/css/background-image/index.md index 6cf6e5316b..b13cf365e2 100644 --- a/files/fr/web/css/background-image/index.md +++ b/files/fr/web/css/background-image/index.md @@ -1,10 +1,7 @@ --- title: background-image slug: Web/CSS/background-image -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-image translation_of: Web/CSS/background-image --- {{CSSRef}} @@ -15,11 +12,11 @@ La propriété **`background-image`** permet de définir une ou plusieurs images Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur. -Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}. +Les bordures de l'élément sont dessinées par-dessus l'arrière-plan et la couleur [`background-color`](/fr/docs/Web/CSS/background-color) est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés [`background-clip`](/fr/docs/Web/CSS/background-clip) et [`background-origin`](/fr/docs/Web/CSS/background-origin). -Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme `none`. +Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiqué), les navigateurs considèreront la valeur comme `none`. -> **Note :** Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées. +> **Note :** Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via [`background-color`](/fr/docs/Web/CSS/background-color) au cas où les images ne peuvent être chargées. ## Syntaxe @@ -30,37 +27,45 @@ background-image: url('https://example.com/bck.png'); /* Plusieurs valeurs */ background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png'); +background-image: + linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), + url('catfront.png'); + /* Valeur avec un mot-clé */ background-image: none; /* Valeurs globales */ background-image: inherit; background-image: initial; +background-image: revert; background-image: unset; ``` -Chaque image d'arrière-plan peut être définie avec le mot-clé `none` ou avec une valeur de type `<image>`. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules : - -```css -background-image: - linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), - url("https://mdn.mozillademos.org/files/7693/catfront.png"); -``` - ### Valeurs - `none` - : Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan. - `<image>` - - : Une valeur {{cssxref("<image>")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes (`'texte_avec_double_quotes_"_'`) ou des doubles quotes (`"texte_avec_simple_quote_'_"`) pour encadrer le texte qui forme l'URL. + - : Une valeur [`<image>`](/fr/docs/Web/CSS/image) qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. + +## Accessibilité + +Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisatrices et utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document. -### Syntaxe formelle +- [Comprendre les règles du WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Comprendre les critères de succès 1.1.1 — Comprendre les règles du WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat. +On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat. ### HTML @@ -90,53 +95,45 @@ p { } div { - background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); + background-image: url("mdn_logo_only_color.png"); } .catsandstars { - background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), - url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-image: url("startransparent.gif"), + url("catfront.png"); background-color: transparent; } ``` ### Résultat -{{EmbedLiveSample('Exemples')}} - -## Accessibilité - -Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document. - -- [Comprendre les règles du WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +{{EmbedLiveSample('')}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}} | {{Spec2('CSS3 Backgrounds')}} | La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("<image>")}}. | -| {{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}} | {{Spec2('CSS2.2')}} | | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}} | {{Spec2('CSS2.1')}} | La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite. | -| {{SpecName('CSS1', '#background-image', 'background-image')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-image")}} +{{Compat}} ## Voir aussi - [Implémenter des sprites en CSS](/fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS) -- {{HTMLElement("img")}}, -- {{cssxref("<image>")}}, -- {{cssxref("<gradient>")}}, -- {{cssxref("linear-gradient")}}, -- {{cssxref("radial-gradient")}}, -- {{cssxref("repeating-linear-gradient")}}, -- {{cssxref("repeating-radial-gradient")}}, -- {{cssxref("element()")}}, -- {{cssxref("_image", "image()")}}, -- {{cssxref("image-set")}}, -- {{cssxref("url","url()")}} +- L'élément HTML [`<img>`](/fr/docs/Web/HTML/Element/Img), +- Les types de données CSS relatifs aux images : + - [`<image>`](/fr/docs/Web/CSS/image) + - [`<gradient>`](/fr/docs/Web/CSS/gradient) +- Les fonctions CSS relatives aux images : + - [`cross-fade()`](/fr/docs/Web/CSS/cross-fade()) + - [`element()`](/fr/docs/Web/CSS/element()) + - [`image()`](/fr/docs/Web/CSS/image/image()) + - [`image-set()`](/fr/docs/Web/CSS/image/image-set()) + - [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient()) + - [`radial-gradient`](/fr/docs/Web/CSS/gradient/radial-gradient()) + - [`conic-gradient`](/fr/docs/Web/CSS/gradient/conic-gradient()) + - [`repeating-linear-gradient`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) + - [`repeating-radial-gradient`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) + - [`repeating-conic-gradient`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()), + - [`paint()`](/fr/docs/Web/CSS/image/paint()) + - [`url()`](/fr/docs/Web/CSS/url()) diff --git a/files/fr/web/css/background-origin/index.md b/files/fr/web/css/background-origin/index.md index e9a1286b35..379bea080b 100644 --- a/files/fr/web/css/background-origin/index.md +++ b/files/fr/web/css/background-origin/index.md @@ -1,21 +1,18 @@ --- title: background-origin slug: Web/CSS/background-origin -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-image translation_of: Web/CSS/background-origin --- {{CSSRef}} -La propriété **`background-origin`** détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (_padding_). +La propriété **`background-origin`** détermine l'origine de l'arrière-plan [`background-image`](/fr/docs/Web/CSS/background-image) à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (<i lang="en">padding</i>). {{EmbedInteractiveExample("pages/css/background-origin.html")}} -Attention, `background-origin` est ignorée lorsque {{cssxref("background-attachment")}} vaut `fixed`. +Attention, `background-origin` est ignorée lorsque [`background-attachment`](/fr/docs/Web/CSS/background-attachment) vaut `fixed`. -> **Note :** Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`. +> **Note :** Cette propriété est rattachée à la propriété raccourcie [`background`](/fr/docs/Web/CSS/background). Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`. ## Syntaxe @@ -28,6 +25,7 @@ background-origin: content-box; /* Valeurs globales */ background-origin: inherit; background-origin: initial; +background-origin: revert; background-origin: unset; ``` @@ -36,57 +34,88 @@ background-origin: unset; - `border-box` - : L'arrière-plan est positionné relativement à la boîte de bordure. - `padding-box` - - : L'arrière-plan est positionné relativement à la boîte de remplissage (_padding_). + - : L'arrière-plan est positionné relativement à la boîte de remplissage (<i lang="en">padding</i>). - `content-box` - : L'arrière-plan est positionné relativement à la boîte de contenu. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Définir différentes origines ```css -div { - width: 200px; - height: 100px; +.example { + border: 10px double; + padding: 10px; + background: url('image.jpg'); + background-position: center left; + background-origin: content-box; +} +``` + +```css +#example2 { + border: 4px solid black; + padding: 10px; + background: url('image.gif'); + background-repeat: no-repeat; + background-origin: border-box; } +``` -.exemple { - border: 10px double; - padding: 10px; - background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg); - background-color: palegreen; - background-position: 0px 40px; - background-origin: content-box; - background-repeat: no-repeat; +```css +div { + background-image: url('logo.jpg'), url('mainback.png'); /* Applique deux images en arrière-plan */ + background-position: top right, 0px 0px; + background-origin: content-box, padding-box; } ``` -### HTML +### Utiliser deux dégradés + +Dans cet exemple, la boîte possède une bordure épaisse en pointillés. Le premier dégradé utilise `padding-box` pour `background-origin` et l'arrière-plan s'inscrit donc à l'intérieur de la bordure. Le second dégradé utilise `content-box` et apparaît donc uniquement derrière le contenu. + +#### HTML ```html -<div class="exemple"></div> +<div class="box">Coucou !</div> +``` + +#### CSS + +```css +.box { + margin: 10px 0; + color: #fff; + background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,0.6) 60%, rgba(252,176,69,1) 100%), + radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 28%); + border: 20px dashed black; + padding: 20px; + width: 400px; + background-origin: padding-box, content-box; + background-repeat: no-repeat; +} ``` -### Résultat +#### Résultat -{{EmbedLiveSample("Exemples","300","200")}} +{{EmbedLiveSample("","300","200")}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-origin")}} +{{Compat}} ## Voir aussi -- {{cssxref("background-clip")}} +- [`background-clip`](/fr/docs/Web/CSS/background-clip) diff --git a/files/fr/web/css/background-position/index.md b/files/fr/web/css/background-position/index.md index e32881dfac..9d733f0bb9 100644 --- a/files/fr/web/css/background-position/index.md +++ b/files/fr/web/css/background-position/index.md @@ -1,15 +1,12 @@ --- title: background-position slug: Web/CSS/background-position -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-position translation_of: Web/CSS/background-position --- {{CSSRef}} -La propriété **`background-position`** permet de définir la position initiale, relative à l'origine définie par {{cssxref("background-origin")}}, pour chaque image d'arrière-plan. +La propriété **`background-position`** permet de définir la position initiale, relative à l'origine définie par [`background-origin`](/fr/docs/Web/CSS/background-origin), pour chaque image d'arrière-plan. {{EmbedInteractiveExample("pages/css/background-position.html")}} @@ -45,45 +42,84 @@ background-position: top right 10px; /* Valeurs globales */ background-position: inherit; background-position: initial; +background-position: revert; background-position: unset; ``` -La propriété `background-position` peut être définie grâce à une ou plusieurs valeurs [`<position>`](#<position>), séparées par des virgules. +La propriété `background-position` peut être définie grâce à une ou plusieurs valeurs `<position>`, séparées par des virgules. ### Valeurs - `<position>` - - : Une valeur {{cssxref("<position>")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale. + - : Une valeur [`<position>`](/fr/docs/Web/CSS/position). Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs. La première correspond à la position horizontale et la seconde à la position verticale. - **Définition avec une valeur :** la valeur peut être : + **Définition avec une valeur :** la valeur peut être : - Le mot-clé `center` qui centre l'image. - Un mot-clé parmi `top`, `left`, `bottom`, `right`. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%). - - Une longeur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%. + - Une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%. - **Définition avec deux valeurs :** la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être : + **Définition avec deux valeurs :** la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être : - Un des mots-clés parmi `top`, `left`, `bottom`, `right`. Si `left` ou `right` est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si `top` ou `bottom` est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X. - - Une valeur de longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}). Si l'autre valeur vaut `left` ou `right`, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est `top` ou `bottom`, cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée. + - Une valeur de longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Si l'autre valeur vaut `left` ou `right`, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est `top` ou `bottom`, cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée. - On notera que : + > **Note :** Si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. Si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. Autrement dit `top top` ou `left right` seront considérées comme invalides. - - si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. - - si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. + **Définition avec 3 valeurs :** Deux valeurs sont des mots-clés et la troisième est le décalage appliqué à la valeur qui précède. - Autrement dit "`top top"` ou "`left right`" seront considérées comme invalides. + - La première valeur est l'un des mots-clés `top`, `left`, `bottom`, `right`, ou `center`. Si `left` ou `right` sont fournis, cela définit la position sur l'axe horizontale et si `top` or `bottom` sont fournis, cela définit la position sur l'axe vertical et l'autre mot-clé définit la position sur l'axe horizontal. + - La longueur (type [`<length>`](/fr/docs/Web/CSS/length)) ou le pourcentage (type [`<percentage>`](/fr/docs/Web/CSS/percentage)), s'il est utilisé en deuxième valeur, sera considéré comme le décalage à appliquer pour la première valeur. S'il s'agit de la troisième valeur, ce sera le décalage à appliquer à la deuxième valeur. + - Il n'y a qu'une seule longueur ou qu'un seul pourcentage attendu pour définir le décalage de la valeur précédente. Toute combinaison d'un mot-clé avec deux longueurs ou deux pourcentages sera considérée comme invalide. - **À propos des pourcentages :** lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image. + **Définition avec 4 valeurs :** La première et la troisième valeur sont des mots-clés pour la position horizontale d'une part et verticale d'autre part. La deuxième et la quatrième valeur sont des décalages pour les valeurs qui les précèdent : - Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante : + - La première et la troisième valeur utilisent l'un des mots-clés suivant : `top`, `left`, `bottom`, `right`. Si `left` ou `right` sont utilisés, cela définit la position horizontale. Si `top` ou `bottom` sont utilisés, cela définit la position verticale et l'autre mot-clé définit alors la valeur horizontale. + - La deuxième et la quatrième valeur sont des longueurs ([`<length>`](/fr/docs/Web/CSS/length)) ou des pourcentages ([`<percentage>`](/fr/docs/Web/CSS/percentage)). La deuxième valeur est le décalage pour le premier mot-clé tandis que la quatrième valeur est le décalage correspondant au deuxième mot-clé. - `(largeur conteneur - largeur image) * (position en %) = (décalage horizontal)` - `(hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)`. +### À propos des pourcentages - On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image. +Lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image. -### Syntaxe formelle +Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante : + +``` +(largeur conteneur - largeur image) * (position en %) = (décalage horizontal) +(hauteur conteneur - hauteur image) * (position en %) = (décalage vertical) +``` + +En utilisant l'axe horizontal pour un exemple, prenons une image dont la largeur mesure 300px, qu'on utilise celle-ci dans un conteneur dont la largeur mesure 100px et que `background-size` vaut `auto` : + +``` +100px - 300px = -200px (différence entre le conteneur et l'image) +``` + +Voici donc les décalages, exprimés en pixels, qu'on obtient avec les pourcentages -25%, 0%, 50%, 100% et 125% : + +``` +-200px * -25% = 50px +-200px * 0% = 0px +-200px * 50% = -100px +-200px * 100% = -200px +-200px * 125% = -250px +``` + +Traduisons l'effet obtenu avec ces valeurs. Le **bord gauche** de **l'image** est décalé du **bord gauche** du **conteneur** de : + +- \+ 50px (plaçant ainsi le bord gauche de l'image au centre du conteneur large de 100px) +- 0px (le bord gauche de l'image coïncide avec le bord gauche du conteneur) +- \-100px (le bord gauche de l'image est situé à 100px du bord gauche du conteneur, ce qui signifie pour notre exemple que c'est la partie centrale de l'image qui est inscrite dans le conteneur) +- \-200px (le bord gauche de l'image est situé à 200px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image coïncide avec le bord droit du conteneur) +- \-250px (le bord gauche de l'image est situé à 250px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image de 300px est au centre du conteneur). + +On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image. + +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -93,6 +129,14 @@ La propriété `background-position` peut être définie grâce à une ou plusie Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile située différemment. Le rectangle final possède deux images d'arrière-plan, chacune à une position différente. +#### HTML + +```html +<div class="exemple_un">Premier exemple</div> +<div class="exemple_deux">Deuxième exemple</div> +<div class="exemple_trois">Troisième exemple</div> +``` + #### CSS ```css @@ -106,10 +150,10 @@ div { /* On utilise la propriété raccourcie background */ .exemple_un { - background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat; + background: url("startransparent.gif") #FFEE99 2.5cm bottom no-repeat; } .exemple_deux { - background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat; + background: url("startransparent.gif") #FFEE99 3em 50% no-repeat; } /* @@ -118,48 +162,28 @@ différemment, on voit les virgules dans les déclarations. L'ordre est le même entre background-image et -position. */ .exemple_trois { - background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), - url("https://mdn.mozillademos.org/files/7693/catfront.png"); - background-position: 0px 0px, - center; + background-image: url("startransparent.gif"), url("catfront.png"); + background-position: 0px 0px, center; } ``` -#### HTML - -```html -<div class="exemple_un">Premier exemple</div> -<div class="exemple_deux">Deuxième exemple</div> -<div class="exemple_trois">Troisième exemple</div> -``` - #### Résultat -{{EmbedLiveSample('Exemples', 420, 200)}} +{{EmbedLiveSample('', 420, 320)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}} | {{Spec2('CSS3 Backgrounds')}} | La gestion de plusieurs arrières-plans a été ajoutée. La syntaxe avec quatre valeurs a été ajoutée. La définition des valeurs en pourcentages a été modifiée pour correspondre aux implémentations. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}} | {{Spec2('CSS2.1')}} | Cette spécification permet de mélanger les valeurs qui sont des mots-clés, les valeurs de type {{cssxref("<length>")}} et {{cssxref("<percentage>")}}. | -| {{SpecName('CSS1', '#background-position', 'background-position')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-position")}} - -### Notes relatives à Quantum CSS - -- Un bug de Gecko empêche la transition de `background-position` entre deux valeurs qui contiennent différents nombres de valeurs {{cssxref("<position>")}} (par exemple `background-position: 10px 10px;` d'une part et `background-position: 20px 20px, 30px 30px;` d'autre part) (cf. {{bug(1390446)}}). Le nouveau moteur CSS de Firefox (appelé [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour Firefox 57) corrige ce problème. +{{Compat}} ## Voir aussi - [Gérer plusieurs arrières-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) -- {{cssxref("background-position-x")}} -- {{cssxref("background-position-y")}} -- {{cssxref("background-position-inline")}} -- {{cssxref("background-position-block")}} -- {{cssxref("transform-origin")}} +- [`background-position-x`](/fr/docs/Web/CSS/background-position-x) +- [`background-position-y`](/fr/docs/Web/CSS/background-position-y) +- [`background-position-inline`](/fr/docs/Web/CSS/background-position-inline) +- [`background-position-block`](/fr/docs/Web/CSS/background-position-block) +- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/background-repeat/index.md b/files/fr/web/css/background-repeat/index.md index d11530c2ad..e65beaf890 100644 --- a/files/fr/web/css/background-repeat/index.md +++ b/files/fr/web/css/background-repeat/index.md @@ -1,19 +1,16 @@ --- title: background-repeat slug: Web/CSS/background-repeat -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-repeat translation_of: Web/CSS/background-repeat --- {{CSSRef}} -La propriété **`background-repeat`** définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée. +La propriété [CSS](/fr/docs/Web/CSS) **`background-repeat`** définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée. {{EmbedInteractiveExample("pages/css/background-repeat.html")}} -Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (`round`) voire être distribuées avec des espaces entre les motifs pour remplir la zone (`space`). +Par défaut, les images répétées sont rognées à la taille de l'élément, mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (`round`) voire être distribuées avec des espaces entre les motifs pour remplir la zone (`space`). ## Syntaxe @@ -27,8 +24,7 @@ background-repeat: round; background-repeat: no-repeat; /* Syntaxe avec deux valeurs */ -/* Première valeur : axe horizontal */ -/* Seconde valeur : axe vertical */ +/* axe horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; @@ -37,6 +33,7 @@ background-repeat: no-repeat round; /* Valeurs globales */ background-repeat: inherit; background-repeat: initial; +background-repeat: revert; background-repeat: unset; ``` @@ -44,13 +41,13 @@ background-repeat: unset; - `<repeat-style>` - - : Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance : + - : Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance : <table class="standard-table"> <tbody> <tr> <td><strong>Une seule valeur</strong></td> - <td><strong>Équivalent avec deux-valeurs</strong></td> + <td><strong>Équivalent avec deux valeurs</strong></td> </tr> <tr> <td><code>repeat-x</code></td> @@ -79,59 +76,55 @@ background-repeat: unset; </tbody> </table> - Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options : + Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici une définition des différentes options : - <table class="standard-table"> - <tbody> - <tr> - <td><code>repeat</code></td> - <td> - L'image est répétée autant de fois que nécessaire pour recouvrir la zone - dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire. - </td> - </tr> - <tr> - <td><code>space</code></td> - <td> - L'image est répétée autant que possible sans rognage. La première et la - dernière image sont accolées aux bords de l'élément et des espaces sont - repartis de façon égale entre les images. La propriété - {{cssxref("background-position")}} est ignorée sauf s'il n'y a - qu'une seule image qui puisse être affichée sans être rognée. Le seul - cas où <code>space</code> est utilisé et qu'une image est rognée se - produit lorsque l'image est trop grande pour être affichée. - </td> - </tr> - <tr> - <td><code>round</code></td> - <td> - L'image est répétée autant que possible et est étirée si nécessaire afin - qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place - d'ajouter une image, les autres sont compressées pour lui laisser la - place. Ainsi, une image avec une largeur originale de 260px, répétée - trois fois, pourra être étirée pour que chaque exemplaire mesure 300 - pixels de large, lorsqu'une autre image sera ajoutée, elles seront - compressées sur 225 pixels. - </td> - </tr> - <tr> - <td><code>no-repeat</code></td> - <td> - Il n'y a aucune répétition de l'image (dès lors, il est possible que - toute la zone ne soit pas recouverte par cette image). La position de - l'image est définie grâce à la propriété - {{cssxref("background-position")}}. - </td> - </tr> - </tbody> - </table> + - `repeat` + - : L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire. + - `space` + - : L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété [`background-position`](/fr/docs/Web/CSS/background-position) est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où `space` est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée. + - `round` + - : L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place. Ainsi, une image avec une largeur originale de 260px, répétée trois fois, pourra être étirée pour que chaque exemplaire mesure 300 pixels de large, lorsqu'une autre image sera ajoutée, elles seront compressées sur 225 pixels. + - `no-repeat` + - : Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété [`background-position`](/fr/docs/Web/CSS/background-position). + +## Définition formelle + +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} ## Exemples +### HTML + +```html +<ol> + <li>no-repeat + <div class="un"></div> + </li> + <li>repeat + <div class="deux"></div> + </li> + <li>repeat-x + <div class="trois"></div> + </li> + <li>repeat-y + <div class="quatre"></div> + </li> + <li>space + <div class="cinq"></div> + </li> + <li>round + <div class="six"></div> + </li> + <li>repeat-x, repeat-y (plusieurs images) + <div class="sept"></div> + </li> +</ol> +``` + ### CSS ```css @@ -144,91 +137,55 @@ li { margin-bottom: 12px; } div { - background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); - width: 160px; - height: 70px; + background-image: url(starsolid.gif); + width: 160px; + height: 70px; } -/* background repeat CSS */ -.one { - background-repeat: no-repeat; +/* background-repeat CSS */ +.un { + background-repeat: no-repeat; } -.two { - background-repeat: repeat; +.deux { + background-repeat: repeat; } -.three { - background-repeat: repeat-x; +.trois { + background-repeat: repeat-x; } -.four { - background-repeat: repeat-y; +.quatre { + background-repeat: repeat-y; } - -.five { +.cinq { background-repeat: space; } - .six { background-repeat: round; } /* Plusieurs images */ -.seven { - background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), - url(https://developer.mozilla.org/static/img/favicon32.png); - background-repeat: repeat-x, - repeat-y; - height: 144px; +.sept { + background-image: url(starsolid.gif), + url(favicon.png); + background-repeat: repeat-x, + repeat-y; + height: 144px; } ``` -### HTML - -```html -<ol> - <li>no-repeat - <div class="one"></div> - </li> - <li>repeat - <div class="two"></div> - </li> - <li>repeat-x - <div class="three"></div> - </li> - <li>repeat-y - <div class="four"></div> - </li> - <li>space - <div class="five"></div> - </li> - <li>round - <div class="six"></div> - </li> - <li>repeat-x, repeat-y (plusieurs images) - <div class="seven"></div> - </li> -</ol> -``` - ### Résultat Dans cet exemple, chaque élément de la liste illustre une valeur différente de `background-repeat`. -{{EmbedLiveSample('Exemples', 240, 560)}} +{{EmbedLiveSample('', 240, 560)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}} | {{Spec2('CSS3 Backgrounds')}} | Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés `space` et `round` sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}} | {{Spec2('CSS2.1')}} | Aucune modification significative. | -| {{SpecName('CSS1', '#background-repeat', 'background-repeat')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-repeat")}} +{{Compat}} ## Voir aussi -- [Utiliser plusieurs arrières-plans en CSS](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) +- [Utiliser plusieurs arrière-plans en CSS](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/fr/web/css/background-size/index.md b/files/fr/web/css/background-size/index.md index 71cebb4b98..160c39c44f 100644 --- a/files/fr/web/css/background-size/index.md +++ b/files/fr/web/css/background-size/index.md @@ -1,19 +1,15 @@ --- title: background-size slug: Web/CSS/background-size -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/background-size --- {{CSSRef}} -La propriété CSS **`background-size`** définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions. +La propriété [CSS](/fr/docs/Web/CSS) **`background-size`** définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions. {{EmbedInteractiveExample("pages/css/background-size.html")}} -> **Note :** L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente. +> **Note :** L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété [`background-color`](/fr/docs/Web/CSS/background-color). De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente. ## Syntaxe @@ -24,7 +20,7 @@ background-size: contain; /* Une seule valeur */ /* La valeur désigne la largeur de l'image. */ -/* La hauteur vaut 'auto'. */ +/* La hauteur vaut 'auto' */ background-size: 50%; background-size: 3.2em; background-size: 12px; @@ -46,192 +42,137 @@ background-size: 6px, auto, contain; /* Valeurs globales */ background-size: inherit; background-size: initial; +background-size: revert; background-size: unset; ``` -La propriété `background-size` peut être définie de différentes façons : +La propriété `background-size` peut être définie de différentes façons : -- Avec l'un des mots-clés [`contain`](#contain) ou [`cover`](#cover). +- Avec l'un des mots-clés [`contain`](#contain) ou [`cover`](#cover) - Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors [`auto`](#auto) par défaut) -- Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) ou encore [`auto`](#auto). +- Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type [`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage (type [`<percentage>`](/fr/docs/Web/CSS/percentage)) ou encore [`auto`](#auto). -Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}). +Lorsqu'on souhaite paramétrer la taille de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de [`background-image`](/fr/docs/Web/CSS/background-image)). ### Valeurs - `contain` - - : Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée. + - : Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vides sont remplies avec la couleur d'arrière-plan (définie grâce à [`background-color`](/fr/docs/Web/CSS/background-color)). Par défaut, l'image est centrée sauf si [`background-position`](/fr/docs/Web/CSS/background-position) a été modifiée. - `cover` - - : Un mot-clé dont le comportement est opposé à celui de `contain`. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan). + - : Un mot-clé dont le comportement est opposé à celui de `contain`. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y a aucun espace libre sur lequel on verrait la couleur d'arrière-plan). - `auto` - : Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées. - `<length>` - - : Une valeur de type {{cssxref("<length>")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées. + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées. - `<percentage>` - - : Une valeur de type {{cssxref("<percentage>")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (_padding_) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut `fixed`, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées. + - : Une valeur de type [`<percentage>`](/fr/docs/Web/CSS/percentage) qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via [`background-origin`](/fr/docs/Web/CSS/background-origin). Par défaut, cette zone correspond à la boîte de contenu et de remplissage (<i lang="en">padding</i>) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) vaut `fixed`, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées. ### Dimensions intrinsèques et proportions -Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles : +Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles : - Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques. -- Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions. -- Un dégradé CSS (cf. {{cssxref("<gradient>")}}) ne possède ni dimension ni proportion intrinsèque. -- Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur. +- Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèques. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions. +- Un dégradé CSS (cf. [`<gradient>`](/fr/docs/Web/CSS/gradient)) ne possède ni dimension ni proportion intrinsèque. +- Les images d'arrière-plan créées avec la fonction [`element()`](/fr/docs/Web/CSS/element()) utiliseront les dimensions et proportions intrinsèques de l'élément générateur. -> **Note :** Le comportement associé aux dégradés (`<gradient>`) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan. +> **Note :** Pour Gecko, les images d'arrière-plan créées avec la fonction [`element()`](/fr/docs/Web/CSS/element()) sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard. -> **Note :** Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard. +Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante : -Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante : - -- Si les deux composants de `background-size` sont définis et qu'aucun ne vaut `auto` : L'image utilise la taille définie. -- Si `background-size` vaut `contain` ou `cover` : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan. -- Si `background-size` vaut `auto` ou `auto auto` : +- **Si les deux composants de `background-size` sont définis et qu'aucun ne vaut `auto` :** L'image utilise la taille définie. +- **Si `background-size` vaut `contain` ou `cover` :** L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques ; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan. +- **Si `background-size` vaut `auto` ou `auto auto` :** - Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée. - Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan. - - Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur `contain` avait été utilisée. + - Si elle n'a aucune dimension mais possède une proportion, elle sera affichée comme si la valeur `contain` avait été utilisée. - Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion. - Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan. - > **Note :** Les images SVG peuvent contenir un attribut [`preserveAspectRatio`](/fr/docs/Web/SVG/Attribute/preserveAspectRatio) pour lequel la valeur par défaut est équivalente à `contain`. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour `background-size` permet d'ignorer `preserveAspectRatio`. + > **Note :** Les images SVG peuvent contenir un attribut [`preserveAspectRatio`](/fr/docs/Web/SVG/Attribute/preserveAspectRatio) pour lequel la valeur par défaut est équivalente à `contain`. Une valeur explicite pour `background-size` permet d'ignorer `preserveAspectRatio`. -- Si `background-size` possède une composante `auto` et que l'autre composante est différente de `auto` : +- **Si `background-size` possède une composante `auto` et que l'autre composante est différente de `auto` :** - Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion. - Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe. -> **Note :** Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant. - -### Syntaxe formelle - -{{csssyntax}} +> **Note :** Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateurs. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant. -## Exemples +### Utiliser les dégradés -### `cover` +Si vous utilisez un dégradé (`<gradient>`) comme arrière-plan et indiquez la propriété `background-size` correspondante, il vaut mieux ne pas utiliser une taille qui utilise un seul composant `auto` ou qui est définie avec une seule valeur de largeur (par exemple, `background-size: 50%`). -#### CSS +L'affichage des dégradés peut différer entre les navigateurs dont certains n'implémentent pas le rendu [conformément à la spécification CSS de `background-size`](https://www.w3.org/TR/css3-background/#the-background-size) et [à la spécification pour les dégradés](https://dev.w3.org/csswg/css3-images/#gradients). ```css -div { - height: 300px; - width: 200px; - background-color: palegreen; - background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg); - background-repeat: no-repeat; -} +.exemple-degrade { + width: 50px; + height: 100px; + background-image: linear-gradient(blue, red); + + /* Utilisation risquée */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; -.exemple_cover { - background-size: cover; + /* Peut être utilisé sans problème */ + background-size: 25px 50px; + background-size: 50% 50%; } ``` -#### HTML - -```html -<div class="exemple_cover"></div> -``` +## Définition formelle -#### Résultat +{{cssinfo}} -{{EmbedLiveSample("cover","200","300")}} +## Syntaxe formelle -### `contain` +{{csssyntax}} -#### CSS +## Exemples -```css -div { - height: 300px; - width: 200px; - background-color: palegreen; - background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg); - background-repeat: no-repeat; -} +### Réaliser un pavage -.exemple_cover { - background-size: contain; -} -``` +Prenons une image d'une taille qui ne correspond pas forcément à notre document cible. Ici, on a une image de 189x189 pixels et on souhaite réaliser un pavage avec quatre exemplaires de l'image dans un élément qui mesure 300x300 pixels. Pour cela, on fixe la valeur de `background-size` à 150 pixels. #### HTML ```html -<div class="exemple_cover"></div> +<div class="tiledBackground"> +</div> ``` -#### Résultat - -{{EmbedLiveSample("contain","200","300")}} - -### `auto 50%` - #### CSS ```css -div { +.tiledBackground { + background-image: url(logo-quantum.png); + background-size: 150px; + width: 300px; height: 300px; - width: 200px; - background-color: palegreen; - background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg); - background-repeat: no-repeat; + border: 2px solid; + color: pink; } - -.exemple_cover { - background-size: auto 50%; -} -``` - -#### HTML - -```html -<div class="exemple_cover"></div> ``` #### Résultat -{{EmbedLiveSample("auto_50","200","300")}} +{{EmbedLiveSample("", 340, 340)}} -## Notes - -Si on utilise un dégradé (`<gradient>`) comme arrière-plan et qu'on définit une valeur associée pour la propriété `background-size`, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant `auto` ou qu'une seule largeur (par exemple `background-size: 50%`). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la [spécification CSS3 pour `background-size`](https://www.w3.org/TR/css3-background/#the-background-size) et [la spécification CSS3 pour les images qui sont des dégradés](https://dev.w3.org/csswg/css3-images/#gradients)). - -```css -.gradient-exemple { - width: 50px; - height: 100px; - background-image: linear-gradient(blue, red); - - /* Méthode risquée */ - background-size: 25px; - background-size: 50%; - background-size: auto 50px; - background-size: auto 50%; - - /* Sans risque */ - background-size: 25px 50px; - background-size: 50% 50%; -} -``` - -On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec `auto` lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan. +Voir [Redimensionner des images d'arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) pour plus d'exemples. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-size")}} +{{Compat}} ## Voir aussi - [Redimensionner les images d'arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) - [Redimensionner les arrière-plans SVG](/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds) -- {{cssxref("object-fit")}} +- [`object-fit`](/fr/docs/Web/CSS/object-fit) diff --git a/files/fr/web/css/background/index.md b/files/fr/web/css/background/index.md index a5ab39b7e0..6a4eea7ed0 100644 --- a/files/fr/web/css/background/index.md +++ b/files/fr/web/css/background/index.md @@ -1,23 +1,31 @@ --- title: background slug: Web/CSS/background -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background translation_of: Web/CSS/background --- -{{CSSRef}} +{{CSSRef("CSS Background")}} -La propriété CSS **`background`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.). +La propriété [CSS](/fr/docs/Web/CSS) **`background`** est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.). {{EmbedInteractiveExample("pages/css/background.html")}} -Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}. +## Propriétés détaillées correspondantes + +Cette propriété permet de définir une ou plusieurs valeurs pour : + +- [`background-attachment`](/fr/docs/Web/CSS/background-attachment) +- [`background-clip`](/fr/docs/Web/CSS/background-clip) +- [`background-color`](/fr/docs/Web/CSS/background-color) +- [`background-image`](/fr/docs/Web/CSS/background-image) +- [`background-origin`](/fr/docs/Web/CSS/background-origin) +- [`background-position`](/fr/docs/Web/CSS/background-position) +- [`background-repeat`](/fr/docs/Web/CSS/background-repeat) +- [`background-size`](/fr/docs/Web/CSS/background-size) Lorsqu'on utilise la propriété raccourcie `background`, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales. -> **Note :** La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément. +> **Note :** La propriété [`background-color`](/fr/docs/Web/CSS/background-color) ne peut être définie que sur le dernier arrière-plan, car il n'y a qu'une seule couleur d'arrière-plan pour un élément. ## Syntaxe @@ -34,40 +42,57 @@ background: border-box red; /* Ici on utilise une seule image, centrée */ /* et remise à l'échelle */ background: no-repeat center/80% url("../img/image.png"); + +/* Valeurs globales */ +background: inherit; +background: initial; +background: revert; +background: unset; ``` -La propriété `background` permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec : +La propriété `background` permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec : -- Zéro ou une occurence d'une valeur : +- Zéro ou une occurrence d'une valeur : - - [`<attachment>`](#<attachment>) - - [`<bg-image>`](#<bg-image>) - - [`<position>`](#<position>) - - [`<bg-size>`](#<bg-size>) - - [`<repeat-style>`](#<repeat-style>) + - `<attachment>` + - `<bg-image>` + - `<position>` + - `<bg-size>` + - `<repeat-style>` -- Une valeur [`<bg-size>`](#<bg-size>) qui peut uniquement être utilisée directement après une valeur [`<position>`](#<position>) suivie d'une barre oblique (par exemple "`center/80%`") -- Une valeur [`<box>`](#<box>) présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}. -- Une valeur [`<background-color>`](#<background-color>) qui peut uniquement être incluse pour la dernière couche qui est définie. +- Une valeur `<bg-size>` qui peut uniquement être utilisée directement après une valeur `<position>` suivie d'une barre oblique (par exemple `center/80%`) +- Une valeur `<box>` présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir [`background-origin`](/fr/docs/Web/CSS/background-origin) et [`background-clip`](/fr/docs/Web/CSS/background-clip). Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir [`background-origin`](/fr/docs/Web/CSS/background-origin) et la seconde définira [`background-clip`](/fr/docs/Web/CSS/background-clip). +- Une valeur `<background-color>` qui peut uniquement être incluse pour la dernière couche qui est définie. ### Valeurs - `<attachment>` - - : Voir {{cssxref("background-attachment")}} + - : Voir [`background-attachment`](/fr/docs/Web/CSS/background-attachment) - `<box>` - - : Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}} + - : Voir [`background-clip`](/fr/docs/Web/CSS/background-clip) et [`background-origin`](/fr/docs/Web/CSS/background-origin) - `<background-color>` - - : Voir {{cssxref("background-color")}} + - : Voir [`background-color`](/fr/docs/Web/CSS/background-color) - `<bg-image>` - - : Voir {{Cssxref("background-image")}} + - : Voir [`background-image`](/fr/docs/Web/CSS/background-image) - `<position>` - - : Voir {{cssxref("background-position")}} + - : Voir [`background-position`](/fr/docs/Web/CSS/background-position) - `<repeat-style>` - - : Voir {{cssxref("background-repeat")}} + - : Voir [`background-repeat`](/fr/docs/Web/CSS/background-repeat) - `<bg-size>` - - : Voir {{cssxref("background-size")}}. + - : Voir [`background-size`](/fr/docs/Web/CSS/background-size). + +## Accessibilité + +Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisatrices et utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document. + +- [Comprendre la règle 1.1 du WCAG](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content) +- [Comprendre les critères pour 1.1.1, comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -92,37 +117,24 @@ La propriété `background` permet de définir une ou plusieurs couches d'arriè } .banniere { - background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; + background: url("starsolid.gif") #99f repeat-y fixed; } ``` ### Résultat -{{EmbedLiveSample("Exemples")}} - -## Accessibilité - -Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document. - -- [Comprendre la règle 1.1 du WCAG](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [Comprendre les critères pour 1.1.1, comprendre WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +{{EmbedLiveSample("")}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background', 'background')}} | {{Spec2('CSS3 Backgrounds')}} | La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}} | {{Spec2('CSS2.1')}} | Pas de modification significative. | -| {{SpecName('CSS1', '#background', 'background')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background")}} +{{Compat}} ## Voir aussi -- {{cssxref("box-decoration-break")}} -- [Les gradients](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- [`box-decoration-break`](/fr/docs/Web/CSS/box-decoration-break) +- [Les dégradés](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) - [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/fr/web/css/border-image-outset/index.md b/files/fr/web/css/border-image-outset/index.md index bc6809bec1..b693ce981b 100644 --- a/files/fr/web/css/border-image-outset/index.md +++ b/files/fr/web/css/border-image-outset/index.md @@ -1,99 +1,102 @@ --- title: border-image-outset slug: Web/CSS/border-image-outset -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.border-image-outset translation_of: Web/CSS/border-image-outset --- {{CSSRef}} La propriété **`border-image-outset`** définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure. -{{EmbedInteractiveExample("pages/css/border-image-outset.html")}} +Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'évènements de pointeur par rapport à l'élément concerné. -Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné. +{{EmbedInteractiveExample("pages/css/border-image-outset.html")}} ## Syntaxe ```css -/* border-image-outset : */ -/* Une même valeur pour les quatre côtés */ +/* Longueur */ +/* Type <length> */ +border-image-outset: 1rem; + +/* Valeur numérique */ +/* Type <number> */ border-image-outset: 1.5; -/* border-image-outset : */ -/* Première valeur : côtés verticaux */ -/* Seconde valeur : côtés horizontaux */ +/* côtés verticaux | horizontaux */ border-image-outset: 1 1.2; -/* border-image-outset : */ -/* Première valeur : côté haut */ -/* Deuxième valeur : côtés horizontaux */ -/* Troisième valeur : côté bas */ +/* haut | côtés horizontaux | bas */ border-image-outset: 30px 2 45px; -/* border-image-outset : */ -/* Première valeur : côté haut */ -/* Deuxième valeur : côté droit */ -/* Troisième valeur : côté bas */ -/* Quatrième valeur : côté gauche */ +/* haut | droit | bas | gauche */ border-image-outset: 7px 12px 14px 5px; /* Valeurs globales */ border-image-outset: inherit; border-image-outset: initial; +border-image-outset: revert; border-image-outset: unset; ``` +La propriété `border-image-outset` peut être définie à l'aide d'une, deux, trois ou quatre valeurs. Chaque valeur est une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un nombre ([`<number>`](/fr/docs/Web/CSS/number)). Les valeurs négatives sont invalides (la déclaration est alors ignorée). + +1. Si **une** valeur est indiquée, elle s'applique **aux quatre côtés**. +2. Si **deux** valeurs sont indiquées, la première s'applique aux côtés **haut et bas** et la seconde s'applique aux côtés **gauche et droit**. +3. Si **trois** valeurs sont indiquées, la première s'applique au côté **haut**, la deuxième aux côtés **gauche et droit**, et la troisième au côté **bas**. +4. Si **quatre** valeurs sont indiquées, elles s'appliquent dans le sens des aiguilles d'une montre : la première au côté **haut**, la seconde au côté **droit**, la troisième au côté **bas**, et la quatrième au côté **gauche**. + ### Valeurs - `<length>` - - : Une valeur de longueur (cf. type {{cssxref("<length>")}}) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées. + - : Une valeur de longueur (cf. type [`<length>`](/fr/docs/Web/CSS/length)) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées. - `<number>` - - : Une valeur numérique (cf. type {{cssxref("<number>")}}) qui sera multipliée par la valeur calculée de {{cssxref("border-width")}} afin de déterminer la longueur de l'espace duquel dépasser. + - : Une valeur numérique (cf. type [`<number>`](/fr/docs/Web/CSS/number)) qui sera multipliée par la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) afin de déterminer la longueur de l'espace duquel dépasser. -### Syntaxe formelle +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Décaler la bordure d'une image -```css -p { - border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png"); - border-image-slice: 30; - border-image-width: 20px; - border-image-repeat: round; - border-image-outset: 10px; - padding: 40px; -} +#### HTML + +```html +<div id="outset">Un élément avec une bordure décalée !</div> ``` -### HTML +#### CSS -```html -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - no sea takimata sanctus est Lorem ipsum dolor sit amet. -</p> +```css +#outset { + width: 10rem; + background: #cef; + border: 1.4rem solid; + border-image: radial-gradient(#ff2, #55f) 40; + border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ + margin: 2.1rem; +} ``` -### Résultat +#### Résultat -{{EmbedLiveSample('Exemples', '480', '320')}} +{{EmbedLiveSample('', 'auto', '200')}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image-outset")}} +{{Compat}} + +## Voir aussi + +- [Les arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [Apprendre le CSS : les arrière-plans et les bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) diff --git a/files/fr/web/css/border-image-repeat/index.md b/files/fr/web/css/border-image-repeat/index.md index 5039e96034..7f213fa8d8 100644 --- a/files/fr/web/css/border-image-repeat/index.md +++ b/files/fr/web/css/border-image-repeat/index.md @@ -1,91 +1,108 @@ --- title: border-image-repeat slug: Web/CSS/border-image-repeat -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.border-image-repeat translation_of: Web/CSS/border-image-repeat --- {{CSSRef}} -La propriété **`border-image-repeat`** définit la façon dont les zones de l'image de bordure sont utilisée pour s'étendre sur chacun des côtés de la bordure. Cette propriété est multi-valuée : une valeur indiquera le comportement pour tous les côtés et deux valeurs indiqueront respectivement le comportement pour les côtés horizontaux et verticaux. +La propriété [CSS](/fr/docs/Web/CSS) **`border-image-repeat`** définit la façon dont les zones de l'image de bordure sont utilisées pour s'étendre sur chacun des côtés de la bordure. {{EmbedInteractiveExample("pages/css/border-image-repeat.html")}} ## Syntaxe ```css -/* border-image-repeat */ -/* Une valeur : s'applique à tous les côtés */ +/* Valeurs avec un mot-clé */ border-image-repeat: stretch; +border-image-repeat: repeat; +border-image-repeat: round; +border-image-repeat: space; -/* border-image-repeat -/* Première valeur : côtés horizontaux */ -/* Deuxième valeur : côtés verticaux */ +/* côtés horizontaux | verticaux */ border-image-repeat: round stretch; /* Valeurs globales */ border-image-repeat: inherit; border-image-repeat: initial; +border-image-repeat: revert; border-image-repeat: unset; ``` +La propriété `border-image-repeat` peut être définie à l'aide d'une ou deux valeurs parmi la liste qui suit. + +- Avec **une** valeur indiquée, celle-ci s'applique **aux quatre côtés**. +- Avec **deux** valeurs indiquées, la première s'applique aux côtés **haut et bas**, la seconde s'applique aux côtés **gauche et droite**. + ### Valeurs - `stretch` - : Un mot-clé qui indique que la zone de l'image doit être étirée pour remplir l'espace entre les deux bordures. - `repeat` - - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. + - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Les portions répétées peuvent être rognées si nécessaire. - `round` - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Si on ne peut pas remplir cet espace avec un nombre entier de motifs, ceux-ci seront étirés pour qu'il y ait une répétition entière et que l'espace soit parfaitement rempli. - `space` - - : Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera répartis entre ces motifs. + - : Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera réparti entre ces motifs. + +## Définition formelle + +{{CSSInfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Répéter l'image de bordure + +#### CSS ```css -p { - border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png"); - border-image-slice: 30; - border-image-width: 20px; - border-image-repeat: round; - padding: 40px; +#bordered { + width: 12rem; + margin-bottom: 1rem; + padding: 1rem; + border: 40px solid; + border-image: url("border.png") 27; + border-image-repeat: stretch; /* Peut être changé avec la liste déroulante */ } ``` -### HTML +```html hidden +<div id="bordered">Vous pouvez essayer différentes valeurs !</div> + +<select id="repetition"> + <option value="stretch">stretch</option> + <option value="repeat">repeat</option> + <option value="round">round</option> + <option value="space">space</option> + <option value="stretch repeat">stretch repeat</option> + <option value="space round">space round</option> +</select> +``` -```html -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - no sea takimata sanctus est Lorem ipsum dolor sit amet. -</p> +```js hidden +var repetition = document.getElementById("repetition"); +repetition.addEventListener("change", function (evt) { + document.getElementById("bordered").style.borderImageRepeat = evt.target.value; +}); ``` ### Résultat -{{EmbedLiveSample('Exemples', '480', '320')}} +{{EmbedLiveSample('', '480', '250')}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image-repeat")}} +{{Compat}} ## Voir aussi -- [L'article de CSS Tricks sur `border-image` (en anglais)](https://css-tricks.com/almanac/properties/b/border-image/) +- [Les arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [Apprendre le CSS : les arrière-plans et les bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) diff --git a/files/fr/web/css/border-image-slice/index.md b/files/fr/web/css/border-image-slice/index.md index 8f31b33333..b03fd90a1a 100644 --- a/files/fr/web/css/border-image-slice/index.md +++ b/files/fr/web/css/border-image-slice/index.md @@ -1,114 +1,177 @@ --- title: border-image-slice slug: Web/CSS/border-image-slice -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/border-image-slice +browser-compat: css.properties.border-image-slice --- {{CSSRef}} -La propriété **`border-image-slice`** permet de découper l'image fournie via la propriété {{cssxref("border-image-source")}} en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image. +La propriété **`border-image-slice`** permet de découper l'image fournie via la propriété [`border-image-source`](/fr/docs/Web/CSS/border-image-source) en régions. Ces régions sont alors utilisées pour composer [l'image de bordure](/fr/docs/Web/CSS/border-image) d'un élément. {{EmbedInteractiveExample("pages/css/border-image-slice.html")}} - +Ce découpage crée neuf régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image. -Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe). + -La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé `fill`. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs). +Le diagramme ci-avant illustre l'emplacement de chaque région. -Les propriétés {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} définissent la façon dont ces images seront utilisées. +- Les zones 1 à 4 sont les coins. Chacun est utilisé une fois pour former les coins de l'image de bordure finale. +- Les zones 5 à 8 sont les bords. Ils sont [répétés, redimensionnés ou modifiés autrement](/fr/docs/Web/CSS/border-image-repeat) dans la bordure finale afin que celle-ci corresponde aux dimensions de l'élément. +- La zone 9 est la zone centrale et n'est pas utilisée par défaut. Elle est utilisée comme image d'arrière-plan si le mot-clé `fill` est utilisé. -La propriété raccourcie {{cssxref("border-image")}} peut éventuellement réinitialiser cette propriété avec sa valeur par défaut. +Les propriétés [`border-image-repeat`](/fr/docs/Web/CSS/border-image-repeat), [`border-image-width`](/fr/docs/Web/CSS/border-image-width), [`border-image-outset`](/fr/docs/Web/CSS/border-image-outset) définissent la façon dont ces images seront utilisées. ## Syntaxe ```css -/* border-image-slice : */ /* Une valeur qui s'applique aux quatre côtés */ border-image-slice: 30%; -/* border-image-slice : */ -/* Première valeur : côtés verticaux */ -/* Deuxième valeur : côtés horizontaux */ +/* côtés verticaux | horizontaux */ border-image-slice: 10% 30%; -/* border-image-slice : */ -/* Première valeur : côté haut */ -/* Deuxième valeur : côtés horizontaux */ -/* Troisième valeur : côté bas */ +/* haut | côtés horizontaux | bas */ border-image-slice: 30 30% 45; -/* border-image-slice : */ -/* Première valeur : côté haut */ -/* Deuxième valeur : côté droit */ -/* Troisième valeur : côté bas */ -/* Quatrième valeur : côté gauche */ +/* haut | droit | bas | gauche */ border-image-slice: 7 12 14 5; -/* border-image-slice: … fill */ -/* Le mot-clé fill peut être intercalé */ -/* à n'importe quel endroit */ +/* Le mot-clé `fill` */ border-image-slice: 10% fill 7 12; /* Valeurs globales */ border-image-slice: inherit; border-image-slice: initial; +border-image-slice: revert; border-image-slice: unset; ``` +La propriété `border-image-slice` peut être définie avec une à quatre valeurs `<number-percentage>` qui représentent les emplacements de chaque découpe sur l'image. Les valeurs négatives sont valides et les valeurs supérieures aux dimensions de l'image sont ramenées à `100%`. + +- Lorsqu'**une** position est indiquée, les quatre découpages sont effectués à la même distance de chaque bord. +- Lorsque **deux** positions sont indiquées, la première valeur indique la distance de découpage pour les côtés **haut et bas**, la seconde valeur indique la distance de découpage pour les côtés **gauche et droit**. +- Lorsque **trois** positions sont indiquées, la première valeur indique la distance pour le découpage par rapport au bord **haut**, la seconde indique la distance pour le découpage depuis les bords **gauche et droit**, la troisième valeur correspond à la distance de découpage pour le côté **bas**. +- Lorsque **quatre** positions sont indiquées, elles indiquent respectivement la distance de découpage pour les bords **haut**, **droit**, **bas**, et **gauche** (soit le sens des aiguilles d'une montre). + +La valeur optionnelle `fill` peut être utilisée et placée à n'importe quel endroit de la déclaration. + ### Valeurs -- `slice` - - : Une valeur de type {{cssxref("<number>")}} ou {{cssxref("<percentage>")}} qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type {{cssxref("<length>")}} n'est pas autorisée et est donc invalide. Une valeur de type {{cssxref("<number>")}} correspondra à des _pixels_ pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type {{cssxref("<percentage>")}} sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à `100%`. Il est préférable d'utiliser des pourcentages pour les images vectorielles. +- [`<number>`](/fr/docs/Web/CSS/number) + - : Représente un décalage par rapport au bord, exprimé en _pixels_ pour les images matricielles et en _coordonnées_ pour les images vectorielles. Pour les images vectorielles, le nombre est relatif à la taille de l'élément plutôt qu'à la taille de l'image source. Aussi, dans ce cas de figure, on utilisera plutôt les pourcentages. +- [`<percentage>`](/fr/docs/Web/CSS/percentage) + - : Représente un décalage par rapport au bord comme pourcentage par rapport à la taille de l'image source : c'est la largeur de l'image qui sert de référence pour les décalages horizontaux et la hauteur de l'image qui sert de référence pour les décalages verticaux. - `fill` - - : Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche. + - : La région au centre de l'image est conservée et celle-ci est affichée comme image d'arrière-plan mais empilée *sous* l'arrière-plan fourni par [`background`](/fr/docs/Web/CSS/background). La largeur et la hauteur sont dimensionnées afin de correspondre aux tailles des régions haute et gauche. + +## Définition formelle + +{{CSSInfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Bordure avec largeur et portions ajustables + +Dans l'exemple suivant, on utilise un simple élément `<div>` avec une image de bordure sur lui. L'image source utilisée pour les bordures est la suivante : + + + +Les losanges mesurent 30px de large. Aussi, en utilisant 30 pixels comme valeur pour [`border-width`](/fr/docs/Web/CSS/border-width) et `border-image-slice`, on aura des losanges complets et nets : ```css -p { - border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png"); - border-image-slice: 30; - border-image-width: 20px; - border-image-repeat: round; - padding: 40px; -} +border-width: 30px; +border-image-slice: 30; ``` -### HTML +Ce sont les valeurs par défaut que nous avons utilisées dans cet exemple. Nous avons également fourni des curseurs qui vous permettent d'ajuster les valeurs des deux propriétés dynamiquement et d'observer l'effet : + +`border-image-slice` change la taille de la portion d'image échantillonnée pour chaque bordure et coin de bordure (et la zone du contenu si le mot-clé `fill` est utilisé). En utilisant des valeurs autour de 30, on voit que la bordure devient plutôt irrégulière. + +`border-width` change la largeur de la bordure. La taille de l'image échantillonnée est mise à l'échelle pour s'inscrire dans la bordure. Ainsi, si la largeur est supérieure à la taille de la portion utilisée, l'image pourra avoir l'air pixelisée (à moins d'avoir utilisé une image SVG). + +#### HTML ```html -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - no sea takimata sanctus est Lorem ipsum dolor sit amet. -</p> +<div class="wrapper"> + <div></div> +</div> + +<ul> + <li> + <label for="width">Déplacez pour ajuster <code>border-width</code></label> + <input type="range" min="10" max="45" id="width"> + <output id="width-output">30px</output> + </li> + <li> + <label for="slice">Déplacez pour ajuster <code>border-image-slice</code></label> + <input type="range" min="10" max="45" id="slice"> + <output id="slice-output">30</output> + </li> +</ul> ``` -### Résultat +#### CSS -{{EmbedLiveSample('Exemples', '480', '320')}} +```css +.wrapper { + width: 400px; + height: 300px; +} -## Spécifications +div > div { + width: 300px; + height: 200px; + border-width: 30px; + border-style: solid; + border-image: url(border-diamonds.png); + border-image-slice: 30; + border-image-repeat: round; +} -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | +li { + display: flex; + place-content: center; +} +``` + +#### JavaScript + +```js +const widthSlider = document.getElementById('width'); +const sliceSlider = document.getElementById('slice'); +const widthOutput = document.getElementById('width-output'); +const sliceOutput = document.getElementById('slice-output'); +const divElem = document.querySelector('div > div'); + +widthSlider.addEventListener('input', () => { + const newValue = widthSlider.value + 'px'; + divElem.style.borderWidth = newValue; + widthOutput.textContent = newValue; +}) + +sliceSlider.addEventListener('input', () => { + const newValue = sliceSlider.value; + divElem.style.borderImageSlice = newValue; + sliceOutput.textContent = newValue; +}) +``` + +#### Résultat + +{{EmbedLiveSample('', '100%', 400)}} + +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image-slice")}} +{{Compat}} ## Voir aussi diff --git a/files/fr/web/css/border-image-width/index.md b/files/fr/web/css/border-image-width/index.md index 3854f22b95..8a0a4689bf 100644 --- a/files/fr/web/css/border-image-width/index.md +++ b/files/fr/web/css/border-image-width/index.md @@ -1,19 +1,16 @@ --- title: border-image-width slug: Web/CSS/border-image-width -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/border-image-width +browser-compat: css.properties.border-image-width --- {{CSSRef}} -La propriété **`border-image-width`** définit la largeur de la bordure imagée. +La propriété [CSS](/fr/docs/Web/CSS) **`border-image-width`** définit la largeur de [l'image de bordure](/fr/docs/Web/CSS/border-image) d'un élément. {{EmbedInteractiveExample("pages/css/border-image-width.html")}} -Si `border-image-width` est supérieur à {{cssxref("border-width")}}, la bordure imagée s'étendra au-delà du _padding_ voire du contenu. +Si la valeur de cette propriété est supérieure à [`border-width`](/fr/docs/Web/CSS/border-width), la bordure imagée s'étendra au-delà du remplissage (<i lang="en">padding</i>) voire du contenu. ## Syntaxe @@ -33,7 +30,7 @@ border-image-width: 25%; /* Type <number> */ border-image-width: 3; -/* épaisseur verticale | horizontale */ +/* côtés verticaux | horizontaux */ border-image-width: 2em 3em; /* haut | côtés horizontaux | bas */ @@ -45,66 +42,77 @@ border-image-width: 5% 2em 10% auto; /* Valeurs globales */ border-image-width: inherit; border-image-width: initial; +border-image-width: revert; border-image-width: unset; ``` La propriété `border-image-width` est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit. -- Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés -- Lorsque deux valeurs sont utilisées, la premières s'applique aux côtés haut et bas et la seconde aux côté gauche et droit -- Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas. -- Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire). +- Lorsqu'**une** valeur est utilisée, c'est cette valeur qui est utilisée pour **les quatre côtés** +- Lorsque **deux** valeurs sont utilisées, la première s'applique aux côtés haut et bas et la seconde aux côtés **gauche et droit** +- Lorsque **trois** valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés **gauche et droit** et la troisième au côté bas. +- Lorsque **quatre** valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté **haut**, **droit**, **bas** et **gauche** (dans le sens horaire). ### Valeurs - `<length-percentage>` - - : Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. `px`) ou relative (ex. `rem`). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides`.` + - : Une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) représentant la largeur de la bordure. Cette longueur peut être absolue (ex. `px`) ou relative (ex. `rem`). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides. - `<number>` - - : Représente un multiple de [la valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de la propriété {{cssxref("border-width")}} de l'élément. Les valeurs négatives sont considérées invalides. + - : Représente un multiple de [la valeur calculée](/fr/docs/Web/CSS/computed_value) de la propriété [`border-width`](/fr/docs/Web/CSS/border-width) de l'élément. Les valeurs négatives sont considérées invalides. - `auto` - - : L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété {{cssxref("border-image-slice")}} correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de `border-width` qui sera utilisée à la place. -- `inherit` - - : Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent. + - : L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice) correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de `border-width` qui sera utilisée à la place. -### Syntaxe formelle +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Réaliser un pavage avec une image de bordure + +Dans cet exemple on crée une image de bordure en utilisant le fichier ".png" suivant, qui mesure 90 pixels par 90 pixels : + + + +Chaque cercle sur l'image a un diamètre de 30 pixels. + +#### HTML + +```html +<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. + At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, + no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> +``` + +#### CSS ```css p { border: 20px solid; - border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round; + border-image: url("border.png") 30 round; border-image-width: 16px; padding: 40px; } ``` -### HTML - -```html -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - no sea takimata sanctus est Lorem ipsum dolor sit amet. -</p> -``` +#### Résultat -### Résultat - -{{EmbedLiveSample('Exemples', '480', '320')}} +{{EmbedLiveSample('', 200, 280)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image-width")}} +{{Compat}} + +## Voir aussi + +- [Arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [Apprendre le CSS : arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) diff --git a/files/fr/web/css/border-image/index.md b/files/fr/web/css/border-image/index.md index b9a0348850..b4a7ba63ad 100644 --- a/files/fr/web/css/border-image/index.md +++ b/files/fr/web/css/border-image/index.md @@ -5,13 +5,21 @@ translation_of: Web/CSS/border-image --- {{CSSRef}} -La propriété **`border-image`** dessine une image sur la bordure d'un élément. C'est [une propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir {{cssxref("border-image-source")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-repeat")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-outset")}}. +La propriété **`border-image`** dessine une image sur la bordure d'un élément. {{EmbedInteractiveExample("pages/css/border-image.html")}} -Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété `border-image` sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, `border-style` **doit** être présente si `border-image` est utilisée. +> **Note :** Il est préférable d'indiquer un style de bordure distinct avec [`border-style`](/fr/docs/Web/CSS/border-style) dans le cas où l'image ne chargerait pas. Bien que la spécification ne le nécessite pas, certains navigateurs n'affichent pas l'image de bordure si [`border-style`](/fr/docs/Web/CSS/border-style) vaut `none` ou si [`border-width`](/fr/docs/Web/CSS/border-width) vaut `0`. -> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de {{cssxref("border-image-source")}} vaut `none` (via `border-image-source` ou via la propriété raccourcie `border-image`), ce sera le style indiqué par {{cssxref("border-style")}} qui sera utilisé. +## Propriétés détaillées correspondantes + +C'est [une propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de définir : + +- [`border-image-outset`](/fr/docs/Web/CSS/border-image-outset) +- [`border-image-repeat`](/fr/docs/Web/CSS/border-image-repeat) +- [`border-image-source`](/fr/docs/Web/CSS/border-image-source) +- [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice) +- [`border-image-width`](/fr/docs/Web/CSS/border-image-width) ## Syntaxe @@ -27,26 +35,43 @@ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; + +/* Valeurs globales */ +border-image: inherit; +border-image: initial; +border-image: revert; +border-image: unset; ``` La propriété `border-image` peut être définie avec une à cinq valeurs parmi celles définies ci-après. -> **Note :** Si la [valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de {{cssxref("border-image-source")}} vaut `none` ou si l'image ne peut pas être affichée, c'est le {{cssxref("border-style")}} correspondant qui sera affiché. +> **Note :** Si la [valeur calculée](/fr/docs/Web/CSS/computed_value) de [`border-image-source`](/fr/docs/Web/CSS/border-image-source) vaut `none` ou si l'image ne peut pas être affichée, c'est le [`border-style`](/fr/docs/Web/CSS/border-style) correspondant qui sera affiché. ### Valeurs - `border-image-source` - - : L'image source. Voir {{cssxref("border-image-source")}}. + - : L'image source. Voir [`border-image-source`](/fr/docs/Web/CSS/border-image-source). - `border-image-slice` - - : La façon dont l'image est découpée en zones (jusqu'à 4). Voir {{cssxref("border-image-slice")}}. + - : La façon dont l'image est découpée en zones (jusqu'à 4). Voir [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice). - `border-image-width` - - : La largeur de la bordure avec l'image. Voir {{cssxref("border-image-width")}}. + - : La largeur de la bordure avec l'image. Voir [`border-image-width`](/fr/docs/Web/CSS/border-image-width). - `border-image-outset` - - : La distance entre la bordure et le bord de l'élément. Voir {{cssxref("border-image-outset")}}. + - : La distance entre la bordure et le bord de l'élément. Voir [`border-image-outset`](/fr/docs/Web/CSS/border-image-outset). - `border-image-repeat` - - : La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir {{cssxref("border-image-repeat")}}. + - : La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir [`border-image-repeat`](/fr/docs/Web/CSS/border-image-repeat). + +## Accessibilité + +Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document. + +- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Comprendre les critères pour 1.1.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -56,82 +81,67 @@ La propriété `border-image` peut être définie avec une à cinq valeurs parmi On découpe l'image et on la répète pour remplir la zone entre les bordures. +#### HTML + +```html +<div id="bitmap">L'image est étirée pour remplir l'espace.</div> +``` + #### CSS ```css #bitmap { border: 30px solid transparent; - padding: 20px; - border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30; + padding: 20px; + border-image: url("border.png") 30; } ``` -#### HTML - -```html -<div id="bitmap"> - L'image est étirée pour remplir l'espace. -</div> -``` - #### Résultat -{{EmbedLiveSample('Utiliser_une_image_matricielle_étirée')}} +{{EmbedLiveSample('')}} ### Utiliser un dégradé +#### HTML + +```html +<div id="gradient">L'image formée par le dégradé est étirée pour remplir la zone.</div> +``` + #### CSS ```css #gradient { - border: 30px solid; - border-image: linear-gradient(red, yellow) 10; - padding: 20px; + border: 30px solid; + border-image: linear-gradient(red, yellow) 10; + padding: 20px; } ``` -#### HTML - -```html -<div id="gradient"> - L'image formée par le gradient est étirée pour remplir la zone. -</div> -``` - #### Résultat -{{EmbedLiveSample('Utiliser_un_dégradé')}} - -## Accessibilité - -Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document. - -- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [_Understanding Success Criterion 1.1.1 - Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +{{EmbedLiveSample('')}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image")}} +{{Compat}} ## Voir aussi -- {{cssxref("border")}} -- {{cssxref("outline")}} -- {{cssxref("box-shadow")}} -- {{cssxref("background-image")}} -- {{cssxref("url()", "url()")}} -- Fonctions pour les dégradés - - - {{CSSxRef("conic-gradient")}} - - {{CSSxRef("linear-gradient")}} - - {{CSSxRef("repeating-linear-gradient")}} - - {{CSSxRef("radial-gradient")}} - - {{CSSxRef("repeating-radial-gradient")}} +- [`border`](/fr/docs/Web/CSS/border) +- [`outline`](/fr/docs/Web/CSS/outline) +- [`box-shadow`](/fr/docs/Web/CSS/box-shadow) +- [`background-image`](/fr/docs/Web/CSS/background-image) +- La fonction [`url()`](/fr/docs/Web/CSS/url()) +- Fonctions pour les dégradés : + + - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) + - [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient()) + - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) + - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) + - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) diff --git a/files/fr/web/css/clip-path/index.md b/files/fr/web/css/clip-path/index.md index 2ff8f69746..6f036cfd9b 100644 --- a/files/fr/web/css/clip-path/index.md +++ b/files/fr/web/css/clip-path/index.md @@ -1,21 +1,15 @@ --- title: clip-path slug: Web/CSS/clip-path -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/clip-path +browser-compat: css.properties.clip-path --- {{CSSRef}} -La propriété **`clip-path`** empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme [`circle()`](/fr/docs/Web/SVG/Element/circle). +La propriété **`clip-path`** empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. {{EmbedInteractiveExample("pages/css/clip-path.html")}} -> **Note :** La propriété `clip-path` remplace la propriété {{cssxref("clip")}} désormais dépréciée. - ## Syntaxe ```css @@ -27,18 +21,19 @@ clip-path: none; clip-path: url(resources.svg#c1); /* Valeurs de boîte */ +clip-path: border-box; +clip-path: content-box; clip-path: fill-box; -clip-path: stroke-box; -clip-path: view-box; clip-path: margin-box; -clip-path: border-box; clip-path: padding-box; -clip-path: content-box; +clip-path: stroke-box; +clip-path: view-box; -/* Valeurs géométriques */ +/* Valeurs géométriques <basic-shape> */ /* avec une notation fonctionnelle */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); +clip-path: ellipse(50px 60px at 0 10% 20%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); @@ -48,6 +43,7 @@ clip-path: padding-box circle(50px at 0 100px); /* Valeurs globales */ clip-path: inherit; clip-path: initial; +clip-path: revert; clip-path: unset; ``` @@ -55,35 +51,53 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé ### Valeurs -- `url()` - - : Une URL qui fait référence à un élément contenant le chemin de rognage. -- `inset()`, `circle()`, `ellipse()`, `polygon()` - - : Une fonction {{cssxref("<basic-shape>")}}. Une telle forme utilise la valeur `<geometry-box>` pour déterminer la taille et la position de la forme. Si aucune boîte de géométrie n'est indiquée, c'est la boîte de bordure (`border-box`) qui sera utilisée comme boîte de réference. +- `<clip-source>` + - : Une [`url()`](/fr/docs/Web/CSS/url()) qui référence un élément [SVG](/fr/docs/Web/SVG) [`<clipPath>`](/fr/docs/Web/SVG/Element/clipPath). + +- [`<basic-shape>`](/fr/docs/Web/CSS/basic-shape) + + - : Une forme dont la taille et la position sont définies par la valeur `<geometry-box>`. Si aucune valeur de géométrie n'est fournie, `border-box` sera utilisée comme boîte de référence. La forme peut être définie avec l'une de ces valeurs : + + - [`inset()`](/fr/docs/Web/CSS/basic-shape/inset()) + - : Définit un rectangle. + - [`circle()`](/fr/docs/Web/CSS/basic-shape/circle()) + - : Définit un cercle avec un rayon et une position. + - [`ellipse()`](/fr/docs/Web/CSS/basic-shape/ellipse()) + - : Définit une ellipse avec ses deux demi-rayons et une position. + - [`polygon()`](/fr/docs/Web/CSS/basic-shape/polygon()) + - : Définit un polygone en utilisant une règle de remplissage SVG et un ensemble d'arêtes. + - [`path()`](/fr/docs/Web/CSS/path()) + - : Définit une forme en utilisant une règle de remplissage SVG optionnelle et une définition de chemin SVG. + - `<geometry-box>` - - : Si cette valeur est combinée avec une valeur `<basic-shape>`, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec {{cssxref("border-radius")}}) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivante : + - : Si cette valeur est combinée avec une valeur `<basic-shape>`, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec [`border-radius`](/fr/docs/Web/CSS/border-radius)) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivantes : - - `fill-box` - - : La boîte englobant (_bounding box_) est utilisée comme boîte de référence. - - `stroke-box` - - : La boîte de contour de la boîte englobante est utilisée comme boîte de référence. - - `view-box` - - : La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut {{SVGAttr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par `viewBox` et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut `viewBox`. - `margin-box` - - : La boîte de marge est utilisée comme boîte de référence + - : La [boîte de marge](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box) est utilisée comme boîte de référence. - `border-box` - - : La boîte de bordure est utilisée comme boîte de référence + - : La [boîte de bordure](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#border-box) est utilisée comme boîte de référence. - `padding-box` - - : La boîte de remplissage (_padding_) est utilisée comme boîte de référence + - : La [boîte de remplissage (<i lang="en">padding</i>)](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box) est utilisée comme boîte de référence. - `content-box` - - : La boîte de contenu est utilisée comme boîte de référence. + - : La [boîte de contenu](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#content-box) est utilisée comme boîte de référence. + - `fill-box` + - : La boîte englobant (<i lang="en">bounding box</i>) est utilisée comme boîte de référence. + - `stroke-box` + - : La boîte de contour de la boîte englobante est utilisée comme boîte de référence. + - `view-box` + - : La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par `viewBox` et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut `viewBox`. - `none` - : Aucun chemin de rognage n'est créé. -> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/Valeur_calcul%C3%A9e) est différente de `none`, cela entraînera la création d'un nouveau [contexte d'empilement](/fr/docs/Glossaire/Contexte_d_empilement) (de la même façon qu'{{cssxref("opacity")}} avec des valeurs différentes de 1). +> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/computed_value) est différente de `none`, cela entraînera la création d'un nouveau [contexte d'empilement](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) (de la même façon qu'[`opacity`](/fr/docs/Web/CSS/opacity) avec des valeurs différentes de `1`). + +## Définition formelle + +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} @@ -107,7 +121,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="none"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -116,8 +130,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -141,7 +155,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="svg"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -150,8 +164,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -164,7 +178,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="svg2"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -173,8 +187,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="svg2"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -188,7 +202,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape1"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -197,8 +211,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape1"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -210,7 +224,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape2"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -219,8 +233,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape2"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -232,7 +246,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape3"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -241,8 +255,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape3"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -254,7 +268,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape4"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -263,8 +277,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape4"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -276,7 +290,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape5"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -285,8 +299,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape5"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -298,7 +312,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape6"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -307,8 +321,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape6"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -320,7 +334,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape7"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -329,8 +343,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape7"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -342,7 +356,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape8"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -351,8 +365,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape8"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -364,7 +378,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape9"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -373,8 +387,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape9"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -515,14 +529,14 @@ svg text.em { } ``` -{{EmbedLiveSample("Comparaison_entre_HTML_et_SVG", "100%", 800, "", "", "example-outcome-frame")}} +{{EmbedLiveSample("", "100%", 800, "", "", "example-outcome-frame")}} ### Exemple complet #### HTML ```html -<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg" +<img id="clipped" src="mdn.svg" alt="MDN logo"> <svg height="0" width="0"> <defs> @@ -562,26 +576,23 @@ clipPathSelect.addEventListener("change", function (evt) { #### Résultat -{{EmbedLiveSample("Exemple_complet", 230, 250)}} +{{EmbedLiveSample("", 230, 300)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------- | -| {{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}} | {{Spec2('CSS Masks')}} | Extension aux élément HTML. `clip-path` remplace la propriété {{cssxref("clip")}} désormais dépréciée. | -| {{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}} | {{Spec2('SVG1.1')}} | Définition initiale (s'applique uniquement aux éléments SVG) | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.clip-path")}} +{{Compat}} ## Voir aussi -- {{cssxref("mask")}} -- {{cssxref("filter")}} -- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Applying_SVG_effects_to_HTML_content) -- [Les formes CSS, le _clipping_ et le _masking_ : comment les utiliser (article en anglais)](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/) -- L'attribut SVG {{SVGAttr("clip-path")}} -- L'attribut SVG {{SVGAttr("clip-rule")}} +- Les propriétés CSS + - [`mask`](/fr/docs/Web/CSS/mask) + - [`filter`](/fr/docs/Web/CSS/filter) +- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) +- [Les formes CSS, le rognage et le masquage : comment les utiliser (en anglais)](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/) +- Les attributs SVG : + - [`clip-path`](/fr/docs/Web/SVG/Attribute/clip-path) + - [`clip-rule`](/fr/docs/Web/SVG/Attribute/clip-rule) diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md index 6c2aedbb70..1e6833ad5f 100644 --- a/files/fr/web/css/content/index.md +++ b/files/fr/web/css/content/index.md @@ -2,34 +2,40 @@ title: content slug: Web/CSS/content translation_of: Web/CSS/content +browser-compat: css.properties.content --- {{CSSRef}} -La propriété **`content`** est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété `content` sont des _[éléments remplacés anonymes](/fr/docs/Web/CSS/Replaced_element)._ +La propriété [CSS](/fr/docs/Web/CSS) **`content`** remplace un élément avec une valeur générée. Les objets insérés via la propriété `content` sont des **[éléments remplacés anonymes](/fr/docs/Web/CSS/Replaced_element)**. ```css -/* Des mots-clés qui ne peuvent pas être mélangés - avec d'autres valeurs */ +/* Des mots-clés qui ne peuvent pas être mélangés avec d'autres valeurs */ content: normal; content: none; -/* Valeurs pour une image */ +/* Valeurs pour une image (<image>) */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); +content: image-set("image1x.png" 1x, "image2x.png" 2x); + +/* Texte alternatif pour le contenu, ajouté avec le niveau 3 de la spécification */ +content: url("http://www.example.com/test.png") / "Le texte alternatif"; /* Une valeur <string>, les caractères non-latin */ /* doivent être échappées par ex. \000A9 for © */ content: 'prefix'; -/* Valeurs utilisant un compteur */ +/* Valeurs utilisant un compteur, éventuellement + avec <list-style-type> */ content: counter(compteur_chapitre); -content: counter(compteur_section, "."); +content: counter(compteur_chapitre, upper-roman); +content: counters(compteur_section, "."); +content: counters(compteur_section, ".", decimal-leading-zero); /* attr() lie à la valeur de l'attribut HTML */ content: attr(value string); -/* Mots-clés dépendant de langue */ -/* ou de la position */ +/* Mots-clés dépendant de langue ou de la position */ content: open-quote; content: close-quote; content: no-open-quote; @@ -37,11 +43,12 @@ content: no-close-quote; /* Sauf avec normal et none, on peut utiliser */ /* plusieurs valeurs de façon simultanée */ -content: open-quote chapter_counter; +content: open-quote counter(compteur_chapitre); /* Valeurs globales */ content: inherit; content: initial; +content: revert; content: unset; ``` @@ -50,23 +57,40 @@ content: unset; ### Valeurs - `none` - - : Le pseudo-élément n'est pas généré. + - : Lorsque cette valeur est appliquée à un pseudo-élément, ce dernier n'est pas généré. Si elle est appliquée à un élément, la valeur n'a pas d'effet. - `normal` - - : Résulte en `none` pour les pseudo-éléments `:before` et `:after`. -- {{cssxref("<string>")}} - - : Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©). -- {{cssxref("<image>")}} - - : Une image (valeur de type {{cssxref("<image>")}}) de type {{cssxref("<url>")}} ou {{cssxref("<gradient>")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher. -- `counter()` ou `counters()` (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}}) - - : Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(_name_)' ou 'counter(_name_, _style_)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (`decimal` par défaut). La seconde a également deux formes : `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (`decimal` par défaut). Voir [la section sur les compteurs automatiques](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) et sur la numérotation pour plus d'informations. + - : Résulte en `none` pour les pseudo-éléments `::before` et `::after`. +- [`<string>`](/fr/docs/Web/CSS/string) + - : Contenu qui indique le texte alternatif de l'élément. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©). +- [`<image>`](/fr/docs/Web/CSS/image) + - : Une image (valeur de type [`<image>`](/fr/docs/Web/CSS/image)) avec une [`url()`](/fr/docs/Web/CSS/url()) ou [`<gradient>`](/fr/docs/Web/CSS/gradient) ou une partie de la page web fournie par la fonction [`element()`](/fr/docs/Web/CSS/element()) et qui indique le contenu à afficher. +- [`counter()`](/fr/docs/Web/CSS/counter()) + - : Un [compteur CSS](/fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters), généralement un nombre, généralement produit via les propriétés [`<counter-reset>`](/fr/docs/Web/CSS/counter-reset) et [`<counter-increment>`](/fr/docs/Web/CSS/counter-increment) et qui peut être affiché grâce à la fonction [`counter()`](/fr/docs/Web/CSS/counter()) or [`counters()`](/fr/docs/Web/CSS/counters()). + + [`counter()`](/fr/docs/Web/CSS/counter()) possède deux formes : `counter(_name_)` ou `counter(_name_, _style_)`. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style ([`<list-style-type>`](/fr/docs/Web/CSS/list-style-type) indiqué (`decimal` par défaut). + + [`counters()`](/fr/docs/Web/CSS/counters()) a également deux formes : `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond, séparés par la chaîne définie. Les compteurs sont formatés selon le style ([`<list-style-type>`](/fr/docs/Web/CSS/list-style-type) indiqué (`decimal` par défaut). + - `attr(X)` - : Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé. - `open-quote` | `close-quote` - - : Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}. + - : Ces valeurs sont remplacées par la chaîne appropriée de la propriété [`quotes`](/fr/docs/Web/CSS/quotes). - `no-open-quote` | `no-close-quote` - : N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations. -### Syntaxe formelle +## Accessibilité + +Le contenu généré par CSS n'est pas inclus dans le [DOM](/fr/docs/Web/API/Document_Object_Model/Introduction). Pour cette raison, il ne fait pas partie de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal. + +- [La prise en charge relative à l'accessibilité pour les contenus générés par CSS — Tink (en anglais)](https://tink.uk/accessibility-support-for-css-generated-content/) +- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) +- [Comprendre les critères de succès 1.3.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) + +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -74,19 +98,22 @@ content: unset; ### Titres et citations +Dans cet exemple, on insère des marques de citation et le mot « Chapitre » pour chaque titre. + #### HTML ```html <h1>5</h1> -<p> Commençons par une citation de Sir Tim Berners-Lee, - <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"> - I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q> We must understand that there is nothing fundamentally wrong with building on the contributions of others. +<p>Commençons par une citation de Sir Tim Berners-Lee, + <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"> + I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q> + We must understand that there is nothing fundamentally wrong with building on the contributions of others. </p> <h1>6</h1> -<p> Citons le manifeste Mozilla - <q cite="http://www.mozilla.org/about/manifesto/"> - Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible. +<p>Citons le manifeste Mozilla, + <q cite="https://www.mozilla.org/fr/about/manifesto/"> + Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.</q> </p> ``` @@ -94,19 +121,28 @@ content: unset; ```css q { - color: #00008B; - font-style: italic; + color: blue; +} + +q::before { + content: open-quote; } -q::before { content: open-quote } -q::after { content: close-quote } +q::after { + content: close-quote; +} -h1::before { content: "Chapitre "; } +h1::before { + content: "Chapter "; + /* L'espace après la dernière lettre est + voulu afin de détacher le mot du reste + du contenu */ +} ``` #### Résultat -{{EmbedLiveSample('Titres_et_citations', 460, 100)}} +{{EmbedLiveSample('', 460, 310)}} ### Ajouter une icône avant un lien @@ -120,15 +156,15 @@ h1::before { content: "Chapitre "; } ```css a::before{ - content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: "; - font: x-small Arial,freeSans,sans-serif; - color: gray; + content: url("mdn-favicon16.png") " MOZILLA: "; + font: x-small Arial, freeSans, sans-serif; + color: gray; } ``` #### Résultat -{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}} +{{EmbedLiveSample('', 200, 60)}} ### Utiliser les classes @@ -137,10 +173,10 @@ a::before{ ```html <h2>Top des ventes</h2> <ol> - <li>Thriller politique</li> - <li class="nouveaute">Histoires effrayantes</li> - <li>Ma biographie</li> - <li class="nouveaute">Bit-lit</li> + <li>Thriller politique</li> + <li class="nouveaute">Histoires effrayantes</li> + <li>Ma biographie</li> + <li class="nouveaute">Bit-lit</li> </ol> ``` @@ -148,14 +184,14 @@ a::before{ ```css .nouveaute::after { - content: " Nouveau !"; - color: red; + content: " Nouveau !"; + color: red; } ``` #### Résultat -{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}} +{{EmbedLiveSample('', 300, 200)}} ### Utiliser les attributs d'image et d'élément @@ -183,11 +219,11 @@ a::after { } #moz::before { - content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); + content: url("mdn-favicon16.png"); } #mdn::before { - content: url("https://mozorg.cdn.mozilla.net/files/7691/mdn-favicon16.ico"); + content: url("mdn-favicon16.png"); } li { @@ -197,11 +233,11 @@ li { #### Résultat -{{EmbedLiveSample("Utiliser_les_attributs_dimage_et_délément", '100%', 160)}} +{{EmbedLiveSample("", '100%', 160)}} ### Remplacer un élément -Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("<url>")}} ou {{cssxref("<image>")}} . Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé. +Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une [`url()`](/fr/docs/Web/CSS/url()) ou une valeur de type [`<image>`](/fr/docs/Web/CSS/image). Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé. #### HTML @@ -213,7 +249,7 @@ Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est p ```css #replaced { - content: url("https://mdn.mozillademos.org/files/12668/MDN.svg"); + content: url("mdn.svg"); } #replaced::after { /* Ceci ne sera pas affiché, */ @@ -224,33 +260,21 @@ Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est p #### Résultat -{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}} - -## Accessibilité - -Le contenu généré par CSS n'est pas inclus dans le [DOM](/fr/docs/Web/API/Document_Object_Model/Introduction). Pour cette raison, il ne fait pas partie de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal. - -- [La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)](https://tink.uk/accessibility-support-for-css-generated-content/) -- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) -- [_Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) +{{EmbedLiveSample('', '100%', 250)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("CSS3 Content", "#content-property", "content")}} | {{Spec2("CSS3 Content")}} | | -| {{SpecName('CSS2.1', 'generate.html#content', 'content')}} | {{Spec2('CSS2.1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.content")}} +{{Compat}} ## Voir aussi -- {{cssxref("::after")}} -- {{cssxref("::before")}} -- {{cssxref("quotes")}} -- {{Cssxref("::marker")}} -- {{cssxref("url()", "url()")}} +- [Les éléments remplacés](/fr/docs/Web/CSS/Replaced_element) +- [`::after`](/fr/docs/Web/CSS/::after) +- [`::before`](/fr/docs/Web/CSS/::before) +- [`::marker`](/fr/docs/Web/CSS/::marker) +- [`quotes`](/fr/docs/Web/CSS/quotes) +- La fonction [`url()`](/fr/docs/Web/CSS/url()) diff --git a/files/fr/web/css/cross-fade()/index.md b/files/fr/web/css/cross-fade()/index.md index c211fd76ee..d31f0287bb 100644 --- a/files/fr/web/css/cross-fade()/index.md +++ b/files/fr/web/css/cross-fade()/index.md @@ -1,28 +1,27 @@ --- title: cross-fade() slug: Web/CSS/cross-fade() -tags: - - CSS - - Experimental - - Fonction - - Reference translation_of: Web/CSS/cross-fade() +browser-compat: css.types.image.cross-fade --- -{{draft}}{{CSSRef}} +{{CSSRef}} -La fonction CSS **`cross-fade()`** peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial. +La fonction [CSS](/fr/docs/Web/CSS) **`cross-fade()`** peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. +On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial. + +## Syntaxe > **Attention :** À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles. -## Syntaxe (spécification) +### Syntaxe de la spécification -La fonction `cross-fade()` prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%. +La fonction `cross-fade()` prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion, en termes d'opacité, de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de guillemets, doit contenir le symbole `%` et être comprise entre 0% et 100%. -Cette fonction pourra être utilisée à tout endroit où une image (cf. {{cssxref("<image>")}}) CSS peut être utilisée. +Cette fonction pourra être utilisée à tout endroit où une image CSS peut être utilisée. -### Utilisation des pourcentages +#### Utilisation des pourcentages -Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient. +Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. ```css cross-fade(url(white.png) 0%, url(black.png) 100%); /* complètement noire */ @@ -33,9 +32,11 @@ cross-fade(url(white.png) 100%, url(black.png) 0%); /* complètement blanche * cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */ ``` +Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient. + Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%. -Les lignes précédentes peuvent ainsi s'écrire également : +Les lignes précédentes peuvent ainsi s'écrire également : ```css cross-fade(url(white.png) 0%, url(black.png)); /* complètement noire */ @@ -46,41 +47,20 @@ cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */ ``` -Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%). - -### Syntaxe formelle - -{{csssyntax}} +Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%). Les lignes qui suivent sont (quasiment) identiques : -## Exemples - -### HTML - -```html -<div id="div"></div> +```css +cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* chacune aura 33.3333% d'opacité */ +cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); ``` -### CSS +### Syntaxe des implémentations (plus ancienne) ```css -#div { - width: 300px; - height: 300px; - background-image: cross-fade( - 75% url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png')); -} +cross-fade( <image>, <image>, <percentage> ) ``` -### Résultat - -{{EmbedLiveSample("Exemples", "330", "330")}} - -## Ancienne syntaxe (implémentations) - - cross-fade( <image, <image>, <percentage> ) - -La spécification de la fonction `cross-fade()` permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et [la syntaxe originale](#syntaxe), implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec `-webkit-` pour Chrome, Opera et les autres navigateurs basés sur Blink. +La spécification de la fonction `cross-fade()` permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et la syntaxe originale, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec `-webkit-` pour Chrome, Opera et les autres navigateurs basés sur Blink. ```css cross-fade(url(white.png), url(black.png), 0%); /* complètement noire */ @@ -92,26 +72,22 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément. -Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe. +Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe. -### Exemples +## Accessibilité -#### CSS +Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par-dessus. -```css -.crossfade { - width: 300px; - height: 300px; - background-image: -webkit-cross-fade( - url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'), - 75%); - background-image: cross-fade( - url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'), - 75%); -} -``` +- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Comprendre les critères de succès 1.1.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### Ancienne syntaxe pour cross-fade #### HTML @@ -119,33 +95,46 @@ Dans les exemples associés à la syntaxe de la spécification, on avait un cas <div class="crossfade"></div> ``` -#### Résultat - -{{EmbedLiveSample("Ancienne_syntaxe_(implémentations)", "330", "330")}} +#### CSS -## Accessibilité +```css +.crossfade { + width: 300px; + height: 300px; + background-image: -webkit-cross-fade( + url('br.png'), + url('tr.png'), + 75%); + background-image: cross-fade( + url('br.png'), + url('tr.png'), + 75%); +} +``` -Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par dessus. +#### Résultat -- [Comprendre les règles WCAG 1.1.](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [Comprendre les critères de succès 1.1.1 pour WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +{{EmbedLiveSample("", "330", "330")}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}} | {{Spec2('CSS4 Images')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.types.image.cross-fade")}} +{{Compat}} ## Voir aussi -- {{cssxref("image")}} -- {{cssxref("url")}} -- {{cssxref("_image", "image()")}} -- {{cssxref("image-set")}} -- {{cssxref("element()")}} -- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients "Using gradients") -- Fonctions de création de dégradés : {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}}, +- [`<image>`](/fr/docs/Web/CSS/image) +- [`url()`](/fr/docs/Web/CSS/url()) +- [`image()`](/fr/docs/Web/CSS/image/image()) +- [`image-set()`](/fr/docs/Web/CSS/image/image-set()) +- [`element()`](/fr/docs/Web/CSS/element()) +- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- Fonctions de création de dégradés : + - [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient) + - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient) + - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient) + - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) + - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient) diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md index b284c2f329..44a9d63373 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md @@ -1,1592 +1,9 @@ --- title: Générateur de border-radius slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator -tags: - - CSS - - Outil translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- -Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}. +Cet outil peut être utilisé afin de générer du code pour la propriété [`border-radius`](/fr/docs/Web/CSS/border-radius). -## border-radius-generator - -```html hidden -<div id="container"> - <div class="group section"> - <div id="preview" class="col span_12"> - <div id="subject"> - <div id="top-left" class="radius-container" - data-X="left" data-Y="top"> - </div> - <div id="top-right" class="radius-container" - data-X="right" data-Y="top"> - </div> - <div id="bottom-right" class="radius-container" - data-X="right" data-Y="bottom"> - </div> - <div id="bottom-left" class="radius-container" - data-X="left" data-Y="bottom"> - </div> - - <div id="radius-ui-sliders"> - <div id="tlr" class="ui-input-slider" data-topic="top-left" - data-unit=" px" data-sensivity="2"></div> - - <div id="tlw" class="ui-input-slider" data-topic="top-left-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="tlh" class="ui-input-slider" data-topic="top-left-h" - data-unit=" px" data-sensivity="2"></div> - - <div id="trr" class="ui-input-slider" data-topic="top-right" - data-unit=" px" data-sensivity="2"></div> - - <div id="trw" class="ui-input-slider" data-topic="top-right-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="trh" class="ui-input-slider" data-topic="top-right-h" - data-unit=" px" data-sensivity="2"></div> - - <div id="brr" class="ui-input-slider" data-topic="bottom-right" - data-unit=" px" data-sensivity="2"></div> - - <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" - data-unit=" px" data-sensivity="2"></div> - - <div id="blr" class="ui-input-slider" data-topic="bottom-left" - data-unit=" px" data-sensivity="2"></div> - - <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" - data-unit=" px" data-sensivity="2"></div> - </div> - </div> - </div> - </div> - <div id="controls" class="group section"> - - <div class="group section"> - <div id="dimensions"> - <div class="ui-input-slider" data-topic="width" data-info="width" - data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> - - <div class="ui-input-slider" data-topic="height" data-info="height" - data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> - </div> - - <div id="output"></div> - </div> - - <div class="group section"> - <div id="radius-lock"> - <div class="info"> Coins arrondis </div> - <div class="ui-checkbox" data-topic='top-left'></div> - <div class="ui-checkbox" data-topic='top-right'></div> - <div class="ui-checkbox" data-topic='bottom-right'></div> - <div class="ui-checkbox" data-topic='bottom-left'></div> - </div> - - <div id="unit-selection"> - <div class="info"> Unités pour la bordure </div> - </div> - </div> - - </div> -</div> -``` - -```css hidden -/* GRID OF TEN - * ========================================================================== */ - -.span_12 { - width: 100%; -} - -.span_11 { - width: 91.46%; -} - -.span_10 { - width: 83%; -} - -.span_9 { - width: 74.54%; -} - -.span_8 { - width: 66.08%; -} - -.span_7 { - width: 57.62%; -} - -.span_6 { - width: 49.16%; -} - -.span_5 { - width: 40.7%; -} - -.span_4 { - width: 32.24%; -} - -.span_3 { - width: 23.78%; -} - -.span_2 { - width: 15.32%; -} - -.span_1 { - width: 6.86%; -} - - - - -/* SECTIONS - * ========================================================================== */ - -.section { - clear: both; - padding: 0px; - margin: 0px; -} - -/* GROUPING - * ========================================================================== */ - - -.group:before, .group:after { - content: ""; - display: table; -} - -.group:after { - clear:both; -} - -.group { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ -} - -/* GRID COLUMN SETUP - * ========================================================================== */ - -.col { - display: block; - float:left; - margin: 1% 0 1% 1.6%; -} - -.col:first-child { - margin-left: 0; -} /* all browsers except IE6 and lower */ - - -/* - * UI Component - */ - -.ui-input-slider-container { - height: 20px; - margin: 10px 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.ui-input-slider-container * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Input Slider */ - -.ui-input-slider > input { - margin: 0; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.ui-input-slider-info { - width: 90px; - padding: 0px 10px 0px 0px; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-left, .ui-input-slider-right { - width: 16px; - cursor: pointer; - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; -} - -.ui-input-slider-right { - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; -} - -.ui-input-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 5px; - color: #FFF; - font-weight: bold; - line-height: 14px; - text-align: center; -} - -.ui-input-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -/* - * UI Component - */ - -/* Checkbox */ - -.ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-checkbox > input { - display: none; -} - -.ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; - - background-color: #888; - background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); - background-position: center center; - background-repeat: no-repeat; - - color: #FFF; - border-radius: 3px; - font-weight: bold; - float: left; -} - -.ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; -} - -.ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; -} - -.ui-checkbox > label:hover { - cursor: pointer; -} - -.ui-checkbox > input:checked + label { - background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); - background-color: #379B4A; -} - -body { - max-width: 1000px; - margin: 0 auto; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#container { - width: 100%; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -/******************************************************************************/ -/******************************************************************************/ -/* - * Preview Area - */ - -#preview { - height: 500px; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - overflow: hidden; - position: relative; -} - -#preview .content { - width: 100%; - height: 100%; - display: block; -} - -#preview input { - color: #333; - border: 1px solid #CCC; - border-radius: 3px; -} - -#subject { - width: 400px; - height: 150px; - margin: 0 auto; - border: 3px solid #C60; - background: #FFF; - position: relative; -} - -.radius { - width: 50%; - height: 50%; - border: 1px solid #CCC; - display: none; - position: absolute; - z-index: 1; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.handle { - width: 16px; - height: 16px; - position: absolute; - z-index: 2; -} - -.handle-top-left { - top: -12px; - left: -12px; - cursor: se-resize; - background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat; -} - -.handle-top-right { - top: -12px; - right: -12px; - cursor: sw-resize; - background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat; -} - -.handle-bottom-right { - bottom: -12px; - right: -12px; - cursor: nw-resize; - background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat; -} - -.handle-bottom-left { - bottom: -12px; - left: -12px; - cursor: ne-resize; - background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat; -} - - -.radius-container { - position: absolute; - display : block; - z-index: 1; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* TOP LEFT */ -#top-left { - top: 0; - left: 0; -} - -#top-left .radius { - border-top-left-radius: 100%; - top: 0; - left: 0; -} - -/* TOP RIGHT */ -#top-right { - top: 0; - right: 0; -} - -#top-right .radius { - border-top-right-radius: 100%; - top: 0; - right: 0; -} - -/* BOTTOM RIGHT */ -#bottom-right { - bottom: 0; - right: 0; -} - -#bottom-right .radius { - border-bottom-right-radius: 100%; - bottom: 0; - right: 0; -} - -/* BOTTOM lEFT */ -#bottom-left { - bottom: 0; - left: 0; -} - -#bottom-left .radius { - border-bottom-left-radius: 100%; - bottom: 0; -} - -/* INPUT SLIDERS */ - -#preview .ui-input-slider { - margin: 10px; - position: absolute; - z-index: 10; -} - -#radius-ui-sliders { - width: 100%; - height: 100%; - min-height: 75px; - min-width: 150px; - padding: 20px 50px; - top: -20px; - left: -50px; - position: relative; -} - -#tlr { - top: -30px; - left: -50px; - display: none; -} - -#tlw { - top: -30px; - left: 30px; -} - -#tlh { - top: 20px; - left: -50px; -} - -#trr { - top: -30px; - right: -50px; - display: none; -} - -#trw { - top: -30px; - right: 30px; -} - -#trh { - top: 20px; - right: -50px; -} - -#brr { - bottom: -30px; - right: -50px; - display: none; -} - -#brw { - bottom: -30px; - right: 30px; -} - -#brh { - bottom: 20px; - right: -50px; -} - -#blr { - bottom: -30px; - left: -50px; - display: none; -} - -#blw { - bottom: -30px; - left: 30px; -} - -#blh { - bottom: 20px; - left: -50px; -} - -#preview .ui-input-slider-left, #preview .ui-input-slider-right { - visibility: hidden; -} - -#preview .ui-input-slider-container:hover .ui-input-slider-left { - visibility: visible; -} - -#preview .ui-input-slider-container:hover .ui-input-slider-right { - visibility: visible; -} - -/* - * - */ - -#unit-selection { - width: 200px; - height: 75px; - margin: 30px 30px 0 0; - padding: 30px; - border: 3px solid #555; - border-radius: 10px; - position: relative; - float: right; -} - -#unit-selection .info { - height: 20%; - width: 100%; - line-height: 20%; - font-size: 20px; - text-align: center; - position: relative; - top: 40%; -} - -#unit-selection .dropdown { - width: 50px; - height: 20px; - margin: 10px; - padding: 0; - border-radius: 3px; - position: absolute; - overflow: hidden; -} - -#unit-selection select { - width: 50px; - height: 20px; - marign: 0; - padding: 0 0 0 10px; - background: #555; - border: 1px solid #555; - border: none; - color: #FFF; - float: left; -} - -#unit-selection select option { - background: #FFF; - color: #333; -} - -#unit-selection select:hover { - cursor: pointer; -} - -#unit-selection .dropdown:before { - content: ""; - width: 18px; - height: 20px; - display: block; - background-color: #555; - background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png"); - background-position: center center; - background-repeat: no-repeat; - top: 0px; - right: 0px; - position: absolute; - z-index: 1; - pointer-events: none; -} - -#unit-selection .unit-top-left { - top: 0; - left: 0; - display: none; -} - -#unit-selection .unit-top-left-w { - top: -22px; - left: 30px; -} - -#unit-selection .unit-top-left-h { - top: 20px; - left: -37px; -} - -#unit-selection .unit-top-right { - top: 0; - right: 0; - display: none; -} - -#unit-selection .unit-top-right-w { - top: -22px; - right: 30px; -} - -#unit-selection .unit-top-right-h { - top: 20px; - right: -37px; -} - -#unit-selection .unit-bottom-right { - bottom: 0; - right: 0; - display: none; -} - -#unit-selection .unit-bottom-right-w { - bottom: -22px; - right: 30px; -} - -#unit-selection .unit-bottom-right-h { - bottom: 20px; - right: -37px; -} - -#unit-selection .unit-bottom-left { - bottom: 0; - left: 0; - display: none; -} - -#unit-selection .unit-bottom-left-w { - bottom: -22px; - left: 30px; -} - -#unit-selection .unit-bottom-left-h { - bottom: 20px; - left: -37px; -} - -/******************************************************************************/ -/******************************************************************************/ - - -#radius-lock { - width: 200px; - height: 75px; - margin: 30px 0 0 30px; - padding: 30px; - border: 3px solid #555; - border-radius: 10px; - position: relative; - float: left; -} - -#radius-lock .ui-checkbox { - color: #FFF; - position: absolute; -} - -#radius-lock .ui-checkbox > label { - height: 20px; - width: 34px; - padding: 0; -} - -#radius-lock .info { - height: 20%; - width: 100%; - line-height: 20%; - font-size: 20px; - text-align: center; - position: relative; - top: 40%; -} - -#radius-lock [data-topic="top-left"] { - top: 10px; - left: 10px; -} - -#radius-lock [data-topic="top-right"] { - top: 10px; - right: 10px; -} - -#radius-lock [data-topic="bottom-right"] { - bottom: 10px; - right: 10px; -} - -#radius-lock [data-topic="bottom-left"] { - bottom: 10px; - left: 10px; -} - -/** - * Controls - */ - -#dimensions { - width: 200px; - color: #444; - float:left; -} - -#dimensions input { - background: #555; - color: #FFF; - border: none; - border-radius: 3px; -} - -#output { - width: 500px; - padding: 10px 0; - margin: 10px 0; - color: #555; - text-align: center; - border: 1px dashed #999; - border-radius: 3px; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; - user-select: text; - - float: right; -} -``` - -```js hidden -'use strict'; - - -/** - * UI-InputSliderManager - */ - -var InputSliderManager = (function InputSliderManager() { - - var subscribers = {}; - var sliders = []; - - var InputComponent = function InputComponent(obj) { - var input = document.createElement('input'); - input.setAttribute('type', 'text'); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - var value = parseInt(e.target.value); - - if (isNaN(value) === true) - setValue(obj.topic, obj.value); - else - setValue(obj.topic, value); - }); - - subscribe(obj.topic, function(value) { - input.value = value + obj.unit; - }); - - return input; - } - - var SliderComponent = function SliderComponent(obj, sign) { - var slider = document.createElement('div'); - var startX = null; - var start_value = 0; - - slider.addEventListener("click", function(e) { - setValue(obj.topic, obj.value + obj.step * sign); - }); - - slider.addEventListener("mousedown", function(e) { - startX = e.clientX; - start_value = obj.value; - document.body.style.cursor = "e-resize"; - document.addEventListener("mousemove", sliderMotion); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", sliderMotion); - document.body.style.cursor = "auto"; - slider.style.cursor = "pointer"; - }); - - var sliderMotion = function sliderMotion(e) { - slider.style.cursor = "e-resize"; - var delta = (e.clientX - startX) / obj.sensivity | 0; - var value = delta * obj.step + start_value; - setValue(obj.topic, value); - } - - return slider; - } - - var InputSlider = function(node) { - var min = node.getAttribute('data-min') | 0; - var max = node.getAttribute('data-max') | 0; - var step = node.getAttribute('data-step') | 0; - var value = node.getAttribute('data-value') | 0; - var topic = node.getAttribute('data-topic'); - var unit = node.getAttribute('data-unit'); - var name = node.getAttribute('data-info'); - var sensivity = node.getAttribute('data-sensivity') | 0; - - this.min = min; - this.max = max > 0 ? max : 100; - this.step = step === 0 ? 1 : step; - this.topic = topic; - this.node = node; - this.unit = unit; - this.sensivity = sensivity > 0 ? sensivity : 5; - - var input = new InputComponent(this); - var slider_left = new SliderComponent(this, -1); - var slider_right = new SliderComponent(this, 1); - - slider_left.className = 'ui-input-slider-left'; - slider_right.className = 'ui-input-slider-right'; - - if (name) { - var info = document.createElement('span'); - info.className = 'ui-input-slider-info'; - info.textContent = name; - node.appendChild(info); - } - - node.appendChild(slider_left); - node.appendChild(input); - node.appendChild(slider_right); - node.className = 'ui-input-slider ui-input-slider-container'; - - this.input = input; - sliders[topic] = this; - setValue(topic, value); - } - - var setValue = function setValue(topic, value, send_notify) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; - - slider.value = value; - slider.node.setAttribute('data-value', value); - - if (send_notify !== undefined && send_notify === false) { - slider.input.value = value + slider.unit; - return; - } - - notify.call(slider); - } - - var setMax = function setMax(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.max = value; - setValue(topic, slider.value); - } - - var setMin = function setMin(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.min = value; - setValue(topic, slider.value); - } - - var setUnit = function setUnit(topic, unit) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.unit = unit; - setValue(topic, slider.value); - } - - var getNode = function getNode(topic) { - return sliders[topic].node; - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - } - - var init = function init() { - var elem = document.querySelectorAll('.ui-input-slider'); - var size = elem.length; - for (var i = 0; i < size; i++) - new InputSlider(elem[i]); - } - - return { - init : init, - setMax : setMax, - setMin : setMin, - setUnit : setUnit, - getNode : getNode, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - -/** - * UI-ButtonManager - */ - -var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - } - - var getNode = function getNode(topic) { - return buttons[topic].node; - } - - var setValue = function setValue(topic, value) { - try { - buttons[topic].checkbox.checked = value; - } - catch(error) { - console.log(error); - } - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - } - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - - -window.addEventListener("load", function() { - BorderRadius.init(); -}); - -var BorderRadius = (function BorderRadius() { - - function getElemById(id) { - return document.getElementById(id); - } - - /** - * Shadow dragging - */ - var PreviewMouseTracking = (function Drag() { - var active = false; - var lastX = 0; - var lastY = 0; - var subscribers = []; - - var init = function init(id) { - var elem = getElemById(id); - elem.addEventListener('mousedown', dragStart, false); - document.addEventListener('mouseup', dragEnd, false); - } - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - active = true; - lastX = e.clientX; - lastY = e.clientY; - document.addEventListener('mousemove', mouseDrag, false); - } - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - if (active === true) { - active = false; - document.removeEventListener('mousemove', mouseDrag, false); - } - } - - var mouseDrag = function mouseDrag(e) { - notify(e.clientX - lastX, e.clientY - lastY); - lastX = e.clientX; - lastY = e.clientY; - } - - var subscribe = function subscribe(callback) { - subscribers.push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - var index = subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(deltaX, deltaY) { - for (var i in subscribers) - subscribers[i](deltaX, deltaY); - } - - return { - init : init, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - var subject; - var units = ['px', '%']; - var output = null; - - var UnitSelector = function UnitSelector(topic) { - - this.container = document.createElement("div"); - this.select = document.createElement("select"); - for (var i in units) { - var option = document.createElement("option"); - option.value = i; - option.textContent = units[i]; - this.select.appendChild(option); - } - - this.container.className = 'dropdown ' + 'unit-' + topic; - this.container.appendChild(this.select); - } - - UnitSelector.prototype.setValue = function setValue(value) { - this.salect.value = value; - } - - - var RadiusContainer = function RadiusContainer(node) { - var radius = document.createElement('div'); - var handle = document.createElement('div'); - var x = node.getAttribute('data-x'); - var y = node.getAttribute('data-y'); - var active = false; - - this.id = node.id; - this.node = node; - this.radius = radius; - this.handle = handle; - this.width = 100; - this.height = 50; - this.size = 0; - this.rounded = false; - - this.unitX = 0; - this.unitY = 0; - this.unitR = 0; - - this.maxW = 100; - this.maxH = 100; - this.maxR = 100; - - this.topic = y + '-' + x; - - var sliderW = InputSliderManager.getNode(this.topic + '-w'); - var sliderH = InputSliderManager.getNode(this.topic + '-h'); - var sliderR = InputSliderManager.getNode(this.topic); - - this.setUnitX(this.unitX); - this.setUnitY(this.unitY); - this.setUnitR(this.unitR); - - this.updateWidth(); - this.updateHeight(); - this.updateRadius(); - - if (x === 'left') this.resizeX = 1; - if (x === 'right') this.resizeX = -1; - if (y === 'top') this.resizeY = 1; - if (y === 'bottom') this.resizeY = -1; - - radius.className = 'radius'; - - var unit_selector = document.getElementById("unit-selection"); - var unitW = new UnitSelector(this.topic + '-w'); - var unitH = new UnitSelector(this.topic + '-h'); - var unitR = new UnitSelector(this.topic); - - unit_selector.appendChild(unitW.container); - unit_selector.appendChild(unitH.container); - unit_selector.appendChild(unitR.container); - node.appendChild(radius); - subject.appendChild(handle); - - unitW.select.addEventListener('change', function(e) { - this.setUnitX(e.target.value | 0); - }.bind(this)); - - unitH.select.addEventListener('change', function(e) { - this.setUnitY(e.target.value | 0); - }.bind(this)); - - unitR.select.addEventListener('change', function(e) { - this.setUnitR(e.target.value | 0); - }.bind(this)); - - if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left' - if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right'; - if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right'; - if (x === 'left' && y == 'bottom') handle.className = 'handle handle-bottom-left'; - - handle.addEventListener("mousedown", function(e) { - active = true; - this.radius.style.display = 'block'; - PreviewMouseTracking.subscribe(this.updateContainer.bind(this)); - }.bind(this)); - - document.addEventListener("mouseup", function(e) { - this.radius.style.display = 'none'; - if (active === true) - PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this)); - }.bind(this)); - - InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this)); - InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this)); - InputSliderManager.subscribe(this.topic, this.setRadius.bind(this)); - - ButtonManager.subscribe(this.topic, function(value) { - this.rounded = value; - if (value === true) { - unitW.container.style.display = 'none'; - unitH.container.style.display = 'none'; - unitR.container.style.display = 'block'; - sliderW.style.display = 'none'; - sliderH.style.display = 'none'; - sliderR.style.display = 'block'; - this.setUnitR(this.unitR); - this.updateRadius(); - } - - if (value === false) { - unitW.container.style.display = 'block'; - unitH.container.style.display = 'block'; - unitR.container.style.display = 'none'; - sliderW.style.display = 'block'; - sliderH.style.display = 'block'; - sliderR.style.display = 'none'; - this.setUnitX(this.unitX); - this.setUnitY(this.unitY); - this.updateWidth(); - this.updateHeight(); - } - - this.updateBorderRadius(); - - }.bind(this)); - - this.updateBorderRadius(); - } - - RadiusContainer.prototype.updateWidth = function updateWidth() { - this.node.style.width = this.width + units[this.unitX]; - var value = Math.round(this.width / 2); - InputSliderManager.setValue(this.topic + '-w', value, false); - } - - RadiusContainer.prototype.updateHeight = function updateHeight() { - this.node.style.height = this.height + units[this.unitY]; - var value = Math.round(this.height / 2); - InputSliderManager.setValue(this.topic + '-h', value, false); - } - - RadiusContainer.prototype.updateRadius = function updateRadius() { - var value = Math.round(this.size / 2); - this.node.style.width = this.size + units[this.unitR]; - this.node.style.height = this.size + units[this.unitR]; - InputSliderManager.setValue(this.topic, value, false); - } - - RadiusContainer.prototype.setWidth = function setWidth(value) { - this.radius.style.display = 'block'; - this.width = 2 * value; - this.node.style.width = this.width + units[this.unitX]; - this.updateBorderRadius(); - } - - RadiusContainer.prototype.setHeight = function setHeight(value) { - this.radius.style.display = 'block'; - this.height = 2 * value; - this.node.style.height = this.height + units[this.unitY]; - this.updateBorderRadius(); - } - - RadiusContainer.prototype.setRadius = function setRadius(value) { - this.radius.style.display = 'block'; - this.size = 2 * value; - this.node.style.width = this.size + units[this.unitR]; - this.node.style.height = this.size + units[this.unitR]; - this.updateBorderRadius(); - } - - RadiusContainer.prototype.setUnitX = function setUnitX(value) { - this.unitX = value; - if (this.unitX === 0) this.maxW = 2 * subject.clientWidth; - if (this.unitX === 1) this.maxW = 200; - InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]); - InputSliderManager.setMax(this.topic + '-w', this.maxW / 2); - } - - RadiusContainer.prototype.setUnitY = function setUnitY(value) { - this.unitY = value; - if (this.unitY === 0) this.maxH = 2 * subject.clientHeight; - if (this.unitY === 1) this.maxH = 200; - InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]); - InputSliderManager.setMax(this.topic + '-h', this.maxH / 2); - } - - RadiusContainer.prototype.setUnitR = function setUnitR(value) { - this.unitR = value; - - if (this.unitR === 0) - this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth); - - if (this.unitR === 1) - this.maxR = 200; - - InputSliderManager.setUnit(this.topic, units[this.unitR]); - InputSliderManager.setMax(this.topic, this.maxR / 2); - } - - RadiusContainer.prototype.updateUnits = function updateUnits(unit) { - if (this.rounded) { - this.setUnitR(this.unitR); - return; - } - - if (unit === 0) - this.setUnitX(this.unitX); - - if (unit === 1) - this.setUnitY(this.unitY); - } - - RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () { - - if (this.rounded === true) { - var unit = units[this.unitR]; - var value = Math.round(this.size / 2); - return value + unit; - } - - var unitX = units[this.unitX]; - var unitY = units[this.unitY]; - var valueX = Math.round(this.width / 2); - var valueY = Math.round(this.height / 2); - - if (valueX === valueY && this.unitX === this.unitY) - return valueX + unitX; - - return valueX + unitX + ' ' + valueY + unitY; - } - - RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () { - var radius = this.composeBorderRadius(); - var corner = 0; - - if (this.topic === 'top-left') { - subject.style.borderTopLeftRadius = radius; - corner = 0; - } - - if (this.topic === 'top-right') { - subject.style.borderTopRightRadius = radius; - corner = 1; - } - - if (this.topic === 'bottom-right') { - subject.style.borderBottomRightRadius = radius; - corner = 2; - } - - if (this.topic === 'bottom-left') { - subject.style.borderBottomLeftRadius = radius; - corner = 3; - } - - Tool.updateOutput(corner, radius); - } - - RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) { - - if (this.rounded === true) { - this.size += this.resizeX * deltaX + this.resizeY * deltaY; - if (this.size < 0) this.size = 0; - if (this.size > this.maxR) this.size = this.maxR; - this.updateRadius(); - this.updateBorderRadius(); - return; - } - - if (deltaX) { - this.width += this.resizeX * deltaX; - if (this.width < 0) this.width = 0; - if (this.width > this.maxW) this.width = this.maxW; - this.updateWidth(); - } - - if (deltaY) { - this.height += this.resizeY * deltaY; - if (this.height < 0) this.height = 0; - if (this.height > this.maxH) this.height = this.maxH; - this.updateHeight(); - } - - if (deltaX || deltaY) - this.updateBorderRadius(); - } - - - /** - * Tool Manager - */ - var Tool = (function Tool() { - var preview; - var preview_ui; - var radius_containers = []; - var border_width = 3; - var borders1 = [null, null, null, null]; - var borders2 = [0, 0, 0, 0]; - - var updateUIWidth = function updateUIWidth(value) { - var pwidth = subject.parentElement.clientWidth; - var left = (pwidth - value) / 2; - subject.style.width = value + "px"; - - for (var i = 0; i < 4; i++) - radius_containers[i].updateUnits(0); - } - - var updateUIHeight = function updateUIHeight(value) { - var pheight = subject.parentElement.clientHeight; - var top = (pheight - value) / 2; - subject.style.height = value + "px"; - subject.style.top = top - border_width + "px"; - - for (var i = 0; i < 4; i++) - radius_containers[i].updateUnits(1); - } - - var updatePreviewUIWidth = function updatePreviewUIWidth() { - var p = subject.parentElement.clientWidth; - var v = preview_ui.clientWidth; - console.log(p, v, (p - v ) / 2); - preview_ui.style.left = (p - v) / 2 + "px" ; - } - - var updatePreviewUIHeight = function updatePreviewUIHeight() { - var p = subject.parentElement.clientHeight; - var v = preview_ui.clientHeight; - console.log(p, v, (p - v ) / 2); - preview_ui.style.top = (p - v) / 2 + "px" ; - } - - var updateOutput = function updateOutput(corner, radius) { - var values = radius.split(" "); - - borders1[corner] = values[0]; - borders2[corner] = values[0]; - - if (values.length === 2) - borders2[corner] = values[1]; - - var border_1_value = borders1.join(" "); - var border_2_value = borders2.join(" "); - var border_radius = 'border-radius: ' + border_1_value; - - if (border_2_value !== border_1_value) - border_radius += ' / ' + border_2_value; - - border_radius += ';'; - output.textContent = border_radius; - } - - var init = function init() { - preview = getElemById("preview"); - subject = getElemById("subject"); - output = getElemById("output"); - preview_ui = getElemById("radius-ui-sliders"); - - var elem = document.querySelectorAll('.radius-container'); - var size = elem.length; - for (var i = 0; i < size; i++) - radius_containers[i] = new RadiusContainer(elem[i]); - - InputSliderManager.subscribe("width", updateUIWidth); - InputSliderManager.subscribe("height", updateUIHeight); - - InputSliderManager.setValue("width", subject.clientWidth); - InputSliderManager.setValue("height", subject.clientHeight); - } - - return { - init : init, - updateOutput : updateOutput - } - - })(); - - /** - * Init Tool - */ - var init = function init() { - ButtonManager.init(); - InputSliderManager.init(); - PreviewMouseTracking.init("preview"); - Tool.init(); - } - - return { - init : init - } - -})(); -``` - -{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}} +{{EmbedGHLiveSample("css-examples/tools/border-radius-generator/", '100%', 900)}} 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 62d06d5d45..6d3cc49836 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 @@ -6,9 +6,9 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-p --- {{CSSRef}} -Avec [CSS](/fr/docs/Web/CSS), on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur. +Avec [CSS](/fr/docs/Web/CSS), on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur. -Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} : +Pour cela, il suffit d'utiliser une liste de valeur avec [`background`](/fr/docs/Web/CSS/background) : ```css .maClasse { @@ -16,38 +16,37 @@ 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 [`background`](/fr/docs/Web/CSS/background) qu'avec les propriétés détaillées, exception faite de [`background-color`](/fr/docs/Web/CSS/background-color). On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : [`background`](/fr/docs/Web/CSS/background), [`background-attachment`](/fr/docs/Web/CSS/background-attachment), [`background-clip`](/fr/docs/Web/CSS/background-clip), [`background-image`](/fr/docs/Web/CSS/background-image), [`background-origin`](/fr/docs/Web/CSS/background-origin), [`background-position`](/fr/docs/Web/CSS/background-position), [`background-repeat`](/fr/docs/Web/CSS/background-repeat), [`background-size`](/fr/docs/Web/CSS/background-size). ## Exemples -Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles. +Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, une image de bulles et un dégradé linéaire (cf. [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient())). + +### HTML + +```html +<div class="multi-bg-example"></div> +``` ### CSS ```css -.exemple_multi_ar { +.multi-bg-example { width: 100%; height: 400px; - background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); + background-image: url(firefox.png), url(bubbles.png), + linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } ``` -### HTML - -```html -<div class="exemple_multi_ar"></div> -``` - ### Résultat -{{EmbedLiveSample('Exemples','100%','400')}} - -Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.). +{{EmbedLiveSample('','100%','440')}} -> **Note :** Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton _Tidy_ de la section CSS. +Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en haut, il est suivi par les bulles puis par le dégradé. Chacune des propriétés ([`background-repeat`](/fr/docs/Web/CSS/background-repeat) et [`background-position`](/fr/docs/Web/CSS/background-position)) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.). ## Voir aussi -- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS) +- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) diff --git a/files/fr/web/css/css_images/using_css_gradients/index.md b/files/fr/web/css/css_images/using_css_gradients/index.md index 48f6374f00..8fc173d8ac 100644 --- a/files/fr/web/css/css_images/using_css_gradients/index.md +++ b/files/fr/web/css/css_images/using_css_gradients/index.md @@ -6,11 +6,15 @@ original_slug: Web/CSS/Utilisation_de_dégradés_CSS --- {{CSSRef}} -Les **dégradés CSS** sont représentés par le type de donnée {{cssxref("<gradient>")}} qui est un sous-ensemble du type {{cssxref("<image>")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}). +Les **dégradés CSS** sont représentés par le type de donnée [`<gradient>`](/fr/docs/Web/CSS/gradient) qui est un sous-ensemble du type [`<image>`](/fr/docs/Web/CSS/image). L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de dégradés : -Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}. +- Les dégradés linéaires (créés avec la fonction [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient())), +- Les dégradés radiaux (créés avec la fonction [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient())), +- Les dégradés coniques (créés avec la fonction [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient())). -Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible. +Les dégradés peuvent être répétés avec les fonctions respectives [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()). + +Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). Les dégradés étant générés dynamiquement, ils permettent d'éviter d'utiliser des images matricielles pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible. Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées. @@ -18,15 +22,21 @@ Dans cet article, nous verrons d'abord les dégradés linéaires et détailleron Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué. -### Dégradés linéaires simples +### Un dégradé linéaire simple + +Pour définir un dégradé sous sa forme la plus simple, il suffit d'avoir deux couleurs. Celles-ci permettent de placer ce qu'on appellera des arrêts de couleur (<i lang="en">color stops</i> en anglais). Il est nécessaire d'en avoir au moins deux, mais il est possible d'en avoir plus. -Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc. +#### HTML + +```html +<div class="lineaire-simple"></div> +``` #### CSS ```css -.linear-gradient { - background: linear-gradient(blue, white); +.lineaire-simple { + background: linear-gradient(blue, pink); } div { @@ -35,23 +45,25 @@ div { } ``` -#### HTML +#### Résultat -```html -<div class="linear-gradient"></div> -``` +{{EmbedLiveSample("",150,150)}} -#### Résultat +### Changer la direction -{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}} +Par défaut, les dégradés linéaires vont du haut vers le bas. Il est possible de changer leur orientation en indiquant une direction. -### Appliquer un dégradé de gauche à droite +#### HTML + +```html +<div class="degrade-horizontal"></div> +``` #### CSS ```css -.linear-gradient { - background: linear-gradient(to right, blue, white); +.degrade-horizontal { + background: linear-gradient(to right, blue, pink); } div { @@ -60,23 +72,25 @@ div { } ``` -#### HTML - -```html -<div class="linear-gradient"></div> -``` - #### Résultat -{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}} +{{EmbedLiveSample("",150,150)}} ### Appliquer un dégradé en diagonale +Il est également possible d'orienter le dégradé sur une diagonale allant d'un coin à un autre. + +#### HTML + +```html +<div class="degrade-diagonal"></div> +``` + #### CSS ```css -.linear-gradient { - background: linear-gradient(to bottom right, blue, white); +.degrade-diagonal { + background: linear-gradient(to bottom right, blue, pink); } div { @@ -85,24 +99,24 @@ div { } ``` -#### HTML +#### Résultat -```html -<div class="linear-gradient"></div> -``` +{{EmbedLiveSample("",200,130)}} -#### Résultat +### Utilisation d'angles -{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}} +Si on veut choisir plus précisément la direction, on pourra fournir un angle au dégradé. -### Utilisation d’angles +#### HTML -Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément. +```html +<div class="degrade-angulaire"></div> +``` #### CSS ```css -.linear-gradient { +.degrade-angulaire { background: linear-gradient(70deg, blue, pink); } @@ -112,34 +126,32 @@ div { } ``` -#### HTML - -```html -<div class="linear-gradient"></div> -``` - #### Résultat -{{EmbedLiveSample("Utilisation_d’angles",120,120)}} +{{EmbedLiveSample("",150,150)}} -L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, `0deg` crée un dégradé vertical de bas en haut, tandis que `90deg` génère un dégradé horizontal de la gauche vers la droite : +L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens des aiguilles d'une montre. Autrement dit, `0deg` crée un dégradé vertical de bas en haut, tandis que `90deg` génère un dégradé horizontal de la gauche vers la droite. Les valeurs négatives font progresser l'angle dans le sens inverse des aiguilles d'une montre :  -```css -background: linear-gradient(<angle>, red, white); -``` - ## Créer des effets et manipuler les couleurs +L'ensemble des types de dégradés CSS sont décrits par une suite de couleurs avec chacune une position. Les couleurs produites par les dégradés CSS peuvent varier progressivement selon un axe et créer des transitions douces. Il est aussi possible de créer des bandes de couleurs avec des transitions vives entre deux couleurs. Ce qui suit est valable pour l'ensemble des fonctions de dégradés : + ### Utiliser plus de deux couleurs -Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité : +Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité. Par défaut, les couleurs sont espacées de façon homogène : + +#### HTML + +```html +<div class="degrade-espacement-auto"></div> +``` #### CSS ```css -.linear-gradient { +.degrade-espacement-auto { background: linear-gradient(red, yellow, blue, orange); } @@ -149,24 +161,24 @@ div { } ``` -#### HTML - -```html -<div class="linear-gradient"></div> -``` - #### Résultat -{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}} +{{EmbedLiveSample("",150,150)}} ### Arrêts de couleurs -Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, `0%` indique le point de départ, et `100%` le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré. +Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme de zéro, un ou deux pourcentages de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, `0%` indique le point de départ, et `100%` le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré. Si une position n'est pas définie, la position de cet arrêt de couleur sera automatiquement calculée (par défaut le premier arrêt est situé à 0%, le dernier à 100% et les autres répartis de façon homogène par rapport à leurs voisins). + +#### HTML + +```html +<div class="degrade-multicolore"></div> +``` #### CSS ```css -.linear-gradient { +.degrade-multicolore { background: linear-gradient(to left, lime, lime 28px, red 77%, cyan); } @@ -176,108 +188,74 @@ div { } ``` -#### HTML - -```html -<div class="linear-gradient"></div> -``` - #### Résultat -{{EmbedLiveSample("Arrêts_de_couleurs",120,120)}} +{{EmbedLiveSample("",150,150)}} -Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas. +### Créer des lignes franches -### Utiliser des indications de couleurs +Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à `50%` : -Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe. +#### HTML + +```html +<div class="ligne-franche"></div> +``` #### CSS ```css div { - width:120px; + width: 120px; height: 120px; - float: left; - margin-right: 10px; } -.color-hint { - background: linear-gradient(blue, 10%, pink); -} - -.simple-linear { - background: linear-gradient(blue, pink); +.ligne-franche { + background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); } ``` -#### HTML - -```html -<div class="color-hint"></div> -<div class="simple-linear"></div> -``` - #### Résultat -{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}} - -### Transparence et dégradés +{{EmbedLiveSample("", 150, 150)}} -Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple : - -#### CSS - -```css -.linear-gradient { - background: linear-gradient(to right, transparent, mistyrose), - url("https://mdn.mozillademos.org/files/15525/critters.png"); -} +### Utiliser des indications de couleurs -div { - width: 300px; - height: 150px; -} -``` +Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe. #### HTML ```html -<div class="linear-gradient"></div> +<div class="indication-couleur"></div> +<div class="degrade-lineaire"></div> ``` -#### Résultat - -{{EmbedLiveSample("Transparence_et_dégradés",300,150)}} - -Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous. - -### Créer des lignes franches - -Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à `50%`: - -```html hidden -<div class="striped"></div> -``` +#### CSS -```css hidden +```css div { width: 120px; height: 120px; + float: left; + margin-right: 10px; } -``` -```css -.striped { - background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); +.indication-couleur { + background: linear-gradient(blue, 10%, pink); +} + +.degrade-lineaire { + background: linear-gradient(blue, pink); } ``` -{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}} +#### Résultat + +{{EmbedLiveSample("",150,150)}} ### Créer des bandes de couleur -Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant. +Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successifs avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant. ```html hidden <div class="multiposition-stops"></div> @@ -288,31 +266,35 @@ Pour inclure une bande d'une couleur donnée, sans transition au sein du dégrad div { width: 120px; height: 120px; - float: left; margin-right: 10px; box-sizing: border-box; + float: left; + margin-right: 10px; + box-sizing: border-box; } ``` ```css .multiposition-stops { - background: linear-gradient(to left, - lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); - background: linear-gradient(to left, - lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); + background: linear-gradient(to left, + lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); + background: linear-gradient(to left, + lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); } .multiposition-stop2 { - background: linear-gradient(to left, + background: linear-gradient(to left, lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% ); - background: linear-gradient(to left, + background: linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); } ``` -{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc. Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives. +Dans les deux exemples, le dégradé est écrit deux fois : la première correspond à la méthode décrite par la spécification CSS de niveau 3 pour répéter les couleurs des arrêts et la seconde correspond à la méthode de la spécification CSS de niveau 4 pour inclure deux longueurs. + ### Contrôler la progression du dégradé Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication. @@ -325,86 +307,116 @@ Par défaut, un dégradé progresse linéairement entre les deux couleurs et la div { width: 120px; height: 120px; - float: left; margin-right: 10px; box-sizing: border-box; + float: left; + margin-right: 10px; + box-sizing: border-box; } ``` ```css .colorhint-gradient { - background: linear-gradient(to top, black, 20%, cyan); + background: linear-gradient(to top, lime, 20%, cyan); } .regular-progression { - background: linear-gradient(to top, black, cyan); + background: linear-gradient(to top, lime, cyan); } ``` -{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} -### Empilement de dégradés +### Transparence et dégradés + +Les dégradés gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple : -Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures. +#### HTML + +```html +<div class="superposition"></div> +``` #### CSS ```css -.linear-gradient { - background: - linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), - linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), - linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); +.superposition { + background: linear-gradient(to right, transparent, mistyrose), + url("critters.png"); } div { - width: 100px; - height: 100px; + width: 300px; + height: 150px; } ``` +#### Résultat + +{{EmbedLiveSample("",300,180)}} + +### Empilement de dégradés + +Il est possible d'empiler différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures. + #### HTML ```html <div class="linear-gradient"></div> ``` +#### CSS + +```css +.linear-gradient { + background: + linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); +} + +div { + width: 200px; + height: 200px; +} +``` + #### Résultat -{{EmbedLiveSample("Empilement_de_dégradés")}} +{{EmbedLiveSample("",230,230)}} ## Dégradés radiaux -Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques. +Les dégradés radiaux sont similaires aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques. ### Un dégradé radial simple -> **Note :** Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé. +> **Note :** Dans les exemples suivants, nous continuons d'utiliser le même [`<div>`](/fr/docs/Web/HTML/Element/div) et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé. De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial. ```html hidden -<div class="simple-radial"></div> +<div class="radial-simple"></div> ``` ```css hidden div { - width: 120px; + width: 240px; height: 120px; } ``` ```css -.simple-radial { +.radial-simple { background: radial-gradient(red, blue); } ``` -{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}} +{{EmbedLiveSample("", 270, 150)}} -### Positionner les points d’arrêt +### Positionner les points d'arrêt À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance. ```html hidden -<div class="radial-gradient"></div> +<div class="degrade-radial"></div> ``` ```css hidden @@ -415,19 +427,19 @@ div { ``` ```css -.radial-gradient { +.degrade-radial { background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); } ``` -{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} ### Positionner le centre du dégradé -La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes. +La position du centre du dégradé peut être définie avec des mots-clés, des pourcentages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes. ```html hidden -<div class="radial-gradient"></div> +<div class="degrade-radial"></div> ``` ```css hidden @@ -438,16 +450,16 @@ div { ``` ```css -.radial-gradient { +.degrade-radial { background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); } ``` -{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}} +{{EmbedLiveSample("", 240, 270)}} ### Dimensionner les dégradés radiaux -À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial. +À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial. Pour cela, on pourra utiliser les valeurs `closest-corner`, `closest-side`, `farthest-corner`, et `farthest-side`, avec `farthest-corner` qui est la valeur par défaut. Les cercles peuvent aussi être dimensionnés avec une longueur et les ellipses avec une longueur ou un pourcentage. #### Utiliser `closest-side` pour les ellipses @@ -471,11 +483,11 @@ div { } ``` -{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}} +{{EmbedLiveSample("", 270, 130)}} #### Utiliser `farthest-corner` pour les ellipses -Cet exemple ressemble fortement au précédent mais on utilise ici `farthest-corner` qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante. +Cet exemple ressemble fortement au précédent, mais on utilise ici `farthest-corner` qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante. ```html hidden <div class="radial-ellipse-far"></div> @@ -495,11 +507,11 @@ div { } ``` -{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}} +{{EmbedLiveSample("", 240, 130)}} #### Utiliser `closest-side` pour les cercles -Pour cet exemple, on utilise `closest-side` qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit. +Pour cet exemple, on utilise `closest-side` qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Le rayon est la distance entre le centre du dégradé et le bord le plus proche. Avec le positionnement indiqué ici, c'est le bas le plus proche. ```html hidden <div class="radial-circle-close"></div> @@ -514,12 +526,60 @@ div { ```css .radial-circle-close { - background: radial-gradient(circle closest-side, + background: radial-gradient(circle closest-side at 25% 75%, + red, yellow 10%, #1e90ff 50%, beige); +} +``` + +{{EmbedLiveSample("", 240, 150)}} + +#### Longueur ou pourcentage pour le dimensionnement des ellipses + +Les ellipses peuvent être dimensionnées avec une longueur ou un pourcentage. La première valeur représentera le rayon horizontal et la seconde représentera le rayon vertical. Les pourcentages utilisés pour ces valeurs sont relatifs à la dimension de la boîte sur l'axe correspondant. Dans l'exemple qui suit, on utilise un pourcentage pour le rayon horizontal. + +```html hidden +<div class="radial-ellipse-size"></div> +``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-ellipse-size { + background: radial-gradient(ellipse 50% 50px, red, yellow 10%, #1e90ff 50%, beige); } ``` -{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}} +{{EmbedLiveSample('', 240, 150)}} + +#### Longueur pour le dimensionnement des cercles + +Les cercles sont dimensionnés via une longueur (une valeur de type [<length>](/fr/docs/Web/CSS/length)) qui indique le rayon du cercle. + +```html hidden +<div class="radial-circle-size"></div> +``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-circle-size { + background: radial-gradient(circle 50px, + red, yellow 10%, #1e90ff 50%, beige); +} +``` + +{{EmbedLiveSample('', 240, 150)}} ### Empiler des dégradés radiaux @@ -552,7 +612,7 @@ div { } ``` -{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}} +{{EmbedLiveSample("", 230, 230)}} ## Dégradés coniques @@ -564,7 +624,7 @@ Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui ### Un dégradé conique simple -Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut : +Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut : ```html hidden <div class="simple-conic"></div> @@ -583,7 +643,7 @@ div { } ``` -{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} ### Positionner le centre @@ -606,9 +666,11 @@ div { } ``` -{{EmbedLiveSample('Positionner_le_centre', 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} + +### Modifier l'angle -### Modifier l’angle +Par défaut, les différents arrêts de couleur indiqués sont répartis à équidistance autour du cercle. On peut positionner l'angle de départ du dégradé à l'aide du mot-clé `from`, suivi d'un angle ou d'une longueur. On peut indiquer différentes positions pour les différents arrêts de couleur en précisant un angle ou une longueur à leur suite. ```html hidden <div class="conic-gradient"></div> @@ -627,17 +689,17 @@ div { } ``` -{{EmbedLiveSample("Modifier_l’angle", 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} ## Répéter des dégradés -Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité. +Les propriétés [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient()), [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) et [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()) offrent cette fonctionnalité. -La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition. +La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Si aucun n'est déclaré, la ligne du dégradé occupera 100%, ce qui signifie que les dégradés linéaires et coniques ne se répèteront pas et que le dégradé radial ne se répètera que si le rayon du dégradé est plus petit que la distance entre le centre du dégradé et le coin le plus proche. Si le premier arrêt de couleur est déclaré et que la valeur est supérieure à 0, le dégradé se répètera, car la taille de la ligne ou de l'arc est donnée par la différence entre le premier et le dernier arrêt de couleur, qui vaudra alors ici moins de 100% ou 360 degrés. ### Répéter un dégradé linéaire -Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète. +Dans cet exemple, on utilise la fonction [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète. ```html hidden <div class="repeating-linear"></div> @@ -656,10 +718,14 @@ div { } ``` -{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} ### Répéter plusieurs dégradés linéaires +Comme les dégradés linéaires et radiaux, il est possible de déclarer plusieurs dégradés, situés les uns sur les autres. Cela n'a d'intérêt que si les dégradés sont partiellement transparents afin de pouvoir voir les couches formées par les autres dégradés. Pour voir les différents dégradés, il est aussi possible d'utiliser des tailles d'arrière-plan différentes ([`background-size`](/fr/docs/Web/CSS/background-size)) et avec des positions ([`background-position`](/fr/docs/Web/CSS/background-position)) différentes pour chaque image de dégradé. Dans l'exemple qui suit, on utilise la transparence. + +Ici, les lignes de dégradé mesurent 300px, 230px, et 300px de long. + ```html hidden <div class="multi-repeating-linear"></div> ``` @@ -690,10 +756,12 @@ div { } ``` -{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}} +{{EmbedLiveSample("", 600, 430)}} ### Créer un tartan +Pour créer un tartan, on utilise plusieurs dégradés qui se chevauchent avec de la transparence. Dans la première déclaration, on liste les différents arrêts de couleur séparément et dans la seconde déclaration, on utilise la syntaxe avec les positions multiples. + ```html hidden <div class="plaid-gradient"></div> ``` @@ -727,11 +795,11 @@ div { } ``` -{{EmbedLiveSample('Créer_un_tartan', 200, 200)}} +{{EmbedLiveSample("", 230, 230)}} ### Répéter des dégradés radiaux -Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence. +Ici, on utilise la fonction [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence. ```html hidden <div class="repeating-radial"></div> @@ -750,7 +818,7 @@ div { } ``` -{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} ### Répéter plusieurs dégradés radiaux @@ -778,21 +846,28 @@ div { } ``` -{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}} +{{EmbedLiveSample("", 250, 180)}} ## Voir aussi -- Les fonctions de manipulation des dégradés +- Les fonctions de manipulation des dégradés : - - {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} + - [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient()), + - [`radial-gradient`](/fr/docs/Web/CSS/gradient/radial-gradient()), + - [`conic-gradient`](/fr/docs/Web/CSS/gradient/conic-gradient()), + - [`repeating-linear-gradient`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()), + - [`repeating-radial-gradient`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()), + - [`repeating-conic-gradient`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()) -- Les types de donnée CSS relatifs aux dégradés +- Les types de donnée CSS relatifs aux dégradés : - - {{cssxref("<gradient>")}}, {{cssxref("<image>")}} + - [`<gradient>`](/fr/docs/Web/CSS/gradient), + - [`<image>`](/fr/docs/Web/CSS/image) -- Certaines propriétés CSS qui permettent d'utiliser des dégradés +- Certaines propriétés CSS qui permettent d'utiliser des dégradés : - - {{cssxref("background")}}, {{cssxref("background-image")}} + - [`background`](/fr/docs/Web/CSS/background), + - [`background-image`](/fr/docs/Web/CSS/background-image) - [Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou](https://lea.verou.me/css3patterns/) - [Un générateur de dégradé CSS](https://cssgenerator.org/gradient-css-generator.html) diff --git a/files/fr/web/css/font-stretch/index.md b/files/fr/web/css/font-stretch/index.md index e90bc46dfa..39232c5d9d 100644 --- a/files/fr/web/css/font-stretch/index.md +++ b/files/fr/web/css/font-stretch/index.md @@ -1,15 +1,16 @@ --- title: font-stretch slug: Web/CSS/font-stretch -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/font-stretch +browser-compat: css.properties.font-stretch --- {{CSSRef}} -La propriété **`font-stretch`** permet de choisir entre la forme normale, condensée ou étendue d'une police. +La propriété [CSS](/fr/docs/Web/CSS) **`font-stretch`** permet de choisir entre la forme normale, condensée ou étendue d'une police. + +{{EmbedInteractiveExample("pages/css/font-stretch.html")}} + +## Syntaxe ```css /* Valeurs avec un mot-clé */ @@ -31,18 +32,11 @@ font-stretch: 200%; /* Valeurs globales */ font-stretch: inherit; font-stretch: initial; +font-stretch: revert; font-stretch: unset; ``` -Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes _condensées_) et d'autres pour lesquelles les caractères sont plus amples (fontes _étendues_). - -`font-stretch` permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet. - -Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices. - -## Syntaxe - -Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("<percentage>")}}). +Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. [`<percentage>`](/fr/docs/Web/CSS/percentage)). ### Valeurs @@ -53,66 +47,37 @@ Cette propriété peut être définie avec un mot-clé ou avec une valeur exprim - `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` - : Permet de choisir une fonte plus étendue que la normale, `ultra-expanded` correspond à la forme la plus étirée. - `<percentage>` - - : Une valeur de type {{cssxref("<percentage>")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette propriété. + - : Une valeur de type [`<percentage>`](/fr/docs/Web/CSS/percentage) entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette propriété. -Dans les anciennes versions de la spécification de `font-stretch`, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification _CSS Fonts_ de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article). +Dans les anciennes versions de la spécification de `font-stretch`, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification [_CSS Fonts_ de niveau 4](https://drafts.csswg.org/css-fonts-4/#propdef-font-stretch), cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wdth` qui implémente ces largeurs variables. Attention toutefois à la compatibilité, car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. [la section en fin d'article sur la compatibilité des navigateurs](#compatibilité_des_navigateurs)). ### Correspondance entre les mots-clés et les valeurs numériques -Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages : +Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages : -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Mot-clé</th> - <th scope="col">Pourcentage</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>ultra-condensed</code></td> - <td>50%</td> - </tr> - <tr> - <td><code>extra-condensed</code></td> - <td>62.5%</td> - </tr> - <tr> - <td><code>condensed</code></td> - <td>75%</td> - </tr> - <tr> - <td><code>semi-condensed</code></td> - <td>87.5%</td> - </tr> - <tr> - <td><code>normal</code></td> - <td>100%</td> - </tr> - <tr> - <td><code>semi-expanded</code></td> - <td>112.5%</td> - </tr> - <tr> - <td><code>expanded</code></td> - <td>125%</td> - </tr> - <tr> - <td><code>extra-expanded</code></td> - <td>150%</td> - </tr> - <tr> - <td><code>ultra-expanded</code></td> - <td>200%</td> - </tr> - </tbody> -</table> +| Mot-clé | Pourcentage | +| ----------------- | ----------- | +| `ultra-condensed` | 50% | +| `extra-condensed` | 62.5% | +| `condensed` | 75% | +| `semi-condensed` | 87.5% | +| `normal` | 100% | +| `semi-expanded` | 112.5% | +| `expanded` | 125% | +| `extra-expanded` | 150% | +| `ultra-expanded` | 200% | + +## Description + +Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes _condensées_) et d'autres pour lesquelles les caractères sont plus amples (fontes _étendues_). + +`font-stretch` permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet. ### Sélection de la fonte La fonte sélectionnée pour une valeur `font-stretch` dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%. -Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes : +Le tableau qui suit illustre l'effet des différents pourcentages avec deux polices possédant différentes fontes : <table class="standard-table"> <thead> @@ -160,104 +125,28 @@ Le tableau qui suit illustre l'effet des différents pourcentage avec deux polic - Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de `font-stretch` inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale. - [League Mono Variable](https://tylerfinck.com/leaguemonovariable/) est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de `font-stretch` selon les pourcentages choisis. -Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wdth` qui implémente ces largeurs variables. - ### Syntaxe formelle {{csssyntax}} ## Exemples -### Avec un mot-clé - -#### HTML - -```html -<p class="stretch">Le texte est plus étiré.</p> -<p class="condensed">Le texte est plus resserré.</div> -``` - -#### CSS - -```css -.stretch { - font-stretch: extra-expanded; -} - -.condensed { - font-stretch: condensed; -} -``` - -#### Résultat - -{{EmbedLiveSample('Avec_un_mot-clé', '500')}} - ### Avec un pourcentage -Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs `<percentage>`. - -#### HTML - -```html -<div class="container"> - <p class="condensed">an elephantine lizard</p> - <p class="normal">an elephantine lizard</p> - <p class="expanded">an elephantine lizard</p> -</div> -``` - -#### CSS - -```css -/* -Cet exemple utilise la police League Mono Variable, développée par -Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon -la licence SIL Open Font, Version 1.1 : -http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web -*/ - -@font-face { - src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf'); - font-family:'LeagueMonoVariable'; - font-style: normal; - font-stretch: 1% 500%; /* Nécessaire pour Chrome */ -} - -.container { - border: 10px solid #f5f9fa; - padding: 0 1rem; - font: 1.5rem 'LeagueMonoVariable', sans-serif; -} - -.condensed { - font-stretch: 50%; -} - -.normal { - font-stretch: 100%; -} - -.expanded { - font-stretch: 200%; -} -``` - -#### Résultat - -{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}} +{{EmbedGHLiveSample("css-examples/variable-fonts/font-stretch.html", '100%', 950)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------ | -| {{SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}} | {{Spec2('CSS4 Fonts')}} | Ajout des valeurs `<percentage>` pour les polices variables. | -| {{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. | +{{Specifications}} > **Note :** La propriété CSS `font-stretch` fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3. -{{cssinfo}} - ## Compatibilité des navigateurs -{{Compat("css.properties.font-stretch")}} +{{Compat}} + +## Voir aussi + +- [`font-style`](/fr/docs/Web/CSS/font-style) +- [`font-weight`](/fr/docs/Web/CSS/font-weight) +- [Apprendre — Notions fondamentales sur le texte et la mise en forme avec les polices](/fr/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/fr/web/css/font-variant-numeric/index.md b/files/fr/web/css/font-variant-numeric/index.md index ad8967a4dd..d553d0d3cf 100644 --- a/files/fr/web/css/font-variant-numeric/index.md +++ b/files/fr/web/css/font-variant-numeric/index.md @@ -1,15 +1,12 @@ --- title: font-variant-numeric slug: Web/CSS/font-variant-numeric -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/font-variant-numeric +browser-compat: css.properties.font-variant-numeric --- {{CSSRef}} -La propriété **`font-variant-numeric`** permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux. +La propriété [CSS](/fr/docs/Web/CSS) **`font-variant-numeric`** permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux. {{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}} @@ -30,10 +27,11 @@ font-variant-numeric: oldstyle-nums stacked-fractions; /* Valeurs globales */ font-variant-numeric: inherit; font-variant-numeric: initial; +font-variant-numeric: revert; font-variant-numeric: unset; ``` -La valeur de cette propriété peut être définie selon deux formes : +La valeur de cette propriété peut être définie selon deux formes : - la première avec le mot-clé `normal` - la seconde avec une ou plusieurs valeurs parmi celles définies ci-après, séparées par des espaces et dans n'importe quel ordre. @@ -43,90 +41,52 @@ La valeur de cette propriété peut être définie selon deux formes : - `normal` - : Ce mot-clé désactive l'utilisation des glyphes alternatifs. - `ordinal` - - - : Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1 - - <sup>er</sup> - - , 2 - - <sup>e</sup> - - , 3 - - <sup>e</sup> - - , etc. Il correspond aux valeurs OpenType values `ordn`. - + - : Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1<sup>er</sup>, 2<sup>e</sup>, 3<sup>e</sup>, etc. Il correspond aux valeurs OpenType values `ordn`. - `slashed-zero` - - : Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs OpenType `zero`. -- _\<numeric-figure-values_> + - : Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs OpenType `zero`. +- `<numeric-figure-values>` - - : Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées : + - : Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées : - `lining-nums` permet d'activer l'ensemble de chiffres pour lequel tous les nombres sont apposés sur la ligne de base. Elle correspond aux valeurs OpenType `lnum`. - `oldstyle-nums` permet d'activer l'ensemble de chiffres pour lequel certains nombres, comme 3, 4, 7, 9, ont un jambage. Elle correspond aux valleurs OpenType `onum`. -- _\<numeric-spacing-values_> - - - : Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valelurs : +- `<numeric-spacing-values>` + - : Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valeurs : - `proportional-nums` permet d'activer l'ensemble où les chiffres ne sont pas tous de la même taille. Elle correspond aux valeurs OpenType `pnum`. - `tabular-nums` permet d'activer l'ensemble où les chiffres ont la même taille (ce qui leur permet d'être facilement alignés dans des tableaux). Elle correspond aux valeurs OpenType `tnum`. -- _\<numeric-fraction-values_> - - - : Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions : +- `<numeric-fraction-values>` + - : Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions : - `diagonal-fractions` permet d'utiliser l'ensemble où le numérateur et le dénominateur sont plus petits et séparés par une barre oblique. Elle correspond aux valeurs OpenType `frac`. - `stacked-fractions` permet d'utiliser l'ensemble où les chiffres du numérateur et du dénominateur sont plus petits et séparés par une ligne horizontale. Elle correspond aux valeurs OpenType `afrc`. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} - -## Exemples - -### CSS - -```css -/* -Cet exemple utilise la police Source Sans Pro OpenType développée par Adobe -et utilisée ici sous les termes de la licence SIL Open Font en Version 1.1 : -http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web -*/ - -@font-face { - font-family: "Source Sans Pro"; - font-style: normal; - font-weight: 400; - src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype"); -} - -.ordinal { - font-variant-numeric: ordinal; - font-family: "Source Sans Pro"; -} -``` +{{cssinfo}} -### HTML +## Syntaxe formelle -```html -<p class="ordinal">Premier, deuxième, troisième, quatrième, cinquième</p> -``` +{{csssyntax}} -### Résultat +## Exemples -{{EmbedLiveSample("Exemples")}} +{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-example.html", '100%', 600)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.font-variant-numeric")}} +{{Compat}} + +## Voir aussi + +- [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates) +- [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps) +- [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian) +- [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) +- [`font-variant`](/fr/docs/Web/CSS/font-variant) diff --git a/files/fr/web/css/font-weight/index.md b/files/fr/web/css/font-weight/index.md index 1ce9243e2f..80aa0926dd 100644 --- a/files/fr/web/css/font-weight/index.md +++ b/files/fr/web/css/font-weight/index.md @@ -1,15 +1,12 @@ --- title: font-weight slug: Web/CSS/font-weight -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/font-weight +browser-compat: css.properties.font-weight --- {{CSSRef}} -La propriété CSS **`font-weight`** permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. {{cssxref("font-family")}}). Certaines fontes n'existent qu'avec les niveaux de graisses `normal` et `bold`. +La propriété [CSS](/fr/docs/Web/CSS) **`font-weight`** permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. [`font-family`](/fr/docs/Web/CSS/font-family)). Certaines fontes n'existent qu'avec les niveaux de graisses `normal` et `bold`. {{EmbedInteractiveExample("pages/css/font-weight.html")}} @@ -25,24 +22,20 @@ font-weight: lighter; font-weight: bolder; /* Valeurs numériques */ -font-weight: 1; font-weight: 100; -font-weight: 100.6; -font-weight: 123; font-weight: 200; font-weight: 300; -font-weight: 321; -font-weight: 400; +font-weight: 400; /* normal */ font-weight: 500; font-weight: 600; -font-weight: 700; +font-weight: 700; /* gras */ font-weight: 800; font-weight: 900; -font-weight: 1000; /* Valeurs globales */ font-weight: inherit; font-weight: initial; +font-weight: revert; font-weight: unset; ``` @@ -59,26 +52,29 @@ La propriété `font-weight` peut être définie grâce à l'une des valeurs sui - `bolder` - : On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras. - `<number>` - - : Une valeur numérique (type {{cssxref("<number>")}}) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec `normal` et `bold`. + - : Une valeur numérique (type [`<number>`](/fr/docs/Web/CSS/number)) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec `normal` et `bold`. Pour d'anciennes versions de la spécification, `font-weight` n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après). -Le module de spécification _CSS Fonts_ de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleur précision quant aux tailles utilisables. On notera que cette fonctionnalité n'est pas encore prise en charge (à date de juin 2018) par tous les navigateurs. +Le module de spécification _CSS Fonts_ de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleure précision quant aux tailles utilisables. ### Conversion des valeurs -Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée : +Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée : - Si un niveau supérieur à `500` est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte) - Si un niveau inférieur à `400` est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire) -- Si un niveau égal à `400` est utilisé, `500` sera utilisé. Si `500` n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400. -- Si un niveau égal à `500` est utilisé, `400` sera utilisé. Si `400` n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à `400`. +- Si c'est un niveau entre `400` et `500` (inclus) qui est utilisé : -Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement `normal` et `bold`, `100`-`500` seront considérés équivalents à `normal` et `600`-`900` à `bold`. + - On cherche les niveaux les plus proches entre la cible et `500`, dans l'ordre croissant. + - Si aucune correspondance n'est trouvée, on cherche les niveaux inférieurs, dans l'ordre décroissant. + - Si aucune correspondance n'est trouvée, on cherche les niveaux supérieurs à `500`, dans l'ordre croissant. ### Signification des poids relatifs -Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément : +Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément. + +On notera que lorsqu'on utilise des niveaux de graisse relatifs, seuls quatre niveaux sont considérés : fin (100), normal (400), gras (700) et épais (900). Si une police dispose de plus de niveaux de graisse, ceux-ci sont ignorés pour le calcul des niveaux relatifs. <table class="standard-table"> <thead> @@ -139,7 +135,7 @@ Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau ### Correspondance entre les valeurs numériques et les noms communément utilisés -Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (_NdT : les noms sont laissés en anglais car généralement utilisés tels quels_) : +Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (_NdT : les noms sont laissés en anglais car généralement utilisés tels quels_) (voir [la spécification OpenType](https://docs.microsoft.com/typography/opentype/spec/os2#usweightclass)) : | Valeur | Nom communément utilisé | | ------ | --------------------------- | @@ -152,112 +148,34 @@ Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, commun | 700 | _Bold_ | | 800 | _Extra Bold (Ultra Bold)_ | | 900 | _Black (Heavy)_ | - -### Interpolation - -Une valeur `font-weight` est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure. +| 950 | _Extra Black (Ultra Black)_ | ### Polices variables -La plupart des polices possèdent des niveaux de graisses qui correspondent aux [niveaux communément utilisés](#communs). Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée. +La plupart des polices possèdent des niveaux de graisses qui correspondent aux niveaux communément utilisés (voir tableau précédent). Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée. Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wght` qui est utilisé afin d'implémenter les variations de largeur. -Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification _CSS Fonts_ de niveau 4. - -{{EmbedLiveSample("Polices_variables", 1200, 180, "", "", "example-outcome-frame")}} - -#### HTML - -```html -<header> - <input type="range" id="weight" name="weight" min="1" max="1000" /> - <label for="weight">Weight</label> -</header> -<div class="container"> - <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p> -</div> -``` - -#### CSS - -```css -/* -Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans) -and is used here under the terms of its license: -https://github.com/LettError/mutatorSans/blob/master/LICENSE -*/ - -@font-face { - src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf'); - font-family:'MutatorSans'; - font-style: normal; -} - -label { - font: 1rem monospace; - white-space: nowrap; -} - -.container { - max-height: 150px; - overflow-y: auto; -} - -.sample { - text-transform: uppercase; - font: 1.5rem 'MutatorSans', sans-serif; -} -``` - -```css hidden -html, body { - max-height: 100vh; - max-width: 100vw; - overflow: hidden; -} - -body { - display: flex; - flex-direction: column; -} - -header { - margin-bottom: 1.5rem; -} +Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification _CSS Fonts_ de niveau 4 pour laquelle `font-weight` peut prendre une valeur numérique entre 1 et 1000. La démonstration commence avec `font-weight: 500;` et vous pouvez changer la valeur pour voir l'effet sur le texte. -.container { - flex-grow: 1; -} - -.container > p { - margin-top: 0; - margin-bottom: 0; -} -``` +{{EmbedGHLiveSample("css-examples/variable-fonts/font-weight.html", '100%', 860)}} -#### JavaScript +## Accessibilité -```js -let weightLabel = document.querySelector('label[for="weight"]'); -let weightInput = document.querySelector('#weight'); -let sampleText = document.querySelector('.sample'); +Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec `font-weight` qui vaut `100` ou `200`, notamment [si le contraste entre le texte et l'arrière-plan est faible](/fr/docs/Web/CSS/color#accessibilité). -function update() { - weightLabel.textContent = `font-weight: ${weightInput.value};`; - sampleText.style.fontWeight = weightInput.value; -} +- [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) +- [Comprendre les critères de succès 1.4.8 — Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) -weightInput.addEventListener('input', update); +## Définition formelle -update(); -``` +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} -## Exemples +## Exemple ### HTML @@ -266,8 +184,8 @@ update(); Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in - it, 'and what is the use of a book,' thought Alice 'without pictures or - conversations?' + it, "and what is the use of a book," thought Alice "without pictures or + conversations?" </p> <div>I'm heavy<br/> @@ -278,19 +196,19 @@ update(); ### CSS ```css -/* Le texte du paragraphe est gras. */ +/* Le texte du paragraphe est en gras. */ p { font-weight: bold; } -/* Le texte du div est deux niveaux plus sombres - mais moins gras qu'une graisse normale. */ +/* Le texte du div utilise plus fort que + normal mais moins fort que standard. */ div { font-weight: 600; } -/* Le texte dans le span est un niveau plus - clair que le parent. */ +/* Le texte du span utilise un niveau de graisse + plus léger que son parent. */ span { font-weight: lighter; } @@ -298,27 +216,18 @@ span { ### Résultat -{{EmbedLiveSample("Exemples","400","300")}} - -## Accessibilité - -Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec `font-weight` qui vaut `100` ou `200`, notamment [si le contraste entre le texte et l'arrière-plan est faible](/fr/docs/Web/CSS/color#accessibilité). - -- [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.8 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) +{{EmbedLiveSample("","400","300")}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}} | {{Spec2('CSS4 Fonts')}} | Définition de `font-weight` qui précise que la propriété peut utiliser des valeurs comprises entre `1` et `1000`. | -| {{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}} | {{Spec2('CSS3 Fonts')}} | Aucun changement. | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}} | {{Spec2('CSS3 Transitions')}} | `font-weight` peut désormais être animée. | -| {{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}} | {{Spec2('CSS2.1')}} | Aucun changement. | -| {{SpecName('CSS1', '#font-weight', 'font-weight')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.font-weight")}} +{{Compat}} + +## Voir aussi + +- [`font-style`](/fr/docs/Web/CSS/font-style) +- [`font-family`](/fr/docs/Web/CSS/font-family) +- [Apprendre — Notions fondamentales sur le texte et la mise en forme avec les polices](/fr/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/fr/web/css/image-orientation/index.md b/files/fr/web/css/image-orientation/index.md index af3f7d39c3..9b6da870a6 100644 --- a/files/fr/web/css/image-orientation/index.md +++ b/files/fr/web/css/image-orientation/index.md @@ -1,40 +1,23 @@ --- title: image-orientation slug: Web/CSS/image-orientation -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/image-orientation +browser-compat: css.properties.image-orientation --- {{CSSRef}} -La propriété **`image-orientation`** décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction `rotate`. +La propriété [CSS](/fr/docs/Web/CSS) **`image-orientation`** décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. -> **Attention :** Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être `from-image`). ```css -/* Valeurs d'angle */ -/* Type <angle> */ -image-orientation: 0deg; -image-orientation: 6.4deg; /* Arrondie à 0deg */ -image-orientation: -90deg; /* Équivalent à 270deg, la - valeur calculée normalisée */ - /* Valeurs avec un mot-clé */ -image-orientation: from-image; /* Utilise les données EXIF - de l'image */ -image-orientation: flip; /* Pas de rotation mais un - retournement horizontal */ - -/* Valeurs avec deux arguments */ -image-orientation: 90deg flip; /* Rotation de 90deg, puis - retournement horizontal */ +image-orientation: none; +image-orientation: from-image; /* Les données EXIF de l'image sont utilisées. */ /* Valeurs globales */ image-orientation: inherit; image-orientation: initial; +image-orientation: revert; image-orientation: unset; ``` @@ -42,74 +25,91 @@ image-orientation: unset; ### Valeurs +- `none` + - : Aucune rotation supplémentaire n'est appliquée. L'image est orientée telle quelle ou comme indiquée par les autres propriétés CSS. - `from-image` - - : Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée. -- `<angle>` - - : Une valeur de type {{cssxref("<angle>")}} qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche. -- `flip` - - : L'image est retournée horizontalement (comme une réflexion) après que la rotation d'angle indiqué par le premier paramètre ait été appliquée. Si aucun argument d'angle n'a été fourni, la valeur `0deg` sera utilisée. + - : La valeur initiale par défaut. Ce sont [les informations EXIF](https://fr.wikipedia.org/wiki/Exchangeable_image_file_format) contenues dans l'image qui sont utilisées afin de tourner l'image correctement. -### Syntaxe formelle +## Description -{{csssyntax}} +Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger une orientation erronée. -## Notes d'utilisation +Pour tout autre usage, on utilisera la propriété [`transform`](/fr/docs/Web/CSS/transform) avec le mot-clé `rotate` afin d'indiquer une rotation. Ces autres usages incluent les modifications volontaires de l'orientation de l'image ou les changements nécessaires à l'impression portrait/paysage. -Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger un orientation erronée. C'est pour cette raison que la valeur est arrondie au quart de tour le plus proche. +Lorsqu'elle est utilisée avec d'autres propriétés CSS (comme [`transform-function`](/fr/docs/Web/CSS/transform-function)), la rotation fournie par `image-orientation` est appliquée avant toute autre transformation. -De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait. `image-orientation` ne modifie que les images, il faudrait apporter les modifications au niveau de la disposition. +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle + +{{csssyntax}} ## Exemples -### CSS +### Orienter une image à partir des données qu'elle contient + +L'image suivante a suivi une rotation de 180° et la propriété `image-orientation` est utilisée pour corriger son orientation à partir des données EXIF de l'image. En passant la valeur de la propriété `image-orientation` à `none`, vous pourrez voir l'effet de la propriété. + +#### CSS ```css #image { - /* Peut-être modifiée dans l'exemple */ - image-orientation: flip; + image-orientation: from-image; /* Peut être édité dans l'exemple */ +} +``` + +```css hidden +img { + margin: .5rem 0; +} + +label { + font-family: monospace; } ``` ```html hidden -<img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg" - alt="Orientation déterminée à partir de l'image"/> -<select id="imageOrientation"> - <option value="from-image">from-image</option> - <option value="90deg">90deg</option> - <option value="flip" selected>flip</option> -</select> +<img id="image" src="oriole.jpg" + alt="Orientation obtenue à partir de l'image"> + +<div> + <input type="radio" id="from-image" name="orientation" value="from-image" + checked> + <label for="from-image">from-image</label> +</div> + +<div> + <input type="radio" id="none" name="orientation" value="none"> + <label for="none">none</label> +</div> ``` ```js hidden -var imageOrientation = document.getElementById("imageOrientation"); -imageOrientation.addEventListener("change", function (evt) { +document.addEventListener('change', evt => { document.getElementById("image").style.imageOrientation = evt.target.value; }); ``` -### Résultat +#### Résultat -{{EmbedLiveSample("Exemples", "100%", 240)}} +{{EmbedLiveSample("", "100%", 900)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------- | -| {{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}} | {{Spec2('CSS4 Images')}} | Ajout des mots-clés `from-image` et `flip`. | -| {{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}} | {{Spec2('CSS3 Images')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.image-orientation")}} +{{Compat}} ## Voir aussi -- {{cssxref("object-fit")}} -- {{cssxref("object-position")}} -- {{cssxref("image-orientation")}} -- {{cssxref("image-rendering")}} -- {{cssxref("image-resolution")}} -- {{cssxref("transform")}} -- {{cssxref("rotate")}} +- Les autres propriétés CSS associées aux images : + - [`object-fit`](/fr/docs/Web/CSS/object-fit) + - [`object-position`](/fr/docs/Web/CSS/object-position) + - [`image-rendering`](/fr/docs/Web/CSS/Image-rendering) + - [`image-resolution`](/fr/docs/Web/CSS/image-resolution) +- [`transform`](/fr/docs/Web/CSS/transform) +- [`rotate`](/fr/docs/Web/CSS/rotate) diff --git a/files/fr/web/css/image-rendering/index.md b/files/fr/web/css/image-rendering/index.md index c5e83f68db..754b1d9b9e 100644 --- a/files/fr/web/css/image-rendering/index.md +++ b/files/fr/web/css/image-rendering/index.md @@ -1,17 +1,16 @@ --- title: image-rendering slug: Web/CSS/Image-rendering -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/image-rendering +browser-compat: css.properties.image-rendering --- {{CSSRef}} -La propriété **`image-rendering`** fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments fils. +La propriété [CSS](/fr/docs/Web/CSS) **`image-rendering`** fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments descendants de l'élément ciblé. -L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes que la taille naturelle de l'image ou si l'utilisateur interagit en zoomant par exemple. Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. Si, par exemple, la taille naturelle de l'image est `100px` par `100px` et que l'auteur indique les dimensions `200px` par `200px` (ou `50px` par `50px`), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple). +{{EmbedInteractiveExample("pages/css/image-rendering.html")}} + +L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes de la taille naturelle de l'image, ou si la personne visualisant l'image interagit en zoomant par exemple. Si, par exemple, la taille naturelle de l'image est `100×100px` et que l'auteur indique les dimensions `200×200px` (ou `50×50px`), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple). Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. ## Syntaxe @@ -24,86 +23,87 @@ image-rendering: pixelated; /* Valeurs globales */ image-rendering: inherit; image-rendering: initial; +image-rendering: revert; image-rendering: unset; ``` ### Valeurs -- **`auto`** - - : L'image devrait être redimensionnée grâce à un algorithme qui optimise l'apparence de l'image. Les algorithmes de redimensionnement « doux » comme l'interpolation bilinéaire, sont acceptables. Ces algorithmes sont destinés à être utilisés sur des images comme des photos. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire. -- **`crisp-edges`** - - : L'algorithme utilisé doit avant tout préserver le contraste et les bords de l'image, il ne doit pas ajouter de couleur intermédiaire ou de flou. Cette valeur est conçue pour être utilisée sur du _pixel art_. Les algorithmes éligibles sont par exemple l'interpolation au plus proche voisin, les familles d'algorithmes 2×SaI et [hqx](https://en.wikipedia.org/wiki/Hqx). -- `high-quality`{{Experimental_inline}} +- `auto` + - : L'algorithme utilisé dépend de l'agent utilisateur. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire. +- `crisp-edges` + - : L'algorithme utilisé est l'interpolation au plus proche voisin. +- `high-quality` {{Experimental_inline}} - : Cette valeur est proche de `smooth` mais favorise un redimensionnement avec une qualité élevée. Si les ressources du système sont limitées, ce sont les images ciblées avec `high-quality` qui devraient être priorisées par rapport aux autres s'il est nécessaire de dégrader la qualité. -- **`pixelated`** - - : Lorsque l'image est agrandie c'est l'algorithme « du plus proche voisin » qui doit être utilisé afin que l'image apparaisse comme composée de grands pixels. Lorsque l'image est réduite, le comportement est le même que `auto`. -- `smooth`{{Experimental_inline}} - - : L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos. +- `pixelated` + - : L'algorithme utilisé est l'interpolation au plus proche voisin. L'image est agrandie au multiple entier de taille qui est supérieur ou égal à sa taille originale puis réduite à la taille cible, comme pour `smooth`. Lorsque l'agrandissement demandé est un multiple entier de la taille originale, l'effet obtenu sera le même qu'avec `crisp-edges` +- `smooth` {{Experimental_inline}} + - : L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (l'interpolation bilinéaire par exemple) sont acceptables. Cette valeur est destinée aux images telles que les photos. > **Note :** Les valeurs `optimizeQuality` et `optimizeSpeed` qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de `smooth` et `pixelated`. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Paramétrer l'algorithme de redimensionnement des images -```css -.pixels_petits { - height: 50px; - width: 50px; -} +En pratique, les valeurs `pixelated` et `crisp-edges` peuvent être combinées afin de fournir des alternatives l'une à l'autre. L'API [Canvas](/fr/docs/Web/API/Canvas_API) peut fournir [une solution alternative pour `pixelated`](http://phrogz.net/tmp/canvas_image_zoom.html) via une manipulation manuelle des données de l'image ou avec [`imageSmoothingEnabled`](/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled). -.pixels_grands { - height: 69px; - width: 69px; -} +```html hidden +<div> + <img class="auto" alt="auto" src="blumen.jpg" /> + <img class="pixelated" alt="pixelated" src="blumen.jpg" /> + <img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" /> +</div> +``` -.chapeau_petit { - height: 89px; - width: 89px; +```css hidden +img { + height: 200px; } -.defaut { +``` + +#### CSS + +```css +.auto { image-rendering: auto; } -.contraste { - image-rendering: crisp-edges; +.pixelated { + -ms-interpolation-mode: nearest-neighbor; + image-rendering: pixelated; } -``` -### HTML - -```html -<p>Avec <code>auto</code> :</p> -<img class="pixels_petits defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/> -<img class="pixels_grands defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/> -<img class="chapeau_petit defaut" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/> - -<p>Avec <code>crisp-edges</code> :</p> -<img class="pixels_petits contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/> -<img class="pixels_grands contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/> -<img class="chapeau_petit contraste" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/> +.crisp-edges { + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; +} ``` -### Résultat - -{{EmbedLiveSample("Exemples","100%","100%")}} +#### Résultat -> **Note :** En pratique, les règles `pixelated` et `crisp-edges` peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et _vice versa_). Si besoin, un {{HTMLElement("canvas")}} peut fournir [une alternative pour les valeurs `crisp-edge` et `optimize-contrast`](http://phrogz.net/tmp/canvas_image_zoom.html) via la manipulation manuelle des données de l'image ou avec [`imageSmoothingEnabled`](/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled). +{{EmbedLiveSample('',200,250)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}} | {{Spec2('CSS3 Images')}} | Définition initiale. | +{{Specifications}} -> **Note :** Cette valeur était, initialement, proche de la propriété SVG `image-rendering`. Cependant, ces valeurs ont « divergé » et sont assez différentes désormais. +## Compatibilité des navigateurs -{{cssinfo}} +{{Compat}} -## Compatibilité des navigateurs +## Voir aussi -{{Compat("css.properties.image-rendering")}} +- D'autres propriétés CSS utilisées avec les images : + - [`object-fit`](/fr/docs/Web/CSS/object-fit) + - [`object-position`](/fr/docs/Web/CSS/object-position) + - [`image-orientation`](/fr/docs/Web/CSS/image-orientation) + - [`image-resolution`](/fr/docs/Web/CSS/image-resolution) diff --git a/files/fr/web/css/list-style-image/index.md b/files/fr/web/css/list-style-image/index.md index f7c9dc9012..a9a4a8862d 100644 --- a/files/fr/web/css/list-style-image/index.md +++ b/files/fr/web/css/list-style-image/index.md @@ -2,14 +2,17 @@ title: list-style-image slug: Web/CSS/list-style-image translation_of: Web/CSS/list-style-image +browser-compat: css.properties.list-style-image --- {{CSSRef}} -La propriété **`list-style-image`** définit l'image utilisée comme puce devant les [éléments de listes](fr/HTML/%c3%89l%c3%a9ment/li). On peut également utiliser la propriété raccourcie {{cssxref("list-style")}}. +La propriété [CSS](/fr/docs/Web/CSS) **`list-style-image`** définit l'image utilisée comme puce devant les [éléments de listes](/fr/docs/Web/HTML/Element/li). + +On peut également utiliser la propriété raccourcie [`list-style`](/fr/docs/Web/CSS/list-style). {{EmbedInteractiveExample("pages/css/list-style-image.html")}} -> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}` : list-item``; `}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}). +> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels [`display`](/fr/docs/Web/CSS/display) vaut `list-item`). Par défaut, cela inclut les éléments [`<li>`](/fr/docs/Web/HTML/Element/li). Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à [`<ol>`](/fr/docs/Web/HTML/Element/ol) ou à [`<ul>`](/fr/docs/Web/HTML/Element/ul)). ## Syntaxe @@ -20,62 +23,91 @@ list-style-image: none; /* Valeurs pointant vers une image */ list-style-image: url('starsolid.gif'); +/* Valeurs avec une image */ +list-style-image: linear-gradient(to left bottom, red, blue); + /* Valeurs globales */ list-style-image: inherit; list-style-image: initial; +list-style-image: revert; list-style-image: unset; ``` ### Valeurs -- `url` - - : Emplacement de l'image à utiliser comme puce (cf. {{cssxref("<url>")}} pour plus de détails sur les valeurs possibles pour ce type). +- [`<image>`](/fr/docs/Web/CSS/image) + - : Une valeur représentant une image valide, qui sera utilisée comme puce. - `none` - - : Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec {{cssxref("list-style-type")}} sera utilisé à la place. + - : Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec [`list-style-type`](/fr/docs/Web/CSS/list-style-type) sera utilisé à la place. + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Utiliser une URL + +#### HTML + +```html +<ul> + <li>Élément 1</li> + <li>Élément 2</li> +</ul> +``` + +#### CSS ```css ul { - list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); + list-style-image: url("starsolid.gif"); } ``` -### HTML +#### Résultat + +{{EmbedLiveSample('')}} + +### Utiliser un dégradé + +#### HTML ```html <ul> - <li>Élément 1</li> - <li>Élément 2</li> + <li>Élément 1</li> + <li>Élément 2</li> </ul> ``` -### Résultat +#### CSS -{{EmbedLiveSample('Exemples')}} +```css +ul { + font-size: 200%; + list-style-image: linear-gradient(to left bottom, red, blue); +} +``` -## Spécifications +#### Résultat -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------ | -| {{SpecName('CSS3 Lists', '#propdef-list-style-image', 'list-style-image')}} | {{Spec2('CSS3 Lists')}} | Propriété étendue pour supporter n'importe quel type {{cssxref("<image>")}}. | -| {{SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image')}} | {{Spec2('CSS2.1')}} | Définition initiale. | +{{EmbedLiveSample('')}} -{{cssinfo}} +## Spécifications + +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.list-style-image")}} +{{Compat}} ## Voir aussi -- {{cssxref("list-style")}} -- {{cssxref("list-style-type")}} -- {{cssxref("list-style-position")}} -- La fonction {{cssxref("url()", "url()")}} +- [`list-style`](/fr/docs/Web/CSS/list-style) +- [`list-style-type`](/fr/docs/Web/CSS/list-style-type) +- [`list-style-position`](/fr/docs/Web/CSS/list-style-position) +- La fonction [`url()`](/fr/docs/Web/CSS/url()) diff --git a/files/fr/web/css/mask-border/index.md b/files/fr/web/css/mask-border/index.md index 6b765250be..29151b0da1 100644 --- a/files/fr/web/css/mask-border/index.md +++ b/files/fr/web/css/mask-border/index.md @@ -4,11 +4,20 @@ slug: Web/CSS/mask-border translation_of: Web/CSS/mask-border browser-compat: css.properties.mask-border --- -{{cssref}}{{SeeCompatTable}} +{{cssref}} -La propriété CSS **`mask-border`** permet de créer un masque le long de la bordure d'un élément. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-border`** est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de créer un masque le long de la bordure d'un élément. -Cette propriété est une propriété [raccourcie](/fr/docs/Web/CSS/Shorthand_properties) pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur [valeur initiale](/fr/docs/Web/CSS/initial_value). +## Propriétés détaillées correspondantes + +Cette propriété est une propriété raccourcie pour les propriétés suivantes : + +- [`mask-border-mode`](/fr/docs/Web/CSS/mask-border-mode). +- [`mask-border-outset`](/fr/docs/Web/CSS/mask-border-outset) +- [`mask-border-repeat`](/fr/docs/Web/CSS/mask-border-repeat) +- [`mask-border-slice`](/fr/docs/Web/CSS/mask-border-slice) +- [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source) +- [`mask-border-width`](/fr/docs/Web/CSS/mask-border-width) ## Syntaxe @@ -24,24 +33,34 @@ mask-border: url('border-mask.png') 25 / 35px; /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; + +/* Valeurs globales */ +mask-border: inherit; +mask-border: initial; +mask-border: revert; +mask-border: unset; ``` ### Valeurs - `<'mask-border-source'>` - - : L'image source, pour plus d'informations, voir {{cssxref("mask-border-source")}}. + - : L'image source. Voir [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source). - `<'mask-border-slice'>` - - : Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-slice")}}. + - : Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir [`mask-border-slice`](/fr/docs/Web/CSS/mask-border-slice). - `<'mask-border-width'>` - - : La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-width")}}. + - : La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir [`mask-border-width`](/fr/docs/Web/CSS/mask-border-width). - `<'mask-border-outset'>` - - : La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-outset")}}. + - : La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir [`mask-border-outset`](/fr/docs/Web/CSS/mask-border-outset). - `<'mask-border-repeat'>` - - : Cette valeur indiique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir {{cssxref("mask-border-repeat")}}. + - : Cette valeur indique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir [`mask-border-repeat`](/fr/docs/Web/CSS/mask-border-repeat). - `<'mask-border-mode'>` - - : Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir {{cssxref("mask-border-mode")}}. + - : Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir [`mask-border-mode`](/fr/docs/Web/CSS/mask-border-mode). + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -49,41 +68,13 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; ### Image matricielle (_bitmap_) -Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large : +Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :  -#### HTML - -```html -<div id="bitmap"> - Cet élément est entouré d'un masque de bordure - matriciel. C'est pas mal. -</div> -``` - -#### CSS - Pour avoir un seul losange, on divise le carré en 3 (avec la valeur `30`). On utilise la valeur `round` pour que le masque soit réparti également de part et d'autre. -```css -div { - width: 200px; - background-color: lavender; - border: 18px solid salmon; - padding: 10px; - - mask-border: - url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png") /* source */ - 30 / /* slice */ - 36px 18px /* width */ - round; /* repeat */ -} -``` - -#### Résultat - -{{EmbedLiveSample("Image_matricielle_(bitmap)")}} +{{EmbedGHLiveSample("css-examples/masking/mask-border.html", '100%', 800)}} ## Spécifications @@ -92,3 +83,11 @@ div { ## Compatibilité des navigateurs {{Compat}} + +## Voir aussi + +- [`mask-border-mode`](/fr/docs/Web/CSS/mask-border-mode) +- [`mask-border-outset`](/fr/docs/Web/CSS/mask-border-outset) +- [`mask-border-repeat`](/fr/docs/Web/CSS/mask-border-repeat) +- [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source) +- [`mask-border-width`](/fr/docs/Web/CSS/mask-border-width) diff --git a/files/fr/web/css/mask-clip/index.md b/files/fr/web/css/mask-clip/index.md index fd5257c0ad..13e84c6be1 100644 --- a/files/fr/web/css/mask-clip/index.md +++ b/files/fr/web/css/mask-clip/index.md @@ -1,20 +1,12 @@ --- title: mask-clip slug: Web/CSS/mask-clip -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-clip +browser-compat: css.properties.mask-clip --- {{CSSRef}} -La propriété **`mask-clip`** définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone. - -{{cssinfo}} - -## Syntaxe +La propriété [CSS](/fr/docs/Web/CSS) **`mask-clip`** définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone. ```css /* Valeurs de type <geometry-box> */ @@ -29,19 +21,20 @@ mask-clip: view-box; /* Valeurs avec un mot-clé */ mask-clip: no-clip; -/* Valeurs multiples */ -mask-clip: padding-box, no-clip; -mask-clip: view-box, fill-box, border-box; - /* Mots-clés non-standards */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; +/* Valeurs multiples */ +mask-clip: padding-box, no-clip; +mask-clip: view-box, fill-box, border-box; + /* Valeurs globales */ mask-clip: inherit; mask-clip: initial; +mask-clip: revert; mask-clip: unset; ``` @@ -52,65 +45,52 @@ Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une ### Valeurs - `content-box` - - : La partie qui est « peinte » est rognée sur la boîte de contenu. + - : La partie qui est peinte est rognée sur la boîte de contenu. - `padding-box` - - : La partie qui est « peinte » est rognée sur la boîte de _padding_. + - : La partie qui est peinte est rognée sur la boîte de remplissage (<i lang="en">padding</i>). - `border-box` - - : La partie qui est « peinte » est rognée sur la boîte de bordure. + - : La partie qui est peinte est rognée sur la boîte de bordure. - `margin-box` - - : La partie qui est « peinte » est rognée sur la boîte de marge. + - : La partie qui est peinte est rognée sur la boîte de marge. - `fill-box` - - : La partie qui est « peinte » est rognée sur la boîte contenant l'objet. + - : La partie qui est peinte est rognée sur la boîte contenant l'objet. - `stroke-box` - - : La partie qui est « peinte » est rognée sur la boîte contenant le contour. + - : La partie qui est peinte est rognée sur la boîte contenant le contour. - `view-box` - - : C'est le _viewport_ du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée le _viewport_, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut `viewBox`. + - : C'est le <i lang="en">viewport</i> du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée le <i lang="en">viewport</i>, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîte sont basées sur la hauteur et la largeur de l'attribut `viewBox`. - `no-clip` - - : La partie qui est « peinte » n'est pas rognée. + - : La partie qui est peinte n'est pas rognée. +- `border` {{non-standard_inline}} + - : Synonyme de `border-box`. +- `padding` {{non-standard_inline}} + - : Synonyme de `padding-box`. +- `content` {{non-standard_inline}} + - : Synonyme de `content-box`. +- `text` {{non-standard_inline}} + - : L'image est rognée selon la forme du texte de l'élément. + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS - -```css -#masked { - width: 100px; - height: 100px; - background-color: #8cffa0; - margin: 20px; - border: 20px solid #8ca0ff; - padding: 20px; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; - -webkit-mask-clip: border; - mask-clip: border-box; -} -``` - -### HTML - -```html -<div id="masked"></div> -``` - -### Résultat +Vous pouvez modifier la valeur `mask-clip` dans l'exemple qui suit. Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de `-webkit-mask-clip`. -{{EmbedLiveSample("Exemples", "220px", "250px")}} +{{EmbedGHLiveSample("css-examples/masking/mask-clip.html", '100%', 800)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | ------------------- | -| {{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}} | {{Spec2("CSS Masks")}} | Définition initiale | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-clip")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage en CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)
\ No newline at end of file diff --git a/files/fr/web/css/mask-composite/index.md b/files/fr/web/css/mask-composite/index.md index 1843872679..0bd2f96551 100644 --- a/files/fr/web/css/mask-composite/index.md +++ b/files/fr/web/css/mask-composite/index.md @@ -1,16 +1,12 @@ --- title: mask-composite slug: Web/CSS/mask-composite -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-composite +browser-compat: css.properties.mask-composite --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété **`mask-composite`** permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-composite`** permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous. ```css /* Valeurs avec un mot-clé*/ @@ -22,6 +18,7 @@ mask-composite: exclude; /* Valeurs globales */ mask-composite: inherit; mask-composite: initial; +mask-composite: revert; mask-composite: unset; ``` @@ -40,59 +37,30 @@ La couche du masque de l'élément est appelée _source_ et les couches inférie - `intersect` - : Les endroits de la source qui chevauchent la destination prennent le pas sur la destination. - `exclude` - - : Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.The non-overlapping regions of source and destination are combined. + - : Les régions de la source et de la destination qui ne se chevauchent pas sont combinées. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} - -## Exemples +{{cssinfo}} -### CSS +## Syntaxe formelle -```css -#masked { - width: 100px; - height: 100px; - background-color: #8cffa0; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg), - url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg), - url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-size: 100% 100%; - -webkit-mask-composite: add; - mask-composite: add; /* peut-être modifiée dans la démo */ -} -``` +{{csssyntax}}} -```html hidden -<div id="masked"> -</div> -<select id="compositeMode"> - <option value="add">add</option> - <option value="subtract">subtract</option> - <option value="intersect">intersect</option> - <option value="exclude">exclude</option> -</select> -``` +## Exemples -```js hidden -var clipBox = document.getElementById("compositeMode"); -clipBox.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskClip = evt.target.value; -}); -``` +### Composer des couches de masques de façon additive -{{EmbedLiveSample("Exemples", "200px", "200px")}} +{{EmbedGHLiveSample("css-examples/masking/mask-composite.html", '100%', 550)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | -| {{SpecName("CSS Masks", "#the-mask-composite", "mask-composite")}} | {{Spec2("CSS Masks")}} | Définition initiale | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-composite")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) diff --git a/files/fr/web/css/mask-image/index.md b/files/fr/web/css/mask-image/index.md index 701f385f6b..6d3402ebc7 100644 --- a/files/fr/web/css/mask-image/index.md +++ b/files/fr/web/css/mask-image/index.md @@ -1,18 +1,14 @@ --- title: mask-image slug: Web/CSS/mask-image -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-image +browser-compat: css.properties.mask-image --- {{CSSRef}} -La propriété CSS **`mask-image`** définit l'image qui sera utilisée comme masque pour un élément. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-image`** définit l'image qui sera utilisée comme masque pour un élément. -## Syntaxe +Par défaut, cela signifie que le canal alpha de l'image du masque sera multiplié par le canal alpha de l'élément. Cette combinaison peut être contrôlée avec la propriété [`mask-mode`](/fr/docs/Web/CSS/mask-mode). ```css /* Valeur avec un mot-clé */ @@ -26,57 +22,49 @@ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* Gestion de plusieurs masques */ -mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); +mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* Valeurs globales */ mask-image: inherit; mask-image: initial; +mask-image: revert; mask-image: unset; ``` +## Syntaxe + ### Valeurs - `none` - : Le masque défini par ce mot-clé sera une image noire transparente. - `<mask-source>` - - : Une référence {{cssxref("<url>")}} vers un masque ({{SVGElement("mask")}}) ou une image CSS. -- {{cssxref("<image>")}} + - : Une référence [`url()`](/fr/docs/Web/CSS/url()) vers un masque SVG ([`<mask>`](/fr/docs/Web/SVG/Element/mask)) ou une image CSS. +- [`<image>`](/fr/docs/Web/CSS/image) - : Une image utilisée pour le masque. -### Syntaxe formelle - -{{csssyntax}} +## Définition formelle -## Exemples +{{cssinfo}} -### CSS +## Syntaxe formelle -```css -#masked { - width: 100px; - height: 100px; - background-color: #8cffa0; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); -} -``` +{{csssyntax}} -### HTML +## Exemples -```html -<div id="masked"></div> -``` +### Définir une image de masque avec une URL -{{EmbedLiveSample("Exemples", "100px", "100px",'', '', 'hide-codepen-jsfiddle') }} +{{EmbedGHLiveSample("css-examples/masking/mask-image.html", '100%', 560)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-image", "mask-image")}} | {{Spec2("CSS Masks")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-image")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) +- [Appliquer des effets à des images avec la propriété CSS `mask-image` (en anglais)](https://web.dev/css-masking/) diff --git a/files/fr/web/css/mask-mode/index.md b/files/fr/web/css/mask-mode/index.md index a6d59e866f..6e1515cfc9 100644 --- a/files/fr/web/css/mask-mode/index.md +++ b/files/fr/web/css/mask-mode/index.md @@ -1,16 +1,12 @@ --- title: mask-mode slug: Web/CSS/mask-mode -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-mode +browser-compat: css.properties.mask-mode --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété **`mask-mode`** détermine si le masque défini par {{cssxref("mask-image")}} est considéré comme un masque de luminance ou un masque alpha (transparence). +La propriété [CSS](/fr/docs/Web/CSS) **`mask-mode`** détermine si le masque défini par [`mask-image`](/fr/docs/Web/CSS/mask-image) est considéré comme un masque de luminance ou un masque alpha (transparence). ```css /* Valeurs avec un mot-clé */ @@ -24,6 +20,7 @@ mask-mode: alpha, match-source; /* Valeurs globales */ mask-mode: inherit; mask-mode: initial; +mask-mode: revert; mask-mode: unset; ``` @@ -34,85 +31,37 @@ La propriété `mask-mode` est définie avec un ou plusieurs mots-clés parmi ce ### Valeurs - `alpha` - - : Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal de transparence) qui sont utilisées comme valeurs de masque. + - : Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal d'opacité) qui sont utilisées comme valeurs de masque. - `luminance` - : Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque. - `match-source` - - : Si la propriété {{cssxref("mask-image")}} est de type `<mask-source>`, les valeurs de luminance de l'image doivent être utilisée comme valeurs pour le masque. + - : Si la propriété [`mask-image`](/fr/docs/Web/CSS/mask-image) est de type `<mask-source>`, les valeurs de luminance de l'image doivent être utilisées comme valeurs pour le masque. - Si elle est de type {{cssxref("<image>")}}, ce seront les valeurs de transparence (canal alpha) qui seront utilisées. + Si elle est de type [`<image>`](/fr/docs/Web/CSS/image), ce seront les valeurs de transparence (canal alpha) qui seront utilisées. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} - -## Exemples - -### Alpha - -#### CSS - -```css -#masked { - width: 100px; - height: 100px; - background: blue linear-gradient(red, blue); - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; - -webkit-mask-mode: alpha; - mask-mode: alpha; -} -``` - -#### HTML - -```html -<div id="masked"></div> -``` - -#### Résultat - -{{EmbedLiveSample("Alpha", "110px", "130px")}} - -### Luminance - -#### CSS +{{cssinfo}} -```css -#masked { - width: 100px; - height: 100px; - background-color: #8cffa0; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; - -webkit-mask-mode: luminance; - mask-mode: luminance; -} -``` +## Syntaxe formelle -#### HTML +{{csssyntax}} -```html -<div id="masked"></div> -``` +## Exemples -#### Résultat +### Utiliser le mode de masque alpha -{{EmbedLiveSample("Luminance", "110px", "130px")}} +{{EmbedGHLiveSample("css-examples/masking/mask-mode.html", '100%', 760)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}} | {{Spec2("CSS Masks")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-mode")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) diff --git a/files/fr/web/css/mask-origin/index.md b/files/fr/web/css/mask-origin/index.md index 20424606ee..9a0e4a7d98 100644 --- a/files/fr/web/css/mask-origin/index.md +++ b/files/fr/web/css/mask-origin/index.md @@ -1,16 +1,12 @@ --- title: mask-origin slug: Web/CSS/mask-origin -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-origin +browser-compat: css.properties.mask-origin --- {{CSSRef}} -La propriété **`mask-origin`** permet de définir l'origine à partir de laquelle placer le masque. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-origin`** permet de définir l'origine à partir de laquelle placer le masque. ```css /* Valeurs avec un mot-clé */ @@ -27,17 +23,18 @@ mask-origin: padding-box, content-box; mask-origin: view-box, fill-box, border-box; /* Valeurs non-standards */ - -webkit-mask-origin: content; - -webkit-mask-origin: padding; - -webkit-mask-origin: border; +-webkit-mask-origin: content; +-webkit-mask-origin: padding; +-webkit-mask-origin: border; /* Valeurs globales */ mask-origin: inherit; mask-origin: initial; +mask-origin: revert; mask-origin: unset; ``` -Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via {{cssxref("mask-image")}}. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes _inline_ ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles {{cssxref("box-decoration-break")}} agira pour déterminer la zone de positionnement du masque. +Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via [`mask-image`](/fr/docs/Web/CSS/mask-image). Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes en lignes ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles [`box-decoration-break`](/fr/docs/Web/CSS/box-decoration-break) agira pour déterminer la zone de positionnement du masque. ## Syntaxe @@ -48,22 +45,22 @@ Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une - `content-box` - : La position de la zone est relative à la boîte de contenu. - `padding-box` - - : La position de la zone est relative à la boîte de remplissage (_padding_). Pour les boîtes simples, `0 0` désigne le coin en haut à gauche de la bordure de cette boîte et `100% 100%` le coin en bas à droite. + - : La position de la zone est relative à la boîte de remplissage (<i lang="en">padding</i>). Pour les boîtes simples, `0 0` désigne le coin en haut à gauche de la bordure de cette boîte et `100% 100%` le coin en bas à droite. - `border-box` - : La position de la zone est relative à la boîte de bordure. - `margin-box` - : La position de la zone est relative à la boîte de marge. - `fill-box` - - : La position de la zone est relative à la boîte liée à l'objet (_[bounding box](https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox)_). + - : La position de la zone est relative à la boîte liée à l'objet. - `stroke-box` - - : La position de la zone est relative à la boîte de contour de l'objet (_[stroke bounding box](https://www.w3.org/TR/css-masking/#stroke-bounding-box)_). + - : La position de la zone est relative à la boîte de contour de l'objet. - `view-box` - - : La zone d'affichage (_viewport_) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut {{svgattr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par `viewBox`. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de `viewBox`. -- `content`{{non-standard_inline}} + - : La zone d'affichage (<i lang="en">viewport</i>) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut `viewBox` est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par `viewBox`. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de `viewBox`. +- `content` {{non-standard_inline}} - : Synonyme de `content-box`. -- `padding`{{non-standard_inline}} +- `padding` {{non-standard_inline}} - : Synonyme de `padding-box`. -- `border`{{non-standard_inline}} +- `border` {{non-standard_inline}} - : Synonyme de `border-box`. ### Syntaxe formelle @@ -72,60 +69,20 @@ Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une ## Exemples -### CSS +### Définir l'origine du masque avec `border-box` -```css -#masked { - width: 100px; - height: 100px; - margin: 10px; - border: 10px solid blue; - background-color: #8cffa0; - padding: 10px; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); - -webkit-mask-origin: border-box; /* À modifier dans le résultat. */ - mask-origin: border-box; /* À modifier dans le résultat. */ -} -``` - -### HTML - -```html -<div id="masked"> -</div> -<select id="origin"> - <option value="content-box">content-box</option> - <option value="padding-box">padding-box</option> - <option value="border-box" selected>border-box</option> - <option value="margin-box">margin-box</option> - <option value="fill-box">fill-box</option> - <option value="stroke-box">stroke-box</option> - <option value="view-box">view-box</option> -</select> -``` - -### JavaScript +Vous pouvez également essayer d'autres valeurs en éditant le code CSS qui suit. -```js -var origin = document.getElementById("origin"); -origin.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskOrigin = evt.target.value; -}); -``` - -### Résultat - -{{EmbedLiveSample("Exemples", 160, 200)}} +{{EmbedGHLiveSample("css-examples/masking/mask-origin.html", '100%', 600)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}} | {{Spec2("CSS Masks")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-origin")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) diff --git a/files/fr/web/css/mask-position/index.md b/files/fr/web/css/mask-position/index.md index e249dbfe7b..49cc3448e8 100644 --- a/files/fr/web/css/mask-position/index.md +++ b/files/fr/web/css/mask-position/index.md @@ -1,16 +1,12 @@ --- title: mask-position slug: Web/CSS/mask-position -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-position +browser-compat: css.properties.mask-position --- {{CSSRef}} -La propriété **`mask-position`** indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété {{cssxref("mask-origin")}}. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-position`** indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété [`mask-origin`](/fr/docs/Web/CSS/mask-origin). ```css /* Valeurs avec un mot-clé */ @@ -20,94 +16,57 @@ mask-position: left; mask-position: right; mask-position: center; -/* Valeurs en pourcentage */ -/* Type <percentage> */ +/* Valeurs de <position> */ mask-position: 25% 75%; - -/* Valeurs en longueur */ -/* Type <length> */ mask-position: 0px 0px; -mask-position: 1cm 2cm; -mask-position: 10ch 8em; +mask-position: 10% 8em; /* Valeurs multiples */ -mask-position: 0px 0px, center; +mask-position: top right; +mask-position: 1rem 1rem, center; /* Valeurs globales */ mask-position: inherit; mask-position: initial; +mask-position: revert; mask-position: unset; ``` ## Syntaxe +Cette propriété s'utilise avec une ou plusieurs valeurs de position, séparées par des virgules. + ### Valeurs - `<position>` - - : Une position CSS (type {{cssxref("<position>")}}) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément. + - : Une position CSS (type [`<position>`](/fr/docs/Web/CSS/position_value)) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} +{{cssinfo}} -## Exemples +## Syntaxe formelle -### CSS +{{csssyntax}} -```css -#wrapper { - border: 1px solid black; - width: 250px; - height: 250px; -} - -#masked { - width: 250px; - height: 250px; - background: blue linear-gradient(red, blue); - mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-repeat: no-repeat; - mask-position: top right; /* Can be changed in the live sample */ - margin-bottom: 10px; -} -``` +## Exemples -```html hidden -<div id="wrapper"> - <div id="masked"> - </div> -</div> -<select id="maskPosition"> - <option value="top">top</option> - <option value="center">center</option> - <option value="bottom">bottom</option> - <option value="top right" selected>top right</option> - <option value="center center">center center</option> - <option value="bottom left">bottom left</option> - <option value="10px 20px">10px 20px</option> - <option value="60% 20%">60% 20%</option> -</select> -``` +### Définir la position du masque -```js hidden -var maskPosition = document.getElementById("maskPosition"); -maskPosition.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskPosition = evt.target.value; -}); -``` +Dans le fragment de code qui suit, vous pouvez modifier la valeur de `mask-position` avec une des valeurs autorisées (voir ci-avant) pour observer l'effet de la propriété. -### Résultat +Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de la propriété `-webkit-mask-position`. -{{EmbedLiveSample("Exemples",200,200)}} +{{EmbedGHLiveSample("css-examples/masking/mask-position.html", '100%', 760)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-position", "mask-position")}} | {{Spec2("CSS Masks")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-position")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) diff --git a/files/fr/web/css/mask-size/index.md b/files/fr/web/css/mask-size/index.md index 52a1b29e82..78555fe987 100644 --- a/files/fr/web/css/mask-size/index.md +++ b/files/fr/web/css/mask-size/index.md @@ -1,16 +1,12 @@ --- title: mask-size slug: Web/CSS/mask-size -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-size +browser-compat: css.properties.mask-size --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété **`mask-size`** définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-size`** définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques. ```css /* Valeurs avec un mot-clé */ @@ -43,93 +39,76 @@ mask-size: 6px, auto, contain; /* Valeurs globales */ mask-size: inherit; mask-size: initial; +mask-size: revert; mask-size: unset; ``` -> **Note :** Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après `mask-size`, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie. +> **Note :** Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie [`mask`](/fr/docs/Web/CSS/mask) et que celle-ci est appliquée après `mask-size`, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie. ## Syntaxe -Une ou plusieurs valeurs `<bg-size>`, séparées par des virgules. Une valeur `<bg-size>` peut être définie de trois façons : +Une ou plusieurs valeurs `<bg-size>`, séparées par des virgules. Une valeur `<bg-size>` peut être définie de trois façons : -- avec le mot-clé [`contain`](#contain) -- avec le mot-clé [`cover`](#cover) +- avec le mot-clé `contain` +- avec le mot-clé `cover` - avec des valeurs pour la hauteur et la largeur. -Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs : +Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs : - Si une seule valeur est fournie, elle servira à définir la largeur, la hauteur vaudra alors `auto` -- Si deux valeurs sont fournies, la première définira la largeur et la seonde définira la hauteur. +- Si deux valeurs sont fournies, la première définira la largeur et la seconde définira la hauteur. Chaque valeur peut être une longueur (`<length>`), un pourcentage (`<percentage>`) ou `auto`. ### Valeurs - `<length>` - - : Une valeur de longueur (type {{cssxref("<length>")}} qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées. + - : Une valeur de longueur (type [`<length>`](/fr/docs/Web/CSS/length) qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées. - `<percentage>` - - : Une valeur de pourcentage ({{cssxref("<percentage>")}} qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par {{cssxref("mask-origin")}} par rapport à la taille de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (_padding_) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées. + - : Une valeur de pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par [`mask-origin`](/fr/docs/Web/CSS/mask-origin) par rapport à la taille de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (<i lang="en">padding</i>) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées. - `auto` - : Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions. - `contain` - - : Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le contenur. Par défaut, l'image est centrée sauf si {{cssxref("mask-position")}} indique un autre paramètre. + - : Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le conteneur. Par défaut, l'image est centrée sauf si [`mask-position`](/fr/docs/Web/CSS/mask-position) indique un autre paramètre. - `cover` - : Un mot-clé qui se comporte à l'inverse de `contain`. L'image est agrandie autant que possible et ses proportions sont conservées et elle couvre toute la surface du conteneur, si les dimensions du conteneur sont différentes, l'image est rognée sur les côtés (haut et bas ou droite et gauche). -L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (_bitmap_) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, _de facto_, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques. +L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (<i lang="en">bitmap</i>) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, _de facto_, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques. -La taille de l'image affichée pour le masque est calculée de la façon suivante : +La taille de l'image affichée pour le masque est calculée de la façon suivante : -- Si les deux composants de `mask-size` sont définis et sont différents de `auto` : +- Si les deux composants de `mask-size` sont définis et sont différents de `auto` : - : 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 `contain` ou `cover` : + - : L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrir 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 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 `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. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} - -## Exemples - -### CSS - -```css -.exemple { - height: 100px; - width: 100px; - background-color: rgb(128,128,128); +{{cssinfo}} - -webkit-mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png'); - mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png'); +## Syntaxe formelle - -webkit-mask-size: auto 50%; - mask-size: auto 50%; +{{csssyntax}} -} -``` +## Exemples -### HTML +### Définir la taille du masque en pourcentages -```html -<div class="exemple"></div> -``` +{{EmbedGHLiveSample("css-examples/masking/mask-size.html", '100%', 700)}} -### Résultat +## Spécifications -{{EmbedLiveSample("Exemples",200,200)}} +{{Specifications}} -## Spécifications +## Compatibilité des navigateurs -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-size", "mask-size")}} | {{Spec2("CSS Masks")}} | Définition initiale. | +{{Compat}} -{{cssinfo}} +## Voir aussi -## Compatibilité des navigateurs +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) -{{Compat("css.properties.mask-size")}} diff --git a/files/fr/web/css/object-fit/index.md b/files/fr/web/css/object-fit/index.md index c07c52479d..bd4a88b602 100644 --- a/files/fr/web/css/object-fit/index.md +++ b/files/fr/web/css/object-fit/index.md @@ -1,35 +1,33 @@ --- title: object-fit slug: Web/CSS/object-fit -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/object-fit +browser-compat: css.properties.object-fit --- {{CSSRef}} -La propriété CSS **`object-fit`** définit la façon dont le contenu d'un [élément remplacé](/fr/docs/Web/CSS/Élément_remplacé) ({{HTMLElement("img")}} ou {{HTMLElement("video")}} par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur. +La propriété CSS **`object-fit`** définit la façon dont le contenu d'un [élément remplacé](/fr/docs/Web/CSS/Replaced_element) ([`<img>`](/fr/docs/Web/HTML/Element/Img) ou [`<video>`](/fr/docs/Web/HTML/Element/video) par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur. {{EmbedInteractiveExample("pages/css/object-fit.html")}} Selon la valeur utilisée pour `object-fit`, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient. -> **Note :** Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-position")}}. +> **Note :** Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété [`object-position`](/fr/docs/Web/CSS/object-position). ## Syntaxe ```css /* Valeurs avec un mot-clé */ -object-fit: fill; object-fit: contain; object-fit: cover; +object-fit: fill; object-fit: none; object-fit: scale-down; /* Valeurs globales */ object-fit: inherit; object-fit: initial; +object-fit: revert; object-fit: unset; ``` @@ -38,9 +36,9 @@ La propriété `object-fit` peut être définie grâce à l'un des mots-clés su ### Valeurs - `contain` - - : Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant. + - : Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant. - `cover` - - : Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné. + - : Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné. - `fill` - : Le contenu remplacé est dimensionné pour remplir la boîte de contenu. La taille réelle de l'objet est déterminée grâce à la hauteur et à la largeur de l'élément. Il est donc étiré afin de remplir la boîte. - `none` @@ -48,117 +46,109 @@ La propriété `object-fit` peut être définie grâce à l'un des mots-clés su - `scale-down` - : Le contenu est dimensionné comme si `none` ou `contain` étaient spécifiés, on prend celui qui aboutirait à une taille réelle plus petite. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### HTML +### Appliquer `object-fit` à une image -```html -<div> - <h2>object-fit: fill</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> +#### HTML - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/> +```html +<section> + <h2>object-fit: fill</h2> + <img class="fill" src="mdn_logo_only_color.png" alt="Logo MDN"> - <h2>object-fit: contain</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> + <img class="fill narrow" src="mdn_logo_only_color.png" alt="Logo MDN"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/> + <h2>object-fit: contain</h2> + <img class="contain" src="mdn_logo_only_color.png" alt="Logo MDN"> - <h2>object-fit: cover</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> + <img class="contain narrow" src="mdn_logo_only_color.png" alt="Logo MDN"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/> + <h2>object-fit: cover</h2> + <img class="cover" src="mdn_logo_only_color.png" alt="Logo MDN"> - <h2>object-fit: none</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> + <img class="cover narrow" src="mdn_logo_only_color.png" alt="Logo MDN"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/> + <h2>object-fit: none</h2> + <img class="none" src="mdn_logo_only_color.png" alt="Logo MDN"> - <h2>object-fit: scale-down</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> + <img class="none narrow" src="mdn_logo_only_color.png" alt="Logo MDN"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/> + <h2>object-fit: scale-down</h2> + <img class="scale-down" src="mdn_logo_only_color.png" alt="Logo MDN"> -</div> + <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="Logo MDN"> +</section> ``` -### CSS +#### CSS ```css h2 { - font-family: 'Courier New', monospace; - font-size: 1em; - margin: 1em 0 0.3em; -} - -div { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: flex-start; - height: 940px; + font-family: Courier New, monospace; + font-size: 1em; + margin: 1em 0 0.3em; } img { - width: 150px; - height: 100px; - border: 1px solid #000; + width: 150px; + height: 100px; + border: 1px solid #000; + margin: 10px 0; } .narrow { width: 100px; - height: 150px; - margin-top: 10px; + height: 150px; } .fill { - object-fit: fill; + object-fit: fill; } .contain { - object-fit: contain; + object-fit: contain; } .cover { - object-fit: cover; + object-fit: cover; } .none { - object-fit: none; + object-fit: none; } .scale-down { - object-fit: scale-down; + object-fit: scale-down; } ``` -### Résultat +#### Résultat -{{EmbedLiveSample('Exemples', 500, 450)}} +{{EmbedLiveSample('', 500, 1100)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- | -| {{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}} | {{Spec2('CSS4 Images')}} | Les mots-clés `from-image` et `flip` ont été ajoutés. | -| {{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}} | {{Spec2('CSS3 Images')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.object-fit")}} +{{Compat}} ## Voir aussi -- {{cssxref("background-size")}} -- Les autres propriétés CSS liées aux images : +- [`background-size`](/fr/docs/Web/CSS/background-size) - - {{cssxref("object-position")}} - - {{cssxref("image-orientation")}} - - {{cssxref("image-rendering")}} - - {{cssxref("image-resolution")}} +- Les autres propriétés CSS liées aux images : + - [`object-position`](/fr/docs/Web/CSS/object-position) + - [`image-orientation`](/fr/docs/Web/CSS/image-orientation) + - [`image-rendering`](/fr/docs/Web/CSS/Image-rendering) + - [`image-resolution`](/fr/docs/Web/CSS/image-resolution) diff --git a/files/fr/web/css/object-position/index.md b/files/fr/web/css/object-position/index.md index 6028bcbbfd..0198ad2fdf 100644 --- a/files/fr/web/css/object-position/index.md +++ b/files/fr/web/css/object-position/index.md @@ -1,19 +1,16 @@ --- title: object-position slug: Web/CSS/object-position -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/object-position +browser-compat: css.properties.object-position --- {{CSSRef}} -La propriété **`object-position`** détermine l'alignement d'un [élément remplacé](/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9) au sein de sa boîte. Les zones de la boîtes qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément. +La propriété **`object-position`** détermine l'alignement d'un [élément remplacé](/fr/docs/Web/CSS/Replaced_element) au sein de sa boîte. Les zones de la boîte qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément. -{{EmbedInteractiveExample("pages/css/object-position.html")}} +> **Note :** Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété [`object-fit`](/fr/docs/Web/CSS/object-fit). -> **Note :** Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}. +{{EmbedInteractiveExample("pages/css/object-position.html")}} ## Syntaxe @@ -26,15 +23,20 @@ object-position: 100px 50px; /* Valeurs globales */ object-position: inherit; object-position: initial; +object-position: revert; object-position: unset; ``` ### Valeurs - `<position>` - - : Une valeur de type {{cssxref("<position>")}}, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément. + - : Une valeur de type [`<position>`](/fr/docs/Web/CSS/position_value), c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément. + +## Définition formelle + +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} @@ -42,21 +44,25 @@ object-position: unset; ### HTML +Dans ce fragment HTML, on a deux éléments [`<img>`](/fr/docs/Web/HTML/Element/img), chacun affichant le logo de MDN. + ```html -<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> -<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> +<img id="object-position-1" src="mdn.svg" alt="Logo MDN"/> +<img id="object-position-2" src="mdn.svg" alt="Logo MDN"/> ``` ### CSS +Le code CSS implique la mise en forme par défaut pour les éléments `<img>` et des styles différents pour les deux images. + ```css img { - width: 300px; - height: 250px; - border: 1px solid black; - background-color: silver; - margin-right: 1em; - object-fit: none; + width: 300px; + height: 250px; + border: 1px solid black; + background-color: silver; + margin-right: 1em; + object-fit: none; } #object-position-1 { @@ -68,27 +74,25 @@ img { } ``` +La première image est positionnée avec son bord gauche situé à 10 pixels du bord gauche de la boîte de l'élément. La seconde image est positionnée avec son bord droit poussé sur le bord droit de la boîte de l'élément et est située vers le bas de 10% de la hauteur de la boîte de l'élément. + ### Résultat -{{EmbedLiveSample('Exemples', '100%','300px')}} +{{EmbedLiveSample('', '100%','600px')}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Images', '#the-object-position', 'object-position')}} | {{Spec2('CSS3 Images')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.object-position")}} +{{Compat}} ## Voir aussi -- Les autres propriétés CSS liées aux images : +- Les autres propriétés CSS liées aux images : - - {{cssxref("object-fit")}} - - {{cssxref("image-orientation")}} - - {{cssxref("image-rendering")}} - - {{cssxref("image-resolution")}} + - [`object-fit`](/fr/docs/Web/CSS/object-fit) + - [`image-orientation`](/fr/docs/Web/CSS/image-orientation) + - [`image-rendering`](/fr/docs/Web/CSS/image-rendering) + - [`image-resolution`](/fr/docs/Web/CSS/image-resolution) diff --git a/files/fr/web/css/position/index.md b/files/fr/web/css/position/index.md index bbd7c79d26..a10ada64c1 100644 --- a/files/fr/web/css/position/index.md +++ b/files/fr/web/css/position/index.md @@ -1,64 +1,88 @@ --- title: position slug: Web/CSS/position -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/position +browser-compat: css.properties.position --- {{CSSRef}} -La propriété **`position`** définit la façon dont un élément est positionné dans un document. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}} déterminent l'emplacement final de l'élément positionné. +La propriété [CSS](/fr/docs/Web/CSS) **`position`** définit la façon dont un élément est positionné dans un document. Les propriétés [`top`](/fr/docs/Web/CSS/top), [`right`](/fr/docs/Web/CSS/right), [`bottom`](/fr/docs/Web/CSS/bottom) et [`left`](/fr/docs/Web/CSS/left) déterminent l'emplacement final de l'élément positionné. {{EmbedInteractiveExample("pages/css/position.html")}} -### Types de positionnement - -- Un **élément positionné** est un élément dont la propriété de position [calculée](/fr/docs/Web/CSS/computed_value) est `relative`, `absolute`, `fixed` ou `sticky`. -- Un **élément positionné de façon relative** est un élément dont la propriété de position calculée est `relative`. Dans ce cas, les propriétés {{cssxref("top")}} ou {{cssxref("bottom")}} indiquent le décalage vertical à appliquer et {{cssxref("left")}} ou {{cssxref("right")}} indiquent le décalage horizontal. -- Un **élément positionné de façon absolue** est un élément dont la propriété de position calculée est `absolute` ou `fixed`. Dans ce cas, les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("right")}} et {{cssxref("left")}} indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages. -- Un **élément positionné en adhérence** est un élément dont la propriété de position calculée vaut `sticky`. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de {{cssxref("top")}}) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant. - -La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés {{cssxref("height")}} et {{cssxref("width")}} qui valent `auto` afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant {{cssxref("top")}} et {{cssxref("bottom")}} tout en laissant {{cssxref("height")}} indéfini (c'est-à-dire avec la valeur `auto`). On pourra faire de même pour l'espace horizontal avec les propriétés {{cssxref("left")}} et {{cssxref("right")}}. - -Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace : - -- Si `top` et `bottom` sont tous les deux définis (enfin, s'ils ne valent pas `auto`), c'est `top` qui aura la priorité -- Si `left` et `right` sont tous les deux définis, c'est `left` qui aura la priorité si la direction du texte est de gauche à droite (LTR) et `right` qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu). - ## Syntaxe ```css -/* Valeurs avec un mot-clé */ position: static; position: relative; position: absolute; position: fixed; position: sticky; -/* Valeurs globales*/ +/* Valeurs globales */ position: inherit; position: initial; +position: revert; position: unset; ``` -La propriété `position` peut être définie avec l'un des mots-clés de la liste suivante. - ### Valeurs - `static` - - : Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("z-index")}} ne s'appliquent pas. + - : Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés [`top`](/fr/docs/Web/CSS/top), [`right`](/fr/docs/Web/CSS/right), [`bottom`](/fr/docs/Web/CSS/bottom), [`left`](/fr/docs/Web/CSS/left) et [`z-index`](/fr/docs/Web/CSS/z-index) ne s'appliquent pas. + - `relative` - - : L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par `top`, `right`, `bottom` et `left`. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec `static`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. L'effet de cette valeur n'est pas défini pour les éléments `table-*-group`, `table-row`, `table-column`, `table-cell` et `table-caption`. + - : L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par `top`, `right`, `bottom` et `left`. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec `static`. + + Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. L'effet de cette valeur n'est pas défini pour les éléments `table-*-group`, `table-row`, `table-column`, `table-cell` et `table-caption`. + - `absolute` - - : L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges. + - : L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. + + Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges. + - `fixed` - - : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (_viewport_), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de `none` (voir [la spécification sur les transformations CSS](https://www.w3.org/TR/css-transforms-1/#propdef-transform)) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour _chaque page_). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de `perspective` et `filter` pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée toujours un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour _chacune des pages_. + - : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (<i lang="en">viewport</i>), sauf si un des ancêtres a une propriété [`transform`](/fr/docs/Web/CSS/transform), [`perspective`](/fr/docs/Web/CSS/perspective) ou [`filter`](/fr/docs/Web/CSS/filter) qui est différente de `none` (voir [la spécification sur les transformations CSS](https://www.w3.org/TR/css-transforms-1/#propdef-transform)) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour _chaque page_). Cette valeur crée toujours un nouveau contexte d'empilement. Certaines incohérences existent entre les navigateurs quant au rôle de `perspective` et `filter` pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. + + Cette valeur crée toujours un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour _chacune des pages_. + - `sticky` - - : La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à [son bloc englobant](/fr/docs/Web/CSS/Containing_block) selon les valeurs de `top`, `right`, `bottom` et `left`. Dans tous les cas, y compris avec les éléments `table`, cela n'affecte pas la position des autres éléments. Cette valeur entraîne toujours la création d'un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand `overflow` vaut `hidden`, `scroll`, `auto` ou `overlay`) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut `overflow: hidden` ou `auto` ([cf.: cette _issue_ GitHub](https://github.com/w3c/csswg-drafts/issues/865)). + - : La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à [son bloc englobant](/fr/docs/Web/CSS/Containing_block) selon les valeurs de `top`, `right`, `bottom` et `left`. Dans tous les cas, y compris avec les éléments `table`, cela n'affecte pas la position des autres éléments. + + Cette valeur entraîne toujours la création d'un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand `overflow` vaut `hidden`, `scroll`, `auto` ou `overlay`) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut `overflow: hidden` ou `auto` ([cf. cette _issue_ GitHub](https://github.com/w3c/csswg-drafts/issues/865)). + +## Description + +### Types de positionnement + +- Un **élément positionné** est un élément dont la propriété de position [calculée](/fr/docs/Web/CSS/computed_value) est `relative`, `absolute`, `fixed` ou `sticky`. +- Un **élément positionné de façon relative** est un élément dont la propriété de position calculée est `relative`. Dans ce cas, les propriétés [`top`](/fr/docs/Web/CSS/top) ou [`bottom`](/fr/docs/Web/CSS/bottom) indiquent le décalage vertical à appliquer et [`left`](/fr/docs/Web/CSS/left) ou [`right`](/fr/docs/Web/CSS/right) indiquent le décalage horizontal. +- Un **élément positionné de façon absolue** est un élément dont la propriété de position calculée est `absolute` ou `fixed`. Dans ce cas, les propriétés [`top`](/fr/docs/Web/CSS/top), [`bottom`](/fr/docs/Web/CSS/bottom), [`right`](/fr/docs/Web/CSS/right) et [`left`](/fr/docs/Web/CSS/left) indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages. +- Un **élément positionné en adhérence** est un élément dont la propriété de position calculée vaut `sticky`. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de [`top`](/fr/docs/Web/CSS/top)) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant. + +La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés [`height`](/fr/docs/Web/CSS/height) et [`width`](/fr/docs/Web/CSS/width) qui valent `auto` afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant [`top`](/fr/docs/Web/CSS/top) et [`bottom`](/fr/docs/Web/CSS/bottom) tout en laissant [`height`](/fr/docs/Web/CSS/height) indéfini (c'est-à-dire avec la valeur `auto`). On pourra faire de même pour l'espace horizontal avec les propriétés [`left`](/fr/docs/Web/CSS/left) et [`right`](/fr/docs/Web/CSS/right). + +Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace : + +- Si `top` et `bottom` sont tous les deux définis (enfin, s'ils ne valent pas `auto`), c'est `top` qui aura la priorité +- Si `left` et `right` sont tous les deux définis, c'est `left` qui aura la priorité si la direction du texte est de gauche à droite (LTR) et `right` qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu). + +## Accessibilité + +Il faut s'assurer que les éléments positionnés avec `absolute` ou `fixed` ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte. + +- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Présentation visuelle : comprendre les critères de succès 1.4.8 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +### Performance et accessibilité + +Les éléments qui défilent avec du contenu utilisant `fixed` ou `sticky` peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisatrice ou l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter `will-change: transform` (cf. [`will-change`](/fr/docs/Web/CSS/will-change)) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité. + +## Définition formelle + +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} @@ -66,6 +90,8 @@ La propriété `position` peut être définie avec l'un des mots-clés de la lis ### Positionnement relatif +Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale. + #### HTML ```html @@ -78,46 +104,56 @@ La propriété `position` peut être définie avec l'un des mots-clés de la lis #### CSS ```css +* { + box-sizing: border-box; +} + .box { - display: inline-block; - background: red; - width: 100px; - height: 100px; - color: white; + display: inline-block; + width: 100px; + height: 100px; + background: red; + color: white; } #deux { - position: relative; - top: 20px; - left: 20px; + position: relative; + top: 20px; + left: 20px; + background: blue; } ``` #### Résultat -Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale. - -{{EmbedLiveSample('Positionnement_relatif', '600px', '200px')}} +{{EmbedLiveSample('', '600px', '200px')}} ### Positionnement absolu -Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolu est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir [la définition du W3C](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)). +Les éléments qui sont positionnés de façon relative sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolue est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir [la définition du W3C](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)). -Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément `<body>` de l'`iframe` générée ici) : +Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément `<body>` de l'`iframe` générée ici) : #### HTML ```html <h1>Positionnement absolu</h1> -<p>Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en-dessous.</p> + +<p>Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en dessous.</p> + <p class="positioned">Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi grand que notre contenu.</p> <p>Nous sommes séparés par nos marges (une seule marge en raison de la fusion des marges).</p> -<p>Les éléments <em>inline</em> <span>comme celui-ci</span> et <span>celui-là</span> se situent sur la même ligne avec également les noeuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent <span>passent à la ligne si possible — comme pour ce texte.</span> ou cette image <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> + +<p>Les éléments <em>en ligne (inline)</em> <span>comme celui-ci</span> et <span>celui-là</span> se situent sur la même ligne avec également les nœuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent <span>passent à la ligne si possible — comme pour ce texte.</span> ou cette image <img src="long.jpg"></p> ``` #### CSS ```css +* { + box-sizing: border-box; +} + body { width: 500px; margin: 0 auto; @@ -145,11 +181,11 @@ span { #### Résultat -{{EmbedLiveSample('Positionnement_absolu', '100%', 420)}} +{{EmbedLiveSample('', '100%', 420)}} ### Positionnement fixe -Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond au _viewport_ si aucun ancêtre de l'élément ne possède une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de `none`. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche. +Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond à la zone d'affichage (<i lang="en">viewport</i>) si aucun ancêtre de l'élément ne possède une propriété [`transform`](/fr/docs/Web/CSS/transform), [`perspective`](/fr/docs/Web/CSS/perspective) ou [`filter`](/fr/docs/Web/CSS/filter) qui est différente de `none`. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche. #### HTML @@ -180,18 +216,24 @@ Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bl #### CSS ```css +* { + box-sizing: border-box; +} + .box { - background: red; width: 100px; height: 100px; - margin: 20px; + background: red; color: white; } + #un { position: fixed; top: 80px; left: 10px; + background: blue; } + .outer { width: 500px; height: 300px; @@ -202,13 +244,13 @@ Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bl #### Résultat -Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport au _viewport_ : +Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport à la zone d'affichage (<i lang="en">viewport</i>) : -{{EmbedLiveSample('Positionnement_fixe', '800px', '300px')}} +{{EmbedLiveSample('', '800px', '300px')}} -### Positionnement adhérent (_sticky_) +### Positionnement adhérent (<i lang="en">sticky</i>) -Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple : +Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple : ```css #un { @@ -217,11 +259,11 @@ Le positionnement adhérent est un mélange de positionnement relatif et de posi } ``` -se comportera comme un élément positionné de façon relative jusqu'à ce que le _viewport_ défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que le _viewport_ redéfile jusqu'avant ce seuil. +positionnera l'élément avec l'identifiant `un` de façon relative jusqu'à ce que la zone d'affichage défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que la zone d'affichage redéfile jusqu'avant ce seuil. -Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut du _viewport_ jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite). +Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut de la zone d'affichage jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite). -Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right")}} ou {{cssxref("bottom")}} ou {{cssxref("left")}} pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif. +Il faut définir un seuil avec au moins [`top`](/fr/docs/Web/CSS/top) ou [`right`](/fr/docs/Web/CSS/right) ou [`bottom`](/fr/docs/Web/CSS/bottom) ou [`left`](/fr/docs/Web/CSS/left) pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif. #### HTML @@ -264,8 +306,9 @@ Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right") * { box-sizing: border-box; } + dl > div { - margin: 0; + background: #FFF; padding: 24px 0 0 0; } @@ -279,7 +322,6 @@ dt { padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; - width: 99%; top: -1px; } @@ -297,28 +339,16 @@ dd + dd { #### Résultat -{{EmbedLiveSample('Positionnement_adhérent_(sticky)', '500px', '300px')}} - -## Accessibilité - -Il faut s'assurer que les éléments positionnés avec `absolute` ou `fixed` ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte. - -- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [_Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) - -### Performance et accessibilité - -Les éléments qui défilent avec du contenu utilisant `fixed` ou `sticky` peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter `will-change: transform` (cf. {{cssxref("will-change")}}) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité. +{{EmbedLiveSample('', '500px', '300px')}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------- | -| {{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}} | {{Spec2('CSS2.1')}} | | -| {{SpecName('CSS3 Positioning','#position-property','position')}} | {{Spec2('CSS3 Positioning')}} | Ajout de la valeur `sticky` | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.position")}} +{{Compat}} + +## Voir aussi + +- [Apprendre le CSS : le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) diff --git a/files/fr/web/css/position_value/index.md b/files/fr/web/css/position_value/index.md index 0437058c5d..28cdfc27a5 100644 --- a/files/fr/web/css/position_value/index.md +++ b/files/fr/web/css/position_value/index.md @@ -1,22 +1,25 @@ --- title: <position> slug: Web/CSS/position_value -tags: - - CSS - - Reference - - Type translation_of: Web/CSS/position_value original_slug: Web/CSS/Type_position +browser-compat: css.types.position --- {{CSSRef}} -Le type de donnée CSS **`<position>`** définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur `<position>`, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}. +Le type de donnée [CSS](/fr/docs/Web/CSS) **`<position>`** (ou **`<bg-position>`**) définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. Ce type de donnée est notamment utilisé avec les propriétés [`background-position`](/fr/docs/Web/CSS/background-position) et [`offset-anchor`](/fr/docs/Web/CSS/offset-anchor). + +> **Note :** La position finale obtenue, décrite par la valeur `<position>`, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. ## Syntaxe -On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera `left`, `right`, `top`, `bottom` ou `center` (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte). + + +On peut définir une position grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. + +Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera `left`, `right`, `top`, `bottom` ou `center` (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte). -Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("<percentage>")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut). +Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type [`<percentage>`](/fr/docs/Web/CSS/percentage)) ou une valeur de longueur ([`<length>`](/fr/docs/Web/CSS/length)). Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut). Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est `center`. @@ -39,67 +42,60 @@ mot-clé valeur mot-clé valeur /* Chaque valeur indique le décalage par rappor ### Syntaxe formelle - [ - [ left | center | right ] || [ top | center | bottom ] - | - [ left | center | right | <length> | <percentage> ] - [ top | center | bottom | <length> | <percentage> ]? - | - [ [ left | right ] [ <length> | <percentage> ] ] && - [ [ top | bottom ] [ <length> | <percentage> ] ] - ] +```css +[ + [ left | center | right ] || [ top | center | bottom ] +| + [ left | center | right | <length> | <percentage> ] + [ top | center | bottom | <length> | <percentage> ]? +| + [ [ left | right ] [ <length> | <percentage> ] ] && + [ [ top | bottom ] [ <length> | <percentage> ] ] +] +``` + +> **Note :** La propriété [`background-position`](/fr/docs/Web/CSS/background-position) accepte également une syntaxe avec trois valeurs. Celle-ci n'est pas autorisée pour les autres propriétés qui utilisent une valeur `<position>`. ## Interpolation -Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("easing-function")}}) et le point se déplacera donc sur une ligne. +Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par une unique fonction de temporisation ([`easing-function`](/fr/docs/Web/CSS/easing-function)), le point se déplacera donc sur une ligne. ## Exemples -### CSS +### Positions valides -```css -div { - background-color: #FFEE99; - background-repeat: no-repeat; - width: 300px; - height: 80px; - margin-bottom: 12px; -} - -.exemple{ - background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat; - // Ici un exemple de valeur <position> - background-position: 2.5cm bottom; -} -``` +```css example-good +center +left +center top -### HTML +right 8.5% +bottom 12vmin right -6px -```html -<div class="exemple">Exemple</div> +10% 20% +8rem 14px ``` -### Résultat +### Positions invalides -{{EmbedLiveSample('Exemples', 120, 200)}} +```css example-bad +left right +bottom top +10px 15px 20px 15px +``` ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Values', '#position', '<position>')}} | {{Spec2('CSS3 Values')}} | Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de `<position>` qui doit être utilisée. | -| {{SpecName('CSS3 Backgrounds', '#position', '<position>')}} | {{Spec2('CSS3 Backgrounds')}} | `<position>` est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}} | {{Spec2('CSS2.1')}} | Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}. | -| {{SpecName('CSS1', '#background-position', '<position>')}} | {{Spec2('CSS1')}} | `<position>` est défini de façon anonyme comme valeur de {{cssxref("background-position")}}. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.types.position")}} +{{Compat}} ## Voir aussi - [Valeurs et unités en CSS](/fr/docs/Web/CSS/CSS_Values_and_Units) -- [Tutoriel - Introduction aux valeurs et unités CSS](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) -- {{cssxref("background-position")}} -- {{cssxref("radial-gradient","radial-gradient()")}} -- {{cssxref("conic-gradient","conic-gradient()")}} +- [Tutoriel — Introduction aux valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +- [`background-position`](/fr/docs/Web/CSS/background-position) +- [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) +- [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) diff --git a/files/fr/web/css/text-combine-upright/index.md b/files/fr/web/css/text-combine-upright/index.md index 60ae92446f..38546b2597 100644 --- a/files/fr/web/css/text-combine-upright/index.md +++ b/files/fr/web/css/text-combine-upright/index.md @@ -1,18 +1,14 @@ --- title: text-combine-upright slug: Web/CSS/text-combine-upright -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/text-combine-upright +browser-compat: css.properties.text-combine-upright --- {{CSSRef}} -La propriété **`text-combine-upright`** définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'`1em`, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur `1em`. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux. +La propriété [CSS](/fr/docs/Web/CSS) **`text-combine-upright`** définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'`1em`, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur `1em`. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux. -Cela permet d'obtenir un effet appelé tate-chū-yoko (縦中横) en japonais ou 直書橫向 en chinois. +Cela permet d'obtenir un effet appelé « tate-chū-yoko (縦中横) » en japonais ou « 直書橫向 » en chinois. ```css /* Valeurs avec un mot-clé */ @@ -20,17 +16,15 @@ text-combine-upright: none; text-combine-upright: all; /* Valeurs pour les chiffres */ -/* 2 chiffres qui se suivent prendront la place - d'un caractère dans du texte vertical */ -text-combine-upright: digits; -/* Compresse jusqu'à 4 chiffres consécutifs afin - qu'ils occupent l'espace d'un caractère dans - du texte vertical */ -text-combine-upright: digits 4; +text-combine-upright: digits; /* 2 chiffres qui se suivent prendront la place d'un caractère dans du texte + vertical */ +text-combine-upright: digits 4; /* Compresse jusqu'à 4 chiffres consécutifs afin qu'ils occupent l'espace + d'un caractère dans du texte vertical */ /* Valeurs globales */ text-combine-upright: inherit; text-combine-upright: initial; +text-combine-upright: revert; text-combine-upright: unset; ``` @@ -43,9 +37,13 @@ text-combine-upright: unset; - `all` - : L'agent utilisateur tente de compresser tous les caractères consécutifs dans une même boîte afin qu'ils occupent l'espace d'un seul caractère sur l'axe vertical de la boîte. - `digits <n>?` - - : L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030–U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle `[2;4]` sont considérés comme invalides. + - : L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030-U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle `[2;4]` sont considérés comme invalides. -### Syntaxe formelle +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} @@ -53,53 +51,60 @@ text-combine-upright: unset; ### Exemple avec `digits` -Utiliser ` digit``s ` nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs. +Utiliser `digits` nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs. + +#### HTML ```html -<p lang="ja" class="exempleText">平成20年4月16日に</p> +<p lang="ja" class="texteExemple">平成20年4月16日に</p> ``` +#### CSS + ```css -.exempleText { +.texteExemple { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } ``` -{{EmbedLiveSample("Exemple_avec_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}} +#### Résultat + +{{EmbedLiveSample('', 100, 350, "tate-chu-yoko.png")}} ### Exemple avec `all` Pour utiliser `all`, on devra baliser chaque fragment de texte horizontal mais cette valeur est actuellement mieux prise en charge que `digits`. +#### HTML + ```html <p lang="zh-Hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p> ``` +#### CSS + ```css html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } ``` -{{EmbedLiveSample("Exemple_avec_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}} +#### Résultat -## Spécifications +{{EmbedLiveSample('', 250, 300, "text-combine-upright-all.png")}} -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------- | -| {{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}} | {{Spec2("CSS3 Writing Modes")}} | Définition initiale. | -| {{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}} | {{Spec2("CSS4 Writing Modes")}} | Ajout de la valeur `digits`. | +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.text-combine-upright")}} +{{Compat}} ## Voir aussi -- {{cssxref("writing-mode")}}, -- {{cssxref("text-orientation")}} +- [`writing-mode`](/fr/docs/Web/CSS/writing-mode), +- [`text-orientation`](/fr/docs/Web/CSS/text-orientation) diff --git a/files/fr/web/css/url()/index.md b/files/fr/web/css/url()/index.md index 228065095b..d914cc0ee0 100644 --- a/files/fr/web/css/url()/index.md +++ b/files/fr/web/css/url()/index.md @@ -1,101 +1,119 @@ --- title: url() slug: Web/CSS/url() -tags: - - CSS - - Fonction - - Reference - - Web - - url() translation_of: Web/CSS/url() +browser-compat: css.types.url --- {{CSSRef}} -La fonction CSS **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme {{cssxref('attr()')}}. Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de stye. +La fonction [CSS](/fr/docs/Web/CSS) **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme [`attr()`](/fr/docs/Web/CSS/attr()). Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de style. -La notation fonctionelle `url()` correspond au type de donnée CSS [`<url>`](</fr/docs/conflicting/Web/CSS/url()_168028c4e5edd9e19c061adb4b604d4f>). +La notation fonctionnelle `url()` correspond au type de donnée CSS `<url>`. + +> **Note :** Il y a une différence entre un URI et une URL. Un URI identifie une ressource. Une URL est un type d'URI qui décrit _l'emplacement_ d'une ressource. Un URI peut être une URL ou un nom (URN) d'une ressource. +> +> Pour la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne décrivaient que des URL au sens strict. Pour la spécification CSS de niveau 2, la définition de `url()` a été étendue afin de décrire n'importe quel URI (que ce soit une URL ou un URN). Cela a été une source de confusion, car `url()` pouvait être utilisée pour créer un type de données `<uri>`. Cette évolution était non seulement étrange mais aussi superflue, car les URN ne sont quasiment jamais utilisées dans du CSS réel. Pour éviter cette confusion, la spécification CSS de niveau 3 est revenue à la définition initiale. Aujourd'hui, `url()` ne manipule que des vraies `<url>`. ```css /* Utilisation simple */ -url(https://example.com/images/myImg.jpg); +url(https://example.com/images/monImg.jpg); url(data:image/png;base64,iRxVB0…); -url(myFont.woff); -url(#IDofSVGpath); +url(maPolice.woff); +url(#IDdeCheminSVG); /* Propriétés utilisables */ -background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); +background-image: url("star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); -cursor: url(mycursor.cur); +cursor: url(moncurseur.cur); border-image-source: url(/media/diamonds.png); -src: url('fantasticfont.woff'); +src: url('superpolice.woff'); offset-path: url(#path); -mask-image: url("masks.svg#mask1"); +mask-image: url("masques.svg#masque1"); /* Propriétés avec valeurs de recours */ cursor: url(pointer.cur), pointer /* Propriétés raccourcies associées */ -background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; +background: url('star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* Utilisation comme paramètre d'une fonction CSS */ background-image: cross-fade(20% url(first.png), url(second.png)); -mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); +mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent)); /* Utilisation avec plusieurs valeurs */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* Règles @ / at-rules */ -@document url("https://www.example.com/") { ... } {{Experimental_Inline}} +@document url("https://www.example.com/") { ... } /* expérimental */ @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml); ``` -Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante). - -La fonction **`url()`** peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur [`src`](/fr/docs/Web/CSS/@font-face/src) pour une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) ou [`@counter-style/symbol`](/fr/docs/Web/CSS/@counter-style/symbols) +Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante. -Dans la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne permettait que de décrire des URL. Avec la spécification de niveau 2, la définition d'`url()` a été étendue afin de décrire n'importe quel URI, y compris des URI de données. Le module de spécification _CSS Values and Units_ de niveau 3 est revenu à la définition initiale plus stricte. Aussi, à l'heure actuelle et formellement `url()` ne permet que de décrire des valeurs `<url>`. +La fonction **`url()`** peut être incluse comme valeur pour les propriétés [`background`](/fr/docs/Web/CSS/background), [`background-image`](/fr/docs/Web/CSS/background-image), [`border`](/fr/docs/Web/CSS/border), [`border-image`](/fr/docs/Web/CSS/border-image), [`border-image-source`](/fr/docs/Web/CSS/border-image-source), [`content`](/fr/docs/Web/CSS/content), [`cursor`](/fr/docs/Web/CSS/cursor), [`filter`](/fr/docs/Web/CSS/filter), [`list-style`](/fr/docs/Web/CSS/list-style), [`list-style-image`](/fr/docs/Web/CSS/list-style-image), [`mask`](/fr/docs/Web/CSS/mask), [`mask-image`](/fr/docs/Web/CSS/mask-image), [`offset-path`](/fr/docs/Web/CSS/offset-path), comme descripteur [`src`](/fr/docs/Web/CSS/@font-face/src) pour une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) ou [`@counter-style/symbol`](/fr/docs/Web/CSS/@counter-style/symbols) ## Syntaxe ### Valeurs -- `string` +- `<string>` - : Une chaîne de caractères indiquant une URL ou l'identifiant d'une forme SVG. - `<url>` - - : Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de donnée éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à `0x7e`. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes : + - : Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de données éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à `0x7e`. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes : - <propriété_css>: url("https://example.com/image.png") - <propriété_css>: url('https://example.com/image.png') - <propriété_css>: url(https://example.com/image.png) + ```css + <propriete_css>: url("https://example.com/image.png") + <propriete_css>: url('https://example.com/image.png') + <propriete_css>: url(https://example.com/image.png) + ``` - Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (`\`) avant toute parenthèse, espace ou apostrophe (`'`) ou guillemets(`"`) faisant partie de l'URL. + Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (`\`) avant toute parenthèse, espace ou apostrophe (`'`) ou guillemets (`"`) faisant partie de l'URL. -- _chemin_ - - : La référence à un identifiant d'une [forme SVG](/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect`. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin. + - `chemin` + - : La référence à un identifiant d'une [forme SVG](/fr/docs/Web/SVG/Tutorial/Basic_Shapes), `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, ou `rect`. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin. + - `url-modifier` {{Experimental_Inline}} - : À l'avenir, la fonction `url()` pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge. ### Syntaxe formelle - url( <string> <url-modifier>* ) +```css +url( <string> <url-modifier>* ) +``` ## Exemples -### Propriété `content` +### Une URL utilisée pour la propriété `background` + +```css +.topbanner { + background: url("banniere_haut.png") #00D no-repeat fixed; +} +``` + +### Une URL pour une image de puce pour une liste + +```css +ul { + list-style: square url(http://www.example.com/redball.png); +} +``` + +### Utilisation avec la propriété `content` #### HTML ```html <ul> - <li>Item 1</li> - <li>Item 2</li> - <li>Item 3</li> + <li>Élément 1</li> + <li>Élément 2</li> + <li>Élément 3</li> </ul> ``` @@ -103,15 +121,15 @@ Dans la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne per ```css li::after { - content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); + content: ' - ' url(star.gif); } ``` #### Résultat -{{EmbedLiveSample("Propriété_content", "100%", 50)}} +{{EmbedLiveSample("", "100%", 150)}} -### URI de données +### Utilisation d'un URI de données #### HTML @@ -123,38 +141,52 @@ li::after { ```css hidden .background { - height: 100vh; + height: 100vh; } ``` ```css .background { - background: yellow; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); + background: yellow; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); } ``` #### Résultat -{{EmbedLiveSample("URI_de_données", "100%", 50)}} +{{EmbedLiveSample("", "100%", 50)}} + +### Utilisation pour les filtres + +Lorsqu'une URL est utilisée comme chemin d'un filtre, l'URL doit être : + +1. Le chemin d'un fichier SVG avec l'ancre qui pointe vers l'identifiant du filtre. +2. Ou l'identifiant du filtre si le SVG existe déjà sur la page. + +```css +.blur { + filter: url(mon-fichier.svg#svg-blur); + /* L'URL d'un fichier SVG utilisé comme filtre */ +} + +.inline-blur { + filter: url(#svg-blur); + /* L'identifiant d'un SVG déjà chargé sur la page HTML */ +} +``` ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------ | -| {{SpecName('CSS4 Values', '#urls', 'url()')}} | {{Spec2('CSS4 Values')}} | | -| {{SpecName('CSS3 Values', '#urls', 'url()')}} | {{Spec2('CSS3 Values')}} | Aucune modification significative depuis la spécification de niveau 2 (première révision). | -| {{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}} | {{Spec2('CSS2.1')}} | Aucune modification significative depuis la spécification de niveau 1. | -| {{SpecName('CSS1', '#url', 'url()')}} | {{Spec2('CSS1')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.types.url")}} +{{Compat}} ## Voir aussi -- {{cssxref("<gradient>")}} -- {{cssxref("element()")}} -- {{cssxref("_image","image()")}} -- {{cssxref("image-set","image-set()")}} -- {{cssxref("cross-fade()")}} +- [`<gradient>`](/fr/docs/Web/CSS/gradient) +- [`element()`](/fr/docs/Web/CSS/element()) +- [`image()`](/fr/docs/Web/CSS/image/image()) +- [`image-set()`](/fr/docs/Web/CSS/image/image-set()) +- [`cross-fade()`](/fr/docs/Web/CSS/cross-fade()) diff --git a/files/fr/web/css/vertical-align/index.md b/files/fr/web/css/vertical-align/index.md index 70a28e1e59..d6f3049f21 100644 --- a/files/fr/web/css/vertical-align/index.md +++ b/files/fr/web/css/vertical-align/index.md @@ -1,24 +1,21 @@ --- title: vertical-align slug: Web/CSS/vertical-align -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/vertical-align +browser-compat: css.properties.vertical-align --- {{CSSRef}} -La propriété **`vertical-align`** définit l'alignement vertical d'une boîte en ligne (_inline_) ou d'une cellule de tableau. +La propriété [CSS](/fr/docs/Web/CSS) **`vertical-align`** définit l'alignement vertical d'une boîte en ligne (<i lang="en">inline</i>), en ligne / bloc (<i lang="en">inline-block</i>) ou d'une boîte de cellule de tableau. {{EmbedInteractiveExample("pages/css/vertical-align.html")}} -La propriété `vertical-align` peut être utilisée dans deux contextes : +La propriété `vertical-align` peut être utilisée dans deux contextes : -- Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image ({{HTMLElement("img")}} sur une ligne de texte) +- Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image ([`<img>`](/fr/docs/Web/HTML/Element/Img) sur une ligne de texte) - ou pour aligner verticalement le contenu d'une cellule dans un tableau -`vertical-align` ne s'applique qu'aux cellules de tableaux et aux éléments en ligne (_inline_), elle ne peut pas être utilisée pour aligner verticalement [les éléments de bloc](/fr/docs/Web/HTML/Éléments_en_bloc). +`vertical-align` ne s'applique qu'aux cellules de tableaux, aux éléments en ligne (<i lang="en">inline</i>) ou en ligne / bloc (<i lang="en">inline-block</i>), elle ne peut pas être utilisée pour aligner verticalement [les éléments de bloc](/fr/docs/Web/HTML/Block-level_elements). ## Syntaxe @@ -45,17 +42,19 @@ vertical-align: 20%; /* Valeurs globales */ vertical-align: inherit; vertical-align: initial; +vertical-align: revert; vertical-align: unset; ``` +La propriété `vertical-align` s'utilise avec une des valeurs suivantes. -### Valeurs +### Valeurs pour les éléments en lignes -#### Pour les éléments _inline_ +#### Valeurs relatives au parent -> **Note :** La plupart des valeurs alignent l'élément verticalement, relativement à son élément parent. +Ces valeurs alignent l'élément verticalement, relativement à son élément parent. - `baseline` - - : Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains [éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé), comme {{HTMLElement("textarea")}}, n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre. + - : Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains [éléments remplacés](/fr/docs/Web/CSS/Replaced_element), comme [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea), n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre. - `sub` - : Aligne la ligne de base sur la ligne de base inférieure (celle utilisée pour les indices) de l'élément parent. - `super` @@ -65,13 +64,15 @@ vertical-align: unset; - `text-bottom` - : Aligne le bas de l'élément avec le bas de la police de l'élément parent. - `middle` - - : Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur. -- {{cssxref("<length>")}} + - : Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur en x (<i lang="en">x-height</i>). +- [`<length>`](/fr/docs/Web/CSS/length) - : Aligne la ligne de base de l'élément à la hauteur de la ligne de base de l'élément parent à laquelle on ajoute la hauteur donnée. Les valeurs négatives sont autorisées. -- {{cssxref("<percentage>")}} - - : Fonctionne comme avec les valeurs de type {{cssxref("<length>")}}, le pourcentage indique une fraction de la propriété {{cssxref("line-height")}}. Les valeurs négatives sont autorisées. +- [`<percentage>`](/fr/docs/Web/CSS/percentage) + - : Fonctionne comme avec les valeurs de type [`<length>`](/fr/docs/Web/CSS/length), le pourcentage indique une fraction de la propriété [`line-height`](/fr/docs/Web/CSS/line-height). Les valeurs négatives sont autorisées. -Les valeurs suivantes alignent l'élément par rapport à la ligne entière (absolu) plutôt que par rapport à leur parent (relatif) : +#### Valeurs relatives à la ligne + +Les valeurs suivantes alignent l'élément par rapport à la ligne entière plutôt que par rapport à leur parent : - `top` - : Aligne le haut de l'élément et de ses descendants avec le haut de la ligne entière. @@ -80,78 +81,163 @@ Les valeurs suivantes alignent l'élément par rapport à la ligne entière (abs Pour les éléments qui n'ont pas de ligne de base définie, c'est le bord de la marge basse qui est utilisée. -#### Pour les cellules de tableau +### Pour les cellules de tableau - `baseline`, `sub`, `super`, `text-top`, `text-bottom`, `<length>` et `<percentage>` - - : La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base. Les valeurs négatives sont autorisées. + - : La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base. - `top` - - : Aligne le bord haut de la boîte de remplissage (_padding_) de la cellule avec le haut de la ligne. + - : Aligne le bord haut de la boîte de remplissage (<i lang="en">padding</i>) de la cellule avec le haut de la ligne. - `middle` - - : Centre la boîte de remplissage (_padding_) de la cellule avec la ligne. + - : Centre la boîte de remplissage (<i lang="en">padding</i>) de la cellule avec la ligne. - `bottom` - - : Aligne le bord bas de la boîte de remplissage (_padding_) avec le bas de la ligne. + - : Aligne le bord bas de la boîte de remplissage (<i lang="en">padding</i>) avec le bas de la ligne. + +## Définition formelle + +{{CSSInfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} -## Exemple +## Exemples + +### Exemple simple #### HTML ```html -<div> - Une <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="une icone générique" width="32" height="32" /> - image alignée par défaut. -</div> -<div> - Une <img class="haut" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> - image alignée avec text-top. -</div> -<div> - Une <img class="bas" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> - image alignée avec text-bottom.</div> -<div> - Une <img class="pourcents" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> - image alignée avec 200%. -</div> +<div>Une <img src="frame_image.svg" alt="link" width="32" height="32"/> image avec + un alignement par défaut.</div> +<div>Une <img class="top" src="frame_image.svg" alt="link" width="32" height="32"/> image avec + un alignement en haut du texte.</div> +<div>Une <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32"/> image avec + un alignement en bas du texte.</div> +<div>Une <img class="middle" src="frame_image.svg" alt="link" width="32" height="32"/> image avec + un alignement au milieu.</div> ``` #### CSS ```css -img.haut { - vertical-align: text-top; +img.top { vertical-align: text-top; } +img.bottom { vertical-align: text-bottom; } +img.middle { vertical-align: middle; } +``` + +#### Résultat + +{{EmbedLiveSample("")}} + +### Alignement vertical sur une boîte de ligne + +#### HTML + +```html +<p> +top: <img style="vertical-align: top" src="star.png"/> +middle: <img style="vertical-align: middle" src="star.png"/> +bottom: <img style="vertical-align: bottom" src="star.png"/> +super: <img style="vertical-align: super" src="star.png"/> +sub: <img style="vertical-align: sub" src="star.png"/> +</p> + +<p> +text-top: <img style="vertical-align: text-top" src="star.png"/> +text-bottom: <img style="vertical-align: text-bottom" src="star.png"/> +0.2em: <img style="vertical-align: 0.2em" src="star.png"/> +-1em: <img style="vertical-align: -1em" src="star.png"/> +20%: <img style="vertical-align: 20%" src="star.png"/> +-100%: <img style="vertical-align: -100%" src="star.png"/> +</p> +``` + +```css hidden +#* { + box-sizing: border-box; } -img.bas { - vertical-align: text-bottom; + +img { + margin-right: 0.5em; } -img.pourcents { - vertical-align: 200%; + +p { + height: 3em; + padding: 0 .5em; + font-family: monospace; + text-decoration: underline overline; + margin-left: auto; + margin-right: auto; + width: 80%; } ``` #### Résultat -{{EmbedLiveSample("Exemple")}} +{{EmbedLiveSample("", '100%', 160)}} -## Spécifications +### Alignement vertical d'une cellule de tableau + +#### HTML + +```html +<table> + <tr> + <td style="vertical-align: baseline">baseline</td> + <td style="vertical-align: top">top</td> + <td style="vertical-align: middle">middle</td> + <td style="vertical-align: bottom">bottom</td> + <td> + <p>Elle voulait savoir si elle grandissait ou rapetissait, et fut + tout étonnée de rester la même; franchement, c'est ce qui + arrive le plus souvent lorsqu'on mange du gâteau; mais Alice + avait tellement pris l'habitude de s'attendre à des choses + extraordinaires, que cela lui paraissait ennuyeux et stupide + de vivre comme tout le monde.</p> + <p>Aussi elle se remit à l'œuvre, et eut bien vite fait + disparaître le gâteau.</p> + </td> + </tr> +</table> +``` + +#### CSS -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}} | {{Spec2('CSS3 Transitions')}} | `vertical-align` peut désormais être animée. | -| {{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}} | {{Spec2('CSS2.1')}} | Ajoute la valeur {{cssxref("<length>")}} et permet d'appliquer la propriété aux éléments dont {{cssxref("display")}} est de type `table-cell`. | -| {{SpecName('CSS1', '#vertical-align', 'vertical-align')}} | {{Spec2('CSS1')}} | Définition initiale. | +```css +table { + margin-left: auto; + margin-right: auto; + width: 80%; +} + +table, th, td { + border: 1px solid black; +} + +td { + padding: 0.5em; + font-family: monospace; +} +``` + +#### Résultat + +{{EmbedLiveSample("", '100%', 230)}} + + +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.vertical-align")}} +{{Compat}} ## Voir aussi -- {{cssxref("line-height")}}, {{cssxref("text-align")}}, {{cssxref("margin")}} -- [Comprendre `vertical-align` ou comment (ne pas) centrer des éléments verticalement](https://phrogz.net/css/vertical-align/index.html) (en anglais) -- [Tout ce qu'il y a à savoir sur `vertical-align`](https://christopheraue.net/design/vertical-align) (en anglais) -- [Centrer des éléments avec _flexbox_](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox#Centrer_des_éléments) +- [Centrer des éléments avec Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#centrer_des_éléments) +- [`line-height`](/fr/docs/Web/CSS/line-height) +- [`text-align`](/fr/docs/Web/CSS/text-align) +- [`margin`](/fr/docs/Web/CSS/margin) +- [Comprendre `vertical-align` ou comment (ne pas) centrer des éléments verticalement (en anglais)](http://phrogz.net/css/vertical-align/index.html) +- [Tout ce qu'il y a à savoir sur `vertical-align` (en anglais)](https://christopheraue.net/design/vertical-align) |