Halaman ini diterjemahkan oleh Cloud Translation API.

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

Pelajari cara mengontrol ukuran elemen, menjaga jarak yang tepat, dan menerapkan tipografi yang lancar menggunakan fungsi CSS yang didukung dengan baik ini.

Una Kravets

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

Dukungan browser

`min()`

Dukungan Browser

Sumber

`max()`

Dukungan Browser

Sumber

`clamp()`

Dukungan Browser

Sumber

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

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

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

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

Fungsi {i>clamp()<i} membuat nilainya berada di antara nilai minimum dan secara maksimal dalam demo Codepen.

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.

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

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.

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

Gunakan fungsi max() untuk menetapkan lebar minimum.

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);
}

Setel padding minimum untuk sebuah komponen menggunakan fungsi max(). Lihat Demo di Codepen.

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.

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

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

Gambar sampul dari @yer_a_wizard aktif Batalkan percikan.