Gesaan dan skop
Sistem reka bentuk rentas pelayar mahukan animasi masuk semula jadi dan peralihan paparan (view transitions) di mana at-rule CSS baharu disokong, sambil mengekalkan pengalaman statik di tempat lain. Kemas kini Chrome Web UI 2026 menerangkan pengesanan at-rule tertentu di dalam @supports. Reka pelancaran yang mengekalkan first paint, kebolehcapaian dan ketekalan tema.
Perkara yang diuji oleh penemu duga
Penemu duga sedang menguji sama ada anda memisahkan pengecaman sintaks daripada tingkah laku lengkap, dan sama ada anda boleh mereka bentuk lapisan lata (cascade layers), sandaran, pengendalian reduced-motion, pemaparan pelayan (server rendering) dan pemantauan. Jawapan yang kukuh mengelakkan pengekodan kekal (hard-coding) nama pelayar sebagai ujian keupayaan.
Soalan untuk dijelaskan terlebih dahulu
- Adakah peningkatan ini bersifat hiasan, atau adakah interaksi bergantung pada peralihan yang selesai?
- Apakah pengalaman minimum yang boleh diterima apabila peraturan baharu tidak disokong?
- Bagaimanakah
prefers-reduced-motion, kontras tinggi dan operasi papan kekunci diberi keutamaan? - Adakah pelancaran mesti meliputi WebView terbenam, pelayar lama dan first paint SSR?
Jawapan 30 saat
“Saya akan menjadikan reka letak asas, keadaan dan interaksi lengkap dalam CSS lalai, kemudian menambah gaya pilihan di sebalik pertanyaan keupayaan at-rule. Pengesanan hanya memutuskan sama ada untuk mendayakan peningkatan; ia tidak menggantikan keadaan masa jalan (runtime state) atau semakan kebolehcapaian, dan reduced motion sentiasa diutamakan. Pelayar lama mendapat laluan tanpa animasi yang stabil manakala pelayar yang berkeupayaan mendapat peralihan. Saya akan mengesahkan matriks pelayar sebenar, regresi visual, operasi papan kekunci dan metrik first-paint sebelum mengembangkannya.”
Penyelesaian langkah demi langkah
1. Tentukan pengalaman garis dasar (baseline)
Lapisan lalai mesti merangkumi reka letak lengkap, gaya fokus, maklum balas ralat dan keadaan boleh diambil tindakan tanpa bergantung pada peristiwa tamat animasi. Nyahlekap (unmounts), perubahan laluan dan kegagalan rangkaian mesti masih mencapai keadaan sasaran secara terus.
2. Asingkan keupayaan daripada keadaan
Kekalkan sokongan at-rule dalam lapisan keupayaan CSS dan keadaan komponen seperti terbuka atau keluar dalam kelas atau atribut. Pertanyaan keupayaan menjawab sama ada pelayar boleh menghuraikan peraturan; pemilihan keadaan menjawab apa yang patut ditunjukkan oleh komponen sekarang. Ia bukan satu cabang pelayar yang sama.
3. Susun lata dan sandaran
Muatkan peraturan asas dahulu, kemudian tambah peraturan peningkatan di dalam @supports. Peningkatan hanya perlu mengatasi (override) sifat pilihan; apabila penghuraian gagal, blok yang tidak diketahui harus diabaikan tanpa merosakkan gaya asas. Jangan biarkan peningkatan menetapkan semula dimensi atau warna asas yang kritikal.
4. Hormati keutamaan pergerakan
Dalam lapisan peningkatan, hormati prefers-reduced-motion: reduce dengan memendekkan atau melumpuhkan peralihan, sambil memastikan fokus, penutupan dan maklum balas ralat jelas. Sokongan untuk view transitions tidak sekali-kali mengatasi keutamaan pengguna.
5. Lindungi SSR dan WebView
HTML pertama tidak sepatutnya menunggu pengesanan klien. Paparkan struktur garis dasar pada pelayan dan biarkan klien menambah peningkatan pilihan. Uji WebView terbenam, pelayar lama, sokongan separa dan animasi yang dilumpuhkan untuk mengelakkan skrin kosong dan anjakan reka letak (layout shifts).
6. Sahkan dan lepaskan
Bina matriks pelayar dan ciri, kemudian jalankan regresi visual, semakan papan kekunci dan pembaca skrin, perbandingan CLS/LCP serta log ralat sampel. Buat keluaran kenari (canary) pada satu komponen atau halaman berisiko rendah dahulu; jika regresi atau aduan meningkat, alih keluar suis peningkatan dan kekalkan laluan garis dasar.
Contoh jawapan
Saya akan terlebih dahulu melaksanakan reka letak garis dasar yang lengkap, model keadaan dan tingkah laku kebolehcapaian tanpa sintaks baharu, kemudian menambah animasi pilihan di sebalik pertanyaan at-rule @supports. Pertanyaan tersebut menyemak keupayaan huraian; keadaan komponen kekal dalam kelas atau atribut, dan reduced motion mempunyai keutamaan yang lebih tinggi. SSR mengeluarkan HTML garis dasar, jadi peningkatan yang gagal akan diabaikan. Sebelum pelepasan, saya akan menguji pelayar lama, WebView, SSR, operasi papan kekunci dan regresi visual sambil memerhatikan CLS/LCP dan maklum balas ralat. Lakukan pelepasan kenari pada satu komponen dan lumpuhkan hanya suis peningkatan jika ia gagal.
Kesilapan biasa
- Bercabang berdasarkan nama pelayar → hanyutan user-agent dan salah klasifikasi → tanya keupayaan (capabilities).
- Menganggap sokongan penghuraian sebagai tingkah laku penuh → pelaksanaan separa berbeza-beza → jalankan matriks pelayar sebenar dan sut regresi.
- Membiarkan peningkatan mengatasi dimensi asas → pelayar yang tidak disokong merosakkan reka letak → hanya atasi sifat pilihan.
- Mengabaikan reduced motion → pengguna kehilangan kawalan → kendalikan pertanyaan media sekali lagi dalam lapisan peningkatan.
- Menunggu pengesanan klien sebelum first paint → skrin kosong atau anjakan reka letak → lakukan SSR untuk pengalaman garis dasar.
Soalan susulan dan respons
Adakah sokongan @supports mencukupi untuk mempercayai ciri tersebut?
Tidak. Ia hanya menyatakan bahawa penghurai menerima syarat tersebut. Sahkan at-rule tertentu, masa peristiwa dan laluan sandaran dalam pelayar sasaran.
Mengapa tidak memadamkan CSS lama?
Keupayaan baharu mungkin tiada dalam WebView, pelayar perusahaan atau persekitaran teknologi bantuan. Garis dasar ialah kontrak yang tahan lama, manakala peningkatan mesti boleh dialih keluar secara bebas.
Bagaimanakah anda menguji reduced motion?
Dayakan prefers-reduced-motion: reduce dalam ujian automatik dan manual. Sahkan bahawa memendekkan atau mengalih keluar animasi masih memastikan operasi fokus, keadaan dan tutup kekal jelas.
Bilakah peningkatan boleh menjadi lalai?
Hanya selepas liputan sasaran, regresi visual dan kebolehcapaian, metrik prestasi serta kadar ralat memenuhi kriteria (gates), dengan sandaran garis dasar masih tersedia.