Ringkasan CSS: Mengidentifikasi potensi peningkatan CSS

Jecelyn Yeen

Twitter GitHub Halaman beranda

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

Catatan: Ini adalah fitur pratinjau di Chrome 96. Tim kami aktif berupaya meningkatkan fitur ini dan kami menantikan masukan Anda untuk penyempurnaan lebih lanjut.

Membuka panel Ringkasan CSS

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

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

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 tingkat tinggi CSS halaman Anda.

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

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

   

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

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.