Konteks dan arahan
Sistem desain ingin memilih warna, penspasian, dan nilai tata letak di dalam properti CSS dari kondisi gaya, media, atau fitur. Jelaskan evaluasi if(), fallback, deteksi dukungan, dampak aksesibilitas, dan progressive enhancement daripada hanya menampilkan CSS.
Hal yang dievaluasi oleh pewawancara
- Pemahaman bahwa if() adalah logika kondisional tingkat nilai dan mengembalikan kondisi benar (true) pertama dalam urutan kode sumber.
- Penggunaan else yang benar dan penanganan hasil guaranteed-invalid saat tidak ada kondisi yang cocok.
- Pemeriksaan dukungan browser, @supports, server rendering, dan fallback tata letak kritis.
- Mempertimbangkan perubahan tema, pencetakan, reduced motion, dan validasi aksesibilitas.
Pertanyaan klarifikasi yang perlu diajukan
- Apakah kondisinya berupa kueri media, kontainer/gaya, atau fitur? Mana yang menang jika beberapa cocok?
- Nilai browser lama apa yang harus digunakan properti ketika tidak ada nilai valid yang dihasilkan?
- Apakah ini warna dekoratif atau tata letak kritis yang memengaruhi ukuran, keterbacaan, dan target sentuh (hit targets)?
- Browser dan WebView mana yang didukung, dan apakah fallback CSS saat build-time tersedia?
Kerangka jawaban 30 detik
Saya akan membatasi if() pada properti dengan fallback yang aman, lalu menentukan urutan kondisi dan nilai else. Kondisi dievaluasi secara berurutan dan nilai benar pertama yang menang; tanpa kecocokan dan tanpa else, hasilnya bisa menjadi tidak valid dan properti kembali ke fallback. Saya akan memberikan deklarasi statis dan mengaktifkan penyempurnaan di balik @supports, lalu menguji tema, cetak, kontras, reduced motion, dan browser yang lebih lama. Tata letak kritis tidak akan bergantung pada sintaks eksperimental.
Pembahasan mendalam langkah demi langkah
1. Tetapkan batasan tingkat nilai
Gunakan if() untuk memilih nilai bagi satu properti di bawah kondisi yang dapat diamati oleh CSS; jangan menggantikan selektor, mesin status DOM, atau logika bisnis. Jauhkan data khusus JavaScript dari kondisi CSS.
2. Rancang urutan dan fallback
Kondisi dievaluasi dalam urutan kode sumber, jadi letakkan aturan yang paling spesifik atau penting terlebih dahulu dan gunakan else untuk nilai yang aman. Tanpa kecocokan, hasilnya mungkin guaranteed-invalid dan browser dapat menggunakan pewarisan, nilai awal, atau tanpa deklarasi; properti kritis membutuhkan nilai bawaan lawas yang eksplisit.
3. Progressive enhancement dan kompatibilitas
MDN menandai fungsi ini sebagai teknologi eksperimental dengan dukungan terbatas. Deklarasikan nilai statis terlebih dahulu, lalu aktifkan if() di dalam @supports atau stylesheet bertingkat; jangan hanya mengandalkan string user-agent. Server rendering menyediakan struktur sementara klien memvalidasi kemampuan gaya.
4. Validasi pengalaman dan aksesibilitas
Uji tema nyata, viewport, pencetakan, dan kombinasi fitur. Periksa kontras, visibilitas fokus, target sentuh, dan prefers-reduced-motion. Lacak tingkat perangkat yang tidak didukung dan fallback; nonaktifkan penyempurnaan saat tata letak kritis mengalami pergeseran.
Jawaban model
Saya akan memperlakukan if() sebagai progressive enhancement tingkat nilai. Saya akan mengidentifikasi kondisi gaya, media, atau fitur, mengurutkannya secara sengaja, dan memberikan nilai pengaman else yang eksplisit; hasil tidak valid yang tidak cocok tidak boleh diserahkan pada tebakan browser. Tata letak kritis akan memiliki deklarasi statis dan menggunakan if() hanya di dalam @supports, divalidasi di seluruh browser nyata dan WebView. Saya akan menguji tema, cetak, kontras, fokus, reduced motion, dan kombinasinya, memantau fallback dan perbedaan tata letak, serta menghapus penyempurnaan jika merusak garis dasar (baseline).
Kesalahan umum
- Memperlakukan if() sebagai logika bisnis JavaScript atau pengganti selektor.
- Mengabaikan urutan kode sumber sehingga kondisi yang luas menang terlalu dini.
- Menghilangkan else dan nilai bawaan statis, membuat browser lama tanpa gaya kritis.
- Menggunakan sintaks eksperimental untuk dimensi, navigasi, atau target sentuh tanpa fallback.
- Hanya menguji pada browser terkini dan melewatkan WebView, cetak, dan tema.
- Gagal memeriksa kontras, fokus, dan reduced motion.
Pertanyaan lanjutan dan jawabannya
Apa yang terjadi jika tidak ada kondisi yang cocok?
Tanpa else, hasilnya dapat berupa guaranteed-invalid, setelah itu pewarisan, nilai awal, atau nilai unset diterapkan. Properti kritis membutuhkan fallback statis yang dapat diterima.
Mengapa @supports saja tidak cukup?
Ini hanya memverifikasi parsing deklarasi, bukan memastikan setiap kombinasi kondisi dan nilai yang dihasilkan memenuhi desain. Perilaku masih perlu validasi di browser target, tema, dan teknologi asistif.
Kapan Anda akan mempertahankan properti kustom dan beberapa deklarasi?
Pertahankan ketika cakupan browser sangat ketat, kondisi berjumlah sedikit, atau fallback harus jelas untuk diaudit. Gunakan if() hanya jika matriks kompatibilitas membuat ekspresi ringkasnya sepadan.