Çalıştırılabilir CSS Dokümanları: CSS clamp()

Q: CSS'te clamp() ne işe yarar?

clamp(MIN, PREFERRED, MAX) tercih edilen değeri iki sınırın arasında kaldığı sürece, aksi halde en yakın sınırı kullanır. font-size: clamp(1rem, 4vw, 2rem) viewport genişliğinin %4'ünü takip eder ama asla 1rem'in altına ya da 2rem'in üstüne çıkmaz.

Q: clamp()'te minimum maksimumdan büyükse ne olur?

Minimum kazanır. clamp(3rem, 5vw, 2rem) her zaman 3rem'e çözülür, çünkü clamp() minimumu maksimumdan sonra uygular.

Q: CSS'te min() ile max() arasındaki fark nedir?

min() değerlerinin en küçüğünü döndürür, bu yüzden bir üst sınır gibi davranır: width: min(100%, 600px) asla 600px'ten geniş olmaz. max() en büyüğü döndürür, bu yüzden bir alt sınır gibi davranır: font-size: max(1rem, 2vw) asla 1rem'den küçük olmaz.

Q: clamp() bütün tarayıcılarda destekleniyor mu?

Evet, clamp(), min() ve max() Chrome, Edge, Firefox ve Safari'nin bütün güncel sürümlerinde çalışır ve uzunluk, sayı, yüzde ya da açı alan her özellikte kullanılabilir.

clamp() ne yapar

clamp(MIN, PREFERRED, MAX) üç değer alır ve diğer ikisinin arasında kaldığı sürece ortadakini döndürür. Klasik kullanım, ekranla birlikte büyüyen ama hiç medya sorgusu olmadan makul sınırlarda duran bir başlıktır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    h1 {
      font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
      margin: 0 0 8px;
      color: #111827;
    }
  </style>
</head>
<body>
  <h1>Fluid heading</h1>
  <p id="out"></p>
  <script>
    const show = () => {
      document.getElementById('out').textContent =
        'Preview width ' + innerWidth + 'px, heading font-size ' + getComputedStyle(document.querySelector('h1')).fontSize;
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

Tercih edilen değer 1rem + 3vw: 16px artı genişliğin %3'ü. 800px genişliğindeki bir önizlemede bu 16 + 24 = 40px'tir; 24px (1.5rem) ile 48px (3rem) arasında kaldığı için başlık 40px olur. 320px'lik bir telefonda tercih edilen değer 25,6px'tir. 1067px'in ötesinde 48px'i aşar, bu yüzden 48px'te durur. Sayının değişmesini izlemek için pencereyi yeniden boyutlandır; buradaki vw, önizleme çerçevesinin genişliğinin bir yüzdesidir.

Pencereyi boyutlandırmadan gör

vw viewport'u takip eder ve okurken onu kolayca değiştiremezsin. Container query birimleri ise bir kapsayıcıyı takip eder: cqi, kapsayıcının genişliğinin %1'idir. Kutuyu değiştirmek için kaydırıcıyı sürükle, aynı türden bir clamp() tepki verir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp with a slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box { container-type: inline-size; background: #e5e7eb; padding: 12px; margin-top: 10px; box-sizing: border-box; }
    .title { font-size: clamp(1.25rem, 0.5rem + 6cqi, 2.5rem); font-weight: 700; margin: 0; }
  </style>
</head>
<body>
  <label>box width <input id="w" type="range" min="200" max="760" value="480"></label>
  <div class="box" id="box"><p class="title">Resizable title</p></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    const title = document.querySelector('.title');
    const update = () => {
      box.style.width = document.getElementById('w').value + 'px';
      const size = parseFloat(getComputedStyle(title).fontSize);
      const note = size <= 20 ? ' (at MIN)' : size >= 40 ? ' (at MAX)' : ' (preferred value)';
      document.getElementById('out').textContent = 'box ' + box.offsetWidth + 'px: font-size ' + size.toFixed(1) + 'px' + note;
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

Başa kaydır, başlık 20px'te (MIN) durur. Sona kaydır, 40px'te (MAX) durur. Arada 0.5rem + 6cqi'yi takip eder. Bu, daha küçük bir cetvelle vw sürümüyle aynı mekanizmadır.

Üç argüman

font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
/*               MIN   PREFERRED     MAX    */

Argüman	Rolü	Tipik birim
MIN	değerin olabileceği en küçük hal	`rem`
PREFERRED	ekranla değişen değer	`rem + vw` (ya da `cqi`)
MAX	değerin olabileceği en büyük hal	`rem`

Her argümanın içinde calc() yazmadan matematik çalışır: 1rem + 2vw olduğu gibi yazılabilir. + ve - iki yanında boşluk ister, yoksa bütün bildirim geçersiz olur.

MIN, MAX'tan büyükse MIN kazanır: clamp(3rem, 5vw, 2rem) her zaman 3rem'dir.

Ortadaki değeri hesaplamak

Bir yazıyı 320px'lik bir ekranda 16px'ten 1280px'lik bir ekranda 24px'e büyütmek için:

Eğim: (24 − 16) ÷ (1280 − 320) = 8 ÷ 960 = 0,00833; bu 0.833vw demektir (vw 100px başınadır).
Başlangıç noktası: 16px − 0,00833 × 320px = 13,33px; bu 0.833rem demektir.
Sınırları çevresine koy:

font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);

320px genişlikte bu 13,33 + 2,67 = 16px, 1280px'te 13,33 + 10,67 = 24px verir ve bu aralığın dışında sınırlarda kalır. Çevrim içi "clamp hesaplayıcıları" tam olarak bu aritmetiği yapar.

min() ve max()

clamp() iki basit fonksiyonun birleşimidir:

min(a, b) küçük değeri döndürür, yani bir üst sınır koyar.
max(a, b) büyük değeri döndürür, yani bir alt sınır koyar.
clamp(MIN, VAL, MAX), max(MIN, min(VAL, MAX)) ile aynıdır.

Adlar ilk başta ters gelir: "en fazla 600px" demek için min() kullanırsın.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      width: min(100%, 420px);          /* full width, but at most 420px */
      padding: max(12px, 3%);           /* at least 12px */
      margin-bottom: 10px;
      background: #2563eb;
      color: white;
      box-sizing: border-box;
    }
    .narrow { width: 260px; }
  </style>
</head>
<body>
  <div class="card" id="a">In the full preview</div>
  <div class="narrow"><div class="card" id="b">In a 260px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = ['a', 'b'].map((id) => {
      const el = document.getElementById(id);
      return id + ': width ' + el.offsetWidth + 'px, padding ' + getComputedStyle(el).paddingTop;
    }).join('  |  ');
  </script>
</body>
</html>

Geniş önizlemede ilk kart 420px'te duruyor. 260px'lik ebeveynin içinde 100% küçük değerdir, bu yüzden ikinci kart 260px. max(12px, 3%) ilk karta ebeveyninin genişliğinin %3'ünü veriyor (body: 800px'lik bir önizlemede yaklaşık 23,5px), ikincisine ise 12px, çünkü 260px'in %3'ü (7,8px) tabanın altında.

width: min(100%, 420px), eski width: 100%; max-width: 420px; ikilisinin yerini tek bir bildirimle alır.

Yazı boyutlarının ötesinde: boşluklar ve genişlikler

clamp() uzunluk alan her özellikte çalışır. Ortadaki değerde yüzdeler, bir bileşeni viewport yerine ebeveynine göre akışkan yapar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp spacing</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { background: #e5e7eb; margin-bottom: 10px; }
    .card {
      width: clamp(200px, 80%, 520px);  /* 80% of the parent, within limits */
      padding: clamp(10px, 5%, 32px);   /* % padding is relative to the parent's width */
      box-sizing: border-box;
      background: #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="parent" style="width: 300px"><div class="card">In a 300px parent</div></div>
  <div class="parent" style="width: 760px"><div class="card">In a 760px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.card')]
      .map((c) => c.offsetWidth + 'px wide, padding ' + getComputedStyle(c).paddingTop).join('  |  ');
  </script>
</body>
</html>

300px'lik ebeveynde kart 240px genişliğinde (%80) ve 15px padding'e sahip (300px'in %5'i). 760px'lik ebeveynde %80 608px olurdu, bu yüzden kart 520px'lik maksimumunda duruyor; 760px'in %5'i 38px olduğu için padding de 32px'te duruyor.

Erişilebilirlik: ortadaki değerde rem tut

font-size: 5vw gibi yalnızca vw'den oluşan bir yazı boyutu, okuyucu tarayıcı ayarlarında varsayılan yazı boyutunu büyüttüğünde büyümez; tarayıcı yakınlaştırmasıyla da büyümez, çünkü yakınlaştırma viewport'u CSS pikselleri cinsinden daraltır. Bir rem kısmı (1rem + 2vw) ve rem sınırları eklemek metni okuyucunun ayarına bağlı tutar. rem ve vw'yi birimler sayfası ayrıntılı anlatıyor.

Sık yapılan hatalar

Bir minimum için min() kullanmak. min() küçük değeri seçer, bu da bir üst sınırdır. "En az 12px" için max(12px, ...) kullan.
+ ya da - çevresinde boşluk yok. clamp(1rem, 1rem+2vw, 3rem) geçersizdir ve özellik önceki değerine döner.
Ortada yalnızca vw. Metin bu durumda okuyucunun yazı boyutu ayarını yok sayar. Bir rem terimi ekle.
MIN'in MAX'tan büyük olması. Sonuç her zaman MIN'dir, bu da nadiren kastedilen şeydir.
Yazı boyutları için px cinsinden sınırlar. Metni daha büyük görmesi gereken okuyucular için bile sınırlarlar. rem kullan.

Sıkça Sorulan Sorular

CSS'te clamp() ne işe yarar?

clamp(MIN, PREFERRED, MAX) tercih edilen değeri iki sınırın arasında kaldığı sürece, aksi halde en yakın sınırı kullanır. font-size: clamp(1rem, 4vw, 2rem) viewport genişliğinin %4'ünü takip eder ama asla 1rem'in altına ya da 2rem'in üstüne çıkmaz.

clamp ile esnek bir yazı boyutu nasıl yapılır?

Ortaya viewport tabanlı bir değer, yanlara sabit sınırlar koy ve metin okuyucunun yazı boyutu ayarını hâlâ takip etsin diye ortaya rem karıştır: font-size: clamp(1.5rem, 1rem + 2vw, 3rem);.

clamp()'te minimum maksimumdan büyükse ne olur?

Minimum kazanır. clamp(3rem, 5vw, 2rem) her zaman 3rem'e çözülür, çünkü clamp() minimumu maksimumdan sonra uygular.

CSS'te min() ile max() arasındaki fark nedir?

min() değerlerinin en küçüğünü döndürür, bu yüzden bir üst sınır gibi davranır: width: min(100%, 600px) asla 600px'ten geniş olmaz. max() en büyüğü döndürür, bu yüzden bir alt sınır gibi davranır: font-size: max(1rem, 2vw) asla 1rem'den küçük olmaz.

clamp() bütün tarayıcılarda destekleniyor mu?

Evet, clamp(), min() ve max() Chrome, Edge, Firefox ve Safari'nin bütün güncel sürümlerinde çalışır ve uzunluk, sayı, yüzde ya da açı alan her özellikte kullanılabilir.

İlgili kavramlar