Kesalahan Sintaks CSS

CSS tidak pernah menampilkan pesan galat di halaman. Ketika ada kesalahan sintaks, browser tidak berhenti, tidak menandai baris yang bermasalah, dan tidak mencetak peringatan; gaya yang rusak hanya tidak muncul. Akibatnya pemula sering mengira aturannya tidak didukung browser, padahal masalahnya sesederhana titik koma yang terlewat. Pada chapter ini kita menginventarisasi kesalahan yang paling sering terjadi, memahami cara browser bertahan dari kode yang rusak, dan menyiapkan checklist pemeriksaan cepat.

Enam Kesalahan yang Paling Sering Terjadi #

Kesalahan	Contoh	Akibat
Titik koma terlewat	`color: #14503a` diikuti deklarasi lain	nilai dianggap berlanjut; dua deklarasi dibuang
Titik dua terlewat	`color #14503a;`	deklarasi itu dibuang
Kurung kurawal tutup terlewat	blok `{` tanpa pasangan `}`	rule berikutnya ikut tertelan
Nama property salah eja	`colour: red;`	deklarasi itu saja diabaikan
Komentar `//`	`// catatan` di atas rule	seluruh rule di belakangnya gagal
String tak ditutup kutip	`font-family: "Trebuchet MS;`	deklarasi dibuang, parsing lanjut di baris berikutnya

Perhatikan beda besarnya dampak: kesalahan property dan titik dua umumnya hanya memakan satu deklarasi, sedangkan titik koma, kurung kurawal, dan komentar // bisa menelan lebih dari itu. Semakin besar cakupan kerusakan, semakin membingungkan gejalanya — beberapa gaya berhenti bekerja sekaligus padahal kodenya tampak benar.

Cara Browser Bertahan #

CSS dirancang untuk tidak lumpuh total karena satu kesalahan. Parser berhenti pada batas yang sah berikutnya, membuang bagian yang rusak, lalu melanjutkan membaca berkas. Tingkat kerusakannya menentukan luasnya bagian yang dibuang.

Kesalahan pada deklarasi — hanya deklarasi itu yang dibuang, tetangganya tetap berlaku:

css
.kartu {
  colour: #14503a;  /* dibuang: property tidak dikenal */
  font-size: 18px;  /* tetap berlaku */
}

Demo berikut memuat satu kesalahan nyata dari tabel di atas — bandingkan kedua paragrafnya:

Browser membuang deklarasi colour tanpa suara, lalu melanjutkan ke deklarasi berikutnya — deklarasi font-size di rule yang sama tetap berlaku. Perbaikannya hanya mengganti ejaan property:

css
.teks-rusak {
  color: #b91c1c;  /* perbaikan: colour diganti color */
  font-size: 18px;
}

Kesalahan pada selector — seluruh rule dibuang, deklarasi di dalamnya pun ikut:

css
h2, .promo:first-chil {
  color: #14503a;
  margin-top: 8px;
}

Tulisan first-chil salah eja, dan karena kesalahan berada di bagian selector, browser membuang rule utuh — kedua deklarasi ikut hilang meskipun keduanya benar. Pola ini mengingatkan pada perilaku selector list dari chapter Multiple Selectors: satu anggota rusak, satu rule batal.

Melihat Tandanya di DevTools #

DevTools memvisualkan deklarasi yang ditolak browser:

Buka DevTools dengan tombol F12, pilih panel Elements, lalu cari panel Styles.
Deklarasi dengan property atau value tidak sah ditandai ikon peringatan berbentuk segitiga kuning; arahkan kursor ke ikon itu untuk membaca alasan, misalnya Invalid property value.
Deklarasi yang dicoret (strike-through) berarti ditimpa deklarasi lain — bedakan dengan yang ditolak karena salah sintaks.
Bila rule sama sekali tidak muncul di panel Styles, curigai selector-nya: deklarasi tidak pernah sampai karena rule-nya dibuang sejak awal.

Panel Styles memperlihatkan hasil akhir setelah semua pemrosesan, jadi ikon peringatan di sana adalah konfirmasi bahwa browser sungguh menolak deklarasi kita — bukan sekadar tertimpa rule lain.

Checklist Pemeriksaan Cepat #

Saat gaya tidak muncul, periksa berurutan dari yang paling sering keliru:

Selector: nama class dan id persis sama dengan HTML, termasuk huruf besar-kecilnya.
Titik dua: setiap deklarasi punya : antara property dan value.
Titik koma: setiap deklarasi diakhiri ;.
Kurung kurawal: jumlah { dan } seimbang.
Komentar: tidak ada // yang terbawa dari JavaScript.
Kutip: nama font dan string content sudah ditutup kutipnya.

Enam langkah ini memeriksa satu berkas kecil dalam waktu kurang dari satu menit, dan biasanya kesalahan ditemukan di langkah kedua atau ketiga.

Ringkasan #

Kesalahan sintaks CSS tidak menghentikan halaman: browser membuang bagian yang rusak — satu deklarasi bila kesalahannya lokal, satu rule utuh bila selector-nya tidak sah — lalu melanjutkan membaca berkas. Karena tidak ada pesan galat, checklist pemeriksaan dan panel Styles di DevTools menjadi alat utama kita menemukannya. Dengan chapter ini selesai, kita sudah menguasai seluruh kosakata dasar penulisan CSS dan siap melangkah ke section berikutnya yang membahas selector secara mendalam.