Podcast CSS - 005: Pewarisan
Katakanlah 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;
}
Anda kemudian menambahkan elemen
tautan ke artikel konten,
dengan nilai class
sebesar .my-button
. Namun, ada masalah.
warna teks bukan seperti
yang Anda harapkan. Apa penyebabnya?
Beberapa properti CSS akan mewarisinya jika Anda tidak menentukan nilainya.
Dalam kasus tombol ini, tombol ini mewarisi color
dari CSS ini:
article a {
color: maroon;
}
Dalam pelajaran ini Anda akan mempelajari mengapa itu terjadi dan bagaimana pewarisan merupakan fitur yang ampuh untuk membantu Anda menulis lebih sedikit CSS.
Alur pewarisan
Mari kita lihat bagaimana cara kerja warisan, 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 mulai mengalir ke bawah dokumen.
html {
color: lightslategray;
}
Properti color
diwarisi secara default oleh elemen lain.
Elemen html
memiliki color: lightslategray
,
oleh karena itu, 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 manakah yang diwarisi secara default?
Tidak semua properti CSS diwarisi secara {i>default<i}, tapi ada banyak hal yang serupa. Sebagai referensi, berikut adalah seluruh daftar properti yang diwarisi secara default, yang diambil dari referensi W3 semua properti CSS:
- azimut
- ciutkan batas
- border-spacing
- sisi teks
- warna
- cursor
- direction
- sel kosong
- font-family
- font-size
- gaya font
- varian font
- ketebalan font
- font
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- anak yatim
- tanda kutip
- rata teks
- indentasi teks
- text-transform
- visibilitas
- spasi kosong
- janda
- word-spacing
Cara kerja pewarisan
Setiap elemen HTML memiliki setiap properti CSS yang ditentukan secara default dengan nilai awal. Nilai awal adalah properti yang tidak diwarisi dan muncul sebagai default jika kaskade gagal menghitung nilai elemen tersebut.
Sifat yang dapat diturunkan
ke bawah, adalah sifat yang
dan elemen turunannya akan mendapatkan nilai komputasi
yang mewakili nilai induknya.
Ini berarti jika induk memiliki font-weight
yang disetel 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 itu.
Kata kunci inherit
Anda dapat membuat properti mewarisi nilai komputasi 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
dari 900
,
bukan nilai bold
default, yang akan setara dengan font-weight: 700
.
.my-component {
font-weight: 500;
}
Class .my-component
akan menetapkan font-weight
ke 500
.
Untuk membuat elemen <strong>
di dalam .my-component
, tambahkan juga font-weight: 500
:
.my-component strong {
font-weight: inherit;
}
Sekarang, elemen <strong>
di dalam .my-component
akan memiliki font-weight
dari 500
.
Anda dapat secara
eksplisit menetapkan nilai ini,
tetapi jika Anda menggunakan inherit
dan CSS .my-component
berubah di masa mendatang,
Anda dapat menjamin bahwa <strong>
Anda akan terus diperbarui secara otomatis.
Kata kunci initial
Pewarisan dapat menyebabkan masalah pada elemen dan initial
memberi Anda opsi reset yang kuat.
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>
di dalam elemen <aside>
dan sebagai gantinya,
jadikan bobotnya normal, yang merupakan nilai awal.
Kata kunci unset
Properti unset
berperilaku berbeda jika properti diwarisi secara default atau tidak.
Jika suatu properti diwarisi secara {i>default<i},
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
{i>default<i} bisa menjadi hal yang sulit,
unset
dapat berguna dalam konteks tersebut.
Misalnya, color
diwarisi secara default,
tetapi margin
tidak, jadi 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
,
tidak masalah gaya global apa yang
diterapkan ke p
di masa mendatang,
kunci ini akan selalu tidak disetel.
aside p {
margin: unset;
color: unset;
all: unset;
}
Menguji pemahaman Anda
Uji pengetahuan Anda tentang pewarisan
Manakah dari properti berikut yang dapat diwarisi?
color
font-size
text-align
line-height
animation
Nilai mana yang berperilaku seperti inherit
kecuali jika tidak ada yang akan diwarisi dan
lalu berperilaku seperti initial
?
unset
superset
reset