calc() fonksiyonu, CSS'te matematiksel hesaplamalar yapmamızı sağlayar. calc() CSS fonksiyonu, modern web tasarımında en çok duyarlı (responsive), esnek (flexible) ve hassas (precise) düzenler oluşturmak amacıyla kullanılır.

• Sabit birimler (px, pt, cm gibi) → viewport değişse bile değişmez. Örneğin calc(100px + 50px) her zaman 150px olur.

• Göreceli birimler (%, vw, vh, em, rem gibi) → viewport veya parent(mesela javascript ile) element boyutu değiştiğinde yeniden hesaplanır.

Temel Sözdizimi

.element {
  width: calc(100% - 50px);
  /*     calc(değer operator değer) */
}

Desteklenen operatörler:

• + (toplama)
• - (çıkarma)
• * (çarpma)
• / (bölme)

Kritik Kurallar

1. Boşluk Kuralları

/* ✅ DOĞRU */
width: calc(100% - 20px);
width: calc(100% + 20px);

/* ❌ YANLIŞ - toplama/çıkarmada boşluk ŞART */
width: calc(100%-20px);
width: calc(100%+20px);

/* ✅ DOĞRU - çarpma/bölmede boşluk opsiyonel */
width: calc(100% / 2);
width: calc(100%/2);
width: calc(2 * 50px);
width: calc(2*50px);

Neden? CSS parser'ı 100%-20px ifadesini tek bir identifier olarak görebilir. Boşluk, operatörü netleştirir.

2. Farklı Birimleri Karıştırma

calc()'ın en güçlü özelliği farklı birimleri bir araya getirebilmesi:

.element {
  /* Yüzde + piksel */
  width: calc(100% - 40px);
  
  /* Viewport + rem */
  height: calc(100vh - 3rem);
  
  /* Em + piksel */
  padding: calc(2em + 10px);
  
  /* Viewport genişliği + px */
  font-size: calc(16px + 1vw);
  
  /* Ch (karakter genişliği) + rem */
  max-width: calc(60ch + 2rem);
}

 

3. Bölme İşleminde Özel Durum

/* ✅ DOĞRU - saf sayı ile bölme */
width: calc(100% / 3);
width: calc(100px / 2);

/* ❌ YANLIŞ - iki birimli değeri bölme */
width: calc(100% / 50%);     /* Geçersiz */
width: calc(100px / 20px);   /* Geçersiz */

/* ✅ DOĞRU - birimli / saf sayı */
width: calc(100% / 3);
padding: calc(2rem / 1.5);

Kural: Bölme işleminde bölen saf sayı olmalı, birim taşımamalı.

 

4. Çarpma İşleminde Özel Durum

/* ✅ DOĞRU */
width: calc(50px * 2);
width: calc(2 * 50px);
width: calc(100% * 0.5);

/* ❌ YANLIŞ - iki birimli değeri çarpma */
width: calc(50px * 20px);    /* Geçersiz */
width: calc(100% * 50%);     /* Geçersiz */

Kural: Çarpma işleminde en az bir değer saf sayı olmalı.

 

Gerçek Dünya Kullanım Senaryoları

1. Layout ve Spacing

/* Sidebar + Content Layout */
.layout {
  display: flex;
}

.sidebar {
  width: 250px;
}

.content {
  width: calc(100% - 250px);
  /* Kalan alanı doldurur */
}

/* Grid ile daha iyi alternatif */
.layout-grid {
  display: grid;
  grid-template-columns: 250px calc(100% - 250px);
  /* veya daha iyi: */
  grid-template-columns: 250px 1fr; /* flex yerine */
}

/* Container padding hariç genişlik */
.container {
  width: 1200px;
  padding: 0 2rem;
}

.inner {
  /* Parent genişliği - (padding * 2) */
  width: calc(100% - 4rem);
  max-width: calc(1200px - 4rem);
}

 

2. Viewport Tabanlı Hesaplamalar

/* Full-height minus header/footer */
.main-content {
  min-height: calc(100vh - 80px - 60px);
  /*           viewport - header - footer */
}

/* Full viewport with safe margins */
.hero {
  height: calc(100vh - 4rem);
  /* Mobile için güvenli alan */
}

/* Dynamic viewport units (dvh) ile */
.modern-hero {
  height: calc(100dvh - 4rem);
  /* Mobil tarayıcı UI'ını dikkate alır */
}

/* Sticky footer pattern */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  /* veya calc ile: */
  min-height: calc(100vh - 80px);
}

 

3. Responsive Typography

/* Fluid typography - basit */
h1 {
  font-size: calc(1.5rem + 2vw);
  /* Base 1.5rem + viewport'a göre büyüme */
}

/* Bounded fluid typography */
h1 {
  font-size: calc(1.5rem + 2vw);
  font-size: clamp(2rem, calc(1.5rem + 2vw), 4rem);
  /* Min 2rem, ideal calc(...), max 4rem */
}

/* Line height calculation */
p {
  font-size: 1rem;
  line-height: calc(1em + 0.5rem);
  /* Em ile rem kombinasyonu - responsive line-height */
}

 

Dinamik Spacing

/* Ekran boyutuna göre artan boşluk */
.section {
  padding-block: calc(2rem + 5vh);
  /* Minimum 2rem + viewport'un %5'i */
  
  padding-inline: calc(1rem + 3vw);
  /* Yanlarda responsive boşluk */
}

/* Modular scale */
.heading-1 { font-size: calc(1rem * 2.5); }      /* 40px */
.heading-2 { font-size: calc(1rem * 2); }        /* 32px */
.heading-3 { font-size: calc(1rem * 1.5); }      /* 24px */
.body { font-size: 1rem; }                       /* 16px */
.small { font-size: calc(1rem * 0.875); }        /* 14px */

Position ve Transform

/* Tam ortalama */
.centered {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 100px);
  /* Daha iyi alternatif: transform */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Offset positioning */
.tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  /* Element'in üstünde, 10px boşlukla */
  left: calc(50% - 75px);
  width: 150px;
}

Custom Properties ile Kombinasyon

:root {
  --header-height: 80px;
  --footer-height: 60px;
  --sidebar-width: 250px;
  --gap: 2rem;
  --container-max: 1200px;
}

.main-content {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  padding: var(--gap);
}

.content-area {
  width: calc(100% - var(--sidebar-width) - var(--gap));
}

.responsive-container {
  width: min(var(--container-max), calc(100% - var(--gap) * 2));
  margin-inline: auto;
}

 

Performans Notları

/* ⚠️ Dikkat - Sürekli hesaplama */
.animated {
  /* Her frame'de hesaplanır */
  width: calc(100% - 20px);
  transition: width 0.3s;
}

/* ✅ Daha iyi - Sabit değer */
:root {
  --dynamic-width: calc(100% - 20px);
}

.animated {
  width: var(--dynamic-width);
  transition: width 0.3s;
}

calc() modern tarayıcılarda çok hızlı, ancak karmaşık hesaplamalar (özellikle animasyonlarda) CPU kullanımını artırabilir.

Kural: Modern layout için flex/grid kullan, calc() ince ayarlar için sakla.

Yaygın Hatalar

/* ❌ Parantez eksik */
width: calc 100% - 20px;

/* ❌ Boşluk eksik */
width: calc(100%-20px);

/* ❌ Birim eksik */
width: calc(100% - 20);

/* ❌ Geçersiz bölme */
width: calc(100% / 50%);

/* ❌ İç içe calc() - gereksiz */
width: calc(calc(100% - 20px) - 10px);

/* ✅ Doğru - tek calc() yeterli */
width: calc(100% - 20px - 10px);
width: calc(100% - 30px);

Özet

calc() fonksiyonu modern CSS'in en pratik araçlarından biri. Farklı birimleri birleştirerek, matematiksel hesaplamalar yaparak, responsive tasarımları kolaylaştırıyor. Özellikle:

• Custom properties ile güçlü
• Container/viewport birimler ile esnek
• min(), max(), clamp() ile kombine edilebilir
• Grid ve flexbox'ı tamamlar (yerini almaz)
• Performansı çok iyi

Modern web'de calc() bilmeden responsive tasarım yapmak neredeyse imkansız!