Antara menekan Enter pada address bar dan melihat halaman berwarna di layar, browser menjalankan serangkaian langkah yang bekerja dengan cepat dan konsisten. HTML mentah diubah menjadi pohon objek, teks CSS diurai menjadi kumpulan aturan, kedua hasil itu dicocokkan, dan barulah piksel digambar ke layar. Memahami alur ini membuat kita tidak lagi menebak mengapa sebuah gaya berlaku atau tidak. Pada Chapter ini kita mengikuti alur tersebut langkah demi langkah, lengkap dengan contoh yang bisa diuji lewat DevTools.

Dari Kode Mentah ke DOM dan CSSOM #

Langkah pertama, browser membaca HTML dari atas ke bawah. Parser HTML mengubah dokumen menjadi DOM (Document Object Model): pohon berisi satu objek untuk setiap elemen dan teks. Pohon inilah struktur data yang akan “dituding” oleh selector CSS nanti.

Langkah kedua berjalan paralel untuk CSS. Parser CSS membaca setiap aturan, memeriksa sintaksnya, lalu menyusun CSSOM (CSS Object Model): struktur berisi aturan yang valid beserta selector dan deklarasinya. Deklarasi yang tidak valid diabaikan pada tahap ini, sehingga CSSOM hanya memuat aturan yang dapat dijalankan browser.

Alur lengkapnya dapat digambarkan sebagai berikut:

Diagram di atas merangkum enam tahap. Parser HTML menghasilkan DOM; parser CSS menghasilkan CSSOM; tahap pencocokan selector menghubungkan setiap elemen DOM dengan aturan CSSOM yang menunjuknya; hasil pencocokan dirangkum menjadi computed style per elemen; tahap layout menghitung posisi dan ukuran setiap kotak; dan tahap paint menggambar hasil akhirnya ke layar. Apabila CSS berubah di kemudian hari, browser mengulang tahap pencocokan dan tahap setelahnya — inilah yang membuat halaman dapat diperbarui tanpa dimuat ulang.

Pencocokan Selector dan Cascade sebagai Pembuka #

Pada tahap pencocokan, browser membandingkan setiap selector dengan setiap elemen DOM. Selector p cocok dengan semua elemen <p>; selector class .menonjol cocok dengan semua elemen yang membawa class tersebut. Satu elemen dapat dicocokkan oleh banyak aturan sekaligus, dan di situlah cascade bekerja: aturan dengan asal (origin) dan specificity lebih tinggi menang, sedangkan aturan lain dikalahkan.

Chapter ini menyajikan versi singkatnya saja. Aturan lengkap tentang origin, specificity, dan urutan sumber kita bedah tuntas pada Chapter Specificity dan Source Order . Untuk sekarang, cukup pegang satu kaidah: selector class lebih kuat daripada selector elemen.

css gaya.css 
.induk {
  font-size: 16px;
  color: rgb(30, 41, 59);
}
.anak {
  font-size: 1.5em;  /* dihitung dari induk: 1,5 x 16px = 24px */
  line-height: 1.5;  /* dihitung dari font-size elemen: 1,5 x 24px = 36px */
}
p { color: rgb(71, 85, 105); }         /* specificity 0-0-1 */
.menonjol { color: rgb(220, 38, 38); } /* specificity 0-1-0, lebih kuat */
html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Alur Penerapan CSS</title>
  <link rel="stylesheet" href="gaya.css">
</head>
<body>
  <section class="induk">
    <div class="anak">Paragraf ini tidak punya aturan warna.</div>
  </section>
  <p>Paragraf biasa tanpa class.</p>
  <p class="menonjol">Paragraf dengan class menonjol.</p>
  <h3>Judul tanpa aturan apa pun</h3>
</body>
</html>

Hasil di Browser:

text 
Elemen anak mewarisi warna induk rgb(30, 41, 59) karena color termasuk
properti yang diwariskan; computed font-size-nya 24px dan line-height
36px. Paragraf biasa berwarna rgb(71, 85, 105) dari aturan selector
elemen. Paragraf berclass menonjol berwarna rgb(220, 38, 38) karena
selector class mengalahkan selector elemen. Judul h3 tetap tebal dengan
font-weight 700 dan display block meskipun kita tidak menulis satu pun
aturan untuknya.

Mari kita telaah hasil tersebut:

  1. Aturan .induk: font-size 16px dan warna rgb(30, 41, 59) diterapkan pada <section>. Kedua properti ini menjadi titik awal bagi isinya.
  2. Aturan .anak: nilai 1.5em belum bisa langsung dipakai; browser menghitungnya terhadap font-size induk sehingga computed value-nya menjadi 24px. Nilai line-height: 1.5 kembali dihitung dari font-size elemen itu sendiri sehingga menghasilkan 36px.
  3. Properti color pada .anak: kita tidak menulisnya, tetapi color termasuk properti yang diwariskan (inheritance), sehingga elemen anak memperoleh warna induk.
  4. Aturan p vs .menonjol: kedua aturan mencocokkan paragraf kedua. Specificity class (0-1-0) lebih tinggi daripada elemen (0-0-1), sehingga rgb(220, 38, 38) menang.
  5. Elemen <h3>: tidak ada aturan kita yang cocok, sehingga gaya bawaan browser yang berlaku.

User-Agent Stylesheet, Gaya Bawaan Browser #

Nilai tebal pada <h3> di contoh atas tidak muncul entah dari mana. Setiap browser membawa stylesheet bawaan yang disebut user-agent stylesheet , yang mengatur tampilan dasar semua elemen standar: judul tebal dan besar, paragraf diberi jarak, tautan berwarna biru dengan garis bawah, dan daftar diberi nomor atau titik. Gaya bawaan inilah alasan halaman tanpa CSS tetap terbaca sebagaimana dibahas pada Chapter Hubungan HTML dan CSS .

Dari sisi cascade, user-agent stylesheet berada pada origin paling bawah. Setiap aturan yang kita tulis (author stylesheet) menimpanya tanpa perlu trik apa pun. Itulah sebabnya satu deklarasi color saja sudah cukup mengubah warna tautan yang selama ini biru.