`Zoom` - Propriété CSS

zoom

Résumé des caractéristiques de la propriété `zoom`

Description rapide

Définit un agrandissement ou une réduction de l'élément, tout en préservant la mise en page (contrairement à scale).

Statut

Problèmes de compatibilité ⚠

Utilisable sur

HTML

Valeurs prédéfinies

normal

Pourcentages

Calculés par rapport à la dimension correspondante de l'élément.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété zoom passe progressivement d'une valeur à une autre.

Module W3C

Module CSS Viewport

Schéma syntaxique de `zoom`.

Schéma syntaxique de la propriété zoom.

Description de la propriété `zoom`.

⚠

La définition de la propriété zoom est en cours d'évolution. D'abord déclarée obsolète, elle est maintenant réintroduite dans la spécification du W3C avec de nouvelles caractéristiques. Cette page sera complétée lorsque la propriété zoom sera davantage traitée par les navigateurs.

La propriété zoom permet d'appliquer un coefficient de grossissement ou de réduction à un élément.

Les propriétés de transformation CSS offrent une possibilité comparable, avec cependant une grosse différence : les transformations ne modifient pas le reste de la mise en page. Les éléments ayant subi une transformation peuvent empiéter sur d'autres éléments. Ce n'est pas le cas avec l'utilisation de zoom.
Pour davantage d'explications sur les transformations, reportez-vous au pages transform et scale.

Cet élément a été agrandi avec la propriété zoom.
zoom:2

La suite du contenu est repoussée pour laisser la place nécessaire à l'agrandissement de l'élément.
La transparence partielle de l'élément laisse voir que rien n'est caché en dessous.

Cet élément a été agrandi avec une transformation.
scale:2

La mise en page n'est pas modifiée.
Cet élément empiète sur la suite du contenu, en l'occurence ce texte.

Valeurs pour `zoom`.

zoom: normal;

Aucun effet de zoom n'est appliqué à l'élément.
zoom: 1.2;

La valeur est un nombre sans unité, positif et non nul. Une valeur supérieure à 1 correspond à un grossissement, et une valeur inférieure à 1 à un rétrécissement.
La valeur peut également être exprimée en pourcentages. Dans ce cas, 100% est équivalent à 1.

zoom:0.75

zoom:1

zoom:1.2
zoom: initial; (none) zoom: inherit; zoom: revert; zoom: revertLayer; zoom: unset;

Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `zoom`.

La propriété zoom peut facilement être animée de façon fluide puisque la valeur attendue est numérique. Notez que, au fur et à mesure que l'élément s'agrandit, la suite du contenu descend. Le changement de la valeur de zoom provoque une mise à jour de la mise en page.

Exemple