Ringkasan CSS: Mengidentifikasi potensi peningkatan CSS

Jecelyn Yeen
Jecelyn Yeen

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

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

    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.