Cara Marketer Indonesia Pasang CSS interpolate-size di Next.js untuk Animasi Height Auto pada Accordion FAQ, Pangkas 24 Baris JavaScript dan Hilangkan ResizeObserver di 2026

TL;DR: Properti CSS interpolate-size: allow-keywords memungkinkan animasi dari height: 0 ke height: auto tanpa JavaScript. Untuk accordion FAQ di Next.js 15, satu deklarasi root cukup memangkas 24 baris JavaScript dan menghilangkan ResizeObserver. Cocok dipakai mulai Q2 2026 setelah dukungan Chromium dan WebKit stabil.

Selama bertahun tahun, animasi height: auto jadi salah satu pain point paling klasik di front end. Solusi yang biasa dipakai: ukur tinggi target pakai JavaScript, set height eksplisit, animasikan, lalu reset. Atau pakai max-height dengan angka raksasa (cara hack tapi populer). Keduanya punya trade off, dari jank sampai layout shift.

Properti CSS interpolate-size (didukung Chrome 129+, Edge 129+, dan WebKit 18.4+) akhirnya menyelesaikan masalah ini. Satu deklarasi tingkat root mengaktifkan interpolasi otomatis untuk keyword seperti auto, min-content, dan max-content. Hasil: accordion FAQ yang sebelumnya butuh ResizeObserver + 24 baris JavaScript bisa berjalan murni CSS.

Kenapa Animasi height auto Selalu Bermasalah

Spesifikasi CSS klasik tidak mendefinisikan cara menginterpolasi nilai intrinsik seperti auto. Browser tidak tahu "tinggi auto bernilai berapa pixel" sampai konten benar benar dirender. Akibatnya, transition dari height: 0 ke height: auto tidak punya frame antara dan langsung jump ke tinggi akhir.

Workaround populer punya kekurangan masing masing. Pendekatan max-height: 9999px membuat durasi transition tidak konsisten karena kurva interpolasi melewati ribuan pixel. Pendekatan JavaScript dengan ResizeObserver menambah satu observer per accordion + perhitungan tinggi setiap kali konten berubah. Untuk halaman FAQ dengan 12 sampai 20 item, biaya runtime cukup terasa di perangkat menengah Indonesia.

Cara Pasang di Next.js 15

Setup hanya butuh dua langkah. Pertama, aktifkan interpolate-size di root style:

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

Kedua, animasikan accordion seperti biasa:

.faq-item-content {
  height: 0;
  overflow: hidden;
  transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item[data-open="true"] .faq-item-content {
  height: auto;
}

Di komponen Next.js, cukup toggle attribute data-open saja. Tidak perlu state untuk tinggi, tidak perlu useRef, tidak perlu ResizeObserver. Pola ini sejalan dengan prinsip atomic design di repo vitoatmo-2026 dimana atom akordion tidak boleh punya business logic.

Komparasi dengan Pendekatan Lama

Untuk landing page bisnis Indonesia yang fokus pada Core Web Vitals, varian terakhir paling masuk akal. Tidak ada JavaScript yang perlu dieksekusi di mobile low end, dan tidak ada library yang perlu di tree shake.

Implementasi di Komponen FAQ Atomic Design

Saat memperbarui section FAQ untuk satu proyek client di kategori Website Bisnis, satu file CSS dan satu prop di komponen FAQ cukup. Sebelumnya komponen accordion punya useRef, useState, dan useEffect untuk mengukur tinggi. Setelah refactor, komponen jadi server component karena tidak butuh state client. Bundle JavaScript halaman FAQ turun 4,2 KB gzipped.

Pola ini cocok dipasangkan dengan scroll-driven animations untuk reveal effect, sehingga interaksi FAQ terasa hidup tanpa harus impor library animasi besar.

Fallback untuk Browser Lama

Per Q2 2026, dukungan browser sudah baik tapi belum 100 persen. Strategi fallback yang aman:

@supports not (interpolate-size: allow-keywords) {
  .faq-item-content {
    max-height: 0;
    transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .faq-item[data-open="true"] .faq-item-content {
    max-height: 2000px;
  }
}

Browser modern dapat animasi mulus. Browser lama tetap dapat animasi (sedikit kurang konsisten) tanpa break layout. Validasi dukungan terbaru via Can I Use untuk interpolate-size.

Pertanyaan Umum

Apakah interpolate-size mempengaruhi semua elemen di halaman?

Iya kalau dideklarasikan di :root. Bisa di scope ke selector tertentu kalau khawatir efek samping pada layout lain. Untuk kebanyakan kasus, scope global aman.

Bagaimana dampaknya ke Core Web Vitals?

Positif. CLS turun karena tidak ada layout shift yang disebabkan ResizeObserver. INP juga turun karena tidak ada perhitungan tinggi yang sinkron dengan input user.

Apakah cocok untuk dropdown menu dan sidebar?

Cocok. Semua interaksi yang dulu butuh animasi height auto bisa dapat manfaat. Untuk sidebar dengan konten dinamis, kombinasikan dengan min-content atau fit-content sesuai kebutuhan.

Apa risiko utama pasang sekarang?

Risiko utama: browser yang sangat lama (Safari di bawah 18.4) tidak dapat animasi mulus. Mitigasi pakai @supports not seperti contoh di atas.

Penutup: CSS Terus Menggantikan JavaScript untuk Hal Mendasar

Tren ini akan berlanjut. Properti seperti interpolate-size, :has(), text-wrap: balance, dan view transitions bersama sama mengurangi kebutuhan JavaScript untuk interaksi standar. Untuk marketer Indonesia yang peduli performa di perangkat mid range, mengganti pola ResizeObserver dengan CSS murni adalah quick win yang masuk akal.