CSS min(), max(), dan clamp()

Pelajari cara mengontrol ukuran elemen, mempertahankan spasi yang tepat, dan menerapkan tipografi mengalir menggunakan fungsi CSS yang didukung dengan baik ini.

Una Kravets

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, calc(), min(), max(), dan clamp() memungkinkan ekspresi matematika dengan penambahan (+), pengurangan (-), perkalian (*), dan pembagian (/) untuk digunakan sebagai nilai komponen

Nilai CSS dan Unit Level 4

Dukungan browser

min()

Dukungan Browser

  • 79
  • 79
  • 75
  • 11.1

Sumber

max()

Dukungan Browser

  • 79
  • 79
  • 75
  • 11.1

Sumber

clamp()

Dukungan Browser

  • 79
  • 79
  • 75
  • 13.1

Sumber

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 min() memilih nilai minimum dari daftar opsi dalam Demo Codepen ini.

Fungsi max() melakukan hal yang sama untuk nilai maksimum.

Fungsi max() memilih nilai dari daftar opsi dalam Demo Codepen ini.

Untuk menggunakan clamp(), masukkan tiga nilai: nilai minimum, nilai ideal untuk dihitung, dan nilai maksimum.

Fungsi clamp() mempertahankan nilainya di antara nilai minimum dan maksimum yang ditentukan dalam demo Codepen ini.

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.

Gunakan fungsi clamp() untuk menyetel lebar minimum dan maksimum. Lihat Demo di Codepen.

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.

Gunakan fungsi min() untuk menetapkan lebar 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.

Gunakan fungsi max() untuk menetapkan lebar minimum.

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);
}
Menetapkan padding minimum untuk sebuah komponen menggunakan fungsi max(). Lihat Demo di Codepen.

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.

Gunakan clamp() untuk membuat tipografi yang pas. Lihat Demo di Codepen.

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

Gambar sampul dari @yer_a_wizard di Unsplash.