Podcast CSS - 004: The Cascade
CSS adalah singkatan dari {i>Cascading Stylesheets<i}. {i>Cascade<i} adalah algoritma untuk menyelesaikan konflik ketika beberapa aturan CSS diterapkan pada elemen HTML. Itulah alasan teks tombol yang diberi gaya dengan CSS berikut akan berwarna biru.
button {
color: red;
}
button {
color: blue;
}
Memahami algoritme jenjang membantu Anda memahami cara browser menyelesaikan konflik seperti ini. Algoritma {i>cascade<i} dibagi menjadi 4 tahap berbeda.
- Posisi dan urutan tampilan: urutan kemunculan aturan CSS Anda
- Kekhususan: algoritma yang menentukan pemilih CSS mana yang memiliki kecocokan terkuat
- Asal: urutan waktu kemunculan CSS dan dari mana asalnya, apakah itu gaya browser, CSS dari ekstensi browser, atau CSS yang Anda tulis
- Tingkat kepentingan: beberapa aturan CSS lebih berbobot daripada aturan lainnya,
terutama dengan jenis aturan
!important
Posisi dan urutan tampilan
Urutan aturan CSS Anda yang muncul dan cara kemunculannya dipertimbangkan oleh turunan saat menghitung penyelesaian konflik.
Demo di awal pelajaran ini adalah contoh posisi yang paling jelas. Ada dua aturan yang memiliki pemilih dengan kekhususan identik, sehingga aturan terakhir yang akan dideklarasikan menang.
Gaya dapat berasal dari berbagai sumber di halaman HTML,
seperti tag <link>
,
tag <style>
tersemat,
dan CSS inline seperti yang ditentukan dalam atribut style
elemen.
Jika Anda memiliki <link>
yang menyertakan CSS di bagian atas halaman HTML,
maka <link>
lain yang menyertakan CSS di bagian bawah halaman: <link>
bagian bawah akan memiliki kekhususan paling spesifik.
Hal yang sama juga terjadi pada elemen <style>
tersemat.
Kata kunci menjadi lebih spesifik, semakin jauh ke bawah halaman.
Urutan ini juga berlaku untuk elemen <style>
tersemat.
Jika dideklarasikan sebelum <link>
,
CSS stylesheet yang tertaut akan memiliki kekhususan paling tinggi.
Atribut style
inline dengan CSS yang dideklarasikan di dalamnya akan mengganti semua CSS lain,
terlepas dari posisinya, kecuali jika deklarasi memiliki !important
yang ditentukan.
Posisi juga berlaku dalam urutan aturan CSS.
Dalam contoh ini, elemen akan memiliki latar belakang ungu karena background: purple
dideklarasikan terakhir.
Karena latar belakang hijau dideklarasikan sebelum latar belakang ungu, latar belakang tersebut kini diabaikan oleh browser.
.my-element {
background: green;
background: purple;
}
Kemampuan untuk menentukan dua nilai untuk properti yang sama dapat menjadi cara mudah untuk membuat fallback bagi browser yang tidak mendukung nilai tertentu.
Pada contoh berikutnya, font-size
dideklarasikan dua kali.
Jika clamp()
didukung di browser,
deklarasi font-size
sebelumnya akan dihapus.
Jika clamp()
tidak didukung oleh browser,
deklarasi awal akan dipatuhi, dan ukuran font akan menjadi 1,5rem
.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
Menguji pemahaman Anda
Uji pengetahuan Anda tentang air terjun
Jika halaman Anda memiliki HTML berikut:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="/styles.css" /> </head> <body> <button>I am a button</button> <style> button { background: pink; } </style> </body> </html>
Di dalam styles.css
, terdapat aturan CSS berikut:
button { background: yellow; }
Apa warna latar belakang tombol?
<style>
tersemat berada lebih jauh ke bawah halaman daripada tag
<link>
, jadi meskipun kekhususan button
sama, posisi aturan gaya membuatnya menang.
Kekhususan
Kekhususan adalah algoritma yang menentukan pemilih CSS yang paling spesifik, menggunakan sistem pembobotan atau penskoran untuk membuat perhitungan tersebut. Dengan membuat aturan lebih spesifik, Anda dapat membuatnya diterapkan meskipun beberapa CSS lain yang cocok dengan pemilih muncul nanti di CSS.
Pada pelajaran berikutnya, Anda dapat mempelajari detail cara penghitungan kekhususan, tetapi mengingat beberapa hal akan membantu Anda menghindari terlalu banyak masalah kekhususan.
CSS yang menargetkan class pada sebuah elemen akan membuat aturan tersebut lebih spesifik,
sehingga dipandang lebih penting untuk diterapkan,
daripada CSS yang menargetkan elemen itu sendiri.
Artinya, dengan CSS berikut,
h1
akan berwarna merah meskipun kedua aturan cocok dan aturan untuk pemilih h1
akan muncul nanti di stylesheet.
<h1 class="my-element">Heading</h1>
.my-element {
color: red;
}
h1 {
color: blue;
}
id
membuat CSS menjadi lebih spesifik,
sehingga gaya yang diterapkan ke ID akan menggantikan gaya yang diterapkan dengan banyak cara lainnya.
Ini adalah salah satu alasan mengapa melampirkan gaya ke id
bukanlah ide yang baik.
Hal ini dapat menyulitkan untuk menimpa gaya tersebut dengan hal lain.
Kekhususan bersifat kumulatif
Seperti yang dapat Anda ketahui dalam pelajaran berikutnya,
setiap jenis pemilih akan diberikan poin yang menunjukkan seberapa spesifiknya,
titik untuk semua pemilih yang telah Anda gunakan untuk menargetkan elemen akan dijumlahkan.
Artinya, jika Anda menargetkan elemen dengan daftar pemilih seperti
a.my-class.another-class[href]:hover
, Anda akan mendapatkan sesuatu yang cukup sulit untuk ditimpa dengan CSS lain.
Karena alasan ini, dan agar CSS Anda lebih dapat digunakan kembali, sebaiknya buat pemilih Anda sesederhana mungkin.
Gunakan kekhususan sebagai alat untuk membuka elemen saat Anda membutuhkannya,
tetapi selalu pertimbangkan pemfaktoran ulang daftar pemilih yang panjang dan spesifik, jika memungkinkan.
Origin
CSS yang Anda tulis bukan satu-satunya CSS yang diterapkan ke halaman. Cascade memperhitungkan asal CSS. Origin ini mencakup stylesheet internal browser, gaya yang ditambahkan oleh ekstensi browser atau sistem operasi, dan CSS yang Anda tulis. Urutan kekhususan asal tersebut, dari yang paling tidak spesifik, hingga yang paling spesifik adalah sebagai berikut:
- Gaya dasar agen pengguna. Ini adalah gaya yang diterapkan browser Anda pada elemen HTML secara default.
- Gaya pengguna lokal. Ukuran ini dapat berasal dari tingkat sistem operasi, seperti ukuran font dasar, atau preferensi gerakan yang diperkecil. CSS juga dapat berasal dari ekstensi browser, seperti ekstensi browser yang memungkinkan pengguna menulis CSS kustomnya sendiri untuk halaman web.
- CSS yang ditulis. CSS yang Anda tulis.
- Menulis
!important
. Semua!important
yang Anda tambahkan ke deklarasi yang ditulis. - Gaya pengguna lokal
!important
. Semua!important
yang berasal dari tingkat sistem operasi, atau CSS tingkat ekstensi browser. - Agen pengguna
!important
. Semua!important
yang ditentukan dalam CSS default, yang disediakan oleh browser.
Jika Anda memiliki jenis aturan !important
di CSS yang telah Anda tulis
dan pengguna memiliki jenis aturan !important
di CSS kustomnya, CSS siapa yang menang?
Menguji pemahaman Anda
Uji pengetahuan Anda tentang asal air terjun
Uji pengetahuan Anda tentang asal menurun, pertimbangkan aturan gaya berikut dari berbagai asal:
Gaya agen pengguna
h1 { margin-block-start: 0.83em; }
Bootstrap
h1 { margin-block-start: 20px; }
Gaya Penulis Halaman
h1 { margin-block-start: 2ch; } @media (max-width: 480px) { h1 { margin-block-start: 1ch; } }
Gaya kustom pengguna
h1 { margin-block-start: 2rem !important; }
Lalu, dengan HTML berikut:
<h1>Lorem ipsum</h1>
Berapa margin-block-start
akhir dari h1
?
!important
ini memiliki asal yang paling spesifik.Tingkat Kepentingan
Tidak semua aturan CSS dihitung dengan cara yang sama satu sama lain, atau diberi kekhususan yang sama satu sama lain.
Urutan kepentingan, dari yang paling tidak penting, hingga yang paling penting adalah sebagai berikut:
- jenis aturan normal, seperti
font-size
,background
, ataucolor
animation
jenis aturan!important
Jenis aturan (mengikuti urutan yang sama dengan origin)transition
jenis aturan
Jenis aturan animasi dan transisi aktif memiliki kepentingan yang lebih tinggi daripada aturan normal.
Dalam kasus transisi, tingkat kepentingannya lebih tinggi daripada jenis aturan !important
.
Hal ini karena saat animasi atau transisi menjadi aktif,
perilaku yang diharapkan adalah mengubah status visual.
Menggunakan DevTools untuk mencari tahu mengapa beberapa CSS tidak menerapkan
DevTools Browser biasanya akan menampilkan semua CSS yang dapat mencocokkan elemen, dengan CSS yang tidak digunakan akan dicoret.
Jika CSS yang Anda harapkan untuk diterapkan tidak muncul sama sekali, berarti CSS tersebut tidak cocok dengan elemen. Dalam hal ini, Anda perlu melihat di tempat lain, mungkin untuk kesalahan ketik pada nama class atau elemen atau beberapa CSS yang tidak valid.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang air terjun
Cascade dapat digunakan untuk...