Pelajari cara mengontrol ukuran elemen, menjaga jarak yang tepat, dan menerapkan tipografi yang lancar menggunakan fungsi CSS yang didukung dengan baik ini.
Karena desain responsif menjadi lebih bernuansa, CSS terus berkembang untuk memberikan
penulis meningkatkan
kontrol. min()
,
max()
, dan
fungsi clamp()
,
kini didukung di semua browser modern, merupakan salah satu alat terbaru dalam membuat
membuat situs dan aplikasi
lebih dinamis dan responsif. Anda dapat menggunakan
fungsi untuk mengontrol perubahan ukuran dan
ukuran elemen, menjaga jarak antar
serta membuat tipografi yang fleksibel dan lancar.
Fungsi matematika,
Nilai CSS dan Unit Tingkat 4calc()
,min()
,max()
, danclamp()
memungkinkan ekspresi matematika dengan penambahan (+), pengurangan (-), perkalian (*), dan pembagian (/) untuk digunakan sebagai nilai komponen
Dukungan browser
min()
max()
clamp()
Penggunaan
Anda dapat menggunakan min()
, max()
, dan clamp()
di sisi kanan CSS mana pun
ekspresi di mana hal itu
masuk akal. Untuk min()
dan max()
, Anda memberikan
daftar argumen nilai, dan browser menentukan yang mana
terkecil atau terbesar. Misalnya, dalam kasus width: min(1rem, 50%, 10vw)
,
browser menghitung unit relatif mana yang terkecil dan menggunakan
nilai itu untuk lebar elemen.
Fungsi max()
melakukan hal yang sama untuk nilai maksimum.
Untuk menggunakan clamp()
, masukkan tiga nilai: nilai minimum, nilai ideal untuk
dari nilai awal, dan nilai maksimum.
Anda dapat menggunakan fungsi ini di mana pun <length>
, <frequency>
,
<angle>
, <time>
, <percentage>
, <number>
, atau <integer>
diizinkan. Anda
dapat menggunakannya sendiri (seperti di font-size: max(0.5vw, 50%, 2rem)
), dengan
calc()
(seperti dalam font-size: max(calc(0.5vw - 1em), 2rem)
), atau ditulis (seperti dalam
font-size: max(min(0.5vw, 1em), 2rem)
).
Berikut adalah beberapa contoh cara menggunakan fungsi tersebut.
Lebar yang sempurna
Menurut Elemen Tipografi Gaya oleh Robert Bringhurst, "segala sesuatu yang terdiri dari 45 hingga 75 karakter dianggap secara luas sebagai panjang garis yang memuaskan untuk kumpulan halaman kolom tunggal dalam tampilan teks Serif dalam ukuran teks."
Untuk memastikan bahwa blok teks Anda memiliki lebar antara 45 dan 75 karakter, gunakan
clamp()
dan ch
(karakter maju dengan lebar 0)
satuan:
p {
width: clamp(45ch, 50%, 75ch);
}
Hal ini memungkinkan browser menentukan lebar paragraf. Fungsi ini menyetel lebar ke
50% secara default. Jika 50% lebih kecil dari 45ch
, 45ch
akan digunakan sebagai lebar
sebagai gantinya, dan jika 50% lebih lebar dari 75ch
, 75ch
akan digunakan.
Anda juga dapat memisahkannya menggunakan min()
atau max()
saja. Jika Anda ingin
elemen harus selalu memiliki lebar 50%
, dan lebarnya tidak melebihi 75ch
pada layar yang lebih besar
layar, gunakan width: min(75ch, 50%);
untuk menyetel ukuran maksimum.
Dengan cara yang sama, Anda dapat menetapkan ukuran minimum untuk teks yang dapat dibaca menggunakan max()
, seperti dalam width: max(45ch, 50%);
. Di sini, browser memilih
nilainya lebih besar, artinya elemen harus berukuran 45ch
atau lebih lebar.
Mengelola padding
Anda juga dapat menggunakan max()
untuk menetapkan ukuran padding minimum. Contoh ini berasal dari
Trik CSS,
di mana pembaca Caluá de Lacerda Pataca menyampaikan gagasan ini: Biarkan suatu elemen memiliki
padding tambahan pada ukuran layar yang lebih besar, tetapi mempertahankan padding minimum pada ukuran yang lebih kecil
ukuran layar. Untuk melakukannya, gunakan calc()
atau max()
, lalu kurangi nilai minimum
padding dari kedua sisi elemen: calc((100vw - var(--contentWidth)) / 2)
,
atau max(2rem, 50vw - var(--contentWidth) / 2)
. Dalam {i>style sheet<i}, Anda harus
akan terlihat seperti ini:
footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Tipografi adaptif
Untuk mengaktifkan tipografi yang lancar,
Mike Riethmeuller mempopulerkan sebuah teknik
yang menggunakan {i>function<i} clamp()
untuk mengatur
ukuran {i>font<i} minimum, ukuran {i>font<i} maksimum,
dan memungkinkan penskalaan di antara ukuran tersebut.
Sebelum clamp(),
mendesain penskalaan font, diperlukan string gaya yang kompleks. Sekarang,
Anda dapat membiarkan {i>browser<i}
melakukan pekerjaan untuk Anda. Menetapkan font minimum yang dapat diterima
ukuran (misalnya, 1.5rem
untuk judul), ukuran maksimum (seperti 3rem
), dan
dan ukuran ideal (seperti 5vw
). Sekarang Anda memiliki tipografi yang
diskalakan dengan ukuran
lebar area pandang hingga mencapai nilai batas minimum dan maksimum, menggunakan
sangat sedikit kode:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Referensi lainnya
- Nilai dan Unit CSS di MDN
- Nilai CSS dan Spesifikasi Tingkat 4 Unit
- Artikel Trik CSS tentang Lebar Elemen Bagian Dalam
- min(), max(), clamp() Ringkasan oleh Ahmad Shadeed
Gambar sampul dari @yer_a_wizard aktif Batalkan percikan.