Memahami Jenis-jenis Satuan Ukuran di CSS
Bagus Aji Santoso 3 Juni 2020
Diterjemahkan dari https://alligator.io/css/css-units-explained/
CSS memiliki beberapa opsi satuan untuk menentukan ukuran dari berbagai propertinya. Menggunakan jenis-jenis satuan yang bisa dipakai oleh CSS akan menjadi kunci membuat layout yang mudah dikeloa dan terlihat bagus disemua jenis layar.
Apa itu CSS Unit?
CSS unit adalah satuan untuk menentukan ukuran dari suatu elemen atau kontennya. Misal, jika ingin menentukan margin dari sebuah paragraf, kita bisa memberikan nilai tertentu. Nilai ini akan diikuti oleh satuan (CSS unit).
Mari lihat contoh sederhana berikut:
p {
margin: 20px;
}
Dalam kasus ini, margin adalah properti yang ingin diatur ukurannya, 20px adalah nilainya, dan px (atau pixel) adalah satuannya (CSS unit).
Meskipun kita seringkali melihat penggunakan px, pertanyaan yang sering muncul adalah "Apa unit terbaik yang perlu dipakai?"
Mari kita bahas
Absolute vs Relative
Saat menentukan ukuran, hal yang paling penting adalah memikirkan akan mengguankan salah satu dari dua kategori ini: absolute atau relative.
Absolute Unit
Unit yang "absolute" akan selalu memiliki ukuran yang sama apapun elemen parent-nya atau ukuran layar. Artinya properti yang diatur dengan absolute unit akan memiliki ukuran sama baik di telepon maupun di layar monitor yang besar.
Absolute unit berguna jika project yang dikerjakan tidak memikirkan keresponsifan. Misalnya, aplikasi desktop yang tidak bisa di-resized bisa menggunakannya. Jika ukuran jendela tidak akan berubah, maka kontennya pun tidak juga.
Pixel (px) sering dipakai untuk menentukan absolute unit di layar. Centimeter, millimeter, dan inchi lebih sering dipakai untuk dokumen cetak (kamu mungkin tidak tgerpikirkan kalau tiga opsi ini bisa dipakai).
Relative Unit
Relative unit berguna untuk mendesain website yang responsif karena ukurannya bisa berubah relatif terhadap parent atau ukuran layar.
Secara umum relative unit bisa dipakai sebagai satuan bawaan website responsif sehingga bisa membantu untuk meng-update style di ukuran layar yang berbeda.
Relative unit mungkin akan sedikit lebih sulit dibandingkan absolute unit untuk menentukan satuan mana yang akan dipakai.
- %: Ukurannya relatif terhadap parent element
- em: Ukurannya relatif terhadap font-size dari elemen saat ini
- rem: Ukurannya relatif terhadap font-size root elemen (
<html>). "rem" = "root em" - ch: Ukurannya mengikuti jumlah karakter (1 karakter sama dengan lebar dari karakter 0/nol font yang sedang aktif)
- vh: Ukurannya relatif terhadap tinggi viewport (ukuran jendela tau aplikasi), 1vh = 1/100 dari tinggi viewport
- vw: Ukurannya relatif terhadap lebar dari viewport. 1vw = 1/100 lebar viewport
- vmin: Ukurannya relatif terhadap ukuran viewport yang lebih kecil (misalnya diorientasi portrait, lebar akan lebih kecil daripada tinggi). 1vmin = 1/100 dari ukuran viewport yang lebih kecil.
- vmax: Sama dengan vmin, dia akan melihat ukuran viewport yang lebih besar
- ex: Ukurannya relatif terhadap tinggi dari karakter "x" kecil font yang sedang aktif.
Tidak ada standar resmi kapan waktu terbaik menggunakan satuan-satuann yang tersedia. Contoh, % sering dipakai untuk mengatur layout seperti lebar halaman daripada menggunakannya untuk mengatur ukuran tulisan.
Berikut ini beberapa contoh dimana kita bisa memakai masing-masing satuan relatif. (Spoiler: ex hampir ga pernah kepake.)
%
Kamu ingin agar suatu child element memiliki 10% lebar parent sebagai marginnya sehingga ia tidak akan mengisi keseluruhan parent. Ketika ukuran parent berubah, maka margin juga akan berubah.
.child {
margin: 10%;
}
em
Kamu ingin agar font child element memiliki setengah ukuran parent-nya (contoh: ukuran paragraf setelah judul)
.child {
font-size: 0.5em;
}
rem
Kamu ingin agar ukuran font 2 kali lebih besar dari ukuran font root element (maksudnya di sini ukuran font yang diatur untuk body, biasanya 16px). The font-size should be twice the size as the root element’s font. This could be how you size your headers because they should all be the same size regardless of the parent container.
.header {
font-size: 2rem;
}
ch
Kamu menggunakan mono-spaced font (font yang semua karakternya memiliki ukuran lebar yang sama) dan hanya menyediakan ruang untuk 10 karakter saja.
.small-text {
width: 10ch;
}
vh
Kamu ingin agar landing page memiliki bagian yang ukurannya setinggi browser.
.wrapper {
height: 100vh;
}
vw
Kamu ingin ada bagian teks yang ukurannya setengah layar browser untuk komponen hero.
.half-size {
width: 50vw;
}
vmin
Kamu ingin sebuah gambar selalu mengambil ukuran lebih kecil dari suatu viewport. Misalnya sata telepon dalam mode portrait maka gambar tersebut akan selebar layar.
.min-width {
width: 100vmin;
}
vmax
Kamu ingin menampilkan gambar pola di latar belakang.
.max-width {
width: 100vmax;
}
ex
Kamu mungkin jarang menemukan kebutuhan untuk menggunakan ex. Pada contoh ini kamu ingin agar tinggi antar baris kalimat dipisahkan oleh jarak 2 x.
.double-x {
line-height: 2ex;
}