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.
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
/* 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
Non-standard-
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
(ou100%
) , 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
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
Valeur initiale | normal |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | Not animatable |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'article de CSS-Tricks sur
zoom
- bug Firefox 390936 à propos de l'implémentation de la propriété dans Firefox