Pelajari cara mengontrol ukuran elemen, mempertahankan spasi yang tepat, dan menerapkan tipografi mengalir menggunakan fungsi CSS yang didukung dengan baik ini.
Seiring dengan makin bervariasinya desain responsif, CSS terus berkembang untuk memberi
penulis kontrol yang lebih baik. Fungsi min()
,
max()
, dan
clamp()
,
kini didukung di semua browser modern, adalah salah satu alat terbaru untuk membuat
situs dan aplikasi pembuatan situs lebih dinamis dan responsif. Anda dapat menggunakan
fungsi ini untuk mengontrol ukuran dan pengubahan ukuran elemen, menjaga jarak antar-elemen, serta membuat tipografi yang fleksibel dan mengalir.
Fungsi matematika,
Nilai CSS dan Unit Level 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 ekspresi CSS apa pun yang relevan. Untuk min()
dan max()
, Anda memberikan
daftar nilai argumen, dan browser menentukan mana yang
terkecil atau terbesar. Misalnya, dalam kasus width: min(1rem, 50%, 10vw)
,
browser menghitung mana dari unit relatif berikut yang paling kecil dan menggunakan
nilai tersebut untuk lebar elemen.
Fungsi max()
melakukan hal yang sama untuk nilai maksimum.
Untuk menggunakan clamp()
, masukkan tiga nilai: nilai minimum, nilai ideal untuk dihitung, 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 dalam font-size: max(0.5vw, 50%, 2rem)
), dengan
calc()
(seperti dalam font-size: max(calc(0.5vw - 1em), 2rem)
), atau menyusunnya (seperti dalam
font-size: max(min(0.5vw, 1em), 2rem)
).
Berikut adalah beberapa contoh cara menggunakan fungsi ini.
Lebar yang sempurna
Menurut Elemen Gaya Tipografi oleh Robert Bringhurst, "segala sesuatu dari 45 hingga 75 karakter secara luas dianggap sebagai panjang baris yang memuaskan untuk halaman kolom tunggal yang ditetapkan dalam tampilan teks serif dalam ukuran teks".
Untuk memastikan blok teks Anda tetap antara 45 dan 75 karakter, gunakan
unit clamp()
dan ch
(kemajuan karakter
lebar 0:
p {
width: clamp(45ch, 50%, 75ch);
}
Tindakan ini memungkinkan browser menentukan lebar paragraf. Secara {i>default<i}, saya
menetapkan lebarnya 50%. Jika 50% lebih kecil dari 45ch
, kode akan menggunakan 45ch
sebagai lebar, dan jika 50% lebih lebar dari 75ch
, 75ch
akan digunakan.
Anda juga dapat memisahkannya menggunakan min()
atau max()
saja. Jika Anda ingin
elemen selalu memiliki lebar 50%
, dan lebarnya tidak melebihi 75ch
pada layar
yang lebih besar, gunakan width: min(75ch, 50%);
untuk menyetel ukuran maksimum.
Dengan cara yang sama, Anda dapat menetapkan ukuran minimum untuk teks yang dapat dibaca menggunakan fungsi
max()
, seperti pada width: max(45ch, 50%);
. Di sini, browser memilih nilai
mana pun yang lebih besar, yang berarti elemen harus lebih lebar 45ch
atau lebih.
Mengelola padding
Anda juga dapat menggunakan max()
untuk menetapkan ukuran padding minimum. Contoh ini berasal dari
CSS Tricks,
tempat pembaca Caluâ de Lacerda Pataca menyampaikan ide ini: Mengizinkan elemen memiliki
padding tambahan pada ukuran layar yang lebih besar, tetapi pertahankan padding minimum pada ukuran
layar yang lebih kecil. Untuk melakukannya, gunakan calc()
atau max()
, lalu kurangi padding
minimum dari kedua sisi elemen: calc((100vw - var(--contentWidth)) / 2)
,
atau max(2rem, 50vw - var(--contentWidth) / 2)
. Di {i>style sheet<i} Anda, seharusnya terlihat seperti ini:
footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Tipografi yang dapat menyesuaikan
Untuk mengaktifkan tipografi yang mengalir,
Mike Riethmeuller mempopulerkan teknik
yang menggunakan fungsi clamp()
untuk menetapkan ukuran font minimum, ukuran font maksimum,
dan memungkinkan penskalaan antar-ukuran tersebut.
Sebelum clamp(),
mendesain penskalaan font, diperlukan string gaya yang kompleks. Sekarang,
Anda dapat membiarkan browser melakukan pekerjaan untuk Anda. Tetapkan ukuran font minimum yang dapat
diterima (misalnya, 1.5rem
untuk judul), ukuran maksimum (seperti 3rem
), dan
ukuran ideal (seperti 5vw
). Sekarang Anda memiliki tipografi yang diskalakan dengan lebar area pandang
halaman hingga mencapai nilai minimum dan maksimum yang membatasi, dengan
menggunakan sangat sedikit kode:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Referensi lainnya
- Nilai dan Unit CSS di MDN
- Spesifikasi Nilai CSS dan Unit Level 4
- Artikel Trik CSS tentang Lebar Elemen Dalam
- min(), max(), clamp() Ringkasan oleh Ahmad Shadeed
Gambar sampul dari @yer_a_wizard di Unsplash.