Arti Cascading Dalam CSS

Cascading? Apa artinya? Apa yang dimaksudkan oleh si penemu CSS dengan memberi nama seperti itu? Jika Anda cari terjemahannya dalam kamus, maka dijamin bukannya mengerti malahan hilang akal. Ya, terjemahannya adalah air terjun atau mengalir kebawah. Tidak mudah menghubungkan arti ini dengan pengertian kita tentang CSS. Untungnya, W3C dapat membantu kita disini. Jika kita ambil pengertian cascading CSS menurut W3C, maka cascading berarti suatu urutan prioritas bagaimana aturan CSS yang saling  bertentangan diterapkan. Jadi, ini berhubungan dengan bagaimana CSS menentukan aturan gaya yang mana yang harus digunakan untuk suatu elemen HTML sementara tersedia beberapa pilihan. Misalkan, ada dua aturan CSS seperti ini:

p {color: white; background: darkblue;}
p {color: yellow; background: black;}

Aturan CSS diatas sama-sama mengatur tag <p> dan properti paragrap yang sama, yaitu warna teks dan warna latar belakang. Mana yang akan digunakan oleh CSS untuk menampilkan paragrap ditentukan oleh sistem cascading dalam CSS. Mari kita lihat bagaimana sebernarnya sistem prioritas menurut cascading CSS ini.

Beberapa Jenis Style Sheets

Sebelumnya, perlu Anda ketahui bahwa style sheets (kumpulan aturan CSS, biasanya kita simpan dalam sebuah file berakhiran .css) yang kita buat lalu digunakan oleh browser untuk mengatur tampilan halaman web, dibagi menjadi 3 jenis, yaitu:

1. style sheets author. Ini adalah style sheets yang dibuat oleh pemilik situs. Jika Anda pernah menggunakan CSS untuk membuat situs, Anda pasti sudah kenal dengan jenis ini. Ini adalah jenis yang paling banyak dijumpai.
2. style sheets user - style sheets yang dibuat oleh si pengguna atau pengunjung situs. Terkadang pengguna ingin mengubah penampilan suatu halaman web, misalnya mengubah ukuran huruf agar lebih mudah dibaca.Jenis ini memungkinkan pengguna mengatur penampilan suatu halaman web
3. style sheets user-agent - istilah user-agent disini mewakili suatu browser atau screen reader (software pembaca halaman web untuk mereka yang berpenglihatan tidak normal). Ini adalah style sheets yang terkandung didalam browser. Contoh, sesuai dengan style sheetsnya, secara default browser akan menampilkan elemen <em> dengan huruf miring.

Aturan CSS yang ada didalam setiap style sheets diatas memiliki prioritas yang berbeda. Aturan CSS  yang digunakan dalam style sheets author akan memiliki prioritas tertinggi, diikuti oleh style sheets user dan terakhir style sheets user-agent. Jadi, jika ada aturan CSS untuk mengatur paragrap terdapat di style sheets author dan user, maka aturan yang digunakan adalah yang berada dalam style sheets author. Dalam contoh diatas, jika aturan yang pertama terdapat dalam style sheets author dan satunya lagi dalam style sheets user, maka paragrap akan ditampilkan dengan warna teks putih dan background biru.

Mengubah Prioritas

Meskipun demikian, prioritas ini dapat diubah, yaitu dengan menggunakan perintah !important. Dengan perintah ini, maka aturan yang menggunakan perintah ini, akan digunakan oleh browser meskipun memiliki prioritas yang lebih rendah. Sebagai contoh, jika kedua contoh aturan CSS diatas diubah seperti ini:

p {color: white; background: darkblue;}
p {color: yellow !important;
    background: black !important;}

Maka paragrap sekarang akan ditampilkan dengan warna teks kuning dan background hitam. Sekarang prioritas sudah berubah, aturan paragrap yang terdapat pada style sheets user akan memiliki prioritas lebih tinggi daripada aturan paragrap pada style sheets author, sehingga aturan ini yang akan digunakan oleh browser.

Mekanisme Cascading

Aturan ini pada dasarnya menentukan urutan prioritas aturan CSS. Cara kerja browser dalam menentukan prioritas atau menentukan deklarasi aturan mana yang akan digunakan pada suatu elemen HTML adalah sebagai berikut:

• Pertama, browser akan mencari seluruh deklarasi yang diterapkan pada suatu elemen
• Kedua, browser akan memeriksa berasal dari style sheets jenis apa deklarasi tersebut berada
• Ketiga, memeriksa seberapa spesifik suatu selektor. Semakin spesifik, semakin tinggi prioritasnya. Sebagai contoh, aturan gaya selektor p pada deklarasi 'div p' akan memiliki prioritas lebih tinggi daripada pada 'p' saja.
• Terakhir, melihat urutan pendefinisiannya. Aturan gaya yang didefinisikan lebih akhir akan memiliki prioritas tertinggi. Misalnya, aturan gaya yang dideklarasikan menggunakan atribut 'style' pada suatu elemen HTML akan berprioritas lebih tinggi daripada yang dideklarasikan pada suatu file eksternal yang disertakan oleh dokumen HTML yang bersangkutan. Hal ini karena style sheets dibaca oleh browser dari atas kebawah. Kode untuk menyertakan file eksternal CSS ada dibagian HEAD, sementara atribut 'style' pada suatu elemen HTML ada dibagian BODY. 

Dengan mengetahui sifat cascading dalam CSS ini, memberikan kelebihan bagi kita dalam menggunakan CSS. Kita akan menjadi tahu seandainya aturan CSS yang kita buat ternyata tidak berefek pada tampilan, salah satu kemungkinan yang terjadi adalah masalah prioritas ini.
Demikianlah artikel tentang sifat cascading dalam CSS ini. Semakin mengenal CSS, kita akan lebih leluasa memanfaatkan semua kelebihannya untuk memperoleh tampilan situs yang menawan. Mudah-mudahan bermanfaat.