Pernahkah Anda menerapkan CSS ke elemen, tetapi tidak berfungsi?
Dengan Chrome DevTools, Anda dapat menemukan masalah CSS secara sekilas, men-debug, dan mengujinya.
Tonton video untuk mempelajari cara panel Elemen > Gaya menyoroti berbagai masalah CSS:
Properti dengan sintaksis tidak validProperti yang digantiProperti tidak aktif
Diwariskan dari
parent
- Properti yang diwarisi
- Properti yang tidak diwarisi
Properti singkatan yang dapat diperluas
-
Properti panjang yang diganti - Properti panjang aktif
-
stylesheet agen pengguna
- Properti yang tidak dapat diedit
Properti yang tidak dapat diedit dan diganti
Tips proses debug lainnya:
- Gunakan filter di panel Gaya untuk berfokus pada satu properti yang Anda minati.
- Gunakan panel Dihitung untuk melihat semua pemenang Cascade dan nilai yang dihitung.
- Di panel Computed, luaskan properti dan klik link untuk menemukan sumbernya di panel Styles.
Untuk mempelajari lebih lanjut semua cara DevTools menandai masalah CSS, lihat Menemukan CSS yang tidak valid, ditimpa, tidak aktif, dan lainnya.
Untuk meningkatkan keahlian CSS Anda, lihat Mempelajari CSS.
Untuk mempelajari cara membuat situs yang terlihat bagus dan berfungsi dengan baik untuk semua orang, lihat Pelajari Desain Responsif.