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 untuk hal ini 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 unit (1, 2, 3, 100) dan desimal (.1, .2, .3).

Angka memiliki arti, 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 dalam CSS, Anda perlu mengetahui bagaimana persentase dihitung. Misalnya,width dihitung sebagai persentase lebar yang tersedia di elemen induk.

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

div p {
  width: 50%; 
}

Pada contoh di atas, 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 cuplikan di atas, 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 unit ke angka, itu menjadi dimensi. Misalnya, 1rem adalah dimensi. Dalam konteks ini, unit yang terkait dengan angka disebut dalam spesifikasi sebagai token dimensi. Panjang adalah dimensi yang mengacu pada jarak dan dapat bersifat 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 mengukur elemen, lalu mencetaknya, maka akan akurat jika Anda membandingkannya dengan penggaris.

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.

Unit Nama Setara dengan
cm Sentimeter 1 cm = 96 piksel/2,54
mm Milimeter 1 mm = 1/10 dari 1 cm
T Seperempat milimeter 1Q = 1/40 dari 1 cm
in Inci 1 inci = 2,54 cm = 96 piksel
pc Pica 1 pc = 1/6 dari 1 in
pt Poin 1pt = 1/72 dari 1 in
px Piksel 1 piksel = 1/96 inci

Panjang relatif

Panjang relatif dihitung berdasarkan nilai dasar, seperti persentase. Perbedaan antara ini dan persentase adalah Anda dapat menentukan ukuran elemen secara kontekstual. Artinya, CSS memiliki unit seperti ch yang menggunakan ukuran teks sebagai dasar, dan vw yang didasarkan pada lebar area pandang (jendela browser Anda). Panjang relatif sangat berguna di web karena sifatnya yang responsif.

Unit relatif ukuran font

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

satuan relatif terhadap:
em Relatif terhadap ukuran font, yaitu 1,5em akan 50% lebih besar dari ukuran font dasar yang dihitung dari induknya. (Sebelumnya, tinggi huruf kapital "M").
ex Heuristik untuk menentukan apakah akan menggunakan tinggi x, huruf "x", atau `.5em` dalam ukuran font elemen yang dihitung saat ini.
batas Tinggi huruf besar dalam ukuran font yang dihitung saat ini untuk elemen.
ch Peningkatan karakter rata-rata dari glyph sempit dalam font elemen (diwakili oleh glyph "0").
ic Peningkatan karakter rata-rata dari glyph lebar penuh dalam font elemen, seperti yang direpresentasikan oleh glyph "水" (ideogram air CJK, U+6C34).
rem Ukuran font elemen root (default adalah 16 piksel).
lh Tinggi baris elemen.
rlh Tinggi baris elemen root.
Teks, CSS 10x lebih baik dengan label untuk tinggi ascender, tinggi descender, dan tinggi x. Tinggi x mewakili 1ex dan 0 mewakili 1ch

Unit relatif area pandang

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

satuan relatif terhadap
vw 1% dari lebar area tampilan. Orang menggunakan unit ini untuk melakukan trik font keren, seperti mengubah ukuran font header berdasarkan lebar halaman sehingga saat pengguna mengubah ukuran, font juga akan diubah ukurannya.
vh 1% dari tinggi area pandang. Anda dapat menggunakannya untuk mengatur item di UI, misalnya jika Anda memiliki toolbar footer.
vi 1% dari ukuran area pandang di sumbu inline elemen root. Sumbu mengacu pada mode penulisan. Dalam mode penulisan horizontal seperti bahasa Inggris, sumbu yang sejajar adalah horizontal. Dalam mode penulisan vertikal seperti beberapa jenis huruf Jepang, sumbu sejajar ditampilkan dari atas ke bawah.
vb 1% ukuran area pandang pada sumbu blok elemen root. Untuk sumbu blok, ini akan menjadi arah bahasa. Bahasa LTR seperti bahasa Inggris akan memiliki sumbu blok vertikal, karena pembaca bahasa Inggris mengurai halaman dari atas ke bawah. Mode penulisan vertikal memiliki sumbu blok horizontal.
vmin 1% dari dimensi yang lebih kecil dari area pandang.
vmax 1% dari dimensi yang lebih besar dari area pandang. 
div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

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

Unit lain-lain

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

Unit sudut

Di modul warna, kita telah melihat unit sudut, yang berguna untuk menentukan nilai derajat, seperti hue di hsl. Mereka 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 tampilan Retina dalam kueri media dan penayangan gambar dengan resolusi lebih tinggi.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang ukuran

Manakah dari berikut ini yang merupakan dimensi yang valid?

cm
Sentimeter, dimensi absolut yang valid.
ui
Antarmuka pengguna bukan dimensi di CSS.
in
Inci, dimensi absolut yang valid.
8
Bukan dimensi CSS
px
Piksel, dimensi absolut yang valid.
ch
Unit karakter, dimensi relatif yang valid.
ux
Pengalaman pengguna bukanlah dimensi di CSS.
em
Huruf 'M', dimensi relatif yang valid.
ex
Unit huruf 'x', dimensi relatif yang valid.

Apa perbedaan antara unit absolut dan relatif?

Nilai absolut tidak dapat diubah, tetapi unit relatif dapat
Nilai absolut dapat berubah, tetapi dasar penghitungannya tidak dapat berubah.
Panjang absolut dihitung berdasarkan satu nilai dasar bersama, dengan unit relatif dibandingkan dengan nilai dasar yang dapat berubah.
Unit relatif lebih adaptif dan mulus karena kesadaran kontekstualnya, tetapi ada kekuatan dan prediktabilitas untuk unit absolut yang dapat menjadi landasan untuk desain tertentu.

Unit area pandang bersifat absolut.

Benar
Dimensi ini mungkin terasa absolut, tetapi relatif terhadap area pandang, yang dapat berupa iframe atau webview, dan tidak selalu mewakili ukuran layar perangkat.
Salah
Nilai ini relatif terhadap jendela dokumen tempatnya dibuat, yang mungkin sama atau tidak sama dengan layar perangkat.

Resource