initial commit

1 files changed, 75 insertions, 0 deletions

diff --git a/files/fr/web/css/-moz-image-region/index.html b/files/fr/web/css/-moz-image-region/index.html
new file mode 100644
index 0000000000..603c48f008
--- /dev/null
+++ b/files/fr/web/css/-moz-image-region/index.html
@@ -0,0 +1,75 @@
+---
+title: '-moz-image-region'
+slug: Web/CSS/-moz-image-region
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Référence(2)
+translation_of: Web/CSS/-moz-image-region
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour certains éléments XUL et les pseudo-éléments qui utilisent une image grâce à la propriété {{cssxref("list-style-image")}}, la propriété <code><strong>-moz-image-region</strong></code> définit la partie de l'image qui est utilisée plutôt que l'image toute entière. Cela permet d'utiliser des images qui regroupent des <em>sprites</em> afin d'améliorer les performances.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+-moz-image-region: auto;
+
+/* Valeur de type &lt;shape&gt; */
+-moz-image-region: rect(0, 8px, 4px, 4px);
+
+/* Valeurs globales */
+-moz-image-region: inherit;
+-moz-image-region: initial;
+-moz-image-region: unset;</pre>
+
+<p>La syntaxe de cette propriété est semblable à la syntaxe de la propriété {{cssxref("clip")}}. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La région pour l'image est définie automatiquement</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>Une forme définit la portion d'image qui doit être utilisée. La fonction <code>rect()</code> permet de définir un rectangle. Les paramètres de cette fonction correspondent respectivement aux décalages des bords haut, droit, bas et gauche. Voir {{cssxref("&lt;shape&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">#example-button {
+  /* display only the 4x4 area from the top left of this image */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* use the 4x4 area to the right of the first for the hovered button */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-image-region")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-moz-image-rect")}}</li>
+</ul>