Wawancara frontend: menggunakan interpolate-size secara aman untuk animasi intrinsic-size

Perintah dan cakupan

Panel bantuan atau kartu akordeon secara default hanya menampilkan judul, lalu membesar ke tinggi yang ditentukan oleh konten. Produk menginginkan transisi yang mulus ke auto, max-content, atau fit-content sambil tetap mempertahankan perilaku keyboard, pembaca layar (screen reader), dan browser lama. Jelaskan bagaimana Anda akan menggunakan interpolate-size atau calc-size() dan bagaimana Anda memvalidasi hasilnya.

Ini cocok untuk wawancara frontend, sistem desain (design system), dan performa. MDN menandai interpolate-size sebagai ketersediaan terbatas dan bukan Baseline; fitur ini memerlukan keikutsertaan eksplisit (opt-in) untuk interpolasi ukuran intrinsik dan bukan merupakan pintasan animasi yang aman secara universal.

Hal yang dievaluasi pewawancara

Apakah Anda memahami batasan antara nilai panjang (length) dan kata kunci ukuran intrinsik (intrinsic-size).
Apakah Anda mengetahui bahwa interpolate-size diwariskan dan opt-in global memengaruhi elemen turunan (descendants).
Apakah Anda membedakan interpolate-size dari calc-size().
Apakah browser yang tidak didukung mempertahankan status statis yang dapat digunakan dan perilaku gerakan tereduksi (reduced-motion).
Apakah Anda menguji perubahan konten, pergeseran tata letak (layout shift), urutan fokus, dan performa alih-alih hanya kehalusan visual.

Klarifikasi yang perlu ditanyakan terlebih dahulu

Konfirmasikan:

Target browser dan versi minimum mana yang penting, dan apakah progressive enhancement dapat diterima?
Apakah ini kontrol pengungkapan semantik (semantic disclosure control), dan apakah konten harus tetap ada dalam dokumen dan accessibility tree?
Apakah Anda menganimasikan tinggi, lebar, atau keduanya, dan dapatkah konten berubah secara asinkron selama transisi?
Haruskah komponen mendukung reduced motion, interaksi keyboard, pengembalian fokus, dan pembalikan di tengah animasi?

Jika tidak ditentukan, asumsikan Chromium, Firefox, dan Safari modern dengan tingkat dukungan berbeda; browser yang lebih lama harus tetap dapat digunakan tanpa animasi ukuran intrinsik yang mulus.

Kerangka jawaban tiga puluh detik

Pertama, saya akan membangun tombol dan wilayah konten semantik, lalu memperlakukan animasi sebagai progressive enhancement. Di browser yang didukung, aktifkan interpolate-size: allow-keywords pada kontainer lokal dan lakukan transisi dari panjang ciut (collapsed length) eksplisit ke max-content atau auto; evaluasi calc-size() hanya ketika ukuran intrinsik memerlukan perhitungan lebih lanjut. Browser yang tidak didukung menggunakan perluasan statis, batas tinggi maksimum, atau peralihan langsung. Status bisnis tidak boleh bergantung pada penyelesaian animasi. Terakhir, uji keyboard, pembaca layar, reduced motion, konten panjang, pembalikan arah animasi, dan performa nyata.

Pembahasan mendalam langkah demi langkah

1. Menetapkan status semantik

Gunakan tombol dengan aria-expanded yang mengarah ke wilayah konten, dan pilih strategi penyembunyian yang cocok dengan semantik produk. Animasi hanya mengubah transisi visual dan tata letak; animasi tidak menentukan apakah konten dapat dioperasikan. Jangan pernah membiarkan fokus terdampar di wilayah yang diciutkan. Jika fokus tetap berada di dalam konten yang tersembunyi, kembalikan ke pemicu atau kontrol yang terlihat jelas.

2. Memilih mekanisme interpolasi

interpolate-size: allow-keywords memungkinkan interpolasi antara panjang atau persentase dan nilai ukuran intrinsik, tetapi tidak menganimasikan antara dua kata kunci intrinsik secara langsung. Gunakan calc-size() ketika ukuran intrinsik harus berpartisipasi dalam perhitungan; calc() biasa tidak dapat menghitung auto atau max-content. Mulailah dengan cakupan lokal alih-alih mengaktifkannya pada root dan memengaruhi komponen lain yang tidak terkait tanpa disengaja.

3. Menentukan batas konten dan tata letak

Beri kontainer animasi batas overflow, ukuran maksimum, dan pemosisian yang eksplisit. Perubahan konten secara asinkron mengubah ukuran target, jadi pilihlah apakah akan menunggu konten stabil, menghitung ulang, atau langsung melompat ke status akhir. Grid bertingkat (nested grids), pemosisian absolut, dan kontainer scroll dapat membuat ukuran intrinsik berbeda dari intuisi; ukur komposisi komponen yang sebenarnya.

4. Kompatibilitas dan fallback

Batasi penyempurnaan di balik deteksi dukungan fitur. Browser lama harus menggunakan tinggi statis, perkiraan batas max-height, atau peralihan langsung. Fallback harus mempertahankan konten yang dapat dibaca, kontrol yang dapat digunakan, tautan yang dapat difokuskan, dan status tertutup yang dapat dipahami. Jangan mengukur tata letak pada setiap frame animasi di JavaScript hanya untuk menyembunyikan ketiadaan dukungan CSS; hal tersebut memicu layout paksa (forced layout) dan lebih banyak jalur status.

5. Preferensi gerakan dan interaksi

Di bawah prefers-reduced-motion: reduce, persingkat atau hapus transisi sambil tetap mempertahankan logika status dan fokus. Perilaku Enter, Space, Tab, dan Escape harus mengikuti kontrak komponen. Jika pengguna mengeklik lagi di tengah transisi, balikkan secara alami atau langsung lompat ke target baru; jangan biarkan animasi konkuren berebut tata letak dan aria-expanded.

6. Metrik validasi

Gunakan teks pendek dan panjang, penanganan galat asinkron, serta pembungkusan teks terlokalisasi. Ukur pergeseran tata letak (layout shift), frame yang terlewat (dropped frames), waktu style dan layout, latensi interaksi, visibilitas fokus, dan output teknologi asistif. Bandingkan jalur yang didukung dan tidak didukung, termasuk kasus saat properti diabaikan. Tabel kompatibilitas browser bukanlah jaminan performa produk; manfaatnya harus berasal dari pengukuran.

Contoh jawaban berkualitas tinggi

Saya akan menerapkan tombol semantik dan wilayah konten dengan aria-expanded sebagai sumber status; animasi CSS hanyalah sebuah penyempurnaan (enhancement). Pada browser yang didukung, tetapkan interpolate-size: allow-keywords pada kontainer panel dan lakukan transisi dari panjang ciut eksplisit ke max-content atau auto. Jika perhitungan atas ukuran intrinsik diperlukan, gunakan calc-size(). Saya akan menghindari opt-in tingkat root secara membabi buta karena properti ini diwariskan.

Ketika tidak didukung, panel tetap terbuka secara langsung atau menggunakan batas max-height; konten dan fokus tidak bergantung pada selesainya animasi. Gerakan tereduksi (reduced motion) menghapus transisi tetapi tidak menghapus perubahan status. Jika konten asinkron berubah selama transisi, saya akan menunggu stabilitas, menghitung ulang, atau melompat ke status akhir sesuai dengan kebijakan yang terdokumentasi, sambil memperbarui aria-expanded sekali saja.

Validasi mencakup konten pendek dan panjang, lokalisasi, keyboard, pembaca layar, pengembalian fokus, pembalikan arah, browser lama, dan reduced motion. Untuk performa, bandingkan style, layout, frame rate, pergeseran tata letak, dan latensi interaksi. Jika jalur yang disempurnakan menyebabkan jitter atau kegagalan kompatibilitas, persempit selektornya atau nonaktifkan; eksperimen CSS tidak boleh mengurangi kegunaan dasar (baseline usability).

Kesalahan umum

Memperlakukan kata kunci ukuran intrinsik sebagai titik akhir numerik biasa yang semuanya dapat diinterpolasikan satu sama lain.
Menyetel interpolate-size pada root dan secara tidak sengaja mengubah elemen turunan yang tidak terkait.
Memperlakukan calc-size() sebagai pengganti langsung untuk calc() tanpa menjelaskan batasannya.
Hanya menguji browser yang didukung dan mengabaikan konten atau fokus saat properti tidak diterapkan.
Menyembunyikan tinggi sebenarnya di balik max-height yang sangat besar, yang mendistorsi kecepatan animasi dan tata letak.
Membaca tata letak dan menulis style pada setiap frame JavaScript, yang memaksa tata letak sinkron (synchronous layout).
Mengabaikan reduced motion, pembalikan keyboard, dan perubahan konten asinkron.
Menampilkan demo yang mulus tanpa mengukur CLS, latensi interaksi, atau status pembaca layar.

Pertanyaan lanjutan dan tanggapan

Mengapa Anda tidak dapat bertransisi langsung dari nol ke auto?

Interpolasi tradisional membutuhkan titik akhir numerik; sedangkan auto dan max-content adalah ukuran intrinsik. interpolate-size mengizinkan interpolasi panjang-ke-intrinsik tertentu, tergantung pada dukungan browser.

Kapan Anda akan menggunakan calc-size?

Gunakan saat target memerlukan perhitungan berdasarkan ukuran intrinsik, seperti menambahkan spasi atau menerapkan batas. Jika Anda hanya memerlukan interpolasi panjang-ke-intrinsik, interpolate-size lokal lebih jelas.

Bagaimana jika konten bertambah panjang selama animasi?

Tentukan kebijakan: tunggu data stabil, hitung ulang target, atau lompat ke status akhir. Jaga agar scrolling, fokus, dan aria-expanded tetap konsisten, serta uji interaksi berulang yang cepat.

Apa yang dilakukan oleh browser yang tidak didukung?

Pertahankan ekspansi statis langsung atau terbatas sehingga konten, tautan, dan jalur keyboard tetap lengkap. Kegagalan progressive enhancement seharusnya hanya mengurangi polesan visual, bukan kegunaan bisnis.

Bagaimana Anda memverifikasi aksesibilitas?

Gunakan keyboard untuk membuka, menutup, membuka kembali, dan memindahkan fokus, lalu periksa apakah teknologi asistif melaporkan status dan konten yang sama. Ulangi dengan reduced motion dan pastikan konten tersembunyi tidak pernah menahan fokus yang tidak dapat dijangkau.