Gunakan panel CSS Overview untuk lebih memahami CSS halaman Anda dan mengidentifikasi potensi peningkatan.
Membuka panel Ringkasan CSS
- Buka halaman web apa pun, seperti halaman ini.
- Buka DevTools.
Pilih Customize and control DevTools > More tools > CSS Overview.
Atau, gunakan Menu Perintah untuk membuka panel CSS Overview.
Menjalankan dan menjalankan ulang laporan Ringkasan CSS
Klik tombol Ambil ringkasan untuk membuat laporan Ringkasan CSS halaman Anda.
Untuk menjalankan kembali Ringkasan CSS, klik ikon Hapus ringkasan dan ulangi langkah pertama.
Memahami laporan Ringkasan CSS
Laporan ini terdiri dari lima bagian:
- Ringkasan ringkasan. Ringkasan tingkat tinggi CSS halaman Anda.
Warna. Semua warna di halaman Anda. Warna dikelompokkan menurut jenis, seperti warna latar belakang, warna teks, dll. Bagian ini juga menampilkan teks yang memiliki masalah kontras rendah.
Setiap warna dapat diklik. Misalnya, warna batas
#DADCE0
tidak sesuai dengan skema warna situs Anda. Untuk mendapatkan daftar elemen yang menggunakan warna ini, klik warna tersebut.Untuk menandai elemen pada halaman, arahkan kursor ke elemen dalam daftar.
Untuk membuka elemen di panel Elemen, klik elemen dalam daftar.
Info font. Semua font di halaman Anda dan kemunculannya, dikelompokkan berdasarkan ukuran font, ketebalan, dan tinggi baris yang berbeda. Serupa dengan bagian Warna, untuk melihat daftar elemen yang terpengaruh, klik kemunculannya.
Deklarasi yang tidak digunakan. Semua gaya yang tidak memiliki efek, dikelompokkan berdasarkan alasan.
Misalnya, dua deklarasi di atas tidak digunakan karena materi menentukan tinggi dan lebar elemen inline. Untuk menampilkan elemen yang sesuai, klik kemunculannya.
Kueri media. Semua kueri media yang ditentukan di halaman Anda, diurutkan berdasarkan jumlah kemunculan dalam urutan menurun. Untuk melihat daftar elemen yang terpengaruh, klik kemunculannya.