zoom

La propriété non-standard zoom permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser les transformations CSS, si possible. Cependant, contrairement aux transformations CSS, zoom affecte la taille de l'élément.

Syntaxe

/* 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;

Valeurs

normal

L'élément est affiché avec sa taille normale.

reset

Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing Ctrl-- ou Ctrl++) to the document. Only supported by WebKit (and possibly Blink).

<percentage>

Le facteur de zoom à appliquer. 100% est équivalent au mot-clé normal. Les valeurs supérieures à 100% agrandissent l'élément et les valeurs inférieures le réduisent.

<number>

Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages :  1.0 correspond à normal (ou 100%) , les valeurs supérieures à 1.0 agrandissent l'élément et les valeurs inférieures le réduisent.

Syntaxe formelle

normal | reset | <number> | <percentage>

Exemples

CSS

p.petit {
  zoom: 75%;
}
p.normal {
  zoom: normal;
}
p.gros {
  zoom: 2.5;
}
p {
  display: inline-block;
}
p:hover {
  zoom: reset;
}

HTML

<p class="petit">Petit</p>
<p class="normal">Normal</p>
<p class="gros">Gros</p>

Résultat

Spécifications

Cette propriété n'est pas standard et est née avec Internet Explorer. Apple la décrit dans la référence CSS pour Safari. Rossen Atanassov, de Microsoft, a dressé un brouillon de spécification sur GitHub

Compatibilité des navigateurs

Voir aussi

• L'article de CSS-Tricks sur zoom
• Le descripteur zoom pour la règle @ @viewport
• bug 390936 à propos de l'implémentation de la propriété dans Firefox