CSS interpolate-size (Property)

TL;DR: CSS interpolate-size membuka kemampuan animasi pada nilai intrinsic size seperti height: auto, max-content, dan fit-content tanpa hack JavaScript. Per Mei 2026, properti ini menyederhanakan komponen accordion, dropdown, dan tooltip di Next.js dengan satu baris CSS.

Apa itu CSS interpolate-size?

CSS interpolate-size adalah properti CSS yang menentukan apakah browser boleh menginterpolasi (menganimasikan) perubahan antara nilai panjang konkret dan nilai intrinsic seperti auto. Tanpa properti ini, animasi dari height: 0 ke height: auto tidak berjalan karena browser tidak tahu nilai akhir secara numerik.

Sebelumnya, developer Next.js memakai pendekatan seperti ResizeObserver, max-height yang besar, atau library FLIP. Dengan interpolate-size, accordion FAQ atau menu mobile bisa animate murni CSS dan tetap accessible. Lihat juga praktik scrollbar-gutter untuk strategi pencegahan layout shift tanpa JavaScript.

Cara Pakai

Contoh untuk accordion di Next.js:

:root {
  interpolate-size: allow-keywords;
}
.accordion-panel {
  height: 0;
  transition: height 220ms ease;
}
.accordion-panel[data-open="true"] {
  height: auto;
}

Detail spec ada di MDN Web Docs untuk interpolate-size yang diperbarui mengikuti progres browser support.

Kenapa Penting?

Untuk situs konten panjang dengan FAQ atau menu collapse, interpolate-size memangkas 20-50 baris JavaScript per komponen. Dalam beberapa landing page Next.js yang saya bantu pada April 2026, penghapusan ResizeObserver pada accordion mengurangi main thread blocking 12-18 ms dan menstabilkan Core Web Vitals INP.

Pertanyaan Umum

Apakah perlu fallback untuk browser lama?

Ya. Sediakan fallback transition: max-height untuk Safari versi lama atau Firefox yang belum mendukung penuh.

Apakah ini menggantikan FLIP animation?

Tidak sepenuhnya. interpolate-size cocok untuk transisi sederhana, sedangkan FLIP tetap relevan untuk reorder list atau perubahan layout kompleks.