Konteks dan arahan
Sebuah pustaka komponen menggunakan custom property seperti --accent, --progress, dan --card-size. Kebutuhan desain memerlukan transisi yang mulus, namun variabel-variabel tersebut berupa string tanpa tipe, nilai yang tidak valid merambat tanpa disadari, dan komponen turunan secara tidak sengaja mewarisi nilai tema. Jelaskan kapan harus mendaftarkannya dengan CSS @property, termasuk nilai default, nilai tidak valid, pewarisan, dan kompatibilitas browser.
Topik ini cocok untuk wawancara frontend, design system, dan performa web. Ujiannya adalah memahami batas dari CSS Properties and Values API, bukan mendaftarkan setiap variabel. Bahas sintaks, nilai awal, pewarisan, interpolasi, cakupan, progressive enhancement, dan pengujian.
Apa yang sedang diuji oleh pewawancara
Jawaban yang kuat menyatakan bahwa custom property biasa dihitung sebagai string dan diwariskan secara default; properti terdaftar mendeklarasikan tipe, nilai awal, dan perilaku pewarisan, dengan nilai tidak valid diperiksa pada computed-value time. Jelaskan bahwa syntax dan inherits adalah deskriptor wajib, bahwa sintaks non-universal biasanya membutuhkan initial-value yang independen secara komputasi, serta kapan animasi, batasan tipe, dan state komponen yang tidak diwariskan membenarkan dilakukannya pendaftaran. Jangan menampilkan @property sebagai state JavaScript atau jaminan performa otomatis.
Pertanyaan untuk diklarifikasi terlebih dahulu
- Tipe apa yang dibawa variabel: color, length, angle, number, atau string token terbuka?
- Apakah memerlukan interpolasi yang mulus, atau hanya pertukaran tema diskrit?
- Apakah harus mewarisi ke komponen turunan, atau batas komponen harus mengisolasinya?
- Pada nilai yang tidak valid, apakah hasilnya harus berupa nilai awal, nilai yang diwariskan, atau tanpa deklarasi?
- Apa saja target browser, jalur server-rendering, fallback, dan proses rilis design-token?
Jawaban 30 detik
"Custom property biasa adalah string yang mewarisi dan bekerja dengan baik untuk token terbuka. Saya akan mendaftarkan properti ketika membutuhkan pemeriksaan tipe, nilai default yang tidak diwariskan, atau interpolasi yang mulus. Pendaftaran harus menentukan syntax, inherits, dan initial-value yang independen secara komputasi, membuat penugasan nilai yang tidak valid dapat diprediksi. Browser lama tetap menggunakan variabel biasa sebagai fallback, dan pengujian komponen mencakup pewarisan, nilai tidak valid, animasi, dan perubahan tema; pendaftaran itu sendiri tidak diasumsikan lebih cepat."
Jawaban langkah demi langkah
Langkah 1: Pisahkan variabel biasa dari properti terdaftar
--name biasa berpartisipasi dalam cascade dan mewarisi secara default; browser memperlakukan nilainya sebagai urutan token. Hal ini berguna untuk warna, token spasi, dan komposisi terbuka, namun browser tidak mengetahui apakah suatu nilai harus berupa warna atau panjang. @property menambahkan metadata tipe, pewarisan, dan nilai default ke variabel yang sama.
Langkah 2: Pilih sintaks yang eksplisit
Daftarkan hanya nilai yang memerlukan batasan atau interpolasi. Gunakan tipe sintaks CSS color, number, dan angle untuk nilai yang sesuai. Jangan memaksakan nilai eksperimental multi-token ke dalam satu tipe hanya agar terlihat ketat; nilai tema yang valid nantinya malah akan dibuang.
Langkah 3: Tetapkan inherits dan initial-value
Jadikan inherits eksplisit. Warna tema biasanya diwariskan; ukuran internal komponen atau progres animasi mungkin tidak. Sintaks non-universal memerlukan initial-value yang independen secara komputasi, seperti unit tetap dan bukan persentase yang bergantung pada induk. Deskriptor wajib yang hilang membuat pendaftaran tidak valid.
Langkah 4: Pahami nilai tidak valid dan fallback
Properti terdaftar divalidasi pada computed-value time. Nilai dengan tipe yang salah tidak diterapkan dan properti diselesaikan melalui nilai awal yang terdaftar, pewarisan, atau hasil cascade valid lainnya, bergantung pada inherits dan lokasi deklarasi. Kata kunci global seperti initial, inherit, unset, dan revert tetap memiliki semantik khusus dan memerlukan pengujian terpisah.
Langkah 5: Gunakan animasi yang dapat diinterpolasi
Custom property yang tidak terdaftar umumnya berubah secara diskrit karena browser tidak dapat menginterpolasi string sembarang. Setelah didaftarkan sebagai color, length, atau number, browser mengetahui cara menginterpolasi gradien, progres, dan rotasi. Tetap uji durasi, compositing, perilaku reduced-motion, dan biaya sebenarnya saat memperbarui banyak elemen.
Langkah 6: Kontrol batas komponen
Beri nama token tema global secara terpisah dari state internal. Nilai yang diwariskan berguna untuk tema; properti yang tidak diwariskan memungkinkan komponen menggunakan nilai awalnya sendiri dan mencegah variabel bernama sama milik induk mencemari animasi internal. Jika suatu properti melintasi shadow DOM atau batas kontainer, tentukan namespace dan API publik sebelum memutuskan untuk mendaftarkannya.
Langkah 7: Sediakan progressive enhancement
Kirimkan custom property biasa dan status akhir statis terlebih dahulu, sehingga browser tanpa @property tetap merender UI yang dapat digunakan. Browser yang didukung dapat menambahkan batasan tipe dan interpolasi. Jangan membuat tata letak kritis hanya bergantung pada pendaftaran; gunakan @supports (property: --x) atau deteksi kemampuan saat memilih jalur peningkatan.
Langkah 8: Verifikasi kesalahan dan perilaku browser
Uji nilai yang valid, tipe yang salah, nilai awal yang hilang, tombol toggle pewarisan, penimpaan tema, pembaruan di tengah animasi, dan first paint yang dirender server. Periksa browser lama, nilai yang dihitung (computed values) di developer tools, dan regresi visual. MDN mencatat bahwa pendaftaran divalidasi pada computed-value time dan aturan yang salah format dapat diabaikan sepenuhnya, jadi pemeriksaan saat build dan contoh runtime sama-sama penting.
Pertimbangan dan batasan
Pendaftaran menambah biaya pemeliharaan deklarasi dan design token, dan kontributor yang tidak terbiasa dengan API ini mungkin berasumsi bahwa setiap nilai tetap dapat diganti secara bebas. Daftarkan nilai dengan tipe yang jelas, kebutuhan animasi, nilai default, atau batas pewarisan; pertahankan token konten terbuka sebagai custom property biasa.
Pemeriksaan tipe bukanlah batas keamanan atau jaminan konsistensi lintas browser. Dukungan, waktu penguraian (parsing timing), dan compositing animasi tetap memerlukan pengujian matriks target. Status aksesibilitas kritis membutuhkan gaya statis dan jalur reduced-motion.
Rencana peluncuran dan bukti
Uji coba pada satu komponen progres atau warna. Catat tujuan setiap variabel, tipe, kebijakan pewarisan, dan fallback. Gunakan contoh yang valid dan tidak valid untuk memverifikasi hasil yang dihitung, kemudian bandingkan kehalusan animasi, penghitungan ulang gaya (style recalculation), dan perilaku browser lama sebelum dan sesudah pendaftaran. Setelah uji coba berhasil, sertakan pendaftaran, dokumentasi token, dan regresi visual dalam pemeriksaan rilis pustaka komponen.
Perlakukan setiap perubahan syntax atau inherits sebagai perubahan perilaku dan periksa penimpaan turunan, peralihan tema, serta snapshot yang disimpan. Jika pengguna melaporkan lompatan warna atau fallback ukuran, periksa nilai yang dihitung dan jalur kemampuan sebelum mengubah durasi animasi.
Kesalahan umum dan tindak lanjut
Mendaftarkan setiap variabel CSS
Token terbuka, nilai komposit, dan string eksperimental mungkin tidak memiliki sintaks yang stabil. Daftarkan hanya nilai yang membutuhkan tipe, default, kontrol pewarisan, atau interpolasi.
Melupakan independensi komputasi dari initial-value
Untuk sintaks non-universal, nilai awal tidak boleh bergantung pada konteks. Persentase atau em dapat membatalkan pendaftaran; gunakan unit yang independen secara komputasi atau terima batasan yang lebih lemah dengan sintaks universal.
Mengasumsikan nilai tidak valid mempertahankan deklarasi valid sebelumnya
Properti terdaftar divalidasi pada computed-value time. Penugasan yang tidak valid dapat diselesaikan ke hasil awal atau yang diwariskan, bukan nilai lama di dekatnya. Uji computed style, bukan hanya urutan sumber.
Memperlakukan inherits sebagai isolasi cascade lengkap
inherits: false mengontrol pewarisan default; pembuat kode masih dapat menulis inherit, dan token lain dapat membawa nilai induk ke dalam komponen. Penamaan, dokumentasi, dan pengujian harus bersama-sama menegakkan batasan tersebut.
Bagaimana Anda mendukung browser tanpa @property?
Pertahankan variabel biasa dengan keadaan akhir statis dan default yang masuk akal, lalu tambahkan pendaftaran dan animasi sebagai peningkatan (enhancement). Gunakan @supports atau deteksi kemampuan untuk jalur kritis dan uji first paint, tema, serta reduced motion di seluruh matriks browser target.