Air terjun

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.

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

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

Pengurutan ini juga berlaku untuk elemen <style> tersemat. Jika dideklarasikan sebelum <link>, CSS stylesheet yang ditautkan akan memiliki kekhususan paling umum.

Elemen <style> dideklarasikan di <head>, saat elemen <link /> dideklarasikan dalam <body>. Artinya, kode ini menjadi lebih spesifik daripada elemen <style>

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?

merah muda
Asal <style> yang disematkan berada di bagian bawah halaman dibandingkan <link>. Jadi, meskipun kekhususan button sama, posisi aturan gaya membuatnya menang.
kuning
Pada dokumen HTML, latar belakang tombol kuning mungkin telah dibaca pertama, tetapi aturan baru dengan kekhususan yang sama ditemukan kemudian, membuat aturan ini tidak berlaku untuk tombol tersebut.

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:

  1. Gaya basis agen pengguna. Ini adalah gaya yang diterapkan browser Anda ke elemen HTML secara default.
  2. 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.
  3. CSS yang ditulis. CSS yang Anda tulis.
  4. Ditulis oleh !important. Setiap !important yang Anda tambahkan ke deklarasi yang ditulis.
  5. Gaya pengguna lokal !important. Setiap !important yang berasal dari tingkat sistem operasi, atau CSS tingkat ekstensi browser.
  6. Agen pengguna !important. Setiap !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, 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?

20px
Bootstrap adalah bagian dari origin yang ditulis, yang kalah dari gaya pengguna lokal yang penting.
0,83 em
Asal gaya agen pengguna 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 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:

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

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

Menyelesaikan konflik ketika beberapa gaya diterapkan pada suatu elemen.
Ini adalah salah satu tujuan utamanya, yakni penyelesaian konflik.
Memastikan hanya ada satu nilai gaya untuk setiap properti pada waktu menggambar.
Teks hanya boleh 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.
Atribut gaya pengurutan dan pemfilteran.
Penyortiran dan pemfilteran adalah fase The Cascade untuk membantu memahami aspek-aspek penyelesaian konflik.

Resource