Generator CSS clamp()

Generator clamp() yang cukup dengan dua ukuran layar

Generator CSS clamp() menerima dua ukuran, satu untuk layar kecil dan satu untuk layar besar, lalu membuat rumus clamp() yang menghubungkan keduanya secara mulus. Misalnya, untuk teks isi yang berukuran 16px pada lebar layar 360px dan 20px pada 1280px, hasilnya adalah font-size: clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem);. Pada layar yang lebih sempit dari 360px ukurannya tetap 16px, pada layar yang lebih lebar dari 1280px ukurannya tetap 20px, dan di antara keduanya ukuran bertambah sebanding dengan lebar layar.

Jika Anda menyeret dua titik pada grafik kemiringan ukuran di atas, rumus langsung berubah. Jika Anda menggeser kursor vertikal, Anda bisa melihat berapa px ukuran yang sebenarnya pada lebar layar itu. Pratinjau di sebelah kanan memperkecil layar dengan lebar tersebut dan menggambar nilai yang dihitung langsung oleh browser sebagai contoh berukuran sebenarnya. Satuan keluaran dapat dipilih antara rem dan px, dan acuannya antara lebar layar (vw) dan lebar kontainer (cqi). Uji pembesaran, yang memeriksa apakah teks tetap mencapai 2× saat diperbesar, dan skala tipografi, yang membuat tingkatan judul dengan rasio yang sama, juga dihitung sekaligus.

Mengapa ukuran dihubungkan dengan clamp()

Jika ukuran diubah dengan media query, nilainya melompat sekaligus pada lebar yang sudah ditentukan. Judul yang berukuran 16px pada 767px tiba-tiba menjadi 28px pada 768px. Pada perangkat yang berada tepat di atas atau di bawah batas itu, teks mudah terlihat terlalu besar atau terlalu kecil dibandingkan layarnya, dan makin banyak batas, makin banyak aturan yang harus dikelola. clamp() menghubungkan nilai minimum dan maksimum dengan garis lurus, sehingga satu aturan cukup untuk semua lebar.

• Judul yang harus kecil di ponsel dan besar di desktop: cocok untuk teks yang selisih ukurannya besar, seperti judul di layar pertama. Namun, jika ukuran maksimum lebih dari 2,5× ukuran minimum, periksa uji pembesaran (lihat 'Pembesaran dan aksesibilitas' di bawah).
• Jarak yang menyesuaikan layar: gap antarkartu atau jarak antarbagian, yaitu nilai yang sebaiknya rapat di layar sempit dan longgar di layar lebar.
• Lebar teks dan padding: untuk width atau padding kotak teks yang ingin tumbuh mengikuti layar lalu berhenti pada ukuran yang ditentukan.
• Jika desain hanya ada dua: bila Anda hanya punya nilai dari desain ponsel dan desain desktop dan layar di antaranya belum ada, masukkan kedua nilai itu apa adanya untuk mengisi bagian tengahnya.
• Jika ukuran komponen berbeda di setiap tempat: jika kartu yang sama dipakai di sidebar dan di area konten utama, lebih tepat memakai lebar kartu daripada lebar layar sebagai acuan. Dalam kasus ini, ganti acuan ke kontainer (cqi).

Cara memakai

1. Klik penggunaan yang paling dekat pada deretan contoh di atas, atau masukkan lebar layar dan ukuran untuk layar kecil dan layar besar. Menyeret dua titik pada grafik mengubah kolom yang sama.
2. Pilih properti (font-size, gap, padding, width), satuan keluaran (rem, px), dan acuan (lebar layar vw, kontainer cqi). Untuk ukuran font, kami menyarankan keluaran rem.
3. Seret kursor vertikal pada grafik atau klik kolom nilai per lebar layar untuk melihat ukuran di ponsel, tablet, laptop, dan monitor. Tombol 'Gerakkan lebar layar' membuat contoh bergerak seolah jendela diperlebar dan dipersempit.
4. Untuk ukuran font, lihat pada uji pembesaran apakah teks mencapai 2× dalam pembesaran 500%. Jika belum memenuhi acuan, ubah ke nilai maksimum atau minimum yang disarankan.
5. Gunakan 'Salin deklarasi' untuk satu baris CSS, 'Salin rumus saja' untuk bagian clamp() saja, dan 'Salin variabel' untuk seluruh skala tipografi. 'Salin tautan' menyimpan pengaturan saat ini di alamat.

Cara menghitung: kemiringan, intersep, koefisien vw

Cari garis lurus yang melalui dua titik (lebar layar kecil w₁, ukuran s₁) dan (lebar layar besar w₂, ukuran s₂), lalu ubah garis itu ke satuan yang dipahami CSS.

• Kemiringan = (s₂ − s₁) ÷ (w₂ − w₁). Ini adalah perubahan ukuran untuk setiap 1px perubahan lebar layar.
• Koefisien vw = kemiringan × 100. Karena 1vw adalah 1% dari lebar layar, nilainya harus dikalikan 100 agar menjadi satuan vw.
• Intersep = s₁ − kemiringan × w₁. Ini nilai saat lebar layar 0, yaitu bagian tetap dari rumus. Untuk keluaran rem, bagi dengan ukuran font root (biasanya 16px).

Untuk 16px pada 360px dan 20px pada 1280px, kemiringannya 4 ÷ 920 = 0.004348, koefisien vw-nya 0.4348vw, dan intersepnya 16 − 0.004348 × 360 = 14.4348px = 0.9022rem. Jika nilai minimum dan maksimum dipasang di kedua sisi, hasilnya clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem). Berikut nilai yang dihasilkan rumus ini pada tiap lebar layar.

Spesifikasi menyatakan bahwa clamp(MIN, VAL, MAX) sama dengan max(MIN, min(VAL, MAX)). Jadi, begitu rumus tengah keluar dari rentang, nilai batas di luarnya menggantikan posisinya. Garis putus-putus pada grafik adalah rumus tengah sebelum dipotong, dan garis tebal adalah nilai yang benar-benar dipakai. Jika ukuran layar besar dimasukkan lebih kecil daripada ukuran layar kecil, hasilnya adalah rumus yang mengecil seiring melebarnya layar, dan alat ini menukar posisi batas menjadi nilai kecil lalu nilai besar.

Nilai yang sering dipakai

Rumus untuk nilai pada deretan contoh, dihitung dengan lebar layar 360px → 1280px dan ukuran font root 16px. Pakai sebagai titik awal, lalu sesuaikan dengan desain Anda.

px atau rem, mana yang dipilih untuk keluaran

Ada dua cara memperbesar teks di browser. Zoom halaman (Ctrl·⌘ dan +) memperbesar semuanya, tetapi sebagai gantinya mempersempit lebar layar yang dilihat CSS. Ukuran font pada pengaturan hanya mengubah ukuran font root, yang menjadi acuan rem. Batas yang ditulis dengan px tidak mengikuti pengaturan ukuran font, dan bagian vw tidak berubah pada kedua cara. Dihitung dengan contoh teks isi (16 → 20px, 360 → 1280px), hasilnya sebagai berikut.

Dengan keluaran rem, pengaturan ukuran font memperbesar teks dengan rasio yang persis sama seperti zoom halaman. Sebabnya, batas dan intersep sama-sama menjadi 2×, dan hanya bagian vw yang tetap. Dengan keluaran px, teks tidak berubah meskipun pengaturan diubah, sehingga pengguna yang memakai font besar tidak merasakan perbedaan apa pun. Untuk ukuran font, pakai rem. Untuk nilai yang tidak boleh mengikuti pengaturan, seperti ketebalan border, px sudah cukup. Jika situs mengubah root menjadi 10px dengan html { font-size: 62.5%; }, isi kolom ukuran font root dengan 10 agar nilai rem benar.

Lebar layar (vw) dan lebar kontainer (cqi)

vw berpatokan pada lebar layar browser, sehingga nilainya tetap sama walaupun kartu dipindahkan ke sidebar yang sempit di layar yang sama. Satuan kontainer cqi adalah 1% dari lebar bagian dalam kontainer terdekat (pada tulisan horizontal, yaitu lebarnya). Jika Anda memberi container-type: inline-size; pada elemen induk dan mengganti acuan alat ini ke kontainer, sumbu horizontal grafik menjadi lebar kontainer, dan cqi menggantikan vw pada rumus.

• CSS Containment 3 menetapkan bahwa jika tidak ada kontainer yang sesuai, cqi dihitung berdasarkan ukuran small viewport. Jika container-type lupa dipasang pada induk, perilakunya mirip acuan lebar layar sehingga kesalahan sulit disadari.
• Menurut CSS Values 4, satuan viewport dihitung dengan anggapan tidak ada scrollbar (kecuali jika scrollbar selalu muncul, seperti pada overflow: scroll). Di lingkungan yang scrollbar-nya memakan tempat, 100vw bisa lebih lebar daripada lebar isi sebenarnya sehingga terjadi limpahan horizontal. Untuk menentukan lebar, cqi atau % lebih aman.
• Satuan kontainer didukung mulai Chrome 105, Firefox 110, dan Safari 16 (lihat tabel dukungan browser di bawah).

Pembesaran dan aksesibilitas: apakah mencapai 2×

Kriteria Keberhasilan 1.4.4 WCAG 2.2 (Resize Text) mensyaratkan bahwa teks dapat diperbesar hingga 200% tanpa teknologi bantu, tanpa kehilangan konten atau fungsi. W3C menyebut kasus ukuran teks yang ditentukan hanya dengan satuan viewport dan tidak membesar saat diperbesar sebagai contoh kegagalan F94. Saat diperbesar, lebar layar CSS menyempit dan bagian vw mengecil, sehingga teks yang dibuat dengan clamp() tidak membesar sebanyak skala pembesarannya.

Maxwell Barvian (Smashing Magazine, 2023) mencatat bahwa pembesaran maksimum browser terbaru adalah 500%, dan merangkum bahwa jika ukuran maksimum tidak lebih dari 2,5× ukuran minimum, teks mencapai 2× dalam pembesaran 500% pada lebar jendela mana pun. Selain aturan itu, alat ini benar-benar menghitung lebar jendela 320~3840px untuk mencari lebar jendela yang paling tidak menguntungkan. Dengan layar kecil tetap 360px dan 16px, layar besar 1280px, dan hanya ukuran maksimum yang diubah, hasilnya sebagai berikut.

Jika hanya melihat pembesaran 200%, contoh teks isi dengan maks ÷ min sebesar 1,25 pun hanya mencapai 1,72× pada jendela 1280px. Agar mencapai 2× pada lebar jendela itu, teks harus diperbesar hingga 239%. Jika Anda harus lolos pemeriksaan yang menuntut tepat 2× pada pembesaran 200%, pertimbangkan untuk mengurangi bagian vw lebih jauh, atau membiarkan ukuran font hanya memakai rem dan memakai clamp() hanya untuk jarak dan padding. Jika kemiringannya besar, seperti pada baris 64px, bahkan ada lebar jendela tempat teks justru mengecil pada pembesaran 200%.

Skala tipografi: tingkatan judul dengan rasio yang sama

Skala tipografi adalah cara membuat tingkatan judul dengan mengalikan ukuran teks isi berulang kali dengan rasio tertentu. Utopia (James Gilyead dan Trys Mudford, 2020) memperkenalkan cara memakai rasio yang berbeda untuk layar kecil dan layar besar, lalu menghubungkan setiap tingkat dengan clamp(). Jika rasio layar besar dibuat lebih besar, selisih antartingkat judul melebar di layar lebar, sedangkan di layar sempit tingkatannya lebih rapat. Alat ini menganggap nilai yang dibuat di atas sebagai tingkat 0, lalu membuat variabel CSS seperti --step-1 dan --step--1.

Makin besar selisih antara rasio layar kecil dan rasio layar besar, makin cepat 'maks ÷ min' pada tingkat atas membesar. Jika rasio 1,2 dan 1,25 dipakai untuk teks isi 16 → 20px, tingkat 5 menjadi 39.81 → 61.04px atau 1,53×, sehingga masih dalam acuan pembesaran. Namun, jika dipakai 1,2 dan 1,5, tingkat 5 menjadi 39.81 → 151.88px atau 3,8×, sehingga melewati acuan. Tanda di sebelah kanan daftar tingkatan adalah hasil perhitungan ulang uji pembesaran untuk setiap tingkat.

Dukungan browser

MDN mengelompokkan clamp() sebagai fitur yang tersedia luas di browser utama sejak Juli 2020 (Baseline Widely available). Draf CSS Values 4 juga mendefinisikan sintaks none pada posisi nilai minimum atau maksimum, tetapi data kompatibilitas MDN belum memiliki entri dukungan untuk sintaks ini, sehingga alat ini tidak memakainya.

Kesalahan yang sering terjadi

• Lupa mengalikan koefisien vw dengan 100: jika kemiringan 0,004348 ditulis apa adanya sebagai 0.004348vw, perubahannya menjadi seperseratus dan nilainya hampir tetap.
• Mengira calc() harus ada di dalam clamp(): ketiga posisi clamp() sudah dapat memuat rumus penjumlahan dan pengurangan, sehingga clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem) sudah cukup. Hasilnya sama meskipun dibungkus calc().
• Menempel rumus rem apa adanya ke situs dengan ukuran font root berbeda: pada situs yang root-nya 10px, 1rem adalah 10px. Ubah kolom ukuran font root ke nilai situs itu, lalu buat ulang.
• Menukar urutan nilai minimum dan maksimum: jika nilai minimum lebih besar daripada nilai maksimum, clamp() memakai nilai minimum. Jika kedua nilai tertukar saat diedit manual, hasilnya terkunci pada satu nilai berapa pun lebar layarnya.
• Menentukan ukuran font hanya dengan vw: font-size: 5vw tidak membesar saat diperbesar dan termasuk contoh kegagalan F94 WCAG. Ganti dengan clamp() yang memiliki intersep rem, lalu periksa uji pembesaran.
• Memakai 100vw untuk lebar: di lingkungan yang scrollbar-nya memakan tempat, muncul scroll horizontal. Untuk nilai maksimum width atau rumus tengah, pertimbangkan % atau cqi.
• Mengunci line-height dengan px: hanya ukuran font yang membesar sementara jarak baris tetap, sehingga baris saling menumpuk. Pakai nilai tanpa satuan seperti line-height: 1.5.

Batasan dan catatan

• Alat ini hanya membuat satu garis lurus yang menghubungkan dua titik. Untuk mengubah kemiringan di tiap rentang, Anda perlu memakai beberapa clamp() bersama media query atau container query.
• Uji pembesaran dihitung dengan cara seperti di Chrome dan Firefox, yaitu lebar layar CSS menyempit sebanyak skala pembesaran saat diperbesar. Artikel Smashing Magazine juga menulis bahwa cara pembesaran di Safari bisa berbeda. Untuk penilaian akhir, perbesar halaman yang sebenarnya dan periksa.
• Perhitungan pengaturan ukuran font mengasumsikan ukuran font html ditentukan dengan % atau rem, atau tidak ditentukan. Pada situs yang mengunci ukuran font html dengan px, rem pun tidak mengikuti pengaturan.
• Jika acuan kontainer dipilih, seluruh layar pratinjau dihitung sebagai kontainer. Nilainya berbeda sesuai padding dan border bagian dalam kontainer yang sebenarnya.
• Angka pada rumus dibulatkan hingga empat angka desimal. Bahkan pada layar 1920px, selisihnya kurang dari 0.01px.
• Font pada pratinjau adalah font standar perangkat ini. Jika pengaturan ukuran font minimum browser aktif, nilai kecil dapat dinaikkan hingga ukuran itu.

Tanggal acuan W3C CSS Values and Units Level 4 (Working Draft 2024-03-12), CSS Containment Level 3 (Working Draft 2022-08-18), WCAG 2.2 Understanding 1.4.4 dan F94, serta data kompatibilitas MDN (browser-compat-data 8.1.6, 2026-10-15) diperiksa pada naskah aslinya pada 2026-10-21. Angka pada tabel dihitung dengan inti perhitungan alat ini.

Sumber

• 01W3C: CSS Values and Units Module Level 4Working Draft 2024-03-12. clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX)), nilai minimum didahulukan jika berbenturan dengan nilai maksimum, satuan viewport dihitung dengan anggapan tidak ada scrollbar
• 02MDN: clamp()Baseline Widely available (Juli 2020), catatan aksesibilitas, kompatibilitas browser Chrome 79, Firefox 75, Safari 13.1
• 03W3C: CSS Containment Module Level 3Working Draft 2022-08-18. §6 satuan kontainer cqw, cqh, cqi, cqb; jika tidak ada kontainer yang sesuai, acuannya ukuran small viewport
• 04MDN: Using container size and style queriesCara memakai container-type dan satuan kontainer; satuan kontainer pada data kompatibilitas: Chrome 105, Firefox 110, Safari 16
• 05W3C WAI: Understanding Success Criterion 1.4.4 Resize TextTeks harus dapat diperbesar hingga 200% tanpa teknologi bantu (AA)
• 06W3C WAI: F94 Failure due to incorrect use of viewport units to resize textTeks yang ditentukan hanya dengan satuan viewport tidak membesar oleh pembesaran atau pengaturan font
• 07Smashing Magazine: Addressing Accessibility Concerns With Using Fluid TypeMaxwell Barvian, 2023-11-07. Acuan pembesaran 500%; lulus jika ukuran maksimum ≤ ukuran minimum × 2,5
• 08Utopia: Designing with fluid type scalesJames Gilyead, 2020-02-01. Skala tipografi fluida dengan rasio berbeda untuk layar kecil dan layar besar

Pertanyaan yang sering diajukan

Alat yang dipakai bersama