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

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

Una Kravets

Seiring dengan desain responsif yang semakin bernuansa, CSS terus berkembang untuk memberi penulis kontrol yang lebih besar. Fungsi min(), max(), dan clamp(), yang kini didukung di semua browser modern, adalah salah satu alat terbaru dalam membuat pembuatan situs dan aplikasi menjadi lebih dinamis dan responsif. Anda dapat menggunakan fungsi ini untuk mengontrol ukuran dan pengubahan ukuran elemen, mempertahankan jarak antar-elemen, serta membuat tipografi yang fleksibel dan lancar.

Fungsi matematika, calc(), min(), max(), dan clamp() memungkinkan ekspresi matematika dengan penambahan (+), pengurangan (-), perkalian (*), dan pembagian (/) digunakan sebagai nilai komponen

Nilai dan Unit CSS Level 4

Dukungan browser

min()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

max()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

Penggunaan

Anda dapat menggunakan min(), max(), dan clamp() di sisi kanan ekspresi CSS mana pun yang sesuai. Untuk min() dan max(), Anda memberikan daftar argumen nilai, dan browser akan menentukan mana yang terkecil atau terbesar. Misalnya, dalam kasus width: min(1rem, 50%, 10vw), browser menghitung unit relatif mana yang terkecil 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 disusun (seperti dalam font-size: max(min(0.5vw, 1em), 2rem)).

Berikut beberapa contoh cara menggunakan fungsi ini.

Lebar yang sempurna

Menurut The Elements of Typographic Style oleh Robert Bringhurst, "apa pun yang terdiri dari 45 hingga 75 karakter secara luas dianggap sebagai panjang baris yang memuaskan untuk halaman satu kolom yang ditetapkan dalam jenis huruf serif dalam ukuran teks".

Untuk memastikan blok teks Anda tetap memiliki lebar antara 45 dan 75 karakter, gunakan clamp() dan unit ch (lebar karakter 0):

p {
  width: clamp(45ch, 50%, 75ch);
}

Dengan demikian, browser akan menentukan lebar paragraf. Lebarnya ditetapkan ke 50% secara default. Jika 50% lebih kecil dari 45ch, 45ch akan digunakan sebagai lebar, dan jika 50% lebih lebar dari 75ch, 75ch akan digunakan.

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

Anda juga dapat memecahnya hanya menggunakan min() atau max(). Jika Anda ingin elemen selalu memiliki lebar 50%, dan tidak melebihi lebar 75ch di layar yang lebih besar, gunakan width: min(75ch, 50%); untuk menetapkan 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 dalam width: max(45ch, 50%);. Di sini, browser memilih nilai mana pun yang lebih besar, yang berarti elemen harus berukuran 45ch atau lebih lebar.

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 membagikan ide ini: Biarkan 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() dan 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);
}
Tetapkan padding minimum untuk komponen menggunakan fungsi max(). Lihat Demo di Codepen.

Tipografi fluid

Untuk mengaktifkan tipografi fluid, Mike Riethmeuller memopulerkan teknik yang menggunakan fungsi clamp() untuk menetapkan ukuran font minimum, ukuran font maksimum, dan memungkinkan penskalaan di antara ukuran tersebut.

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

Sebelum clamp(),, mendesain penskalaan font memerlukan 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, menggunakan kode yang sangat sedikit:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Referensi lainnya