Podcast CSS - 004: The Cascade
CSS adalah singkatan dari {i>Cascading Stylesheets<i}. Kaskade adalah algoritma untuk menyelesaikan konflik ketika beberapa aturan CSS diterapkan pada elemen HTML. Itulah alasan mengapa teks tombol yang ditata gayanya dengan CSS berikut akan berwarna biru.
button {
color: red;
}
button {
color: blue;
}
Memahami algoritma bertingkat membantu Anda memahami cara browser menyelesaikan konflik seperti ini. Algoritma kaskade dibagi menjadi 4 stage berbeda.
- Posisi dan urutan tampilan: urutan kemunculan aturan CSS Anda
- Kekhususan: algoritme yang menentukan pemilih CSS mana yang memiliki kecocokan terkuat
- Asal: urutan kemunculan CSS dan asalnya, baik itu gaya browser, CSS dari ekstensi browser, atau CSS yang Anda buat
- Tingkat Kepentingan: beberapa aturan CSS memiliki bobot yang lebih besar daripada yang lain,
terutama dengan jenis aturan
!important
Posisi dan urutan tampilan
Urutan aturan CSS yang muncul dan tampilannya dipertimbangkan oleh turunan saat menghitung resolusi konflik.
Demo di awal pelajaran ini adalah contoh posisi yang paling jelas. Ada dua aturan yang memiliki pemilih dengan kekhususan identik, jadi yang terakhir yang dinyatakan menang.
Gaya dapat berasal dari berbagai sumber di laman HTML,
seperti tag <link>
,
tag <style>
tersemat,
dan CSS inline seperti yang ditetapkan dalam atribut style
elemen.
Jika Anda memiliki <link>
yang menyertakan CSS di bagian atas halaman HTML,
lalu <link>
lain yang menyertakan CSS di bagian bawah halaman Anda: <link>
bawah akan memiliki kekhususan paling tinggi.
Hal yang sama juga terjadi pada elemen <style>
yang disematkan.
Mereka menjadi lebih spesifik, semakin ke bawah halaman mereka berada.
Pengurutan ini juga berlaku untuk elemen <style>
tersemat.
Jika dideklarasikan sebelum <link>
,
CSS stylesheet yang ditautkan
akan memiliki kekhususan paling umum.
Atribut style
inline dengan CSS yang dideklarasikan di dalamnya akan menggantikan semua CSS lainnya,
terlepas dari posisinya, kecuali jika deklarasi memiliki !important
yang ditentukan.
Posisi juga berlaku sesuai 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;
}
Mampu menentukan dua nilai untuk properti yang sama
bisa menjadi cara sederhana untuk membuat fallback untuk browser yang tidak mendukung nilai tertentu.
Pada contoh berikutnya ini, font-size
dideklarasikan dua kali.
Jika clamp()
didukung di browser,
maka deklarasi font-size
sebelumnya akan dihapus.
Jika clamp()
tidak didukung oleh browser,
deklarasi awal akan dihormati, 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 Anda memiliki HTML berikut di halaman:
<!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 tombolnya?
Kekhususan
Kekhususan adalah algoritma yang menentukan pemilih CSS mana yang paling spesifik, menggunakan sistem pembobotan atau penilaian untuk melakukan perhitungan tersebut. Dengan membuat aturan yang lebih spesifik, Anda dapat menyebabkannya diterapkan meskipun beberapa CSS lain yang cocok dengan pemilih muncul nanti di CSS.
Pada pelajaran berikutnya, Anda dapat mempelajari detail tentang cara menghitung kekhususan, Namun, mengingat beberapa hal akan membantu Anda menghindari terlalu banyak masalah kekhususan.
CSS yang menargetkan kelas pada elemen akan membuat aturan itu lebih spesifik,
dan karenanya dianggap lebih
penting untuk diterapkan,
daripada CSS yang menargetkan elemen saja.
Ini berarti bahwa 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 lebih spesifik lagi,
gaya yang diterapkan pada ID akan menggantikan gaya yang diterapkan dengan banyak cara lain.
Inilah salah satu alasan mengapa umumnya tidak baik untuk melampirkan gaya ke id
.
Hal ini dapat menyulitkan penimpaan gaya tersebut dengan sesuatu yang lain.
Kekhususan bersifat kumulatif
Seperti yang dapat Anda
ketahui di pelajaran berikutnya,
setiap jenis pemilih diberi poin yang
menunjukkan seberapa spesifik,
titik untuk semua pemilih yang telah Anda gunakan
untuk menargetkan elemen dijumlahkan.
Ini berarti bahwa jika Anda menargetkan elemen
dengan daftar pemilih seperti
a.my-class.another-class[href]:hover
Anda mendapatkan sesuatu yang cukup sulit untuk ditimpa dengan CSS lain.
Oleh karena itu, dan untuk membantu membuat CSS Anda
lebih dapat digunakan kembali,
adalah ide yang baik untuk membuat pemilih
Anda sesederhana mungkin.
Gunakan kekhususan sebagai alat untuk
mengetahui elemen saat Anda perlukan,
tetapi selalu pertimbangkan memfaktorkan ulang daftar
pemilih yang panjang dan spesifik, jika memungkinkan.
Asal
CSS yang Anda tulis bukan satu-satunya CSS yang diterapkan ke halaman. Cascade ini memperhitungkan asal CSS. Asal ini meliputi stylesheet internal browser, gaya yang ditambahkan oleh ekstensi browser atau sistem operasi, dan CSS yang Anda buat. Urutan kekhususan asal-usul ini, dari yang paling tidak spesifik, hingga yang paling spesifik adalah sebagai berikut:
- Gaya basis agen pengguna. Ini adalah gaya yang diterapkan browser Anda ke elemen HTML secara default.
- Gaya pengguna lokal. Ini dapat berasal dari tingkat sistem operasi, seperti ukuran {i>font<i} dasar, atau preferensi gerakan yang dikurangi. Mereka 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.
- Ditulis oleh
!important
. Setiap!important
yang Anda tambahkan ke deklarasi yang ditulis. - Gaya pengguna lokal
!important
. Setiap!important
yang berasal dari tingkat sistem operasi, atau CSS tingkat ekstensi browser. - Agen pengguna
!important
. Setiap!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, yang CSS-nya menang?
Menguji pemahaman Anda
Uji pengetahuan Anda tentang asal-usul air terjun
Uji pengetahuan Anda tentang asal-usul turunan, pertimbangkan gaya berikut aturan dari berbagai sumber:
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; }
Kemudian, dengan HTML berikut:
<h1>Lorem ipsum</h1>
Berapa margin-block-start
akhir dari h1
?
Tingkat Kepentingan
Tidak semua aturan CSS dihitung sama satu sama lain, atau diberi kekhususan yang sama satu sama lain.
Urutan kepentingan, dari yang paling tidak penting, menjadi yang terpenting adalah sebagai berikut:
- jenis aturan normal, seperti
font-size
,background
, ataucolor
animation
jenis aturan!important
jenis aturan (dengan mengikuti urutan yang sama dengan asal)transition
jenis aturan
Jenis animasi aktif dan aturan transisi memiliki nilai penting lebih tinggi daripada aturan normal.
Dalam kasus transisi yang memiliki nilai penting lebih tinggi daripada jenis aturan !important
.
Hal ini karena ketika animasi
atau transisi menjadi aktif,
perilaku yang diharapkan adalah
mengubah keadaan visual.
Menggunakan DevTools untuk mencari tahu mengapa beberapa CSS tidak diterapkan
Browser DevTools biasanya akan menampilkan semua CSS yang dapat cocok dengan elemen, dengan yang tidak digunakan dicoret.
Jika CSS yang diharapkan tidak muncul sama sekali, maka itu tidak cocok dengan elemennya. Dalam hal ini Anda perlu mencari di tempat lain, mungkin karena kesalahan ketik pada nama kelas atau elemen atau beberapa CSS yang tidak valid.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang air terjun
Cascade dapat digunakan untuk...