Proprietà CSS zoom - Sintassi, Valori, Esempi

La proprietà CSS zoom scala un elemento e il suo contenuto, ingrandendolo o rimpicciolendolo di un fattore specificato. Un valore di 2 raddoppia la dimensione renderizzata, 0.5 la dimezza, mentre normal (il valore predefinito) la lascia invariata.

Questa pagina illustra la sintassi di zoom, tutti i valori accettati, le differenze rispetto a transform: scale(), il supporto dei browser e quando conviene usare ciascuno.

Come `zoom` differisce da `transform: scale()`

Le due proprietà sembrano intercambiabili, ma si comportano in modo molto diverso:

zoom scala layout e paint. Un elemento con zoom occupa il nuovo box più grande nel flusso del documento, spingendo gli elementi adiacenti. Il browser riesegue anche il layout, quindi il testo si ridispone nitidamente alla nuova dimensione.
transform: scale() scala solo il paint. L'elemento mantiene il proprio box originale per il layout — cresce visivamente ma si sovrappone ai vicini invece di spostarli, e i pixel scalati possono apparire leggermente sfocati.

Usa zoom quando vuoi che il layout circostante risponda alla nuova dimensione. Usa transform: scale() (la scelta standardizzata e pienamente supportata) per effetti hover, animazioni e qualsiasi cosa che non deve disturbare il flusso.

Attenzione

zoom è non standard e non è supportata nelle versioni precedenti di Firefox. Per i siti in produzione che devono funzionare ovunque, preferisci transform: scale() per ridimensionare un elemento.

Valore iniziale	normal
Si applica a	Tutti gli elementi.
Ereditato	No.
Animabile	Sì.
Versione	Non standard
Sintassi DOM	object.style.zoom = "4";

Sintassi

Valori CSS zoom

zoom: normal | number | percentage | reset | initial | inherit;

Le forme number e percentage sono quelle che userai in pratica: zoom: 1.5 e zoom: 150% significano la stessa cosa.

Esempio della proprietà zoom

L'esempio seguente mostra tre cerchi identici, ciascuno scalato da un fattore diverso, così puoi confrontare normal, una percentuale e un numero senza unità affiancati.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.element {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        zoom: 2;
      }
      div#grey {
        background-color: #666;
        zoom: normal;
      }
      div#blue {
        background-color: #1c87c9;
        zoom: 300%;
      }
      div#green {
        background-color: #8ebf42;
        zoom: 5;
      }
    </style>
  </head>
  <body>
    <h2>Zoom property example</h2>
    <div id="grey" class="element"></div>
    <div id="blue" class="element"></div>
    <div id="green" class="element"></div>
  </body>
</html>

Provalo tu stesso »

Risultato

L'immagine mostra tre cerchi scalati con fattori diversi: il cerchio grigio usa normal (1x), il cerchio blu usa 300% (3x) e il cerchio verde usa 5 (5x). Nota come i cerchi più grandi spingono il layout circostante verso l'esterno, dimostrando il comportamento di zoom nel scaling del layout.

Valori

Valore	Descrizione
normal	Specifica la dimensione normale dell'elemento.
number	Fattore di zoom. Equivalente alla percentuale corrispondente (1.0 = 100% = normal). Valori maggiori di 1.0 ingrandiscono. Valori minori di 1.0 rimpiccioliscono.
percentage	Specifica un valore in percentuale. 100% equivale a normal.
reset	Non ingrandisce l'elemento se l'utente applica uno zoom non basato sul pizzico al documento.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Supporto dei browser

zoom è nata in Internet Explorer ed è stata successivamente adottata da Chrome, Edge, Safari e Opera. Firefox ha aggiunto il supporto relativamente di recente e l'ha ignorata per anni, quindi trattala come un miglioramento progressivo anziché come uno strumento fondamentale per il layout. Essendo non standard, fornisci sempre un fallback con transform: scale() per qualsiasi cosa critica.

Proprietà correlate

transform — il modo standard e pienamente supportato per scalare, ruotare, distorcere e traslare gli elementi.
transition — anima il cambiamento quando si scala al passaggio del mouse o al focus.
width — imposta una dimensione esplicita invece di un fattore di scala.
overflow — controlla cosa succede quando un elemento con zoom supera il suo contenitore.

Esercitazione

Pratica

Quale proprietà dovrebbe essere usata al posto di questa, se possibile?

transform: rotate()transform: translate()transform: scale()transform: skew()

Come zoom differisce da transform: scale()