Efisien dengan `inherit`

Terkadang kita menemui sebuah saat dimana kita harus membuat sebuah elemen judul bersatu dengan tautan, namun keduanya harus tetap memiliki warna yang sama. Bagian yang paling sering mendapatkan kondisi seperti ini adalah ada pada bagian header sebuah halaman web:

<header class="blog-header">
  <h1 class="blog-title">
    <a href="/">Blog Title</a>
  </h1>
  <p class="blog-slogan">Blog slogan goes here.</p>
</header>

Pada web-web standar, umumnya bagian ini memiliki sebuah sikap yang unik, yaitu ketika seorang pengguna sedang berada di halaman muka, maka tautan tidak akan diterapkan pada judul tersebut, akan tetapi ketika pengguna tersebut sedang berada di halaman yang lain, maka tautan menuju halaman muka akan diterapkan pada judul tersebut. Seperti inilah kira-kira kondisinya:

<header class='blog-header'>
  <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <h1 class='blog-title'>
      <a expr:href='data:blog.url'>Blog Title</a>
    </h1>
  <b:else/>
    <h1 class='blog-title'>Blog Title</h1>
  </b:if>
  <p class='blog-slogan'>Blog slogan goes here.</p>
</header>

Memastikan agar warna elemen judul tetap sama di mana saja itu penting agar semuanya terlihat konsisten. Katakanlah kita akan membuat warna judul blog di atas menjadi hijau:

.blog-header h1 {color:green}

Ini akan berhasil jika kita sedang berada di halaman depan. Judul halaman akan berwarna hijau. Akan tetapi ketika kita berpindah ke halaman lain, warna judul akan berubah menjadi sama dengan warna tautan karena teks judul sekarang terbungkus oleh tautan yang posisinya berada di dalam elemen judul.

Untuk mengatasi masalah tersebut, biasanya kita akan melakukan hal ini:

.blog-header h1 {color:green}
.blog-header h1 a {color:green}

Saya biasa menemui deklarasi CSS semacam itu pada judul-judul posting di dalam sebuah templat Blogger:

.post-title {
  font:normal normal 20px/1.4 "Open Sans",Sans-Serif;
  margin:0 0 .5em;
  text-shadow:none;color:#5686D6;}

.post-title a,
.post-title a:focus,
.post-title a:hover,
.post-title a:active {color:#5686D6;  text-decoration:none;
}

Ini tidak efisien, karena jika suatu hari nanti kita ingin mengganti warna elemen judul tersebut, maka kita harus mengubah kode warnanya sebanyak minimal dua kali. Seandainya jumlah deklarasi semacam ini cuma ada satu saja mungkin tidak masalah, tapi bagaimana kalau ada banyak? Apalagi jika posisinya tidak berdekatan seperti contoh di atas. Mungkin posisi deklarasi warna elemen judul berada di sebelah sini dan posisi deklarasi warna tautan judul berada di sebelah sana. Pasti akan tambah susah lagi untuk mencarinya.

“Each property may also have a cascaded value of ‘inherit’, which means that, for a given element, the property takes the same specified value as the property for the element’s parent.” — CSS2 – The ‘inherit’ Value

Menggunakan nilai inherit bisa menjadi solusi. Dengan menuliskan nilai inherit pada properti CSS tertentu, maka nilai properti tersebut akan mengikuti nilai properti yang sama dari elemen induknya:

.blog-header h1 {color:green}
.blog-header h1 a {color:inherit}

Dengan begitu, setiap kali kita mengubah warna elemen judul pada contoh di atas, maka warna tautan di dalamnya akan selalu mengikuti.

Contoh lain ada pada masalah warna border. Terkadang kita menemui sebuah kasus dimana kita harus membuat sebuah tata letak halaman dengan beberapa border di dalamnya yang semua warnanya harus sama. Dengan memanfaatkan nilai inherit, kita bisa mewarnai semua border cukup pada elemen induknya saja:

Lihat Demo

Contoh lain lagi adalah mengenai cara paling efisien untuk mengubah tipe fon pada elemen-elemen formulir menjadi sama dengan tipe fon pada halaman:

button,
input,
select,
textarea {font:inherit}

Lihat Demo