Aki már csinált accordion-t, lenyíló menüt vagy értesítéssávot CSS-átmenettel, ismeri a problémát: a height: auto nem animálható. A böngésző nem tweenel, egyszerűen azonnal átugrik a végértékre. A szokásos válasz erre a scrollHeight lemérése JavaScriptből, vagy a grid-template-rows: 0fr → 1fr trükk. A CSS Values and Units szabvány friss függvénye, a calc-size(), és a hozzá tartozó interpolate-size tulajdonság ezt most natívan megoldja.
Miért nem lehetett eddig animálni a height: autót
A CSS transition és animation numerikus interpolációt végez: két konkrét length-érték (pl. pixel) között mozog lineárisan vagy easing szerint. Az auto, a max-content, a fit-content és társaik viszont kulcsszavak, nem konkrét hosszúságok – az értéküket csak layout közben, a tartalom ismeretében számítja ki a böngésző. Emiatt bármelyik tulajdonságnál, aminek a kezdő vagy végértéke ilyen kulcsszó, a discrete animálás szabályai érvényesültek: az érték a végén vagy az elején egyszerűen átvált, animáció nélkül.
Emiatt a legtöbb fejlesztő vagy lemért egy fix pixelértéket JS-ből (element.scrollHeight), animált arra, majd az animáció végén visszaállt auto-ra, vagy a grid-template-rows: 0fr → 1fr trükköt használta, ami az fr egység numerikus voltával kerülte meg a problémát.
Az interpolate-size bekapcsolja a kulcsszavak animálását
A CSS Values and Units Level 5 vezeti be az interpolate-size tulajdonságot. Alapértéke numeric-only, ami a jelenlegi, animáció nélküli viselkedést jelenti. Ha allow-keywords-re állítjuk, a böngésző megengedi, hogy egy length-érték és egy intrinsic kulcsszó között animáljon: layout közben ténylegesen kiszámolja, mekkora az auto az adott pillanatban, és onnan interpolál.
A Chrome for Developers dokumentációja a globális bekapcsolást javasolja, mert a tulajdonság öröklődik:
:root {
interpolate-size: allow-keywords;
}
.accordion-content {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.accordion-content.is-open {
height: auto;
}Ennyi. Nincs scrollHeight-mérés, nincs requestAnimationFrame, nincs külön állapotgép a nyitás-csukás animáció köré – a böngésző maga interpolál a 0-ból az auto-ba.
calc-size(): amikor az intrinsic méreten még számolni is kell
Az interpolate-size a sima esetet oldja meg. Ha az intrinsic mérethez képest valami egyebet is ki kell fejezni – például extra paddinget hozzáadni, vagy egy lépésközre kerekíteni –, arra való a calc-size() függvény:
.accordion-content.is-open {
height: calc-size(auto, size + 1rem);
}A size kulcsszó a kiszámolt intrinsic értékre hivatkozik (itt az auto aktuális magasságára), a calc-size() első paramétere pedig maga az alap intrinsic kulcsszó (auto, fit-content, max-content, min-content vagy content). Fontos részlet: ha egy elemen calc-size()-t használunk, az automatikusan bekapcsolja rá az interpolate-size: allow-keywords-öt is – tehát a fenti :root szabály nélkül is animálódni fog.
Amit a calc-size() nem tud: két kulcsszó között (pl. auto-ból max-content-be) animálni. Az egyik végpontnak mindig konkrét hossznak vagy százaléknak kell lennie.
Böngészőtámogatás: egyelőre Chromium-exkluzív
A funkció Chrome/Edge 129-től (2024 ősze) elérhető, az Opera és a Samsung Internet friss verziói is támogatják. A Firefox és a Safari fejlesztői eddig nem tettek hivatalos elköteleződést: a Mozilla és a WebKit standards-positions repóiban nyitva áll az issue, konkrét implementációs terv nélkül. A funkció nem is szerepel a 2026-os Interop-lista fókuszterületei között, tehát rövid távon nem várható itt áttörés.
A jó hír, hogy ez biztonságosan rétegezhető, progresszív fejlesztés. Azokban a böngészőkben, amik nem ismerik az interpolate-size-t, a height: auto egyszerűen visszaesik a jelenlegi, animáció nélküli, azonnali váltásra – a layout nem törik el, csak nem lesz simább az átmenet.
Mikor éri meg most bevezetni
Ha a célközönség kizárólag Chromium-alapú környezet – belső admin felület, Electron-app, vállalati Chrome-flotta –, a calc-size()/interpolate-size pár ma is teljes értékű helyettesítője a JS-es magasságmérésnek. Publikus, széles közönségnek szánt oldalon inkább kiegészítésként érdemes bevezetni a meglévő JS-es vagy grid-template-rows-os megoldás mellé: a támogatott böngészőkben egyszerűen elhagyható a JS, a többiben megmarad a korábbi fallback.
Amit mindenképp érdemes megjegyezni: a CSS-nek végre van szókincse az „animálj egy kulcsszó felé” problémára, és a calc-size() ennél általánosabb eszköz is – bármilyen intrinsic mérettel végzett számolásra használható, nemcsak animációkban.