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.
Nilai dan deklarasi tidak valid
Panel Styles ditandai dan menampilkan ikon 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.
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 di samping properti yang valid, tetapi tidak berpengaruh karena properti lain.
Properti pucat ini tidak aktif karena logika CSS, bukan urutan menurun.
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.
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 yang berisi semua properti yang dipersingkat.
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.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 ke50
. Tindakan ini akan memperbarui properti yang sesuai padasvg[Attributes Style]
di panel Styles.
Memeriksa elemen yang masih tidak ditata seperti yang Anda pikirkan
Untuk mencoba menemukan apa yang salah, Anda dapat memeriksa:
- Dokumentasi CSS dan kekhususan pemilih di tooltip pada panel Styles.
- Panel Dihitung untuk melihat CSS "final" yang diterapkan ke elemen dan bandingkan dengan yang Anda deklarasikan.
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
, bukanfont-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 di sampingnya untuk melihat sumbernya.
Untuk melihat deklarasi di panel Styles, arahkan kursor ke properti yang diperluas, lalu klik tombol panah .
Untuk melihat deklarasi di panel Sources, klik link ke file sumber.
Untuk properti dengan beberapa sumber, panel Computed akan menampilkan pemenang Casscade terlebih dahulu.
Runtime
Panel Computed mencantumkan nilai properti yang dihitung saat runtime dalam teks pucat.
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 Tampilkan semua. Semua properti mencakup:
- Nilai awal untuk properti yang tidak diwarisi dalam teks pucat.
- Properti kustom—dengan awalan
--
dalam teks biasa. Properti tersebut diwarisi secara default.
Untuk membagi daftar besar ini ke dalam kategori, centang Grup.
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.
Lihat Menelusuri dan memfilter CSS elemen.
Menemukan CSS yang tidak digunakan
Lihat Cakupan: Temukan JavaScript dan CSS yang tidak digunakan.