Gesaan dan konteks
Sistem reka bentuk ingin memilih warna, jarak, dan nilai reka letak di dalam sifat CSS daripada syarat gaya, media, atau ciri. Terangkan penilaian if(), fallback, pengesanan sokongan, kesan kebolehcapaian, dan peningkatan progresif dan bukannya hanya menunjukkan CSS semata-mata.
Perkara yang dinilai oleh penemu duga
- Pemahaman bahawa if() ialah logik bersyarat peringkat nilai dan mengembalikan syarat benar pertama mengikut susunan kod sumber.
- Penggunaan else yang betul dan pengendalian hasil guaranteed-invalid apabila tiada syarat yang sepadan.
- Memeriksa sokongan pelayar, @supports, persembahan pelayan (server rendering), dan fallback reka letak kritikal.
- Mempertimbangkan perubahan tema, percetakan, reduced motion, dan pengesahan kebolehcapaian.
Soalan penjelasan untuk ditanya
- Adakah syarat tersebut merupakan pertanyaan media, bekas/gaya, atau ciri? Yang manakah menang apabila beberapa syarat sepadan?
- Apakah nilai pelayar legasi yang patut digunakan oleh sifat tersebut apabila tiada nilai yang sah dihasilkan?
- Adakah ini warna hiasan atau reka letak kritikal yang mempengaruhi saiz, kebolehbacaan, dan sasaran sentuhan (hit targets)?
- Pelayar dan WebView manakah yang disokong, dan adakah fallback CSS masa binaan (build-time) tersedia?
Kerangka jawapan 30 saat
Saya akan mengehadkan if() kepada sifat dengan fallback yang selamat, kemudian menentukan susunan syarat dan nilai else. Syarat dinilai mengikut susunan dan nilai benar yang pertama akan menang; tanpa sebarang padanan dan tanpa else, hasilnya boleh menjadi tidak sah dan sifat akan kembali kepada fallback. Saya akan menyediakan deklarasi statik dan mendayakan peningkatan di sebalik @supports, kemudian menguji tema, cetakan, kontras, reduced motion, dan pelayar yang lebih lama. Reka letak kritikal tidak akan bergantung pada sintaks eksperimen.
Huraian mendalam langkah demi langkah
1. Tetapkan sempadan peringkat nilai
Gunakan if() untuk memilih nilai bagi satu sifat di bawah syarat yang boleh diperhatikan oleh CSS; jangan gantikan pemilih (selectors), mesin keadaan DOM, atau logik perniagaan. Jauhkan data khusus JavaScript daripada syarat CSS.
2. Reka bentuk susunan dan fallback
Syarat dinilai mengikut susunan kod sumber, jadi letakkan peraturan yang paling khusus atau penting dahulu dan gunakan else untuk nilai yang selamat. Tanpa padanan, hasilnya mungkin guaranteed-invalid dan pelayar mungkin menggunakan pewarisan, nilai awal, atau tiada deklarasi; sifat kritikal memerlukan lalai legasi yang eksplisit.
3. Peningkatan progresif dan keserasian
MDN menandakan fungsi ini sebagai teknologi eksperimen dengan sokongan terhad. Isytiharkan nilai statik terlebih dahulu, kemudian dayakan if() dalam @supports atau lembaran gaya berlapis; jangan bergantung pada rentetan user-agent semata-mata. Persembahan pelayan membekalkan struktur manakala klien mengesahkan keupayaan gaya.
4. Sahkan pengalaman dan kebolehcapaian
Uji tema sebenar, viewport, percetakan, dan gabungan ciri. Periksa kontras, keterlihatan fokus, sasaran sentuhan, dan prefers-reduced-motion. Jejaki kadar tidak disokong dan fallback; lumpuhkan peningkatan apabila reka letak kritikal tersasar.
Jawapan model
Saya akan menganggap if() sebagai peningkatan progresif peringkat nilai. Saya akan mengenal pasti syarat gaya, media, atau ciri, menyusunnya secara teliti, dan menyediakan nilai keselamatan else yang eksplisit; hasil tidak sah yang tidak sepadan tidak boleh dibiarkan kepada tekaan pelayar. Reka letak kritikal akan mempunyai deklarasi statik dan menggunakan if() hanya di dalam @supports, disahkan merentasi pelayar dan WebView sebenar. Saya akan menguji tema, cetakan, kontras, fokus, reduced motion, dan gabungannya, memantau perbezaan fallback dan reka letak, serta membuang peningkatan sekiranya ia menjejaskan garis dasar (baseline).
Kesilapan lazim
- Menganggap if() sebagai logik perniagaan JavaScript atau pengganti pemilih.
- Mengabaikan susunan kod sumber sehingga syarat yang luas menang terlalu awal.
- Meniadakan else dan lalai statik, menyebabkan pelayar lama kehilangan gaya kritikal.
- Menggunakan sintaks eksperimen untuk dimensi, navigasi, atau sasaran sentuhan tanpa fallback.
- Hanya menguji pada pelayar semasa dan melangkau WebView, cetakan, dan tema.
- Gagal memeriksa kontras, fokus, dan reduced motion.
Soalan susulan dan jawapan
Apakah yang berlaku apabila tiada syarat yang sepadan?
Tanpa else, hasilnya mungkin guaranteed-invalid, selepas itu pewarisan, nilai awal, atau nilai unset akan diguna pakai. Sifat kritikal memerlukan fallback statik yang boleh diterima.
Mengapakah @supports sahaja tidak mencukupi?
Ia hanya mengesahkan penghuraian deklarasi, bukan memastikan setiap gabungan syarat dan nilai yang terhasil memenuhi reka bentuk. Tingkah laku masih memerlukan pengesahan dalam pelayar sasaran, tema, dan teknologi bantuan.
Bilakah anda akan mengekalkan sifat tersuai (custom properties) dan pelbagai deklarasi?
Kekalkannya apabila liputan pelayar adalah ketat, syarat adalah sedikit, atau fallback mestilah jelas untuk diaudit. Gunakan if() hanya apabila matriks keserasian menjadikan ungkapan ringkasnya berbaloi.