Air terjun

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.

  1. Posisi dan urutan tampilan: urutan kemunculan aturan CSS Anda
  2. Kekhususan: algoritma yang menentukan pemilih CSS mana yang memiliki kecocokan terkuat
  3. Asal: urutan waktu kemunculan CSS dan dari mana asalnya, apakah itu gaya browser, CSS dari ekstensi browser, atau CSS yang Anda tulis
  4. 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.

Tombol memiliki latar belakang biru, seperti yang didefinisikan oleh CSS yang disertakan oleh elemen <link />. Aturan CSS yang menyetelnya menjadi gelap ada di stylesheet kedua yang ditautkan dan diterapkan karena posisi selanjutnya.

Urutan ini juga berlaku untuk elemen <style> tersemat. Jika dideklarasikan sebelum <link>, CSS stylesheet yang tertaut akan memiliki kekhususan paling tinggi.

Elemen <style> dideklarasikan di <head>, sedangkan elemen <link /> dideklarasikan dalam <body>. Hal ini berarti elemen tersebut menjadi lebih spesifik daripada elemen <style>

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?

merah muda
Asal <style> tersemat berada lebih jauh ke bawah halaman daripada tag <link>, jadi meskipun kekhususan button sama, posisi aturan gaya membuatnya menang.
kuning
Untuk dokumen HTML, latar belakang tombol kuning mungkin telah dibaca terlebih dahulu, tetapi aturan baru dengan kekhususan yang sama kemudian ditemukan, sehingga aturan ini tidak berlaku untuk tombol tersebut.

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:

  1. Gaya dasar agen pengguna. Ini adalah gaya yang diterapkan browser Anda pada elemen HTML secara default.
  2. 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.
  3. CSS yang ditulis. CSS yang Anda tulis.
  4. Menulis !important. Semua !important yang Anda tambahkan ke deklarasi yang ditulis.
  5. Gaya pengguna lokal !important. Semua !important yang berasal dari tingkat sistem operasi, atau CSS tingkat ekstensi browser.
  6. Agen pengguna !important. Semua !important yang ditentukan dalam CSS default, yang disediakan oleh browser.
Demonstrasi visual urutan asal seperti yang juga dijelaskan dalam daftar.

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?

20px
Bootstrap adalah bagian dari asal yang ditulis, yang kalah dari gaya pengguna lokal yang penting.
0,83 em
Asal gaya agen pengguna akan kalah dari gaya pengguna lokal yang penting.
2rem
Gaya kustom pengguna !important ini memiliki asal yang paling spesifik.
2ch
Gaya penulis ini adalah bagian dari asal yang ditulis, yang kalah dari gaya pengguna lokal yang penting.
1ch
Gaya penulis ini adalah bagian dari asal yang ditulis, yang kalah dari gaya pengguna lokal yang penting.

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:

  1. jenis aturan normal, seperti font-size, background, atau color
  2. animation jenis aturan
  3. !important Jenis aturan (mengikuti urutan yang sama dengan origin)
  4. 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.

Gambar DevTools browser dengan CSS yang ditimpa 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...

Menyelesaikan konflik ketika beberapa gaya diterapkan pada sebuah elemen.
Ini adalah salah satu tujuan utamanya, yaitu menyelesaikan konflik.
Memastikan hanya ada satu nilai gaya untuk setiap properti pada waktu menggambar.
Teks hanya boleh terdiri dari satu warna, dan The Cascade adalah cara untuk menentukan warna yang seharusnya.
Aturan gaya penskoran dan pembobotan.
Pemberian skor dan pembobotan adalah bagian dari fase penyortiran The Cascade.
Mengurutkan dan memfilter atribut gaya.
Penyortiran dan penyaringan adalah fase {i>The Cascade<i} untuk membantu memahami aspek-aspek resolusi konflik.

Referensi