Membaca Computed Styles

Ketika kita menulis font-size: 1.5em, browser tidak pernah menyimpan huruf “1.5em” sebagai nilai akhirnya; nilai itu dihitung, diwariskan, dan diterapkan hingga menjadi angka piksel yang nyata. Perbedaan antara nilai yang kita tulis dan nilai yang dipakai browser inilah sumber kebingungan paling sering saat debugging. Chapter ini merapikan istilah-istilahnya, lalu mempraktikkan cara membaca panel Computed dan urutan aturan di panel Styles DevTools.

Empat Istilah Nilai yang Perlu Kita Kenal #

Dokumentasi CSS membagi perjalanan sebuah nilai ke dalam beberapa tahap (computed value di MDN merinci istilah resminya). Untuk pekerjaan sehari-hari, empat istilah berikut cukup:

Setelah used value, masih ada tahap terakhir bernama actual value — pembulatan ke piksel perangkat (misalnya 200,5px menjadi 201px pada layar tertentu). Tahap ini jarang perlu kita pikirkan, tetapi berguna diingat ketika angka terlihat berbeda di antara perangkat.

Satu catatan penting: panel Computed di DevTools menampilkan nilai akhir yang siap dipakai. Untuk properti tata letak seperti line-height, panel menampilkan hasil terpakai — line-height: 1.5 pada font 24px tampil sebagai 36px, bukan angka 1,5.

Panel Computed di DevTools #

Pilih satu elemen di panel Elements, lalu buka tab Computed (di Chrome) atau bagian Computed pada panel Styles (di Firefox). Panel ini menampilkan daftar properti secara alfabetis beserta nilai finalnya — semua properti, termasuk yang tidak pernah kita tulis.

Dua kebiasaan membuat panel ini cepat berguna:

1. Gunakan kotak filter: mengetik color menyaring daftar menjadi hanya properti yang mengandung kata itu. Panel ini jauh lebih panjang daripada panel Styles, dan filter adalah cara tercepat menuju properti yang dicari.
2. Buka panah di sebelah nilai: setiap nilai dapat diperluas untuk memperlihatkan aturan mana — dari berkas mana — yang menetapkannya. Ketika tidak ada aturan kita yang mengatur, nilainya berasal dari user-agent stylesheet atau dari inheritance; panel menandai asalnya.

Panel Computed menjawab pertanyaan “berapa nilai akhirnya”, sedangkan panel Styles menjawab “dari aturan mana asalnya”. Keduanya dipakai berpasangan.

Membaca Panel Styles dari Atas ke Bawah #

Panel Styles menyusun aturan sesuai kekuatan cascade: aturan yang paling menentukan berada di paling atas, dan deklarasi yang kalah ditandai dengan coretan (struck-through). Pola membacanya konsisten:

1. Mulai dari aturan paling atas untuk properti yang dipermasalahkan.
2. Bila ada deklarasi dicoret, aturan tersebut kalah; cari pemenangnya di atasnya.
3. Turun sampai bagian Inherited from <elemen> untuk melihat nilai yang diperoleh lewat inheritance, misalnya warna teks yang diwarisi dari induknya.
4. Bagian paling bawah memuat aturan user-agent stylesheet — bila tidak ada aturan kita yang bicara, gaya bawaan browser yang berlaku.

Contoh: em Berantai dan width 50% #

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>em Berantai</title>
  <style>
    .bapak { font-size: 16px; width: 400px; }
    .anak  { font-size: 1.5em; width: 50%; line-height: 1.5;
             color: rgb(220, 38, 38); }
    .cucu  { font-size: 1.5em; }
  </style>
</head>
<body>
  <div class="bapak">
    Teks bapak.
    <div class="anak">
      Teks anak.
      <div class="cucu">Teks cucu.</div>
    </div>
  </div>
</body>
</html>

Hasil di Browser:

Panel Computed menampilkan bapak dengan font-size 16px dan width 400px
apa adanya. Anak ditulis font-size: 1.5em dan width: 50%, tetapi panel
menampilkan 24px dan 200px — 50 persen dari 400px dihitung saat layout.
Cucu memperoleh font-size 36px karena 1,5em dihitung dari font-size
anak (24px), bukan dari 16px, dan line-height anak tampil sebagai 36px.

Mari kita telaah perhitungannya:

1. .bapak: nilai yang ditulis sudah absolut, sehingga declared, computed, dan used value-nya sama: 16px dan 400px.
2. .anak pada font-size: 1.5em: em mengacu pada font-size induk, jadi 1,5 × 16px = 24px. Perhitungan ini terjadi pada tahap computed.
3. .anak pada width: 50%: persen lebar mengacu pada lebar induk saat layout, jadi 50% × 400px = 200px. Nilai ini baru final pada tahap used.
4. .anak pada line-height: 1.5: angka tanpa satuan dikalikan font-size elemen sendiri, jadi 1,5 × 24px = 36px.
5. .cucu pada font-size: 1.5em: em mengacu pada induk langsung, yaitu .anak, jadi 1,5 × 24px = 36px. Inilah sifat “berantai” pada em: setiap tingkat berlipat dari nilai tingkat di atasnya, bukan dari nilai awal halaman.

Dengan keempat istilah di awal Chapter, pembacaan panel menjadi sistematis: lihat computed di panel Computed untuk nilai akhir, lalu naik ke panel Styles untuk memahami aturan mana yang menghasilkannya. Kedua panel ini menjadi alat utama kita pada Chapter debugging berikutnya.