From df8056fc0652ecafffac996081b73435acfab849 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Tue, 15 Mar 2022 07:00:50 +0100 Subject: Remove mozillademo links from CSS (#3642) * Work - part 1 / N * background-attachment * background-blend-mode * background-image * background-origin * Background position * background-repeat * background-size * border-image * border-image-outset * border-image-repeat * border-image-slice * border-image-width * clip-path * content * cross-fade() * border-radius-generator * multiple bckgrnd * vertical-align * url * text-combine-upright * position_value * image-rendering * using css gradients * font-stretch * font-stretch - add bcd key * font-variant-numeric * font-weight * image-orientation * list-style-image * mask-border * mask-clip * mask-composite * mask-image * mask-mode * mask-origin * mask-position * mask-size * object-fit * object-position * position * Various fixes and improvements * Remove unecessary files * Remove unecessary files (part 2) * Missed level 1 fixes Co-authored-by: cw118 --- files/fr/web/css/-moz-image-rect/index.md | 124 +++++++++++++++--------------- 1 file changed, 64 insertions(+), 60 deletions(-) (limited to 'files/fr/web/css/-moz-image-rect') 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()`]() 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 ([``](/fr/docs/Web/CSS/integer)) ou un pourcentage ([``](/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 ([``](/fr/docs/Web/CSS/integer)) ou un pourcentage ([``](/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 ([``](/fr/docs/Web/CSS/integer)) ou un pourcentage ([``](/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 ([``](/fr/docs/Web/CSS/integer)) ou un pourcentage ([``](/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 [``](/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 [`
`](/fr/docs/Web/HTML/Element/div). Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs. + +### HTML + +```html +
+
En haut à gauche
+
En haut à droite
+
En bas à gauche
+
En bas à droite
+
+``` ### 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 -
-
Top left
-
Top right
-
Bottom left
-
Bottom right
-
-``` - ### 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) -- cgit v1.2.3-54-g00ecf