Podcast CSS - 008: Mengubah Ukuran Unit
Web adalah media responsif, namun terkadang Anda ingin mengontrol dimensinya untuk meningkatkan kualitas antarmuka secara keseluruhan. Salah satu contoh yang baik adalah membatasi panjang baris untuk meningkatkan keterbacaan. Bagaimana Anda melakukannya dalam media yang fleksibel seperti web?
Untuk kasus ini,
Anda dapat menggunakan unit ch
yang sama dengan lebar "0"
karakter dalam font yang dirender pada ukuran komputasinya.
Unit ini memungkinkan Anda membatasi lebar teks dengan unit yang dirancang untuk menyesuaikan ukuran teks,
yang pada gilirannya,
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
.
Bilangan adalah bilangan bulat tanpa satuan (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
.
Ini berarti jika p
memiliki font-size
dari 24px
,
tinggi baris akan dihitung sebagai 36px
.
Nomor 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.5
akan menerapkan opasitas50%
. - Di saluran warna:
rgb(50, 50, 50)
, nilai 0-255 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,
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 ke 150px
.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
transform: translateX(10%); /* calculated: 15px */
}
Jika Anda menetapkan nilai transform
sebagai persentase,
didasarkan pada elemen dengan set transformasi.
Dalam contoh ini, p
memiliki nilai translateX
10%
dan width
50%
.
Pertama, hitung lebarnya: 150px
karena tingginya 50% dari lebar induknya.
Lalu, 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 diselesaikan dengan basis yang sama,
membuatnya dapat diprediksi di mana pun istilah tersebut digunakan dalam CSS Anda.
Misalnya, jika Anda menggunakan cm
untuk mengukur elemen, lalu mencetak,
harus 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 media cetak.
Unit | Nama | Setara dengan |
---|---|---|
cm | Sentimeter | 1 cm = 96 piksel/2,54 |
mm | Milimeter | 1mm = 1/10 dari 1 cm |
T | Seperempat milimeter | 1Q = 1/40 dari 1 cm |
in | Inci | 1in = 2,54 cm = 96 piksel |
pc | Pica | 1 pc = 1/6th dari 1in |
pt | Poin | 1pt = 1/72 dari 1in |
px | Piksel | 1px = 1/96 dari 1in |
Panjang relatif
Panjang relatif dihitung berdasarkan nilai dasar, mirip seperti persentase.
Perbedaan antara hal ini dan persentase adalah bahwa 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 Anda).
Panjang relatif sangat berguna di web karena sifatnya yang responsif.
Unit relatif ukuran font
CSS menyediakan unit bermanfaat yang sesuai dengan ukuran elemen tipografi yang dirender,
seperti ukuran teks itu sendiri (em
unit) atau lebar jenis huruf (ch
unit).
satuan | relatif terhadap: |
---|---|
em | Relatif terhadap ukuran {i>font<i}, yaitu 1,5em akan 50% lebih besar dari ukuran font dasar yang dihitung dari induknya. (Sebelumnya, tinggi huruf kapital "M"). |
misalnya | Heuristik untuk menentukan apakah akan menggunakan tinggi x, huruf "x", atau `.5em` dalam ukuran font elemen yang dikomputasi saat ini. |
batas | Tinggi huruf kapital dalam ukuran font elemen yang dihitung saat ini. |
ch | Rata-rata kemajuan karakter glyph sempit di font elemen (diwakili oleh glyph "0"). |
ik | Rata-rata kemajuan karakter glyph lebar penuh dalam font elemen, sebagaimana direpresentasikan oleh "水" (ideograf air CJK, U+6C34). |
rem | Ukuran font elemen root (default-nya adalah 16px). |
lh | Tinggi garis elemen. |
rlh | Tinggi baris elemen root. |
Unit relatif area pandang
Anda dapat menggunakan dimensi area pandang (jendela browser) sebagai dasar relatif. Unit ini meningkatkan ruang area pandang yang tersedia.
satuan | dibandingkan dengan |
---|---|
VW | 1% dari lebar area tampilan. Orang menggunakan unit ini untuk melakukan trik {i>font<i} yang keren, seperti mengubah ukuran {i>font header<i} berdasarkan lebar halaman sehingga pengguna mengubah ukuran, ukuran {i>font<i} juga akan berubah ukuran. |
vh | 1% dari tinggi area pandang. Anda dapat menggunakan ini untuk mengatur item di UI, jika Anda memiliki {i>toolbar<i} {i>footer<i}. |
vi | 1% 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 adalah 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% dimensi area pandang yang lebih kecil. |
vmax | 1% dimensi area pandang yang lebih besar. |
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 tampilan.
Elemen p
memiliki max-width
dari 60ch
yang berarti tidak boleh melebihi
lebar 60 "0" karakter untuk {i>font<i} dan
ukuran yang dihitung.
Unit lain-lain
Ada beberapa unit lain yang telah ditetapkan untuk menangani jenis nilai tertentu.
Satuan sudut
Dalam modul warna,
kita melihat satuan sudut,
yang membantu untuk menentukan
nilai-nilai gelar,
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
.
Satuan dpi
adalah singkatan dari dots per inch.
Konteks yang berguna untuk hal ini adalah
mendeteksi layar resolusi sangat tinggi,
seperti Retina ditampilkan dalam kueri media dan
menampilkan gambar dengan resolusi 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 absolut.