Definisi dan Mekanisme Inheritance
Dalam pengembangan web, Layout Inheritance merujuk pada kemampuan elemen anak (child) untuk mewarisi nilai properti CSS dari elemen induknya (parent). Mekanisme ini adalah pilar utama dalam efisiensi penulisan CSS, yang memungkinkan pengembang untuk menetapkan gaya pada elemen kontainer (seperti <body>) dan menerapkannya secara otomatis ke elemen di dalamnya tanpa harus menulis ulang aturan CSS untuk setiap elemen.
Tidak semua properti CSS diwariskan secara default. Properti yang berkaitan dengan tipografi (seperti color, font-family, line-height) umumnya diwariskan, sementara properti yang berkaitan dengan model kotak (seperti margin, padding, border, width, height) tidak diwariskan untuk menjaga integritas layout.
Tabel Klasifikasi Properti CSS
| Kategori | Properti Umum | Diwariskan (Inherited) |
|---|---|---|
| Tipografi | color, font, font-family, font-size, line-height | Ya |
| Layout/Box Model | margin, padding, border, width, height | Tidak |
| Background | background-color, background-image | Tidak |
| List | list-style, list-style-type | Ya |
Mengontrol Inheritance dengan Keyword CSS
Pengembang dapat memaksa perilaku pewarisan menggunakan empat keyword khusus pada nilai properti CSS:
inherit: Memaksa elemen untuk mengambil nilai dari elemen induknya, meskipun properti tersebut secara default tidak diwariskan.initial: Mengembalikan properti ke nilai default standar browser.unset: Jika properti diwariskan, ia akan menjadiinherit; jika tidak, ia akan menjadiinitial.revert: Mengembalikan properti ke nilai default yang ditentukan oleh stylesheet browser (user-agent stylesheet).
Contoh Implementasi Kode
Berikut adalah contoh bagaimana memaksa pewarisan pada properti yang biasanya tidak diwariskan, seperti border:
.parent { border: 2px solid blue; } .child { border: inherit; /* Memaksa anak memiliki border yang sama dengan induk */ }Tips Troubleshooting
- Gunakan fitur Inspect Element pada browser (Chrome DevTools/Firefox Inspector) untuk melihat tab Computed. Di sana, Anda dapat melihat dari mana nilai sebuah properti berasal (apakah diwariskan atau didefinisikan secara eksplisit).
- Jika layout berantakan, periksa apakah ada properti
inherityang tidak sengaja diterapkan pada elemen kontainer yang kompleks. - Ingat bahwa
box-sizing: border-boxtidak diwariskan secara otomatis ke semua elemen. Praktik terbaik adalah menerapkanbox-sizing: inheritpada elemen universal atau menggunakan selector*untuk memastikan konsistensi box model di seluruh dokumen.