Ringkasan CSS: Mengidentifikasi potensi peningkatan CSS

Jecelyn Yeen

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

Membuka panel Ringkasan CSS

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

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

    Ringkasan CSS di menu.

    Atau, gunakan Menu Perintah untuk membuka panel CSS Overview.

    Tampilkan perintah CSS Overview di menu Command.

Menjalankan dan menjalankan ulang laporan Ringkasan CSS

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

    Mengambil Ringkasan CSS.

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

    Hapus ringkasan.

Memahami laporan Ringkasan CSS

Laporan ini terdiri dari lima bagian:

  1. Ringkasan ringkasan. Ringkasan umum CSS halaman Anda. Ringkasan ringkasan.

  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.

    Warna.

    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.

    Daftar elemen yang menggunakan warna.

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

    Arahkan kursor ke elemen untuk menyoroti elemen tersebut di halaman.

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

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

    Info font.

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

    Deklarasi yang tidak digunakan.

    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.

    Kueri media.