Cascade Origins

Satu elemen HTML dapat menerima deklarasi gaya dari beberapa sumber sekaligus: gaya bawaan browser, preferensi pengguna, dan stylesheet yang kita tulis sebagai penulis halaman. Cascade adalah algoritma yang memilih satu nilai akhir untuk setiap properti, dan langkah pertamanya adalah memilah deklarasi menurut asalnya, yaitu origin. Tanpa memahami origin, kita mudah bingung mengapa judul tetap tebal padahal kita tidak pernah menetapkan font-weight, atau mengapa tautan berwarna biru sebelum ada satu baris CSS pun. Pada Chapter ini kita mengenal tiga origin utama, urutan prioritasnya, peran deklarasi !important, lalu membuktikannya lewat demo yang dapat dibuka langsung di browser.

Tiga Origin yang Diproses Browser #

Dokumentasi Cascade di MDN membagi sumber deklarasi menurut origin. Tiga origin yang paling sering kita temui:

Origin user-agent menjelaskan tampilan “polos” sebuah dokumen HTML tanpa CSS: browser tetap menyusun judul, daftar, dan tautan secara terbaca sebelum kita menulis satu deklarasi pun. Origin user jarang terisi karena hanya sedikit pengguna yang memasang stylesheet pribadi. Origin author adalah wilayah kerja kita sehari-hari — hampir seluruh chapter Course ini, termasuk demo pada chapter ini, menulis deklarasi pada origin tersebut.

Urutan Prioritas dan Pembalikan oleh !important #

Untuk deklarasi normal (tanpa !important), browser menyelesaikan konflik antar-origin dengan urutan sederhana: origin yang lebih tinggi menimpa origin yang lebih rendah.

1. user-agent — terlemah.
2. user — menimpa user-agent.
3. author — terkuat di antara deklarasi normal.

Urutan tersebut dibalik untuk deklarasi bertanda !important:

1. author !important — terlemah di antara deklarasi penting.
2. user !important — menimpa author !important.
3. user-agent !important — terkuat.

Pembalikan ini memiliki tujuan aksesibilitas: preferensi penting dari pengguna dan browser harus mampu mengesampingkan gaya penulis. Mode forced colors adalah contoh nyatanya — pengaturan kontras dari browser tetap berlaku meskipun kita menandai warna dengan !important.

Contoh: Author Mengisi Celah Gaya Bawaan Browser #

Demo chapter ini menampilkan kartu berisi elemen yang sebagian mengandalkan gaya user-agent dan sebagian ditimpa oleh author. Bagian CSS yang menimpa:

h1 {
  color: rgb(185, 28, 28);
  font-size: 30px;
  margin: 0 0 12px;
}

.tautan { color: rgb(29, 78, 216); }

.aksi {
  background-color: rgb(2, 132, 199);
  color: rgb(255, 255, 255);
}

HTML pendampingnya sengaja tidak menetapkan font-weight untuk judul dan tidak menyentuh elemen <em> maupun <strong>:

<div class="kartu">
  <h1>Alur belajar CSS</h1>
  <p>Mulai dari materi dasar, berlatih <em>perlahan</em>,
     lalu jaga ritme <strong>setiap hari</strong>.</p>
  <p><a class="tautan" href="#">Buka materi berikutnya</a></p>
  <button class="aksi" type="button">Mulai belajar</button>
</div>

Hasil di Browser:

Judul "Alur belajar CSS" tampil merah bata (color: rgb(185, 28, 28)) dengan
font-size 30px, tetapi tetap tebal: font-weight 700 berasal dari gaya
user-agent karena tidak ada deklarasi author untuk font-weight.
Kata "perlahan" tampil miring (font-style italic) dan frasa "setiap hari"
tampil tebal (font-weight 700) — keduanya gaya user-agent.
Tautan tampil biru tua (color: rgb(29, 78, 216)), menggantikan biru bawaan
browser dari origin user-agent.
Tombol tampil biru dengan teks putih: background-color rgb(2, 132, 199) dan
color rgb(255, 255, 255) berasal dari origin author.

Mari kita telaah pembagian peran origin pada contoh di atas:

1. h1 { color: ...; font-size: 30px; }: origin author menimpa warna dan ukuran bawaan user-agent. Properti font-weight tidak disentuh, sehingga gaya tebal bawaan tetap berlaku — inilah bukti bahwa user-agent masih aktif di bawah author.
2. .tautan { color: ...; }: deklarasi author mengganti biru bawaan tautan dari user-agent.
3. .aksi { background-color: ...; color: ...; }: tombol pada user-agent berlatar abu-abu; author mengganti latar dan warna teksnya.
4. Elemen <em> dan <strong>: tidak ada deklarasi author sama sekali, sehingga font-style: italic dan font-weight: 700 murni berasal dari user-agent.

Demo lengkap pada chapter ini membawa atribut data-expected untuk setiap klaim di atas, sehingga pembagian origin tersebut diverifikasi otomatis oleh harness Course. Cara berikutnya untuk memilih pemenang di dalam origin author — specificity dan source order — kita bedah pada Chapter Specificity dan Source Order .