Panel Ikhtisar CSS

Di Chrome DevTools, buka panel Ringkasan CSS melalui Cmd+Shift+P → "Ringkasan CSS". Klik "Ambil ringkasan" untuk menganalisis seluruh lembar gaya halaman saat ini. Panel tersebut merangkum warna, font, kueri media, dan deklarasi yang tidak digunakan.

Bagian Warna mencantumkan setiap nilai warna yang digunakan dalam CSS halaman — heksadesimal, rgb, bernama, dan perhentian gradien — yang dikelompokkan berdasarkan jenis. Mengklik warna akan menampilkan elemen dan properti yang menggunakannya, sehingga variasi warna yang tidak disengaja dan penyebaran palet dapat diketahui.

Bagian Font mencantumkan setiap kombinasi font-family, font-size, dan font-weight yang diterapkan pada halaman. Bagian ini menampilkan font cadangan dalam tumpukan font, menyoroti skala tipografi yang tidak konsisten, serta menunjukkan elemen yang menggunakan setiap kombinasi.

Bagian Kueri Media mencantumkan setiap aturan @media, titik hentinya, dan jumlah deklarasi di dalamnya. Ringkasan ini menampilkan ketidakkonsistenan titik henti — tim terkadang mengumpulkan lebih dari 15 nilai titik henti yang sedikit berbeda di seluruh basis kode.

Ringkasan CSS menandai deklarasi yang tidak pernah diterapkan karena konflik spesifisitas atau selektor yang tidak cocok. Hal ini berbeda dari Cakupan — fitur ini menangkap aturan yang selalu ditimpa tanpa memerlukan interaksi pengguna untuk mengaktifkannya.

Panel menyoroti warna teks yang tidak memenuhi rasio kontras WCAG AA atau AAA terhadap latar belakangnya. Mengklik kegagalan kontras akan memilih elemen tersebut di DOM, sehingga masalah aksesibilitas mudah diperbaiki tanpa alat terpisah.

Gunakan Ringkasan CSS setelah perancangan ulang besar atau saat mulai bekerja pada basis kode yang sudah ada. Ringkasan warna menunjukkan seberapa jauh implementasi telah menyimpang dari token desain. Ringkasan font menampilkan ketidakkonsistenan tipografi sebelum pengguna menyadarinya.

Jalankan Ringkasan CSS pada beberapa halaman dari aplikasi yang sama. Membandingkan ringkasan warna dan font akan menampilkan penyimpangan per halaman — komponen yang dirender dengan tipografi atau warna berbeda dari padanannya di halaman lain.

Ekspor data warna dari Ringkasan CSS dan bandingkan dengan palet token desain Anda. Warna yang ada dalam ringkasan tetapi tidak ada dalam palet token merupakan nilai yang ditulis langsung dan sebaiknya diubah menjadi referensi token, lalu dihapus sebagai nilai mandiri.

Daftarkan titik henti dari Ringkasan CSS, identifikasi duplikat dan nilai yang hampir sama (768px, 769px, 770px dari pengembang yang berbeda), konsolidasikan semuanya ke dalam skala titik henti sistem desain Anda, lalu perbarui semua kueri media agar menggunakan properti khusus CSS atau variabel SCSS.

Ringkasan CSS menganalisis lembar gaya tertaut — bukan gaya sebaris atau gaya runtime CSS-in-JS. Kelas dinamis yang ditambahkan oleh JavaScript setelah perenderan awal mungkin tidak muncul. Lengkapi analisis dengan Cakupan dan inspeksi manual untuk mencakup seluruh gaya dinamis.

Ringkasan CSS menyediakan audit tingkat halaman untuk warna, font, titik henti kueri media, dan masalah kontras. Gunakan fitur ini untuk mendeteksi penyimpangan desain, penyebaran palet, ketidakkonsistenan tipografi, dan kegagalan aksesibilitas sebelum semuanya menumpuk menjadi utang teknis yang mahal untuk dibereskan.