Panel Gambaran Keseluruhan CSS

Dalam Chrome DevTools, buka panel Gambaran Keseluruhan CSS melalui Cmd+Shift+P → “Gambaran Keseluruhan CSS”. Klik “Tangkap gambaran keseluruhan” untuk menganalisis keseluruhan lembar gaya halaman semasa. Panel ini meringkaskan warna, fon, pertanyaan media, dan pengisytiharan yang tidak digunakan.

Bahagian Warna menyenaraikan setiap nilai warna yang digunakan dalam CSS halaman — heksadesimal, `rgb`, bernama, dan hentian kecerunan — mengikut jenis. Mengklik sesuatu warna menunjukkan elemen dan sifat yang menggunakannya, sekali gus mendedahkan variasi warna yang tidak disengajakan serta kepelbagaian palet yang berlebihan.

Bahagian Fon menyenaraikan setiap gabungan `font-family`, `font-size`, dan `font-weight` yang digunakan pada halaman. Bahagian ini mendedahkan sandaran tindanan fon, menyerlahkan skala tipografi yang tidak konsisten, dan menunjukkan elemen yang menggunakan setiap gabungan.

Bahagian Pertanyaan Media menyenaraikan setiap peraturan @media, titik hentinya, dan bilangan pengisytiharan di dalamnya. Gambaran keseluruhan ini mendedahkan ketidakselarasan titik henti — pasukan kadangkala mengumpulkan lebih daripada 15 nilai titik henti yang sedikit berbeza dalam seluruh pangkalan kod.

Gambaran Keseluruhan CSS menandakan pengisytiharan yang tidak pernah digunakan kerana konflik kekhususan atau pemilih yang tidak sepadan. Hal ini berbeza daripada Liputan — ia mengesan peraturan yang sentiasa ditindih tanpa memerlukan interaksi pengguna untuk mengaktifkannya.

Panel ini menyerlahkan warna teks yang gagal memenuhi nisbah kontras WCAG AA atau AAA terhadap latar belakangnya. Mengklik kegagalan kontras akan memilih elemen tersebut dalam DOM, sekali gus memudahkan pembaikan isu kebolehcapaian tanpa alat berasingan.

Gunakan Gambaran Keseluruhan CSS selepas reka bentuk semula besar atau ketika mula bekerja dengan pangkalan kod sedia ada. Ringkasan warna mendedahkan sejauh mana pelaksanaan telah menyimpang daripada token reka bentuk. Ringkasan fon pula mendedahkan ketidakselarasan tipografi sebelum pengguna menyedarinya.

Jalankan Gambaran Keseluruhan CSS pada beberapa halaman aplikasi yang sama. Perbandingan ringkasan warna dan fon mendedahkan penyimpangan mengikut halaman — komponen yang dipaparkan dengan tipografi atau warna berbeza daripada padanannya pada halaman lain.

Eksport data warna daripada Gambaran Keseluruhan CSS dan bandingkan dengan palet token reka bentuk anda. Warna yang terdapat dalam gambaran keseluruhan tetapi tiada dalam palet token ialah nilai berkod keras yang patut ditukar kepada rujukan token dan dibuang sebagai nilai tersendiri.

Senaraikan titik henti daripada Gambaran Keseluruhan CSS, kenal pasti pendua dan hampir pendua (768px, 769px, 770px daripada pembangun yang berbeza), satukannya ke dalam skala titik henti sistem reka bentuk anda, dan kemas kini semua pertanyaan media supaya menggunakan sifat tersuai CSS atau pemboleh ubah SCSS.

Gambaran Keseluruhan CSS menganalisis lembar gaya terpaut — bukan gaya sebaris atau gaya masa jalan CSS-dalam-JS. Kelas dinamik yang ditambahkan oleh JavaScript selepas paparan awal mungkin tidak muncul. Lengkapkan analisis dengan Liputan dan pemeriksaan manual untuk mendapatkan liputan penuh gaya dinamik.

Gambaran Keseluruhan CSS menyediakan audit peringkat halaman terhadap warna, fon, titik henti pertanyaan media, dan isu kontras. Gunakannya untuk mengesan penyimpangan reka bentuk, kepelbagaian palet yang berlebihan, ketidakselarasan tipografi, dan kegagalan kebolehcapaian sebelum semuanya terkumpul menjadi hutang teknikal yang mahal untuk dirungkai.