BAB 7: Error CSS

Di bab sebelumnya kita belajar menonaktifkan rule dengan komentar — teknik debugging paling sederhana yang ada di CSS. Tapi komentar hanya berguna ketika kamu tahu kode mana yang bermasalah. Bagaimana kalau gaya yang kamu tulis sama sekali tidak tampak, dan kamu tidak tahu mengapa?

Inilah yang membuat CSS berbeda dari JavaScript. JavaScript akan melempar error ke konsol dan menghentikan eksekusi. CSS tidak melakukan itu — browser diam-diam mengabaikan kode yang tidak valid dan melanjutkan parsing sisanya. Diam ini bisa membingungkan, tapi ada logika di baliknya.

Kenapa Browser Tidak Melempar Error

Filosofi CSS adalah graceful degradation — browser dirancang untuk tetap berjalan sekalipun ada bagian kode yang tidak dipahami. Kalau browser berhenti memproses seluruh stylesheet hanya karena satu nilai yang salah ketik, halaman web akan hancur total hanya karena kesalahan kecil.

Perilaku diam ini juga memungkinkan fitur CSS baru berjalan di browser modern tanpa merusak browser lama. Browser lama cukup mengabaikan properti yang tidak dikenal dan meneruskan ke deklarasi berikutnya.

Empat Kesalahan yang Paling Sering Terjadi

Browser tidak memilih-milih dalam hal error — semua jenis kesalahan sintaks diperlakukan dengan cara yang sama: diabaikan. Namun apa yang diabaikan bergantung pada di mana kesalahan itu terjadi.

Titik Koma yang Hilang

Ini adalah penyebab error paling umum. Ketika browser menemukan baris tanpa ;, ia terus membaca ke depan sampai menemukan titik koma berikutnya — dan semua teks di antara keduanya dianggap bagian dari satu nilai yang panjang. Hasilnya: dua deklarasi sekaligus menjadi tidak valid.

Browser membaca #1a2744 font-size: 2rem sebagai satu nilai untuk color — yang tentu saja tidak valid. Karena tidak valid, kedua deklarasi itu dibuang. line-height selamat karena sudah melewati titik koma yang ada.

Nama Properti Tidak Valid

Salah ketik nama properti menghasilkan kegagalan yang sama senyapnya:

Browser tidak mengenal colour sebagai properti yang sah, sehingga satu deklarasi itu dibuang. Deklarasi lain di dalam blok yang sama tetap dijalankan karena error di CSS memiliki scope yang terbatas.

Nilai Tidak Valid

Propertinya benar, tapi nilainya salah format:

-200px dan 45deg tidak memenuhi tipe nilai yang diharapkan oleh masing-masing properti. Keduanya diabaikan secara individual — border-radius di bawahnya tidak terpengaruh sama sekali.

Kurung Kurawal Tidak Tertutup

Ini adalah kesalahan dengan dampak paling luas. Ketika browser tidak menemukan } penutup, ia tidak tahu kapan satu rule berakhir dan rule berikutnya dimulai.

Semua kode setelah kurung kurawal yang hilang kemungkinan besar tidak akan dijalankan dengan benar. Ini adalah satu-satunya jenis error CSS yang bisa merusak banyak rule sekaligus.

Scope Error: Seberapa Jauh Dampaknya

Memahami scope dari setiap error membantu kamu mempersempit area pencarian saat debugging.

Jenis Error	Yang Diabaikan
Properti atau nilai tidak valid	Hanya deklarasi itu (satu baris)
Titik koma hilang	Deklarasi sebelum dan sesudah titik koma yang hilang
Selector tidak valid	Seluruh blok deklarasi untuk selector tersebut
Kurung kurawal tidak tertutup	Semua rule sejak kurawal yang tidak tertutup

Pola ini penting: semakin kecil scope error, semakin mudah diisolasi. Kesalahan dalam satu deklarasi tidak akan merusak deklarasi lain di blok yang sama — berbeda dengan kurung kurawal yang hilang, yang bisa merusak separuh file.

Cara Mendeteksi Error

Browser tidak berteriak, tapi browser memberikan petunjuk. Dua alat yang paling berguna ada di browser itu sendiri.

DevTools: Panel Styles

Buka DevTools (tekan F12 di Chrome, Firefox, atau Edge), klik elemen yang bermasalah, lalu lihat panel Styles di sebelah kanan.

Browser menampilkan beberapa indikator visual:

• Teks dicoret — deklarasi tidak valid atau ditimpa oleh rule lain dengan spesifisitas lebih tinggi
• Ikon peringatan — nilai valid secara sintaks tapi tidak berpengaruh dalam konteks ini (misalnya align-items pada elemen yang bukan flex container)
• Teks memudar — selector tidak cocok dengan elemen yang sedang dipilih

CSS Validator

Untuk audit lebih menyeluruh, gunakan validator CSS resmi milik W3C. Tempel kode CSS kamu atau masukkan URL halaman, dan validator akan melaporkan semua kesalahan sintaks beserta nomor baris.

Alur Debug yang Efektif

Ketika gaya tidak muncul seperti yang kamu harapkan, ikuti urutan berikut:

1. Buka DevTools dan pilih elemen yang bermasalah.
2. Cari deklarasi yang dicoret atau berwarna pudar di panel Styles.
3. Periksa apakah selector sudah cocok dengan elemen yang dipilih.
4. Kalau semua terlihat benar di panel Styles tapi tampilan masih salah, periksa apakah ada rule lain dengan spesifisitas lebih tinggi yang menimpa (ini akan dibahas lebih dalam di bab tentang Specificity dan Cascade).
5. Jika masih tidak ketemu, salin rule yang bermasalah ke validator W3C.

Latihan

Buat file debug-latihan.css baru dan masukkan kode berikut:

1. Buka file di browser, klik tiap elemen dengan DevTools, dan catat deklarasi mana yang dicoret atau diabaikan. Coba cocokkan temuan kamu dengan empat kategori error yang sudah dibahas.

2. Perbaiki semua error di file tersebut satu per satu, bukan sekaligus. Perhatikan bagaimana setiap perbaikan mengubah output di DevTools.

3. Setelah semua diperbaiki, jalankan melalui validator W3C dan pastikan hasilnya bersih.

Memahami cara browser menangani error mengubah cara kamu membaca kode CSS. Kamu tidak lagi bertanya "kenapa ini tidak jalan?" tanpa arah — sekarang kamu tahu bahwa ada pola dalam kegagalan itu, dan ada alat yang bisa membaca pola tersebut. Dengan bekal ini, kita siap masuk ke salah satu aspek paling ekspresif di CSS: cara bekerja dengan warna.

Referensi

1. 1 MDN Web Docs — CSS Error Handling
2. 2 Chrome DevTools — Find Invalid, Overridden, Inactive CSS
3. 3 W3C — CSS 2.2 Specification: Rules for handling parsing errors