Tips DevTools: Menemukan masalah CSS

Sofia Emelianova
Sofia Emelianova

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 menandai berbagai masalah CSS:

  • Peringatan. Properti dengan sintaksis yang tidak valid

  • Kotak centang. Properti yang diganti

  • Kotak centang. Properti tidak aktif Informasi.Dengan petunjuk.

  • Diwariskan dari parent

    • Kotak centang. Properti yang diwarisi
    • Kotak centang. Properti yang tidak diwarisi
  • Kotak centang. Properti singkat yang dapat diperluas Luaskan.

    • Kotak centang. Properti longhand yang diganti
    • Kotak centang. Properti longhand aktif

stylesheet agen pengguna

  • Properti yang tidak dapat diedit
  • Properti yang tidak dapat diedit diganti

Tips proses debug lainnya:

  • Gunakan filter di panel Styles untuk berfokus pada satu properti yang menarik minat Anda.
  • Gunakan panel Computed untuk melihat semua pemenang Cascade dan nilai komputasinya.
  • Di panel Computed, luaskan properti dan klik link untuk menemukan sumbernya di panel Styles.

Untuk mempelajari lebih lanjut semua cara DevTools menyoroti masalah CSS, lihat Menemukan CSS yang tidak valid, diganti, tidak aktif, dan CSS lainnya.

Untuk meningkatkan keahlian CSS Anda, lihat Mempelajari CSS.

Untuk mempelajari cara membuat situs yang terlihat bagus dan bekerja dengan baik untuk semua orang, lihat Pelajari Desain Responsif.