CSS Validation

Ketika sebuah deklarasi CSS ditulis dengan kesalahan — nama properti salah ketik atau nilai tidak sah — browser tidak menampilkan pesan error; browser membuang deklarasi itu diam-diam dan melanjutkan ke deklarasi berikutnya. Perilaku ini membuat kesalahan sintaks sulit terdeteksi dengan mata: halaman tetap tampil, hanya saja tanpa gaya yang kita inginkan. Validasi adalah kebiasaan murah untuk menemukan kesalahan tersebut secara sistematis sebelum halaman sampai ke pengguna. Chapter ini memperkenalkan dua alat utamanya dan batas-batas yang perlu kita pahami agar hasil validasi terbaca dengan benar.

Apa yang Ditemukan dan Apa yang Terlewat #

CSS Validation Service dari W3C memeriksa dokumen CSS terhadap tata bahasa resmi. Alat ini menemukan kesalahan kategori berikut:

1. Kesalahan sintaks: kurung kurawal tidak ditutup, titik koma tertinggal, tanda kutip tidak berpasangan.
2. Properti tidak dikenal: misalnya widht: 200px sebagai salah ketik dari width.
3. Nilai tidak sah: misalnya color: biru-langit karena kata itu bukan kata kunci CSS.

.kartu {
  color: biru-langit;   /* tidak sah: bukan kata kunci — dibuang browser */
  widht: 200px;         /* tidak sah: properti tidak dikenal — dibuang */
  padding: 12px;        /* sah dan tetap berlaku */
  color: rgb(20, 83, 45); /* sah dan menggantikan deklarasi color di atas */
}

Perhatikan bahwa kesalahan tidak menghentikan pembacaan stylesheet; browser hanya membuang deklarasi yang bermasalah dan deklarasi tetangganya tetap berlaku. Mesin Stylelint bekerja pada lapisan berbeda: alat ini tidak sekadar memeriksa keabsahan sintaks, tetapi juga menegakkan konvensi tim — urutan properti, larangan warna literal yang tidak konsisten, hingga penandaan !important yang berlebihan. Validasi W3C menjawab “apakah CSS ini sah”, sedangkan Stylelint menjawab “apakah CSS ini konsisten dengan aturan proyek”. Keduanya saling melengkapi dan tidak saling menggantikan: validator menangkap kegagalan tata bahasa, linter menangkap kegagalan disiplin penulisan.

Kapan Memakai Alat yang Mana #

Demo pada chapter ini menampilkan dua kartu berdampingan: satu berisi deklarasi yang seluruhnya sah, satu lagi berisi deklarasi cacat. Probe computed style membuktikan deklarasi tidak sah benar-benar diabaikan browser, sedangkan deklarasi sah di baris lain tetap bekerja.

Hasil di Browser:

Kartu valid berwarna teks hijau rgb(20, 83, 45), radius 10px, dan
lebar 240px; kartu invalid berwarna teks warna bawaan body
rgb(30, 41, 59) karena deklarasi color tidak sahnya diabaikan,
namun background-color rgb(244, 63, 94)-nya tetap berlaku.