zoom

Baseline 2024
Newly available

Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Non standard: Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

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

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

zoom = 
  <number [0,∞]>      ||
  <percentage [0,∞]>

Exemples

CSS

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

HTML

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

Valeur initiale1
Applicabilitétous les éléments
Héritéenon
PourcentagesConverted to <number>
Valeur calculéeas specified, but with <percentage> converted to the equivalent <number>
Type d'animationNot animatable

Compatibilité des navigateurs

Voir aussi