Invalid CSS

Salah satu sifat paling penting dari parser CSS jarang diketahui pemula: browser tidak berhenti saat menemukan kesalahan. Baris yang tidak valid dilewati, parser melanjutkan ke deklarasi berikutnya, dan halaman tetap tampil — tanpa gaya yang bermasalah, tanpa pesan kesalahan yang mencolok. Sifat yang ramah ini menyulitkan diagnosis: halaman terlihat “hampir benar” dan kita perlu tahu di mana melihat. Chapter ini menjelaskan perilaku pemulihan parser, cara DevTools menandai kesalahannya, dan kesalahan umum yang paling sering membuat gaya tidak berlaku. Dasar sintaksnya telah kita pelajari pada Chapter CSS Syntax .

Perilaku Pemulihan Parser #

Pemulihan (error recovery) CSS mengikuti tiga aturan pada tingkat yang berbeda:

Dua implikasi penting mengikuti tabel di atas. Pertama, deklarasi invalid tidak menular: satu nilai yang salah tidak merusak deklarasi lain dalam blok yang sama. Kedua, justru kurung kurawal yang paling berbahaya — kesalahannya menjalar ke aturan berikutnya yang tampak tidak berhubungan, sehingga gejala dan penyebabnya terpisah jauh di file.

Pada tingkat yang lebih luas, parser juga tidak berhenti di antara stylesheet: stylesheet lain, dan sisa halaman, tetap diproses seperti biasa.

Kesalahan Umum dan Cara DevTools Menandainya #

Tiga kelompok kesalahan paling sering kita temui:

1. Typo nama properti atau selector: widht bukan properti — deklarasi diabaikan seluruhnya; selector yang salah eja cocok dengan tidak siapa-siapa dan tidak muncul di panel Styles.
2. Nilai yang tidak dikenal: color: biru (bukan keyword CSS), padding: 10px 20px 30px 40px 50px (terlalu banyak nilai), atau width: 100kk — deklarasi dibuang saat parsing.
3. Kurung kurawal yang tidak berpasangan: blok yang tidak ditutup menjaring aturan berikutnya, seperti diuraikan di atas.

DevTools menandai semuanya di panel Styles: deklarasi invalid tampil dengan coretan plus ikon peringatan di sebelahnya, dan menekannya menampilkan pesan yang menjelaskan mengapa nilai ditolak. Prosedur cepatnya: pilih elemen yang bermasalah, cari deklarasi tercoret di panel Styles, perbaiki nilainya langsung di panel untuk membuktikan diagnosis, lalu salin perbaikannya ke file.

Membuktikan Pemulihan pada Demo #

Demo chapter ini memuat ketiga kelompok kesalahan sekaligus:

.kartu {
  color: biru;                           /* diabaikan */
  padding: 10px 20px 30px 40px 50px;     /* diabaikan */
  height: 80px;                          /* tetap berlaku */
  border-radius: 8px;                    /* tetap berlaku */
}
.kartu {
  widht: 300px;                          /* diabaikan */
}

Mari kita telaah hasil akhirnya:

1. color: biru: biru bukan keyword yang dikenal, sehingga deklarasi dibuang — warna kartu jatuh ke nilai warisan body, rgb(51, 65, 85).
2. padding: 10px 20px 30px 40px 50px: shorthand padding menerima paling banyak empat nilai; lima nilai tidak valid, sehingga padding tetap 0px di semua sisi.
3. height: 80px dan border-radius: 8px: keduanya valid dan ditulis setelah dua kesalahan — tetap diterapkan. Inilah bukti parser tidak berhenti.
4. widht: 300px: properti tidak dikenal diabaikan, dan karena tidak ada deklarasi width yang sah, lebar kartu mengikuti perilaku bawaan blok.

Hasil di Browser:

Kartu tampil dengan height 80px dan border-radius 8px — dua deklarasi
valid tetap hidup; color kembali ke nilai warisan rgb(51, 65, 85) dan
padding tetap 0px — dua deklarasi invalid diabaikan. Paragraf .rusak
tetap menerima warna biru rgb(2, 132, 199) dari aturan berkurung
terbuka, sedangkan paragraf .disusul terjaring dan kembali ke warna
warisan; paragraf .salah-media di dalam @medai yang salah eja juga
tidak menerima gayanya.

Perlu dibedakan satu hal: CSS invalid adalah kesalahan sintaks yang jelas, sedangkan CSS valid yang ditulis menyesatkan — misalnya selector yang sah tetapi tidak pernah cocok — tidak ditandai browser mana pun. Pemeriksaan menyeluruh untuk menangkap keduanya menjadi topik chapter berikutnya.