clamp() fonksiyonu, modern CSS'in en güçlü ve kullanışlı araçlarından biri. Responsive tasarımda "fluid but constrained" (akışkan ama sınırlı) değerler oluşturmanıza olanak tanır.

clamp() Nedir?

clamp() üç parametre alır ve ortadaki değeri, minimum ve maksimum sınırlar arasında tutar:

clamp(MIN, PREFERRED, MAX)

Mantık:

• Eğer PREFERRED < MIN ise → MIN kullanılır
• Eğer PREFERRED > MAX ise → MAX kullanılır
• Eğer MIN ≤ PREFERRED ≤ MAX ise → PREFERRED kullanılır

/* Basit örnek */
font-size: clamp(16px, 4vw, 32px);

/* Anlamı:
   - Minimum 16px
   - Tercih edilen: viewport genişliğinin %4'ü
   - Maksimum 32px
*/

clamp() vs min() vs max()

CSS'de üç benzer fonksiyon var, farkları anlamak önemli:

/* max() - En büyük değeri seç */
width: max(300px, 50%);
/* 300px veya %50'den hangisi büyükse onu kullan */

/* min() - En küçük değeri seç */
width: min(500px, 100%);
/* 500px veya %100'den hangisi küçükse onu kullan */

/* clamp() - Aralıkta tut */
width: clamp(300px, 50%, 500px);
/* %50 kullan, ama 300px'den küçük olmasın, 500px'den büyük olmasın */

Pratik Karşılaştırma:

.container {
  /* Sadece max() */
  width: max(320px, 50vw);
  /* Problem: Üst sınır yok, çok büyüyebilir */
  
  /* Sadece min() */
  width: min(1200px, 90vw);
  /* Problem: Alt sınır yok, çok küçülebilir */
  
  /* clamp() - En güvenli */
  width: clamp(320px, 90vw, 1200px);
  /* Perfect: Hem alt hem üst sınır var */
}

Modern Web'de clamp() Kullanım Alanları

1. Fluid Typography (En Popüler Kullanım)

Eski yöntem vs Modern yöntem:

/* ❌ ESKİ YÖNTEM - Media Query Cehenemi */
h1 {
  font-size: 24px;
}

@media (min-width: 640px) {
  h1 { font-size: 32px; }
}

@media (min-width: 768px) {
  h1 { font-size: 40px; }
}

@media (min-width: 1024px) {
  h1 { font-size: 48px; }
}

@media (min-width: 1280px) {
  h1 { font-size: 56px; }
}

/* ✅ MODERN YÖNTEM - Tek Satır */
h1 {
  font-size: clamp(24px, 5vw + 1rem, 56px);
}

Gerçek Dünya Tipografi Sistemi:

/* Typography Scale with clamp() */
:root {
  /* Base */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  
  /* Headings */
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
  --text-5xl: clamp(3rem, 2rem + 5vw, 4rem);
  --text-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
}

body {
  font-size: var(--text-base);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

2. Responsive Spacing (Padding, Margin, Gap)

/* Section spacing */
.section {
  padding-block: clamp(2rem, 5vw, 8rem);
  padding-inline: clamp(1rem, 5vw, 4rem);
}

/* Container padding */
.container {
  padding: clamp(1rem, 2vw + 0.5rem, 3rem);
  gap: clamp(1rem, 3vw, 2rem);
}

/* Grid gap */
.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30vw, 350px), 1fr));
}

Gerçek Dünya Spacing Sistemi:

:root {
  /* Spacing Scale */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.48rem + 0.11vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7rem + 0.22vw, 0.875rem);
  --space-s: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.43rem + 0.33vw, 1.6875rem);
  --space-l: clamp(2rem, 1.91rem + 0.43vw, 2.25rem);
  --space-xl: clamp(3rem, 2.87rem + 0.65vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.83rem + 0.87vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.74rem + 1.3vw, 6.75rem);
  
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.12rem + 0.65vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.37rem + 0.65vw, 0.875rem);
  --space-xs-s: clamp(0.75rem, 0.59rem + 0.76vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.74rem + 1.3vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.17rem + 1.63vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.48rem + 2.61vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.35rem + 3.26vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 2.96rem + 5.22vw, 6.75rem);
}

3. Responsive Width/Height

/* Container genişlikleri */
.container-sm {
  width: clamp(320px, 90vw, 640px);
  margin-inline: auto;
}

.container-md {
  width: clamp(320px, 90vw, 768px);
  margin-inline: auto;
}

.container-lg {
  width: clamp(320px, 90vw, 1024px);
  margin-inline: auto;
}

.container-xl {
  width: clamp(320px, 90vw, 1280px);
  margin-inline: auto;
}

/* Card boyutları */
.card {
  width: clamp(280px, 100%, 400px);
  min-height: clamp(200px, 30vh, 400px);
}

/* Hero yükseklikleri */
.hero {
  min-height: clamp(400px, 70vh, 800px);
}

4. Border Radius

/* Responsive border radius */
.card {
  border-radius: clamp(0.5rem, 1vw, 1.5rem);
}

.button {
  border-radius: clamp(0.25rem, 0.5vw, 0.75rem);
}

/* Pill button */
.pill {
  border-radius: clamp(1rem, 3vw, 3rem);
}

5. Icon ve Image Sizes

/* Responsive icon */
.icon {
  width: clamp(20px, 3vw, 48px);
  height: clamp(20px, 3vw, 48px);
}

/* Logo boyutu */
.logo {
  height: clamp(32px, 5vw, 64px);
  width: auto;
}

/* Avatar */
.avatar {
  width: clamp(40px, 8vw, 80px);
  height: clamp(40px, 8vw, 80px);
  border-radius: 50%;
}

6. Line Height ve Letter Spacing

/* Responsive line height */
body {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: clamp(1.5, 1.4 + 0.2vw, 1.8);
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: clamp(1.1, 1 + 0.5vw, 1.3);
  letter-spacing: clamp(-0.02em, -0.01em + -0.01vw, -0.04em);
}

/* Tracking için */
.heading {
  letter-spacing: clamp(-0.05em, -0.02vw, -0.01em);
}

clamp() Best Practices

✅ YAPMASI GEREKENLER:

/* 1. Accessibility - rem kullan */
font-size: clamp(1rem, 2vw, 2rem); /* ✅ */
font-size: clamp(16px, 2vw, 32px); /* ❌ Zoom'da sorun */

/* 2. Fallback düşün */
.element {
  font-size: 18px; /* Fallback */
  font-size: clamp(1rem, 2vw, 2rem); /* Enhancement */
}

/* 3. CSS custom properties ile */
:root {
  --fluid-text: clamp(1rem, 2vw, 1.5rem);
}
body {
  font-size: var(--fluid-text);
}

/* 4. Mantıklı aralıklar */
font-size: clamp(1rem, 2vw, 2rem); /* ✅ 2x büyüme */
font-size: clamp(1rem, 10vw, 10rem); /* ❌ 10x çok fazla */

/* 5. Viewport + static kombinasyon */
padding: clamp(1rem, 5vw + 1rem, 5rem); /* ✅ Base + fluid */

❌ YAPILMAMASI GEREKENLER:

/* 1. Çok küçük min değerler */
font-size: clamp(0.1rem, 2vw, 2rem); /* ❌ Okunamaz */

/* 2. Viewport-only preferred */
width: clamp(200px, 100vw, 1200px); /* ⚠️ Scrollbar sorunu */
width: clamp(200px, 90vw, 1200px); /* ✅ Daha güvenli */

/* 3. Negative values with vw */
margin: clamp(-2rem, -5vw, -1rem); /* ⚠️ Beklenmedik sonuçlar */

/* 4. Çok karmaşık hesaplamalar */
font-size: clamp(
  calc(1rem + 0.5vw),
  calc(2vw + 1rem + 0.5vh),
  calc(3rem + 1vw - 0.25rem)
); /* ❌ Debug edilemez */

/* 5. Her property için clamp */
.element {
  width: clamp(...);
  height: clamp(...);
  padding: clamp(...);
  margin: clamp(...);
  font-size: clamp(...);
  line-height: clamp(...);
  border-radius: clamp(...);
  /* ❌ Çok fazla, performans sorunu */
}

Browser Support

clamp() desteği çok iyi (2020'den beri):

• Chrome 79+
• Firefox 75+
• Safari 13.1+
• Edge 79+

Özet

clamp() modern web tasarımın vazgeçilmezi:

Avantajları:

• Media query sayısını dramatik azaltır
• Gerçekten fluid responsive tasarım
• Accessibility dostu (doğru kullanıldığında)
• Kod okunabilirliği artırır
• Maintenance kolaylaşır
• Performance iyileşir (daha az media query)

Dikkat Edilmesi Gerekenler:

• rem kullanımına dikkat (accessibility)
• Mantıklı min/max değerler seçin
• Fallback stratejisi düşünün
• Çok karmaşık hesaplamalardan kaçının
• Performance'ı göz önünde bulundurun

clamp() ile artık her ekran boyutu için ayrı CSS yazmak yerine, matematiksel olarak mükemmel, fluid ve responsive tasarımlar oluşturabilirsiniz!