calc-size() und interpolate-size: Transitions auf auto-Werte endlich möglich

1. Warum Transitions auf auto-Werte bisher nicht funktionierten

CSS-Transitions interpolieren zwischen zwei numerischen Werten, indem der Browser bei jedem Frame einen Zwischenwert berechnet, etwa zwischen 100px und 300px. Der Schlüsselwert auto ist dagegen kein numerischer Wert, sondern eine Anweisung an das Layout-System, die Größe aus dem Inhalt zu bestimmen. Der Browser kannte historisch keine Zwischenstufe zwischen einer festen Zahl und einer solchen Anweisung, weshalb eine Transition auf height: auto gar nicht erst startete oder sofort ohne sichtbare Animation zum Endwert sprang.

Entwickler haben dieses Problem jahrelang mit JavaScript umgangen: Vor der Animation wurde die tatsächliche Höhe des Inhalts mit scrollHeight gemessen, diese Zahl als fester Pixelwert gesetzt und erst dann die Transition gestartet. Das funktioniert, bringt aber zusätzliche JavaScript-Abhängigkeit, Layout-Thrashing durch die Messung und Fehleranfälligkeit bei dynamischem Inhalt, dessen Höhe sich nach dem Messen noch ändert, etwa durch nachladende Bilder.

2. calc-size(): auto in einen animierbaren Wert übersetzen

Die Funktion calc-size(<basis>, <calculation>) nimmt als ersten Parameter einen Schlüsselwert wie auto, fit-content oder min-content entgegen und übergibt dessen aufgelösten, tatsächlichen Größenwert an eine Rechnung im zweiten Parameter. Diese Rechnung kann so simpel wie size sein, also der reine Wert selbst, oder eine echte Berechnung wie size * 1.2, um zum Beispiel etwas Puffer über der Inhaltsgröße einzuplanen.

Der entscheidende Punkt ist, dass calc-size() aus Sicht der Transition-Engine einen echten, numerischen Wert liefert, auch wenn die Basis auto war. Damit kann der Browser zwischen einem festen Startwert wie 0px und dem Ergebnis von calc-size(auto, size) genauso interpolieren wie zwischen zwei festen Pixelwerten, weil intern längst eine Zahl vorliegt, nicht mehr das abstrakte Schlüsselwort.

.accordion-panel {
  height: 0px;
  overflow: hidden;
  transition: height 0.3s ease;
}

.accordion-panel.open {
  /* calc-size loest 'auto' zu einer echten Zahl auf,
     die animierbar ist */
  height: calc-size(auto, size);
}

3. interpolate-size: allow-keywords als Schalter für das ganze Dokument

Während calc-size() gezielt einzelne Werte animierbar macht, gibt es mit der Eigenschaft interpolate-size einen globalen Schalter, der direkt auf Elementen mit auto-Wert wirkt, ohne dass calc-size() explizit geschrieben werden muss. Gesetzt auf :root { interpolate-size: allow-keywords; } erlaubt diese Eigenschaft dem Browser, Schlüsselwörter wie auto, fit-content und min-content grundsätzlich als interpolierbare Werte zu behandeln, überall im Dokument.

Das ist der bequemere, aber weniger präzise Weg: Statt jede einzelne Transition-Deklaration mit calc-size() zu versehen, reicht eine einzige globale Regel, damit sämtliche Transitions und Animationen im Projekt von und zu auto funktionieren. Der Kompromiss ist weniger Kontrolle über einzelne Fälle, dafür deutlich weniger Schreibaufwand bei großen Projekten mit vielen Accordion- oder Dropdown-Komponenten.

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

.dropdown-menu {
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease-out;
}

.dropdown-menu[data-open] {
  /* Kein calc-size noetig -- interpolate-size erlaubt
     die direkte Transition zu auto */
  height: auto;
}

4. Typische Anwendungsfälle: Accordions, Dropdowns, dynamischer Inhalt

Der klassische Anwendungsfall ist das Accordion-Panel, dessen Inhalt in der Länge stark variieren kann, weil er aus einem CMS stammt oder Nutzereingaben enthält. Mit einer festen Zielhöhe müsste jede Änderung am Inhalt auch eine Anpassung der CSS-Höhe nach sich ziehen, was in der Praxis fast nie gepflegt wird. Mit calc-size(auto, size) passt sich die animierte Zielhöhe automatisch an, egal wie lang der Inhalt gerade ist.

Ein zweiter häufiger Fall ist ein Dropdown-Menü, dessen Breite von der Länge des längsten Eintrags abhängt. Hier eignet sich fit-content als Basis besser als auto, weil es die Breite exakt auf den Inhalt zuschneidet, statt die volle verfügbare Breite des Elternelements zu beanspruchen. Auch fit-content lässt sich in calc-size() als Basis verwenden und damit animierbar machen.

5. Browser-Support-Realität: wo calc-size() heute steht

Chrome und Edge unterstützen sowohl calc-size() als auch interpolate-size seit Chrome 129, veröffentlicht Ende 2024. Firefox und Safari hatten zum Zeitpunkt dieses Artikels noch keine vollständige, produktionsreife Unterstützung ausgeliefert, weshalb ein Projekt, das plattformübergreifend animierte auto-Übergänge braucht, aktuell nicht ausschließlich auf diese Funktion setzen sollte.

Praktisch bedeutet das: calc-size() lässt sich schon heute als progressive Enhancement einsetzen, ohne dass Nutzer auf nicht unterstützten Browsern etwas Kaputtes sehen, solange ein sinnvoller Fallback vorhanden ist. Für kritische UI-Elemente, die auf allen Browsern gleich funktionieren müssen, bleibt die JavaScript-basierte scrollHeight-Messung vorerst die sicherere Wahl, kann aber schrittweise durch calc-size() ersetzt werden, sobald der Support ausreicht.

6. Fallback-Strategie für Browser ohne Unterstützung

Der sauberste Fallback nutzt @supports, um calc-size() gezielt nur dort einzusetzen, wo der Browser es tatsächlich versteht. Außerhalb der @supports-Regel bleibt die alte, robuste Lösung bestehen: entweder eine grobe, feste Maximalhöhe mit max-height-Transition, die zwar nicht perfekt ist, aber ohne JavaScript funktioniert, oder die klassische JavaScript-Messung für Fälle, in denen die Animation exakt stimmen muss.

Wichtig ist, den Fallback nicht als Nebensache zu behandeln, denn ohne ihn sehen Nutzer auf nicht unterstützten Browsern entweder einen abrupten Sprung ohne Animation oder, schlimmer, ein Panel, das nie öffnet, weil die Höhe fälschlich bei null verharrt. Ein getesteter, funktionaler Fallback ist deshalb Pflicht, keine Kür.

.panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.panel.open {
  /* Fallback: grobe, aber funktionierende Maximalhoehe */
  max-height: 1000px;
}

@supports (height: calc-size(auto, size)) {
  .panel {
    max-height: none;
    height: 0px;
    transition: height 0.3s ease;
  }

  .panel.open {
    height: calc-size(auto, size);
  }
}

7. Rendering-Performance im Vergleich zur JavaScript-Lösung

Die JavaScript-Messung mit scrollHeight erzwingt einen synchronen Reflow, weil der Browser das Layout aktuell berechnen muss, bevor er den Wert zurückgeben kann. Bei häufig getriggerten Animationen, etwa in einer langen Liste von Accordion-Elementen, die alle gleichzeitig geöffnet werden, summiert sich dieser erzwungene Reflow spürbar und kann zu sichtbarem Ruckeln führen.

calc-size() und interpolate-size laufen dagegen vollständig innerhalb der Rendering-Pipeline des Browsers, ohne den Umweg über die JavaScript-Ausführung und ohne erzwungenen synchronen Reflow von außen. Das macht die Lösung nicht nur eleganter im Code, sondern auf Geräten mit begrenzter Rechenleistung auch messbar flüssiger, besonders bei vielen gleichzeitig animierten Elementen.

8. Kombination mit Container Queries und Custom Properties

Da calc-size() ein vollwertiger CSS-Wert ist, lässt es sich mit Custom Properties kombinieren, um zum Beispiel einen zusätzlichen Puffer über der Inhaltsgröße konfigurierbar zu machen, statt ihn hart zu codieren. Das ist besonders in Design-Systemen nützlich, in denen mehrere Komponenten dasselbe Animationsverhalten teilen, aber leicht unterschiedliche Puffergrößen benötigen.

In Kombination mit Container Queries lässt sich außerdem das Verhalten der auto-Transition responsiv steuern, etwa indem eine Komponente auf kleinen Containern die animierte Höhenänderung ganz deaktiviert, weil dort ohnehin kein Platz für eine ausklappende Animation ist, während größere Container die volle calc-size()-Transition erhalten.

.panel {
  --extra-buffer: 8px;
  height: 0px;
  transition: height 0.3s ease;
}

.panel.open {
  height: calc-size(auto, size + var(--extra-buffer));
}

9. Empfehlung: wann sich der Umstieg schon heute lohnt

Für interne Tools, Admin-Oberflächen oder Projekte mit einer bekannten, kontrollierten Browser-Zielgruppe, die überwiegend auf Chromium-Basis läuft, lohnt sich der Umstieg auf calc-size() und interpolate-size bereits jetzt, weil der Code deutlich einfacher wird und keine JavaScript-Messlogik mehr gepflegt werden muss.

Für öffentliche Websites mit breiter Browser-Streuung empfiehlt sich der hybride Ansatz mit @supports-Absicherung, wie im Fallback-Abschnitt gezeigt: Nutzer auf modernen Chromium-Browsern bekommen die präzise, performante native Lösung, während alle anderen einen funktional gleichwertigen, wenn auch technisch einfacheren Fallback erhalten.

10. Zusammenfassung

11. FAQ: calc-size() und interpolate-size: Das Wichtigste auf einen Blick