calc-size() Nedir? Arka Plan Deseni Kesilmeden Yükseklik Ayarlama

calc-size(), auto, fit-content ya da min-content gibi içsel boyut değerleriyle matematik yapmanızı sağlayan bir CSS fonksiyonudur; sıradan calc() bu anahtar kelimeleri kabul etmez. Örneğin height: calc-size(auto, round(up, size, 44px)) yazınca bölüm, içeriğinin doğal yüksekliğini 44 pikselin bir sonraki katına yuvarlar ve tekrar eden arka plan deseni alt kenarda yarım karoyla bitmez.

Teknik, Ahmad Shadeed’in 15 Ekim 2026 tarihli yazısından geliyor. Biz aynı fikri Chromium 141’de kendi demomuzla ölçtük: hangi yuvarlama yönünün kaç piksel kazandırdığını, Firefox ve Safari’de ne olduğunu ve bugün üretimde nasıl güvenle kullanılacağını aşağıda bulacaksınız.

calc-size() nedir, calc()’tan farkı ne?

MDN‘e göre calc-size() iki argüman alır: hesaplamanın üzerine kurulacağı temel değer ve bir hesap ifadesi. İfadenin içinde size anahtar kelimesi, temel değerin o anda hesaplanmış karşılığını temsil eder.

/* Sözdizimi */
calc-size(<temel-değer>, <hesap>)

/* Örnekler (MDN) */
calc-size(fit-content, size / 2)
calc-size(min-content, size + 100px)
calc-size(auto, round(up, size, 50px))

Temel değer	Ne zaman kullanılır
auto	Bloğun normal akıştaki doğal yüksekliği/genişliği
min-content, max-content, fit-content	İçeriğe göre daralan/genişleyen kutular
content	flex-basis ile boyutlanan flex öğeleri
any	Belirsiz bir kesin boyut; bu durumda size kullanılamaz
İç içe calc-size() ya da 300px + 2rem gibi bir ifade	Önceden hesaplanmış bir değerin üzerine ekleme

İki önemli sınır var: bir ifadede yalnızca tek bir içsel boyut kullanılabilir (max-content - min-content geçersizdir) ve ifade içindeki yüzdeler elemanın kendisine değil, kapsayıcı bloğa göre hesaplanır. Chrome ekibi bu yüzden size * 1.5 gibi birimsiz çarpanlar öneriyor.

Arka plan deseni neden alttan kesiliyor?

Tekrar eden bir desenin kutuyu kusursuz doldurması için kutunun yüksekliğinin karo yüksekliğinin tam katı olması gerekir. İçerik yüksekliği metne, font boyutuna ve ekran genişliğine göre değiştiği için bu neredeyse hiç tutmaz. Demomuzda 52×44 piksellik karolu bölümün yüksekliği 150 piksel çıktı; bu 3,41 karo demek, yani son sıra yarıda kesiliyor.

CSS’in klasik araçları sorunu kutuyu değil deseni değiştirerek çözmeye çalışır. MDN’nin background-repeat sayfası bunu açıkça yazıyor: space karoları kesmez ama aralarına boşluk dağıtır; round ise karoları esneterek doldurur ve en-boy oranını bozabilen tek değerdir.

repeat

Son sıra kesilir

Varsayılan davranış. Kutu yüksekliği karonun katı değilse kenardaki karo kırpılır.

space

Boşluk kalır

Yalnızca tam karolar çizilir; artan alan karoların arasına boşluk olarak dağıtılır.

round

Desen esner

Karolar kutuya sığacak şekilde büyür veya küçülür; en-boy oranı bozulabilir.

calc-size() + round()

Kutu desene uyar

Desen olduğu gibi kalır, yükseklik karonun bir sonraki katına yuvarlanır. Şimdilik yalnızca Chromium tabanlı tarayıcılarda.

calc-size() ile yükseklik desene nasıl eşitlenir?

Aşağıdaki adımlar Shadeed’in çözümünü izliyor; her birini Chromium 141’de kendi demomuzda doğruladık.

1. Karo ölçüsünü değişkene alın. Desen görselinin gerçek piksel boyutunu --tile-width ve --tile-height olarak tanımlayıp background-size‘a verin. Değerler görselle eşleşmezse yuvarlama da yanlış kata yapılır.
2. Yüksekliği calc-size() ile yuvarlayın. height: calc-size(auto, round(up, size, var(--tile-height))) içeriğin doğal yüksekliğini alır ve karo yüksekliğinin bir sonraki katına çıkarır. Sonuç auto‘dan küçük olmadığı için pratikte bir min-height gibi davranır.
3. Dolguyu da karoya hizalayın. padding-block: round(up, 1rem, var(--tile-height)) üst ve alt boşluğu tam bir karo yapar; içerik desenin ızgarasına oturur.
4. Yönü seçin. up içeriği asla sıkıştırmaz ama gereğinden uzun kutu verebilir; down fazla yükseklik eklemez ama alt boşluğu daraltır (ayrıntısı bir sonraki bölümde).

.section {
  /* Desen görselinin gerçek boyutuyla aynı olmalı */
  --tile-width: 52px;
  --tile-height: 44px;
  background-image: url("pattern.svg");
  background-size: var(--tile-width) var(--tile-height);
  padding-block: round(up, 1rem, var(--tile-height));
  height: calc-size(auto, round(up, size, var(--tile-height)));
}

Desenin yatayda da tam bitmesini istiyorsanız aynı mantık genişlik için geçerli; demomuzda bölüm genişliğini 468 piksel (9 × 52) yaptık. Karo tabanlı desenleri kendiniz üretiyorsanız Midjourney’nin dikişsiz tile desenleri yazımıza da göz atabilirsiniz.

round(up) mu, round(down) mu?

round() dört strateji tanır: nearest (varsayılan), up, down ve to-zero. Desen için anlamlı olan ilk ikisi. Dolgusu 44 piksele yuvarlanmış demomuzda bölümün doğal yüksekliği 182 piksel (4,14 karo) çıktı; iki yönün sonucu şöyle:

round(up)220 px 5 karo

auto182 px 4,14 karo

round(down)176 px 4 karo

• up: İçerik hiçbir zaman kenara yapışmaz. Bedeli, bazen neredeyse bir karo boyu fazladan boşluk.
• down: Ek boşluk yok, ama kaybedilen yükseklik alt dolgudan gider. Dolgunuz bir karodan azsa içerik kenara dayanabilir.
• Pratik kural: Dolgu en az bir karo ise down güvenle kullanılabilir; değilse up seçin. Shadeed de prensipte down‘u tercih edip sıkışık durumda up‘a dönüyor.

Tarayıcı desteği: Firefox ve Safari’de ne olur?

MDN’nin browser-compat-data veri setinin 15 Ekim 2026 tarihli 8.1.6 sürümüne göre calc-size() yalnızca Chromium tabanlı tarayıcılarda çalışıyor. İçinde kullandığımız round() ise 2024’ten beri tüm büyük tarayıcılarda var.

CHROME · EDGE

calc-size(): 129+

Masaüstü ve Android Chrome 129 sürümünden beri destekliyor; Edge de 129’dan beri.

FIREFOX

calc-size(): yok

Henüz uygulanmadı (Bugzilla 1896734). interpolate-size de yok.

SAFARI · iOS

calc-size(): yok

Henüz uygulanmadı (WebKit 274177). iOS Safari dahil.

round()

Tüm büyük tarayıcılar

Chrome/Edge 125, Firefox 118, Safari 15.4. padding-block yuvarlaması her yerde çalışır.

İyi haber: bu teknik kendiliğinden kademeli iyileştirme. Chrome’un rehberinde belirtildiği gibi, desteklemeyen tarayıcı tanımadığı bildirimi yok sayar ve bir önceki satırdaki değeri kullanır. Sonuç bugünkü durumdan kötü olmaz: Firefox ve Safari’de kutu auto yükseklikte kalır, son sıra eskisi gibi kesilir.

• Chrome/Edge: Tam karolar.
• Firefox/Safari: height: auto, son sıra kesik; düzen bozulmaz.
• Yedek gerekiyorsa: @supports ile yalnızca destekleyen tarayıcıya uygulayın, diğerlerinde background-repeat: space gibi kesilmeyen bir değere düşün.

.section {
  height: auto; /* desteklemeyen tarayıcılar burada kalır */
  background-repeat: space; /* isteğe bağlı: kesik karo yerine boşluk */
}

@supports (height: calc-size(auto, size)) {
  .section {
    background-repeat: repeat;
    height: calc-size(auto, round(up, size, var(--tile-height)));
  }
}

Bu tür “önce bileşenin kendi ölçüsüne bak” yaklaşımı, container query’leri doğru kullanma yazımızdaki mantıkla aynı. Grid ve flex ayraçları için yeni gelen bir başka özellik de gap decorations.

calc-size()’ın bilinen diğer işi: height: auto animasyonu

calc-size() en çok, yıllardır CSS’te yapılamayan height: 0 → height: auto geçişiyle tanındı. Chrome ekibinin 17 Eylül 2024 tarihli rehberine göre hem calc-size() hem de interpolate-size özelliği Chrome 129’la geldi. Yalnızca auto‘ya animasyon gerekiyorsa sayfa genelinde tek satır yeterli:

:root {
  interpolate-size: allow-keywords;
}

Hesap da gerekiyorsa calc-size() devreye girer; MDN’deki örnek width: calc-size(auto, size + 2rem). Bir özellik değerinde calc-size() kullanmak o seçim için interpolate-size: allow-keywords‘u otomatik açar. İki içsel değer (örneğin min-content ile max-content) arasında ise hâlâ animasyon yapılamıyor; uçlardan biri uzunluk ya da yüzde olmalı.

Sık sorulan sorular

CSS calc-size() hangi tarayıcılarda çalışır?

MDN browser-compat-data 8.1.6’ya (15 Ekim 2026) göre Chrome, Edge ve Android için Chrome 129 ve sonrasında çalışır. Firefox ve Safari (iOS dahil) henüz desteklemiyor. Desteklemeyen tarayıcılar bildirimi yok sayar, bu yüzden bir önceki satıra yedek değer yazmak yeterli.

calc() ile calc-size() arasındaki fark nedir?

calc() yalnızca uzunluk, yüzde ve sayılarla çalışır; auto veya fit-content gibi içsel boyut anahtar kelimelerini kabul etmez. calc-size() ilk argümanda bu anahtar kelimelerden birini alır ve ikinci argümanda size ile ona hesap uygular.

Arka plan deseninin alttan kesilmesi nasıl engellenir?

Chromium tabanlı tarayıcılarda height: calc-size(auto, round(up, size, KARO_YÜKSEKLİĞİ)) ile kutu yüksekliğini karonun katına yuvarlayın. Tüm tarayıcılarda çalışan seçenekler background-repeat: space (boşluk bırakır) ve round‘dur (deseni esnetir).

round(up) ve round(down) ne zaman tercih edilmeli?

up içeriği hiç sıkıştırmaz ama kutuyu bir karo boyuna kadar uzatabilir. down fazladan yükseklik eklemez, eksilen yüksekliği alt dolgudan alır. Dolgunuz en az bir karo yüksekliğindeyse down, değilse up daha güvenli.

interpolate-size ile calc-size() aynı şey mi?

Hayır. interpolate-size: allow-keywords yalnızca auto gibi anahtar kelimelere animasyonu açar; değer üzerinde hesap yapmaz. Hesap gerektiğinde (ör. size + 2rem, round()) calc-size() kullanılır ve o seçimde interpolasyonu kendiliğinden açar.

Kaynaklar: Ahmad Shadeed — Fit height to background pattern size with calc-size() · MDN — calc-size() · MDN — round() · MDN — background-repeat · Chrome for Developers — Animate to height: auto · MDN browser-compat-data. Renk tarafında karo deseni tasarlarken OKLCH lightness tuzağı yazımız da işinize yarayabilir.