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

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

+, -, * ve / içeren bir ifadeden bir değer hesaplar ve tarayıcının ancak düzen sırasında bildiği birimleri karıştırabilir. width: calc(100% - 200px), ebeveynin genişliği ne olursa olsun ebeveynin tam genişliği eksi 200px'tir.

Q: calc()'ım neden çalışmıyor?

En yaygın neden eksik boşluklardır: + ve - iki yanında boşluk ister, bu yüzden calc(100%-20px) geçersizdir. Diğer nedenler iki uzunluğu çarpmak (10px * 2px) ya da bir uzunluğa bölmektir; bunlar bir uzunluk vermez. Geçersiz bir calc() bütün bildirimi geçersiz yapar, bu yüzden tarayıcı onu yok sayar.

Q: calc() içinde CSS değişkenleri kullanılabilir mi?

Evet. calc(var(--gap) 2) bir değişkeni ikiye katlar, calc(var(--columns) 1px) ise birimsiz bir sayıyı piksele çevirir. Önce değişkenin değeri yerine konur, sonra hesap yapılır.

Q: calc() içinde * ve / çevresinde boşluk gerekir mi?

Hayır. Yalnızca + ve - boşluk ister, çünkü boşluk olmadan -20px negatif bir sayı olarak okunurdu. * ve / çevresindeki boşluklar isteğe bağlıdır, ama her yerde boşluk yazmak akılda tutulması en kolay kuraldır.

Q: calc() ile clamp() arasındaki fark nedir?

calc() bir ifadeden tek bir değer hesaplar. clamp(MIN, VAL, MAX) ise bir değeri iki sınır arasında tutar. İkisi birleşir: clamp()'in her argümanı clamp(1rem, 1rem + 2vw, 3rem) gibi calc tarzı hesap zaten içerebilir.

calc() ne yapar

calc() bir CSS değerinin içinde aritmetik yapar ve ancak düzen sırasında boyut kazanan birimleri karıştırabilir. Klasik durum "tam genişlik eksi sabit bir kenar çubuğu"dur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .layout { background: #e5e7eb; height: 110px; }
    .side { float: left; width: 180px; height: 100%; background: #111827; color: white; }
    .main {
      float: left;
      width: calc(100% - 180px); /* whatever is left next to the sidebar */
      height: 100%;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="layout"><div class="side">180px</div><div class="main" id="m">calc(100% - 180px)</div></div>
  <p id="out"></p>
  <script>
    const m = document.getElementById('m');
    document.getElementById('out').textContent = 'main is ' + m.offsetWidth + 'px of a ' + m.parentElement.offsetWidth + 'px row';
  </script>
</body>
</html>

100% ancak sayfa yerleştirildiğinde bilinir, 180px ise sabittir, bu yüzden tek bir birim bunu ifade edemezdi. calc() bunu hesaplar: 800px genişliğindeki bir önizlemede satır 784px'tir ve ana sütun 604px alır; düzenin altındaki satır gerçek sayıları yazdırır. Bugün flexbox ya da grid bu düzeni hesap yapmadan kurar, ama aynı çıkarma hâlâ her yerde karşına çıkar: bir yükseklik eksi bir başlık, bir genişlik eksi bir boşluk.

Söz dizimi kuralları

width: calc(100% - 2rem);          /* + and - need spaces on both sides */
width: calc(100% / 3);             /* divide by a plain number */
margin: calc(var(--space) * 2);    /* multiply by a plain number */
height: calc(100vh - (64px + 1rem)); /* parentheses group */

Kural	Geçerli	Geçersiz
`+` ve `-` çevresinde boşluk	`calc(100% - 20px)`	`calc(100%-20px)`
`*`: en az bir taraf düz bir sayı	`calc(2 * 1rem)`	`calc(2px * 3px)`
`/`: bir uzunluğu düz bir sayıya böl	`calc(100% / 3)`	`width: calc(300px / 3px)` (uzunluk değil)
Birimler uyumlu olmalı	`calc(1rem + 10px)`	`calc(1rem + 2s)`

Boşluk kuralı, 100% -20px'in ikincisi negatif bir sayı olan iki ayrı değer olarak okunacağı için vardır. Bir calc() geçersiz olduğunda bildirimin tamamı atılır ve element önceki kurallardan gelen değeri korur.

Bir ifade dene

Kutunun genişliği için herhangi bir ifade yaz. Tarayıcı geçerli olup olmadığını ve çözdüğü genişliği bildirir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc tester</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .track { background: #e5e7eb; margin: 10px 0; }
    #box { width: 50%; height: 40px; background: #16a34a; }
  </style>
</head>
<body>
  <label>width: calc(<input id="expr" value="100% - 200px" size="24">)</label>
  <div class="track"><div id="box"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('expr');
    const box = document.getElementById('box');
    const update = () => {
      const value = 'calc(' + input.value + ')';
      const ok = CSS.supports('width', value);
      box.style.width = ok ? value : '';
      document.getElementById('out').textContent = ok
        ? 'valid: ' + box.offsetWidth + 'px of ' + box.parentElement.offsetWidth + 'px'
        : 'invalid: the browser would ignore this declaration';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

100%-200px (geçersiz, boşluk yok), 100% / 3, 50% + 4rem, 2 * 120px, 200px * 2px (geçersiz) ve (100% - 40px) / 2 dene.

CSS değişkenleriyle calc()

Değişkenler ve calc() birlikte çalışır: bir temel değeri bir kez sakla ve geri kalanı ondan türet. Birimsiz bir değişken, bir birimle çarpıldığında bir uzunluğa dönüşür:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc and variables</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    :root { --space: 8px; --cols: 3; }
    .grid {
      display: grid;
      grid-template-columns: repeat(var(--cols), 1fr);
      gap: calc(var(--space) * 2);        /* 16px */
      padding: calc(var(--space) * 3);    /* 24px */
      background: #e5e7eb;
    }
    .grid div {
      height: calc(var(--cols) * 20px);   /* unitless 3 becomes 60px */
      background: #2563eb;
    }
  </style>
</head>
<body>
  <div class="grid"><div></div><div></div><div></div></div>
  <p id="out"></p>
  <script>
    const g = getComputedStyle(document.querySelector('.grid'));
    const cell = getComputedStyle(document.querySelector('.grid div'));
    document.getElementById('out').textContent = 'gap ' + g.columnGap + ', padding ' + g.paddingTop + ', cell height ' + cell.height;
  </script>
</body>
</html>

--space'i 12px ya da --cols'u 4 yap, türetilen her değer takip eder. Tanımlamayı ve kapsamı CSS değişkenleri sayfası anlatıyor.

Yaygın kullanımlar

İhtiyaç	calc()
Sabit bir elementin yanındaki alanı doldurmak	`width: calc(100% - 240px)`
Sabit bir başlığın altındaki bölüm	`min-height: calc(100vh - 64px)`
Genişliğin yarısı eksi boşluğun yarısı	`width: calc(50% - 8px)`
Absolute konumlu 100px'lik bir kutuyu ortalamak	`left: calc(50% - 50px)`
Ekranla biraz büyüyen yazı boyutu	`font-size: calc(1rem + 0.5vw)`
Sayı değişkenini uzunluğa çevirmek	`calc(var(--n) * 1px)`
Bir değişkenin negatifi	`calc(var(--space) * -1)`

Sınırlar arasında kalması gereken bir değer için argümanlarında calc() yazmadan aynı hesabı kabul eden clamp() kullan.

calc() nerede çalışır

Bir uzunluğa, yüzdeye, sayıya, açıya ya da süreye izin verilen her yerde: width, margin, padding, top, font-size, line-height, grid iz boyutları, transition-delay ve transform içindeki açılar. İç içe yazılabilir ve iç içe bir calc() düz parantezlerle aynıdır.

Açılar iyi bir örnektir. Aşağıdaki her çentiğin kendi --i değeri var (0'dan 11'e) ve tek bir kural onu calc(var(--i) * 30deg) ile bir açıya çeviriyor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc angles</title>
  <style>
    .dial { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .tick {
      position: absolute;
      top: 10px;
      left: calc(50% - 2px);          /* center a 4px wide tick */
      width: 4px;
      height: 16px;
      background: #111827;
      transform-origin: 2px 70px;     /* the center of the dial */
      transform: rotate(calc(var(--i) * 30deg));
    }
  </style>
</head>
<body>
  <div class="dial" id="dial"></div>
  <p id="out"></p>
  <script>
    const dial = document.getElementById('dial');
    for (let i = 0; i < 12; i++) dial.insertAdjacentHTML('beforeend', '<div class="tick" style="--i: ' + i + '"></div>');
    document.getElementById('out').textContent = 'tick 3 transform: ' + getComputedStyle(dial.children[3]).transform;
  </script>
</body>
</html>

Üçüncü çentik (--i: 3) rotate(90deg) alıyor ve Chrome bunu matrix(0, 1, -1, 0, 0, 0) matrisi olarak bildiriyor: çeyrek tur. left: calc(50% - 2px), kendi 4px genişliğinin yarısını çıkararak her çentiği ortalıyor.

Sık yapılan hatalar

- ya da + çevresinde boşluk yok. calc(100%-20px) geçersizdir ve yok sayılır.
İki uzunluğu çarpmak. calc(10px * 2px)'in CSS'te bir anlamı yoktur. *'nin bir tarafı düz bir sayı olmalıdır.
Ebeveyn yüksekliği olmadan yüzdelik bir yükseklik için calc() kullanmak. height için calc(100% - 20px), tıpkı height: 100% gibi yüksekliği ayarlı bir ebeveyn ister.
Flexbox ya da grid'in yeteceği yerde calc() kullanmak. Sütunlar için width: calc(33.333% - 10px) kırılgandır; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px hiç hesap gerektirmez.
Bir hata mesajı beklemek. Tarayıcı geçersiz bir calc() için uyarmaz. Elementi geliştirici araçlarında kontrol et: geçersiz bir bildirim üstü çizili gösterilir.

Sıkça Sorulan Sorular

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

+, -, * ve / içeren bir ifadeden bir değer hesaplar ve tarayıcının ancak düzen sırasında bildiği birimleri karıştırabilir. width: calc(100% - 200px), ebeveynin genişliği ne olursa olsun ebeveynin tam genişliği eksi 200px'tir.

calc()'ım neden çalışmıyor?

En yaygın neden eksik boşluklardır: + ve - iki yanında boşluk ister, bu yüzden calc(100%-20px) geçersizdir. Diğer nedenler iki uzunluğu çarpmak (10px * 2px) ya da bir uzunluğa bölmektir; bunlar bir uzunluk vermez. Geçersiz bir calc() bütün bildirimi geçersiz yapar, bu yüzden tarayıcı onu yok sayar.

calc() içinde CSS değişkenleri kullanılabilir mi?

Evet. calc(var(--gap) * 2) bir değişkeni ikiye katlar, calc(var(--columns) * 1px) ise birimsiz bir sayıyı piksele çevirir. Önce değişkenin değeri yerine konur, sonra hesap yapılır.

calc() içinde * ve / çevresinde boşluk gerekir mi?

Hayır. Yalnızca + ve - boşluk ister, çünkü boşluk olmadan -20px negatif bir sayı olarak okunurdu. * ve / çevresindeki boşluklar isteğe bağlıdır, ama her yerde boşluk yazmak akılda tutulması en kolay kuraldır.

calc() ile clamp() arasındaki fark nedir?

calc() bir ifadeden tek bir değer hesaplar. clamp(MIN, VAL, MAX) ise bir değeri iki sınır arasında tutar. İkisi birleşir: clamp()'in her argümanı clamp(1rem, 1rem + 2vw, 3rem) gibi calc tarzı hesap zaten içerebilir.

İlgili kavramlar