Computed Styles

Ketika sebuah style tidak tampak seperti yang ditulis, pertanyaan yang benar bukan “mengapa CSS-ku salah”, melainkan “browser akhirnya memutuskan apa”. Tab Computed di DevTools menyimpan jawabannya: daftar nilai final hasil cascade, inheritance, dan konversi unit — angka persis yang dipakai saat merender, bukan angka yang kita tulis. Chapter ini membahas cara membaca panel tersebut, perbedaan nilai ditulis dan nilai computed yang sering mengejutkan, serta contoh klasiknya: line-height yang diwariskan sebagai rasio atau sebagai angka tetap.

Dari Nilai yang Ditulis ke Nilai yang Dipakai #

Browser tidak merender stylesheet kita apa adanya. Setiap deklarasi melewati tiga tahap: nilai specified sebagaimana ditulis, nilai computed hasil pemutusan cascade dan konversi unit, dan nilai used yang benar-benar dipakai saat menggambar. Tab Computed menampilkan titik henti yang paling berguna — keputusan finalnya:

Pola dari tabel: unit relatif dan kata kunci menghilang, digantikan angka absolut. Inilah alasan Computed menjadi tempat diagnosis pertama — ia menghilangkan seluruh lapisan penafsiran antara kode kita dan piksel di layar.

Membaca Panel Computed #

Peta panelnya sederhana namun padat fungsi:

Tab Computed
├─ Kotak filter   : ketik nama property untuk menyaring daftar
├─ "Show all"     : tampilkan semua property, termasuk yang bernilai default
├─ Nilai ditebalkan : dipasang langsung pada elemen ini
├─ Nilai redup    : hasil inheritance dari elemen induk
├─ Panah ▸        : buka aturan sumbernya, lompat ke panel Styles
└─ Diagram box model : margin, border, padding, content dengan angka nyata

Dua kebiasaan yang paling produktif. Pertama, pakai kotak filter alih-alih menggulir: mengetik “line” langsung memunculkan line-height di mana pun ia berada. Kedua, perhatikan pembeda tebal dan redup — nilai yang ditebalkan dipasang aturan pada elemen itu sendiri, sedangkan nilai redup diwarisi; bila nilai warisan terasa salah, header Inherited from menunjuk elemen induk yang wajib diperiksa. Panah di depan nilai membuka aturan yang menetapkannya — jalan paling cepat dari “nilai aneh ini dari mana” ke aturan persisnya.

Cascade di Computed vs di Styles #

Kedua panel menyimpan sisi berbeda dari cerita cascade yang sama. Panel Styles memperlihatkan proses pemungutan suara: semua aturan yang cocok, coretan untuk yang kalah, urutan ke atas sebagai pemenang. Panel Computed memperlihatkan hasilnya saja: satu nilai per property, tanpa riwayat siapa saja yang ikut bertanding. Saat menelusuri “mengapa warnanya hijau padahal kutulis biru”, mulai dari Styles — cari coretan atau aturan yang lebih spesifik. Saat menelusuri “mengapa jarak barisnya 30px padahal kutulis 1.5”, mulai dari Computed — konversinya terjadi di tahap yang tidak terlihat Styles.

line-height: Rasio vs Angka Tetap yang Diwarisi #

Perbedaan computed yang paling berharga bagi pemula ada pada line-height. Kedua deklarasi berikut tampak setara, tetapi diwariskan dengan cara berbeda:

.induk-rasio {
  font-size: 20px;
  line-height: 1.5;   /* diwariskan sebagai rasio */
}

.induk-persen {
  font-size: 20px;
  line-height: 150%;  /* dihitung dulu menjadi 30px, lalu diwariskan */
}

.induk-rasio .anak,
.induk-persen .anak {
  font-size: 12px;
}

Demo berikut meniru dua pembacaan tab Computed itu berdampingan. Kedua induk berukuran huruf 20px, kedua anak 12px:

Satu karakter — tanda persen — memisahkan 18px dari 30px pada teks yang sama; periksa kedua anak di tab Computed dan angka itu tampil persis, lengkap dengan header Inherited from yang menunjuk induk pemberi warisan. Karena itulah rekomendasi yang dibangun sejak section Typography adalah line-height tanpa satuan.

Diagram Box Model dan Pemakaiannya #

Diagram di dasar tab Computed layak dijadikan teman tetap saat memeriksa jarak. Angka margin, border, padding, dan content ditampilkan sesuai nilai akhirnya; arahkan kursor ke tiap wilayah dan wilayah yang sama menyala di halaman, dan klik angkanya untuk menyunting langsung. Saat dua elemen terlihat terlalu berjauhan, diagram itu menjawab pertanyaan cepat: apakah pelakunya margin bawah elemen pertama, margin atas elemen kedua, atau margin keduanya yang bertumpuk lewat margin collapse.

Kesalahan Umum #

Ringkasan #

Tab Computed menyimpan keputusan final browser: unit relatif telah dikonversi, cascade telah menentukan pemenang, dan inheritance telah mengalirkan nilai dari induk — dengan pembeda tebal untuk milik sendiri dan redup untuk warisan. Kotak filter, panah sumber aturan, dan diagram box model menjadikannya alat diagnosis pertama, sementara pasangan line-height rasio dan persen menunjukkan seberapa besar beda yang bisa lahir dari satu karakter. Section aksesibilitas tuntas; bagian debugging resmi dimulai — chapter berikutnya menelusuri masalah layout yang paling umum pada box model.