Cara Kerja CSS

Menulis aturan CSS tanpa memahami cara browser memprosesnya membuat kita mengandalkan tebakan: kadang aturan berpengaruh, kadang tidak, dan kita tidak tahu di mana kesalahannya. Padahal alur kerjanya bisa dipetakan dengan jelas, dan pola yang sama berlaku di semua browser modern. Pada chapter ini kita mengikuti perjalanan kode CSS dari berkasnya sampai menjadi tampilan: browser membangun DOM, mengurai aturan CSS, mencocokkan selector dengan elemen, menghitung nilai akhir, lalu menggambar hasilnya ke layar. Setelah memahami alur ini, setiap aturan yang kita tulis menjadi sesuatu yang bisa diprediksi hasilnya.

Alur Kerja Browser dalam Lima Tahap #

Browser tidak menampilkan halaman sekaligus dalam satu langkah. Ada lima tahap yang berjalan berurutan, dan semuanya selesai dalam hitungan milidetik:

1. Membangun DOM: browser membaca HTML dari atas ke bawah dan mengubahnya menjadi DOM (Document Object Model), struktur berbentuk pohon yang menyimpan setiap elemen beserta atributnya.
2. Mengurai CSS: setiap kali browser menemukan CSS — baik dari berkas terpisah maupun dari dalam halaman — browser menguraikan aturannya dan menyimpannya dalam struktur serupa yang sering disebut CSSOM.
3. Mencocokkan selector: browser memeriksa setiap elemen di DOM, lalu mencari aturan CSS yang pola selector-nya cocok dengan elemen tersebut.
4. Menghitung style akhir: satu elemen sering dituju oleh beberapa aturan sekaligus. Browser menyelesaikan konfliknya lewat cascade sehingga setiap property memiliki satu nilai akhir.
5. Menggambar ke layar: dengan semua nilai akhir siap, browser menggambar (paint) tiap elemen pada posisi dan tampilannya masing-masing.

Alur tersebut dirangkum diagram berikut:

Proses ini bukan sekali jalan. Setiap ada perubahan pada halaman — misalnya JavaScript mengganti class sebuah elemen — browser mengulang tahap pencocokan dan menghitung ulang gaya elemen yang terdampak.

Pencocokan Selector dengan DOM #

Selector bekerja seperti pola yang browser cocokkan ke pohon DOM. Mari kita lihat satu contoh:

<article class="kartu">
  <h2>Kopi Gayo</h2>
  <p>Roasting sedang, aroma cokelat dan karamel.</p>
</article>

.kartu p {
  color: #5b4636;
}

Judul “Kopi Gayo” tidak tersentuh aturan ini karena <h2> tidak cocok dengan pola selector .kartu p — hanya paragraf di dalam kartu yang menjadi target.

Mari kita bedah aturan di atas:

1. .kartu: browser mencari elemen dengan atribut class bernilai kartu; di DOM contoh kita, elemen tersebut adalah <article>.
2. spasi antara .kartu dan p: penanda descendant combinator, yaitu target aturan harus berada di dalam elemen sebelumnya.
3. p: browser memilih hanya elemen <p> yang berada di dalam .kartu; <h2> diabaikan.
4. color: #5b4636;: deklarasi ini menjadi nilai kandidat untuk warna teks paragraf yang cocok.

Kata “kandidat” penting: hasil pencocokan belum tentu menjadi nilai akhir, karena bisa saja ada aturan lain yang juga cocok dan saling bertentangan.

Cascade: Ketika Beberapa Aturan Menuju Elemen yang Sama #

Contoh berikut memuat dua aturan yang sama-sama menargetkan paragraf:

p {
  color: #1f2933;
}

.teks-aksen {
  color: #b45309;
}

Untuk elemen <p class="teks-aksen">, kedua aturan cocok dan keduanya mengatur property color dengan nilai berbeda. Browser menyelesaikan benturan ini lewat aturan prioritas bernama cascade: nilai dari selector yang lebih spesifik — .teks-aksen — menang atas selector sederhana p. Hasilnya, paragraf tersebut tampil oranye kecokelatan, bukan abu-abu. Urutan prioritas lengkapnya kita bedah tuntas pada section Cascade, Inheritance, dan Specificity; untuk saat ini cukup pahami bahwa setiap konflik selalu ada pemenangnya.

Mencoba Mengubah Satu Aturan #

Cara paling cepat membuktikan alur ini adalah melihat perubahan satu deklarasi. Kedua kartu pada demo berikut memakai markup dan aturan yang identik; satu-satunya perbedaan adalah deklarasi background-color tambahan untuk kartu kedua:

HTML tidak tersentuh sama sekali; yang berubah hanya satu baris di CSS, dan hasil tahap penggambaran langsung mengikuti. Perubahan sekecil apa pun pada aturan yang cocok dengan sebuah elemen akan terlihat di layar — selama selector-nya benar-benar cocok.

Kesalahan Umum #

Ringkasan #

Browser memproses halaman dengan alur yang tetap: HTML menjadi DOM, CSS menjadi CSSOM, selector dicocokkan dengan elemen, konflik diselesaikan cascade, lalu hasilnya digambar ke layar. Alur ini berulang setiap ada perubahan, sehingga tampilan selalu mengikuti aturan terakhir yang cocok. Chapter berikutnya memperdalam pasangan di balik alur tersebut: peran masing-masing HTML dan CSS serta cara markup semantik membuat stylesheet kita lebih sederhana.