Absolute dan Relative Units

CSS membagi satuan panjang menjadi dua kelompok besar: satuan absolut yang nilainya tetap, dan satuan relatif yang nilainya bergantung pada rujukan lain seperti ukuran font. Pemilihan satuan bukan sekadar selera — satuan yang sama dapat menghasilkan layout yang kaku di satu tempat dan lentur di tempat lain. Kita pernah menyinggung px, em, dan rem pada Chapter Lengths ; sekarang kita lengkapi peta besarnya dan bandingkan kedua kelompok secara langsung.

Satuan Absolut: px, pt, cm, dan in #

Satuan absolut menetapkan panjang tanpa memandang konteks. Browser mengonversi semuanya ke piksel CSS dengan rasio baku: 1 inci (in) ditetapkan sebesar 96px, 1 poin (pt) sebesar 1/72 inci ≈ 1,33px, dan 1 sentimeter (cm) sebesar 96/2,54 px ≈ 37,8px. Nilai ini disebut piksel referensi CSS; browser bebas menampilkannya sebesar apa pun pada perangkat fisik, tetapi perhitungannya di dalam CSS selalu konsisten.

Konversi antar-satuan absolut menjadi mudah dengan rasio tersebut: 12pt sama dengan 16px, dan 2.54cm sama dengan 1in. Satuan px tetap yang paling sering dipakai di layar, sementara pt, cm, dan in lazim muncul pada stylesheet untuk cetak (print stylesheet).

Satuan Relatif: em, rem, ch, dan ex #

Satuan relatif selalu merujuk ke besaran lain, sehingga nilainya berubah bila rujukannya berubah:

Kekuatan satuan relatif terlihat ketika pengguna menaikkan ukuran font bawaan browser: elemen yang ditulis dalam rem ikut membesar, sementara elemen ber-px tidak bergerak. Satuan ch berguna untuk membatasi panjang baris teks, misalnya max-width: 60ch menjaga paragraf tetap nyaman dibaca tanpa memandang font yang terpasang, serta untuk mengukur lebar field input berdasarkan jumlah karakter yang diharapkan. Satuan ex paling jarang dipakai; nilainya mendekati separuh em dan berguna hanya pada penyetelan tipografi halus.

Pedoman pemilihannya ringkas: pakai satuan relatif untuk segala hal yang berhubungan dengan teks dan jarak, dan simpan satuan absolut untuk kebutuhan yang memang harus presisi — garis tepi 1px, ukuran ikon tetap, atau stylesheet cetak. Pedoman ini kita praktikkan pada demo berikut.

Demo: Membandingkan Dua Kelompok #

Demo berikut menempatkan kedua kelompok satuan berdampingan:

.teks-pt {
  font-size: 12pt;
}
.garis-in {
  width: 1in;
}
.teks-rem {
  font-size: 0.75rem;
}
.kutipan {
  font-size: 1.25rem;
  padding: 1em;
}
.garis-ch {
  width: 10ch;
}

Mari kita telaah baris demi baris:

1. Baris 1–3 (.teks-pt): 12pt dikonversi browser menjadi 16px — persis sebesar font-size default, sehingga teksnya tampak normal.
2. Baris 4–6 (.garis-in): 1in tetap berarti 96px meskipun tidak ada inci di layar; ini membuktikan sifat absolut satuan tersebut.
3. Baris 7–9 (.teks-rem): 0.75rem = 0,75 × 16px = 12px, lebih kecil dari teks di sekitarnya.
4. Baris 10–13 (.kutipan): font-size 1,25rem menghasilkan 20px; padding: 1em kemudian mengikuti font-size elemen sendiri sehingga paddingnya 20px.
5. Baris 14–16 (.garis-ch): lebar bilah ini ditentukan oleh glyph 0 pada font halaman, bukan oleh angka tetap.

Hasil di Browser:

Teks 12pt tampil berukuran 16px — sama dengan font-size default.
Bilah 1in tampil selebar 96px.
Teks 0.75rem berukuran 12px.
Kutipan tampil dengan font 20px dan padding 20px di setiap sisi
(1em mengikuti font-size elemen itu sendiri).
Bilah 10ch menyusut atau melebar mengikuti lebar glyph "0"
bila font-family diganti.

Nilai 12pt, 1in, 0.75rem, 1.25rem, dan 1em pada demo diverifikasi otomatis melalui penanda data-expected; harness Course memeriksa nilai computed di headless browser pada viewport 1280×720px. Satuan ch sengaja tidak diberi penanda karena lebar glyph-nya bergantung pada font yang tersedia di lingkungan pengujian.