Unit Ukuran

The CSS Podcast - 008: Sizing Units

Web adalah media responsif, tetapi terkadang Anda ingin mengontrol dimensinya untuk meningkatkan kualitas antarmuka secara keseluruhan. Contoh yang bagus adalah membatasi panjang baris untuk meningkatkan keterbacaan. Bagaimana Anda melakukannya di media yang fleksibel seperti web?

Untuk kasus ini, Anda dapat menggunakan unit ch, yang sama dengan lebar karakter "0" dalam font yang dirender pada ukuran yang dihitung. Unit ini memungkinkan Anda membatasi lebar teks dengan unit yang dirancang untuk menentukan ukuran teks, yang pada akhirnya, memungkinkan kontrol yang dapat diprediksi, terlepas dari ukuran teks tersebut. Unit ch adalah salah satu dari beberapa unit yang berguna untuk konteks tertentu seperti contoh ini.

Angka

Angka digunakan untuk menentukan opacity, line-height, dan bahkan untuk nilai saluran warna di rgb. Angka adalah bilangan bulat tanpa satuan (1, 2, 3, 100) dan desimal (.1, .2, .3).

Angka memiliki makna bergantung pada konteksnya. Misalnya, saat menentukan line-height, angka mewakili rasio jika Anda menentukannya tanpa unit pendukung:

p {
  font-size: 24px;
  line-height: 1.5;
}

Dalam contoh ini, 1.5 sama dengan 150% dari ukuran font piksel yang dihitung elemen p. Artinya, jika p memiliki font-size 24px, tinggi baris akan dihitung sebagai 36px.

Angka juga dapat digunakan di tempat berikut:

• Saat menetapkan nilai untuk filter: filter: sepia(0.5) menerapkan filter sepia 50% ke elemen.
• Saat menyetel opasitas: opacity: 0.5 menerapkan opasitas 50%.
• Di saluran warna: rgb(50, 50, 50), dengan nilai 0-255 yang dapat diterima untuk menetapkan nilai warna. Lihat pelajaran warna.
• Untuk mengubah elemen: transform: scale(1.2) menskalakan elemen sebesar 120% dari ukuran awalnya.

Persentase

Saat menggunakan persentase di CSS, Anda perlu mengetahui cara penghitungan persentase. Misalnya,width dihitung sebagai persentase lebar yang tersedia di elemen induk.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%;
}

Pada contoh sebelumnya, lebar div p adalah 150px, dengan asumsi bahwa tata letak menggunakan box-sizing: content-box default.

Jika Anda menetapkan margin atau padding sebagai persentase, nilai tersebut akan menjadi bagian dari lebar elemen induk, terlepas dari arahnya.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

Dalam contoh sebelumnya, margin-top dan padding-left akan dihitung menjadi 150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Jika Anda menetapkan nilai transform sebagai persentase, nilai tersebut akan didasarkan pada elemen dengan transformasi yang ditetapkan. Dalam contoh ini, p memiliki nilai translateX 10% dan width 50%. Pertama, hitung lebarnya: 150px karena 50% dari lebar induknya. Kemudian, ambil 10% dari 150px, yaitu 15px.

Dimensi dan panjang

Jika Anda melampirkan satuan ke angka, satuan tersebut akan menjadi dimensi. Misalnya, 1rem adalah dimensi. Dalam konteks ini, unit yang dilampirkan ke angka disebut dalam spesifikasi sebagai token dimensi. Panjang adalah dimensi yang merujuk pada jarak dan dapat berupa absolut atau relatif.

Panjang absolut

Semua panjang absolut di-resolve terhadap dasar yang sama, sehingga dapat diprediksi di mana pun digunakan dalam CSS Anda. Misalnya, jika Anda menggunakan cm untuk menentukan ukuran elemen, lalu mencetaknya, ukuran tersebut akan akurat jika Anda membandingkannya dengan penggaris. Perhatikan bahwa unit fisik, seperti cm dan in, tidak akan ditampilkan dengan andal pada ukuran tersebut di layar karena variasi ukuran piksel. Unit fisik paling baik digunakan untuk lembar gaya cetak karena akan lebih andal.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Jika Anda mencetak halaman ini, div akan dicetak sebagai persegi panjang hitam berukuran 10x5 cm. Perlu diingat, CSS tidak hanya digunakan untuk konten digital, tetapi juga untuk menata gaya konten cetak. Panjang absolut sangat berguna saat mendesain untuk cetak.

Panjang relatif

Panjang relatif dihitung berdasarkan nilai dasar, seperti persentase. Perbedaan antara keduanya dan persentase adalah Anda dapat menentukan ukuran berdasarkan ukuran dasar yang relevan, seperti ukuran font default atau dimensi jendela. Artinya, CSS memiliki unit seperti ch yang menggunakan metrik ukuran font sebagai dasar, dan vw yang didasarkan pada lebar area pandang (jendela browser Anda). Panjang relatif sangat berguna di web karena sifatnya yang responsif.

Unit ukuran font relatif

CSS menyediakan unit yang berguna dan relatif terhadap ukuran elemen tipografi yang dirender, seperti ukuran teks itu sendiri (unit em) atau lebar karakter typeface (unit ch).

Unit relatif area pandang

Anda dapat menggunakan dimensi area pandang (jendela browser) sebagai dasar relatif. Unit ini membagi ruang area pandang yang tersedia.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

Dalam contoh ini, div akan menjadi 10% dari lebar area tampilan karena 1vw adalah 1% dari lebar area tampilan. Elemen p memiliki max-width 60ch yang berarti tidak boleh melebihi lebar 60 karakter "0" dalam font dan ukuran yang dihitung.

Unit alternatif yang relatif terhadap area pandang

Nilai satuan relatif area pandang tetap sama selama ukuran area pandang tidak berubah. Namun, browser seluler biasanya menampilkan atau menyembunyikan elemen UI untuk menampilkan sebanyak mungkin konten di layar kecil, tanpa mengubah ukuran area pandang yang dihitung. Anda dapat menggunakan alternatif untuk unit relatif area pandang guna memperhitungkan perubahan ini pada area yang terlihat.

Unit relatif penampung

Anda dapat menggunakan dimensi penampung elemen sebagai dasar relatif. Unit ini membagi ruang penampung yang tersedia. Ini berguna di dalam kueri penampung untuk menetapkan ukuran font berdasarkan ruang yang tersedia.

Unit lain-lain

Ada beberapa unit lain yang telah ditentukan untuk menangani jenis nilai tertentu.

Satuan sudut

Di modul warna, kita telah melihat unit sudut, yang berguna untuk menentukan nilai derajat, seperti hue di hsl. Fungsi ini juga berguna untuk memutar elemen dalam fungsi transformasi.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Dengan menggunakan satuan sudut deg, Anda dapat memutar div 90° pada sumbu tengahnya.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Unit resolusi

Pada contoh sebelumnya, nilai min-resolution adalah 192dpi. Unit dpi adalah singkatan dari titik per inci. Konteks yang berguna untuk hal ini adalah mendeteksi layar beresolusi sangat tinggi, seperti layar Retina dalam kueri media dan menayangkan gambar beresolusi lebih tinggi.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang ukuran

Resource

• Nilai dan Unit Spesifikasi CSS Level 4
• Ukuran dan Unit di MDN
• All About Ems
• Penjelasan persentase