Px dan Persen

Dari semua satuan CSS, dua yang paling awal kita temui adalah px dan persen. px terlihat paling sederhana: satu angka, satu hasil, tidak terpengaruh apa pun di sekitarnya. Persen justru sebaliknya — nilainya baru jelas setelah browser tahu acuan penghitungannya. Keputusan kecil di antara keduanya menentukan apakah elemen diam pada ukurannya atau ikut menyesuaikan ruang, dan itulah yang kita pelajari di chapter ini beserta catatan aksesibilitas penting pada teks ber-satuan px.

Px: Satuan yang Tidak Berubah #

px adalah satuan panjang absolut. Nilai 200px tetap 200 piksel CSS di mana pun elemen berada: tidak berubah saat font-size induk berubah, dan tidak berubah saat lebar jendela diubah. Satu px adalah satu piksel CSS; pada layar beresolusi tinggi, browser menerjemahkannya ke beberapa piksel fisik agar ukuran yang terlihat tetap konsisten, jadi kita tidak perlu menghitung resolusi layar secara manual.

.label-status {
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}

Inilah ukuran yang dilihat semua pengguna, di perangkat mana pun.

Catatan Aksesibilitas pada Teks px #

Konsistensi px punya sisi yang perlu diwaspadai. Ketika pengguna menaikkan ukuran font default di pengaturan browser — kebiasaan umum pengguna dengan penglihatan terbatas — teks yang diukur dengan px tetap pada ukuran lamanya. Aplikasi lain di perangkat ikut membesar, tetapi teks halaman kita tidak. Untuk font-size dan jarak antarteks, satuan relatif seperti rem yang dibahas pada chapter berikutnya jauh lebih menghormati preferensi pengguna.

Kapan Px Tepat Dipakai #

px tetap menjadi pilihan terbaik untuk detail kecil yang justru menguntungkan bila konsisten:

• Border tipis: border: 1px solid #cbd5e1; hampir selalu ditulis dalam px.
• Detail dekoratif: border-radius, box-shadow, dan garis pemisah.
• Ukuran tetap yang disengaja: ikon 16px, indikator titik 8px.
• Jarak halus: penyesuaian 1-2px pada posisi elemen kecil.

Untuk lebar kolom utama dan ukuran teks isi, px membuat halaman kaku — di wilayah itu persen dan satuan relatif mengambil alih.

Persen: Selalu Membutuhkan Acuan #

Persen tidak punya makna mandiri. Browser menghitungnya dari acuan yang ditentukan masing-masing property:

Contoh perhitungan: elemen induk ber-lebar 400px dengan font-size 16px, lalu anaknya diberi width: 50% dan font-size: 150%. Hasilnya 50% × 400px = 200px dan 150% × 16px = 24px:

.papan-utama {
  width: 400px;
  font-size: 16px;
}

.panel-isi {
  width: 50%;       /* 50% dari 400px = 200px */
  font-size: 150%;  /* 150% dari 16px = 24px */
}

Demo berikut menaruh dua panel di dalam dua bingkai berukuran sama — panel pertama memakai width: 50%, panel kedua width: 200px:

Bila .papan-utama nanti diperlebar menjadi 600px, panel otomatis menjadi 300px tanpa satu baris CSS pun diubah. Sifat mengikuti-acuan inilah yang menjadikan persen bahan utama layout luwes.

Persen pada Tinggi: Syaratnya Lebih Ketat #

Pada lebar, acuan hampir selalu tersedia karena elemen block mengisi lebar induknya secara default. Pada tinggi tidak demikian: bila induk tidak punya height eksplisit, height: 100% tidak punya dasar hitung dan browser memperlakukannya seperti auto.

.panel-tinggi {
  height: 100%; /* tanpa height induk eksplisit, dihitung seperti auto */
}

Cara aman untuk tinggi berbasis layar dibahas pada chapter Viewport Units; untuk tinggi berbasis konten, auto dan min-height biasanya sudah cukup.

Kesalahan Umum #

Ringkasan #

px adalah satuan tetap yang andal untuk detail visual kecil — border, radius, bayangan — tetapi tidak ikut membesar saat pengguna menaikkan ukuran font. Persen selalu menghitung dari acuan: lebar induk untuk dimensi, font-size induk untuk teks, dengan syarat lebih ketat pada tinggi. Karena ukuran teks dan jarak paling aman diukur relatif terhadap font, chapter berikutnya membahas dua satuan yang memang dirancang untuk itu: em dan rem.