Pewarisan

The CSS Podcast - 005: Inheritance

Misalnya, Anda baru saja menulis beberapa CSS untuk membuat elemen terlihat seperti 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; }

Kemudian, Anda menambahkan elemen link ke artikel konten, dengan nilai class .my-button. Namun, ada masalah, teksnya tidak berwarna seperti yang Anda harapkan. Apa penyebabnya?

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

article a {   color: maroon; }

Dalam pelajaran ini, Anda akan mempelajari alasan hal itu terjadi dan cara kerja pewarisan sebagai fitur canggih untuk membantu Anda menulis lebih sedikit CSS.

Alur pewarisan

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 CSS tersebut mulai mengalir 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 kini akan memiliki warna lightslategray.

body {   font-size: 1.2em; } 
p {   font-style: italic; }

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

Properti mana yang diwarisi secara default?

Tidak semua properti CSS diwarisi secara default, tetapi ada banyak properti yang diwarisi. Sebagai referensi, berikut adalah seluruh daftar properti yang diwarisi secara default, yang diambil dari referensi W3 untuk semua properti CSS:

Cara kerja pewarisan

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

Properti yang dapat diwarisi mengalir ke bawah, dan elemen turunan akan mendapatkan nilai terkomputasi yang merepresentasikan nilai induknya. Artinya, jika induk memiliki font-weight yang ditetapkan ke bold, semua elemen turunan akan dicetak tebal, kecuali jika 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 mewarisi nilai terkomputasi induknya dengan kata kunci inherit. Cara yang berguna 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 setara dengan font-weight: 700.

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

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

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

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

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

Kata kunci initial

Pewarisan dapat menyebabkan masalah pada elemen Anda dan initial memberi Anda opsi reset yang canggih.

Anda sudah belajar sebelumnya bahwa setiap properti memiliki nilai default di CSS. Kata kunci initial menetapkan properti kembali ke nilai default awalnya.

aside strong {   font-weight: initial; }

Cuplikan ini akan menghapus ketebalan huruf tebal dari semua elemen <strong> di dalam elemen <aside> dan sebagai gantinya, akan membuat ketebalan huruf 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 membantu dalam konteks tersebut. Misalnya, color diwarisi secara default, tetapi margin tidak, jadi Anda dapat menulis kode 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 sebelumnya, apa yang terjadi jika gaya p global mendapatkan beberapa properti tambahan? Hanya aturan yang ditetapkan untuk margin dan color yang akan berlaku.

/* 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, tidak masalah gaya global apa yang diterapkan ke p di masa mendatang, gaya tersebut akan selalu dibatalkan.

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

Kata kunci revert

Seperti yang Anda pelajari dalam pelajaran tentang cascade, gaya berasal dari berbagai asal–gaya dasar agen pengguna, gaya preferensi pengguna, dan gaya yang Anda buat. Kata kunci revert membatalkan gaya yang ditetapkan di origin yang sama dengan tempat kata kunci revert digunakan.

Hal ini berguna saat Anda telah menetapkan gaya, tetapi tidak ingin gaya tersebut diterapkan dalam beberapa instance. Meskipun inherit, initial, dan unset menentukan cara menghitung nilai gaya, revert hanya menentukan bahwa gaya lain yang Anda tulis tidak berlaku.

p {   padding: 2em; }  aside p {   padding: revert; }

Cuplikan ini memberikan padding pada elemen <p>, tetapi saat elemen <p> berada di dalam <aside>, cuplikan ini tidak menentukan padding sama sekali. Sebagai gantinya, elemen akan kembali ke gaya preferensi pengguna (jika ada) atau gaya dasar agen pengguna.

Kata kunci revert-layer

Lapisan bertingkat memberikan cara yang berguna untuk mengatur gaya Anda, dan memprioritaskan gaya Anda dalam asal penulis bertingkat. Kata kunci revert-layer mirip dengan revert, tetapi alih-alih menentukan bahwa tidak ada gaya penulis yang harus diterapkan untuk properti, kata kunci ini hanya mengurungkan gaya di lapisan saat ini.

Jika Anda menggunakan library UI pihak ketiga, pola yang berguna adalah mengimpornya ke dalam lapisan, dan menambahkan penggantian ke dalam lapisan prioritas yang lebih tinggi. Kemudian, Anda dapat menghapus penggantian menggunakan revert-layer, dan penggantian tersebut akan menggunakan default library UI.

Jika tidak ada lapisan lain yang menentukan nilai untuk properti, properti akan berperilaku seperti revert, dan menggunakan nilai dari origin sebelumnya.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang pewarisan

Properti mana saja yang diwarisi secara default?

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

Nilai mana yang berperilaku seperti inherit kecuali jika tidak ada yang diwarisi dan kemudian berperilaku seperti initial?

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

Resource