diff options
Diffstat (limited to 'files/fr/web/css/zoom/index.html')
| -rw-r--r-- | files/fr/web/css/zoom/index.html | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/files/fr/web/css/zoom/index.html b/files/fr/web/css/zoom/index.html new file mode 100644 index 0000000000..d68f95a128 --- /dev/null +++ b/files/fr/web/css/zoom/index.html @@ -0,0 +1,102 @@ +--- +title: zoom +slug: Web/CSS/zoom +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/zoom +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>La propriété non-standard <strong><code>zoom</code></strong> permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser <a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">les transformations CSS</a>, si possible. Cependant, contrairement aux transformations CSS, <strong><code>zoom</code></strong> affecte la taille de l'élément.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ +zoom: normal; +zoom: reset; + +/* VAleurs exprimées en pourcents */ +/* Type <percentage> */ +zoom: 50%; +zoom: 200%; + +/* Valeurs numériques */ +/* Type <number> */ +zoom: 1.1; +zoom: 0.7; + +/* Valeurs globales */ +zoom: inherit; +zoom: initial; +zoom: unset;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>L'élément est affiché avec sa taille normale.</dd> + <dt><code>reset</code> {{non-standard_inline}}</dt> + <dd>Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing <kbd>Ctrl</kbd>-<kbd>-</kbd> ou <kbd>Ctrl</kbd>+<kbd>+</kbd>) to the document. Only supported by WebKit (and possibly Blink).</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Le facteur de zoom à appliquer. <code>100%</code> est équivalent au mot-clé <code>normal</code>. Les valeurs supérieures à <code>100%</code> agrandissent l'élément et les valeurs inférieures le réduisent.</dd> + <dt>{{cssxref("<number>")}}</dt> + <dd>Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages : <code>1.0</code> correspond à <code>normal</code> (ou <code>100%</code>) , les valeurs supérieures à <code>1.0</code> agrandissent l'élément et les valeurs inférieures le réduisent.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p.petit { + zoom: 75%; +} +p.normal { + zoom: normal; +} +p.gros { + zoom: 2.5; +} +p { + display: inline-block; +} +p:hover { + zoom: reset; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="petit">Petit</p> +<p class="normal">Normal</p> +<p class="gros">Gros</p></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","200")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette propriété n'est pas standard et est née avec Internet Explorer. Apple la décrit <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">dans la référence CSS pour Safari</a>. Rossen Atanassov, de Microsoft, a dressé <a href="https://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">un brouillon de spécification sur GitHub</a></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.zoom")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://css-tricks.com/almanac/properties/z/zoom/">L'article de CSS-Tricks sur <code>zoom</code></a></li> + <li>Le descripteur <code><a href="/fr/docs/Web/CSS/@viewport/zoom">zoom</a></code> pour la règle @ <code><a href="/fr/docs/Web/CSS/@viewport">@viewport</a></code></li> + <li>{{bug("390936")}} à propos de l'implémentation de la propriété dans Firefox</li> +</ul> |