Pewarisan

Podcast CSS - 005: Pewarisan

Katakanlah Anda baru saja menulis beberapa CSS untuk membuat elemen terlihat seperti sebuah tombol.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

Selanjutnya, tambahkan elemen link ke artikel konten, dengan nilai class sebesar .my-button. Namun ada masalah, teks tersebut bukan warna yang Anda harapkan. Apa penyebabnya?

Beberapa properti CSS mewarisi jika Anda tidak menentukan nilainya. Dalam kasus tombol ini, tombol tersebut mewarisi color dari CSS ini:

article a {
  color: maroon;
}

Dalam pelajaran ini, Anda akan mempelajari mengapa hal itu terjadi dan bagaimana pewarisan adalah fitur canggih untuk membantu Anda menulis lebih sedikit CSS.

Alur pewarisan

Mari kita lihat cara kerja pewarisan, menggunakan cuplikan HTML ini:

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

Elemen root (<html>) tidak akan mewarisi apa pun karena merupakan elemen pertama dalam dokumen. Tambahkan beberapa CSS pada elemen HTML, dan itu mulai menurun ke bawah dokumen.

html {
  color: lightslategray;
}

Properti color diwarisi secara default oleh elemen lain. Elemen html memiliki color: lightslategray, sehingga semua elemen yang dapat mewarisi warna sekarang akan memiliki warna lightslategray.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

Hanya <p> yang akan memiliki teks miring karena merupakan elemen bertingkat terdalam. Pewarisan hanya mengalir ke bawah, bukan kembali ke elemen induk.

Properti mana yang diwarisi secara default?

Tidak semua properti CSS diwarisi secara {i>default<i}, tetapi sebenarnya ada banyak properti. Sebagai referensi, berikut adalah seluruh daftar properti yang diwarisi secara default, yang diambil dari referensi W3 semua properti CSS:

Cara kerja pewarisan

Setiap elemen HTML memiliki setiap properti CSS yang didefinisikan secara default dengan nilai awal. Nilai awal adalah properti yang tidak diwariskan dan muncul sebagai default jika turunan gagal menghitung nilai untuk elemen tersebut.

Properti yang dapat diwariskan menurun ke bawah, dan elemen turunan akan mendapatkan nilai komputasi yang mewakili nilai induknya. Artinya, jika induk memiliki font-weight yang ditetapkan ke bold, semua elemen turunan akan dicetak tebal, kecuali font-weight-nya ditetapkan ke nilai yang berbeda, atau stylesheet agen pengguna memiliki nilai untuk font-weight untuk elemen tersebut.

Cara mewarisi dan mengontrol pewarisan secara eksplisit

Pewarisan dapat memengaruhi elemen dengan cara yang tidak terduga, sehingga CSS memiliki alat untuk membantu hal tersebut.

Kata kunci inherit

Anda dapat membuat properti apa pun mewarisi nilai komputasi induknya dengan kata kunci inherit. Cara bermanfaat untuk menggunakan kata kunci ini adalah dengan membuat pengecualian.

strong {
  font-weight: 900;
}

Cuplikan CSS ini menetapkan semua elemen <strong> agar memiliki font-weight 900, bukan nilai bold default, yang akan setara dengan font-weight: 700.

.my-component {
  font-weight: 500;
}

Class .my-component menetapkan font-weight ke 500 sebagai gantinya. Untuk membuat elemen <strong> di dalam .my-component juga font-weight: 500 tambahkan:

.my-component strong {
  font-weight: inherit;
}

Sekarang, elemen <strong> di dalam .my-component akan memiliki font-weight dari 500.

Anda dapat menetapkan nilai ini secara eksplisit, tetapi jika Anda menggunakan perubahan inherit dan CSS .my-component di masa mendatang, Anda dapat menjamin bahwa <strong> akan otomatis mengikuti perubahan tersebut.

Kata kunci initial

Pewarisan dapat menyebabkan masalah pada elemen dan initial menyediakan opsi reset yang efektif.

Anda telah mempelajari sebelumnya bahwa setiap properti memiliki nilai default di CSS. Kata kunci initial menetapkan properti kembali ke nilai default awal tersebut.

aside strong {
  font-weight: initial;
}

Cuplikan ini akan menghapus bobot tebal dari semua elemen <strong> dalam elemen <aside> dan sebagai gantinya, membuatnya menjadi bobot normal, yang merupakan nilai awal.

Kata kunci unset

Properti unset berperilaku berbeda jika properti diwarisi secara default atau tidak. Jika properti diwarisi secara default, kata kunci unset akan sama dengan inherit. Jika properti tidak diwarisi secara default, kata kunci unset sama dengan initial.

Mengingat properti CSS mana yang diwarisi secara default bisa jadi sulit, unset dapat berguna dalam konteks tersebut. Misalnya, color diwarisi secara default, tetapi margin tidak, sehingga Anda dapat menulis ini:

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

Sekarang, margin dihapus dan color kembali menjadi nilai komputasi yang diwarisi.

Anda juga dapat menggunakan nilai unset dengan properti all. Kembali ke contoh di atas, apa yang terjadi jika gaya p global mendapatkan beberapa properti tambahan? Hanya aturan yang ditetapkan untuk margin dan color yang akan diterapkan.

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

Jika Anda mengubah aturan aside p menjadi all: unset, gaya global apa pun yang diterapkan ke p di masa mendatang tidak akan menjadi masalah, gaya tersebut akan selalu dibatalkan penetapannya.

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

Menguji pemahaman Anda

Uji pengetahuan Anda tentang pewarisan

Manakah dari properti berikut yang dapat diwariskan?

animation
Animasi tidak dapat diturunkan ke anak-anak.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Nilai mana yang berperilaku seperti inherit kecuali jika tidak ada yang perlu diwariskan, lalu berperilaku seperti initial?

reset
bukan nilai yang valid, coba lagi!
unset
🎉
superset
bukan nilai yang valid, coba lagi!

Referensi