Animare l'altezza automatica in CSS: cosa puoi fare oggi con interpolate-size

Aprire un pannello da altezza zero fino a quanto serve al suo contenuto è una cosa che in CSS non si poteva fare con una transizione. Il valore di arrivo è auto, il browser non sa interpolare tra una lunghezza e una parola chiave, e il cambio avviene di colpo. Per anni si è risolto con JavaScript che misura l'altezza, con max-height impostato a un valore abbondante, con trucchi sulle griglie. Tutti funzionano, nessuno è elegante.

La proprietà interpolate-size toglie il problema alla radice, ma non è ancora disponibile ovunque. L'8 ottobre 2026 WebKit ha annunciato di averla aggiunta, insieme a calc-size(), nella Safari Technology Preview 254. Vale la pena capire come funziona, dove si può usare già adesso e quando è ragionevole eliminare il JavaScript.

Come funziona interpolate-size

La proprietà ha due valori. Quello predefinito, numeric-only, lascia tutto com'è: le parole chiave di dimensione intrinseca non si animano. Con allow-keywords il browser può interpolare tra una lunghezza o una percentuale e una di queste parole chiave: auto, min-content, max-content, fit-content e, per flex-basis, content.

La proprietà è ereditata, quindi si può dichiarare una volta sola su :root oppure limitarla a un contenitore. L'esempio della documentazione MDN è questo:

:root {
  interpolate-size: allow-keywords;
}

section {
  height: 2.5rem;
  overflow: hidden;
  transition: height ease 1s;
}

section:hover,
section:focus {
  height: max-content;
}

Il pannello mostra solo l'intestazione e si espande con animazione al passaggio del mouse o al focus da tastiera. Un vincolo importante: uno dei due estremi dell'animazione deve essere una lunghezza o una percentuale. Tra due parole chiave, per esempio da min-content a max-content, l'interpolazione non è possibile.

Quando serve calc-size()

La funzione calc-size() serve quando si vuole fare un calcolo su una dimensione intrinseca, cosa che calc() non consente. Prende come primo argomento la dimensione di partenza e come secondo un'espressione che usa la parola chiave size per riferirsi a quel valore. Gli esempi pubblicati da Chrome for Developers:

width: calc-size(auto, size - 10px);
width: calc-size(min-content, size + 1rem);
width: calc-size(max-content, size * .5);

La stessa documentazione avverte che le percentuali dentro calc-size() si riferiscono al blocco contenitore e possono dare risultati inattesi: per scalare una dimensione conviene moltiplicare per un numero senza unità. MDN precisa inoltre che calc-size() abilita implicitamente l'interpolazione, ma per i casi comuni è preferibile interpolate-size. Per calc-size() serve un fallback: si dichiara prima un valore che tutti i browser capiscono, come width: fit-content;, e subito dopo la versione con calc-size(), che i browser senza supporto ignorano.

Il supporto al 12 ottobre 2026

I dati sono quelli di MDN (browser-compat-data) e di Can I use, consultati il 12 ottobre 2026.

• Chrome e Edge: dalla versione 129. Il post di Chrome for Developers che la introduce è del 17 settembre 2024.
• Safari stabile: non supportata. Can I use indica nessun supporto fino alla 27.2, anche su iOS. WebKit l'ha aggiunta nella Technology Preview 254 (8 ottobre 2026), quindi non è ancora in una release stabile.
• Firefox: non implementata. MDN rimanda al bug 1945962, e Can I use non segna alcuna versione supportata fino alla 160.

MDN classifica la proprietà come a disponibilità limitata e sperimentale, quindi fuori da Baseline. La presenza di una seconda implementazione in anteprima è un segnale di convergenza, ma non una data di arrivo: non ho trovato indicazioni su quando Safari stabile o Firefox la rilasceranno.

Cosa succede nei browser senza supporto

Qui sta la parte più utile per decidere. Secondo Chrome for Developers, dichiarare interpolate-size: allow-keywords su :root è un miglioramento progressivo: i browser che non la conoscono ignorano la dichiarazione, la transizione non parte e il pannello passa semplicemente allo stato finale. Non si rompe niente, a patto che lo stato finale sia corretto anche senza animazione.

Ne deriva una regola pratica. Se l'animazione è un dettaglio di rifinitura, puoi rimuovere il JavaScript che misura l'altezza e accettare lo scatto su Safari e Firefox. Se l'animazione fa parte del significato dell'interfaccia, per esempio guida l'occhio verso contenuto che compare, per ora conviene tenere la soluzione attuale e riconsiderarla quando il supporto sarà più ampio.

Tre cose da controllare prima di attivarla

Primo: MDN spiega che il comportamento non è attivo per impostazione predefinita perché molti fogli di stile danno per scontato che le parole chiave intrinseche non si animino. Se imposti allow-keywords su :root in un sito esistente, verifica che nessun componente con una transizione già dichiarata cambi comportamento. Su un sito nuovo il rischio non c'è; su uno esistente può essere più prudente limitare la proprietà ai soli contenitori che ti interessano.

Secondo: la documentazione MDN su interpolate-size non dice nulla di accessibilità. È una mia raccomandazione, non una indicazione delle fonti: se anima l'espansione di pannelli, rispetta la preferenza dell'utente con @media (prefers-reduced-motion: reduce) e riduci o togli la transizione.

Terzo: provare in un browser senza supporto. Il fallback funziona solo se lo hai visto funzionare.

Fonti

1. MDN, “interpolate-size”, consultata il 12 ottobre 2026
2. Chrome for Developers, “Animate to height: auto; (and other intrinsic sizing keywords) in CSS”, 17 settembre 2024
3. WebKit Blog, “Release Notes for Safari Technology Preview 254”, 8 ottobre 2026
4. Can I use, “interpolate-size”, consultata il 12 ottobre 2026
5. MDN browser-compat-data, css/properties/interpolate-size.json, consultato il 12 ottobre 2026