Ringkasan CSS: Mengidentifikasi potensi peningkatan CSS

Jecelyn Yeen

Gunakan panel CSS Overview untuk lebih memahami CSS halaman Anda dan mengidentifikasi potensi peningkatan.

Catatan: Ini adalah fitur pratinjau di Chrome 96. Tim kami sedang mengupayakan fitur ini secara aktif dan kami mengharapkan masukan Anda untuk peningkatan lebih lanjut.

Ringkasan

Panel Ringkasan CSS membuat laporan statistik CSS situs Anda. Laporan ini mengumpulkan data tentang semua kejadian CSS dan bahkan deklarasi yang tidak digunakan. Panel Ringkasan CSS membantu Anda menyelidiki kejadian lebih lanjut dengan penyorotan halaman atau dengan menautkan langsung ke kode yang terpengaruh di panel Elemen.

Lihat cara Menjalankan dan menjalankan ulang laporan Ringkasan CSS dan Memahami laporan Ringkasan CSS.

Membuka panel Ringkasan CSS

1. Buka halaman web apa pun, misalnya halaman ini.
2. Buka DevTools.

3. Pilih Sesuaikan dan kontrol DevTools > Alat lainnya > Ringkasan CSS.

   

   Atau, gunakan Menu Perintah untuk membuka panel CSS Overview.

   

Menjalankan dan menjalankan ulang laporan Ringkasan CSS

1. Klik tombol Ambil ringkasan untuk membuat laporan Ringkasan CSS halaman Anda.

   

2. Untuk menjalankan kembali Ringkasan CSS, klik ikon Hapus ringkasan dan ulangi langkah pertama.

   

Memahami laporan Ringkasan CSS

Laporan ini terdiri dari lima bagian:

1. Ringkasan ringkasan. Ringkasan umum CSS halaman Anda.

2. Warna. Semua warna di halaman Anda. Warna dikelompokkan berdasarkan 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 cocok dengan skema warna situs Anda. Untuk mendapatkan daftar elemen yang menggunakan warna ini, klik warna tersebut.

   

   Untuk menandai elemen di halaman, arahkan kursor ke elemen dalam daftar.

   

   Untuk membuka elemen di panel Elements, klik elemen dalam daftar.

3. Info font. Semua font pada halaman Anda dan kemunculannya, dikelompokkan menurut berbagai ukuran font, ketebalan font, dan tinggi baris. Serupa dengan bagian Warna, untuk melihat daftar elemen yang terpengaruh, klik kemunculannya.

   

4. Deklarasi yang tidak digunakan. Semua gaya yang tidak berpengaruh, dikelompokkan berdasarkan alasan.

   

   Misalnya, kedua deklarasi di atas tidak digunakan karena kontennya menentukan tinggi dan lebar elemen inline. Untuk melihat elemen yang sesuai, klik kemunculannya.

5. 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.