Panel Styles adalah ruang kerja utama saat men-debug CSS: di sanalah semua aturan yang mengikat sebuah elemen diperlihatkan, lengkap dengan urutan kekuatan cascade-nya. Kita telah mengenal sekilas cara membacanya pada Chapter Debugging CSS ; Chapter ini merapikannya menjadi alur kerja yang lengkap — membaca coretan deklarasi, menyaring daftar yang panjang, memaksa pseudo-class aktif, dan mengubah gaya tanpa menyentuh file. Semua contoh mengacu pada demo di akhir chapter, jadi siapkan DevTools (F12) sambil membaca.

Membaca Urutan dan Coretan #

Klik kanan sebuah elemen lalu pilih Inspect; panel Styles menampilkan aturan-aturan yang cocok, diurutkan dari yang paling menentukan di atas. Deklarasi yang kalah dalam cascade tampil dengan coretan (struck-through), dan di sebelah setiap aturan tertulis asalnya — nama file CSS, atau inline untuk atribut style. Di bawah aturan kita, browser menampilkan bagian Inherited from … untuk gaya yang diperoleh lewat inheritance, lalu aturan user-agent stylesheet sebagai lantai terakhir.

Alur bacanya konsisten: temukan properti yang dipermasalahkan, lihat apakah deklarasinya dicoret, lalu naikkan pandangan ke aturan pemenangnya. Pada demo chapter ini, .kartu dideklarasikan dua kali — aturan pertama memberi warna teks abu-abu gelap dan aturan kedua menimpanya menjadi merah tua. Karena specificity keduanya sama, urutan sumber menentukan, dan panel Styles memperlihatkan persis dramanya: color: rgb(30, 41, 59) tercoret, color: rgb(185, 28, 28) menang.

Filter, Toggle, dan Emulator Pseudo-class #

Panel Styles punya beberapa kendali kecil yang menghemat waktu besar:

KendaliFungsi
Kotak FilterMenyaring aturan yang tampil, misalnya mengetik radius untuk menampilkan hanya properti terkait
Kotak centang di depan deklarasiMengaktifkan atau mematikan satu deklarasi untuk mencoba versi tanpanya
Tombol :hovMemaksa pseudo-class seperti :hover, :active, atau :focus tetap aktif
Tombol .clsMenambah atau menghapus class pada elemen terpilih
Klik dua kali pada nilaiMengubah nilai secara langsung; perubahan langsung terlihat di halaman

Emulator :hov menjawab kendala klasik: gaya :hover sulit diperiksa karena panel berubah begitu kursor bergerak. Dengan mencentang :hover pada tombol demo, browser memperlakukan tombol seolah sedang disorot — latar biru berubah menjadi teal — tanpa kita perlu menahan posisi kursor. Perlu diingat, pendekatan ini hanya mensimulasikan state di panel; perilaku pada perangkat sentuh tetap perlu diuji secara nyata, seperti dibahas pada Chapter Hover dan Active .

Latihan Terpandu pada Demo #

Lakukan empat langkah berikut pada demo chapter ini:

  1. Baca coretannya: klik kartu, temukan dua aturan .kartu, dan pastikan deklarasi color pertama tercoret — pemenangnya rgb(185, 28, 28).
  2. Matikan satu deklarasi: hapus centang pada border-radius: 8px kartu, amati sudutnya menjadi tajam, lalu centang kembali.
  3. Paksa :hover: pilih tombol, klik :hov, centang :hover, dan amati latar tombol berubah dari biru rgb(2, 132, 199) menjadi teal — nilai rgb(1, 145, 135) pada aturan .tombol:hover.
  4. Tambah class lewat .cls: klik .cls, ketik sorot, lalu Enter — kerangka kuning 3px dari class .sorot menyala pada kartu; hapus lagi setelah selesai.

Hasil di Browser:

text 
Kartu tampil dengan warna teks merah tua rgb(185, 28, 28) — pemenang
urutan sumber — di atas latar putih dengan sudut 8px. Tombol berlatar
biru rgb(2, 132, 199) dengan sudut 8px, dan latar teal rgb(1, 145, 135)
pada aturan :hover yang diperiksa lewat emulator. Class sorot menyediakan
outline kuning 3px untuk latihan .cls, dan judul berwarna rgb(15, 23, 42)
berukuran 20px.

Ketika panel Styles menjawab “dari aturan mana asalnya”, panel Computed menjawab “berapa nilai akhirnya” — dua sisi yang kita pasangkan pada chapter selanjutnya.