Menemukan CSS yang tidak valid, diganti, tidak aktif, dan CSS lainnya

Sofia Emelianova
Sofia Emelianova
GitHub

Panduan ini mengasumsikan bahwa Anda sudah terbiasa memeriksa CSS di Chrome DevTools. Lihat Melihat dan mengubah CSS untuk mempelajari dasar-dasarnya.

Memeriksa CSS yang Anda tulis

Misalkan Anda menambahkan beberapa CSS ke sebuah elemen dan ingin memastikan gaya baru diterapkan dengan benar. Saat Anda memuat ulang halaman, elemen akan terlihat sama seperti sebelumnya. Terjadi error.

Hal pertama yang harus dilakukan adalah memeriksa elemen dan memastikan bahwa CSS baru Anda benar-benar diterapkan ke elemen tersebut.

Terkadang, Anda akan melihat CSS baru di panel Elements > Styles, tetapi CSS baru Anda menggunakan teks pucat, tidak dapat diedit, dicoret, atau memiliki ikon peringatan atau petunjuk di sampingnya.

Memahami CSS di panel Styles

Panel Styles mengenali berbagai jenis masalah CSS dan menyorotnya dengan cara yang berbeda.

Pemilih yang cocok dan tidak cocok

Panel Styles menampilkan pemilih yang cocok dalam teks biasa dan pemilih yang tidak cocok dalam teks pucat.

Pemilih yang cocok dalam teks biasa dan pemilih yang tidak cocok dalam teks pucat.

Nilai dan deklarasi tidak valid

Panel Styles ditandai dan menampilkan ikon peringatan Peringatan. di samping perintah berikut:

  • Seluruh deklarasi CSS (properti dan nilai) saat properti CSS tidak valid atau tidak diketahui.
  • Hanya nilai saat properti CSS valid, tetapi nilainya tidak valid.

Nama properti tidak valid dan nilai properti tidak valid.

Diganti

Panel Styles mencoret properti yang diganti oleh properti lain sesuai dengan Urutan menurun.

Dalam contoh ini, atribut gaya width: 300px; pada elemen menggantikan width: 100% pada class .youtube.

Tidak aktif

Panel Styles ditampilkan dalam teks pucat dan menempatkan ikon informasi Informasi. di samping properti yang valid, tetapi tidak berpengaruh karena properti lain.

Properti pucat ini tidak aktif karena logika CSS, bukan urutan menurun.

Deklarasi CSS tidak aktif dengan petunjuk.

Dalam contoh ini, properti display: block; menonaktifkan justify-content dan align-items yang mengontrol tata letak fleksibel atau petak.

Diwariskan dan tidak diwarisi

Panel Styles mencantumkan properti di bagian Inherited from <element-name> bergantung pada pewarisan defaultnya:

  • Diwariskan secara default dalam teks biasa.
  • Tidak diwarisi secara default berada dalam teks pucat.

Bagian &#39;Diwariskan dari isi&#39; yang mencantumkan CSS yang diwariskan dan tidak diwarisi.

Singkatan

Properti singkat (ringkas) memungkinkan Anda menetapkan beberapa properti CSS sekaligus dan membuat stylesheet lebih mudah dibaca. Namun, karena sifat properti tersebut singkat, Anda mungkin melewatkan properti longhand (akurat) yang menggantikan properti yang tersirat oleh singkatan.

Panel Styles menampilkan properti singkat sebagai menu drop-down Drop-down. yang berisi semua properti yang dipersingkat.

Properti singkat dengan menu drop-down.

Dalam contoh ini, dua dari empat properti yang disingkat benar-benar diganti.

Tidak dapat diedit

Panel Styles menampilkan properti yang tidak dapat diedit dengan teks miring. Misalnya, CSS dari sumber berikut tidak dapat diedit:

  • user agent stylesheet— Stylesheet default Chrome.

    CSS dari stylesheet agen pengguna.

  • Atribut HTML terkait gaya pada elemen, misalnya, tinggi, lebar, warna, dll. Anda dapat mengeditnya di hierarki DOM dan tindakan ini akan memperbarui CSS di panel Styles, tetapi tidak sebaliknya.

    Dalam contoh ini, atribut height="48" pada elemen <svg> disetel ke 50. Tindakan ini akan memperbarui properti yang sesuai pada svg[Attributes Style] di panel Styles.

Memeriksa elemen yang masih tidak ditata seperti yang Anda pikirkan

Untuk mencoba menemukan apa yang salah, Anda dapat memeriksa:

Panel Elements > Styles menampilkan kumpulan aturan CSS yang sama persis seperti yang ditulis di berbagai stylesheet. Di sisi lain, panel Elemen > Computed mencantumkan nilai CSS yang diselesaikan yang digunakan Chrome untuk merender elemen:

  • CSS yang berasal dari warisan
  • Pemenang Cascade
  • Properti longhand (akurat), bukan singkatan (singkat)
  • Nilai yang dihitung, misalnya, font-size: 14px, bukan font-size: 70%

Memahami CSS di panel Computed

Panel Computed juga menampilkan berbagai properti secara berbeda.

Dideklarasikan dan diwarisi

Panel Computed mencantumkan properti yang dideklarasikan dalam stylesheet mana pun dalam font reguler, baik milik elemen maupun yang diwarisi. Klik ikon luaskan Luaskan. di sampingnya untuk melihat sumbernya.

Properti yang dideklarasikan.

Untuk melihat deklarasi di panel Styles, arahkan kursor ke properti yang diperluas, lalu klik tombol panah Panah ke kanan..

Tombol panah di samping properti.

Untuk melihat deklarasi di panel Sources, klik link ke file sumber.

Link ke file sumber.

Untuk properti dengan beberapa sumber, panel Computed akan menampilkan pemenang Casscade terlebih dahulu.

Properti dengan beberapa sumber.

Runtime

Panel Computed mencantumkan nilai properti yang dihitung saat runtime dalam teks pucat.

Nilai properti yang dihitung saat runtime.

Dalam contoh ini, Chrome menghitung hal berikut untuk elemen <ul>:

  • width relatif terhadap induknya, <div>
  • height yang relatif terhadap turunannya, dua elemen <li>

Tidak diwarisi dan kustom

Agar panel Computed menampilkan semua properti dan nilainya, centang Kotak centang. Tampilkan semua. Semua properti mencakup:

Untuk membagi daftar besar ini ke dalam kategori, centang Kotak centang. Grup.

Semua properti dikelompokkan.

Contoh ini menunjukkan nilai awal untuk properti yang tidak diwarisi di bagian Animasi dan properti kustom di bagian Variabel CSS.

Telusuri duplikat

Untuk menyelidiki properti tertentu dan kemungkinan duplikatnya, ketik nama properti tersebut di kotak teks Filter. Anda dapat melakukannya di panel Styles dan Computed.

Kotak teks Filter pada panel Gaya dan Computed.

Lihat Menelusuri dan memfilter CSS elemen.

Menemukan CSS yang tidak digunakan

Lihat Cakupan: Temukan JavaScript dan CSS yang tidak digunakan.