Podcast CSS - 008: Mengukur Unit
Web adalah media responsif, tetapi terkadang Anda ingin mengontrol dimensinya untuk meningkatkan kualitas antarmuka secara keseluruhan. Contoh yang baik dari hal ini adalah membatasi panjang baris untuk meningkatkan keterbacaan. Bagaimana Anda akan melakukannya dalam 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 komputasinya.
Unit ini memungkinkan Anda membatasi lebar teks dengan unit yang dirancang untuk mengukur ukuran teks,
sehingga 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.
Numbers
Angka digunakan untuk menentukan opacity, line-height, dan bahkan untuk nilai saluran warna dalam rgb.
Bilangan adalah bilangan bulat tanpa unit (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 terkomputasi elemen p.
Artinya, jika p memiliki font-size sebesar 24px,
tinggi baris akan dihitung sebagai 36px.
Angka juga dapat digunakan di tempat berikut:
- Saat menyetel nilai untuk filter:
filter: sepia(0.5)menerapkan filter sepia50%ke elemen. - Saat menyetel opasitas:
opacity: 0.5menerapkan opasitas50%. - 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 cara menghitung persentase.
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,
keduanya 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 lebarnya adalah 50% dari lebar induknya.
Lalu, ambil 10% dari 150px, yaitu 15px.
Dimensi dan panjang
Jika Anda mengaitkan unit ke angka, unit tersebut akan menjadi dimensi.
Misalnya, 1rem adalah dimensi.
Dalam konteks ini, unit yang dilampirkan pada nomor disebut dalam spesifikasi sebagai token dimensi.
Panjang adalah dimensi yang merujuk pada jarak dan dapat bersifat absolut atau relatif.
Panjang absolut
Semua panjang absolut diselesaikan berdasarkan basis yang sama,
sehingga dapat diprediksi di mana pun digunakan dalam CSS Anda.
Misalnya, jika Anda menggunakan cm untuk mengukur ukuran elemen, lalu mencetaknya,
nilai tersebut harus akurat jika Anda membandingkannya dengan penggaris.
div {
width: 10cm;
height: 5cm;
background: black;
}
Jika Anda mencetak halaman ini, div akan mencetak sebagai persegi panjang hitam 10x5 cm.
Perlu diingat, CSS tidak hanya digunakan untuk konten digital, tetapi juga untuk menata gaya konten cetak.
Panjang absolut sangat berguna saat mendesain produk cetak.
| Satuan | Nama | Setara dengan |
|---|---|---|
| cm | Sentimeter | 1 cm = 96px/2,54 |
| mm | Milimeter | 1mm = 1/10 dari 1 cm |
| T | Seperempat milimeter | 1Q = 1/40 1cm |
| in | Inci | 1in = 2,54 cm = 96 px |
| pc | Pica | 1 buah = 1/6 dari 1 inci |
| pt | Poin | 1pt = 1/72 dari 1in |
| px | Piksel | 1px = 1/96 dari 1in |
Panjang relatif
Panjang relatif dihitung terhadap nilai dasar, seperti persentase.
Perbedaan antara hal ini dan persentase adalah Anda dapat mengukur 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).
Panjang yang relatif sangat berguna di web karena sifat responsifnya.
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 jenis huruf (unit ch).
| satuan | relatif terhadap: |
|---|---|
| em | Dibandingkan dengan ukuran font, yaitu 1,5em akan 50% lebih besar dari ukuran font dasar yang dihitung dari induknya. (Sebelumnya, tinggi huruf kapital "M"). |
| mis. | 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 elemen yang dihitung saat ini. |
| ch | Kemajuan karakter rata-rata glyph sempit dalam font elemen (diwakili oleh glyph "0"). |
| ic | Kemajuan karakter rata-rata dari glyph lebar penuh dalam font elemen, sebagaimana diwakili oleh glyph "水" (ideograph air CJK, U+6C34). |
| rem | Ukuran font elemen root (default adalah 16px). |
| lh | Tinggi baris elemen. |
| Rah | Tinggi baris elemen root. |
Unit relatif area pandang
Anda dapat menggunakan dimensi area pandang (jendela browser) sebagai basis relatif. Unit-unit ini membagi ruang pandang yang tersedia.
| satuan | relatif terhadap |
|---|---|
| vw | 1% dari lebar area pandang. Pengguna menggunakan satuan ini untuk melakukan trik font keren, seperti mengubah ukuran font header berdasarkan lebar halaman sehingga saat pengguna mengubah ukuran, ukuran font juga akan berubah. |
| vh | 1% dari tinggi area pandang. Anda dapat menggunakan fungsi ini untuk mengatur item di UI, jika Anda memiliki toolbar footer, misalnya. |
| vi | 1% dari ukuran area pandang dalam sumbu inline elemen root. Sumbu mengacu pada mode penulisan. Dalam mode penulisan horizontal seperti bahasa Inggris, sumbu sejajar adalah horizontal. Dalam mode penulisan vertikal seperti beberapa jenis huruf Jepang, sumbu sebaris berada dari atas ke bawah. |
| vb | 1% dari ukuran area pandang dalam 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 menguraikan halaman dari atas ke bawah. Mode penulisan vertikal memiliki sumbu blok horizontal. |
| vmin | 1% dari dimensi area pandang yang lebih kecil. |
| vmax | 1% dari dimensi area pandang yang lebih besar. |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
Dalam contoh ini, div akan berukuran 10% dari lebar area pandang karena 1vw adalah 1% dari lebar area pandang.
Elemen p memiliki max-width 60ch
yang berarti elemen tersebut 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.
Satuan sudut
Dalam modul warna,
kita melihat satuan 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 unit 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.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang ukuran
Manakah dari berikut ini yang merupakan dimensi yang valid?
Apa perbedaan unit absolut dan relatif?
Unit area pandang bersifat mutlak.