CSS calc(), min(), max() ve clamp(): Matematik Fonksiyonları Rehberi

calc(): dört işlem ve karışık birimler

calc() tek bir ifade alır ve sonucunu özelliğin değeri olarak kullanır. İfadede +, -, * ve / operatörleri kullanılabilir ve olağan işlem önceliği geçerlidir: çarpma ve bölme toplama ve çıkarmadan önce yapılır. Sırayı değiştirmek için parantez kullanabilirsiniz. MDN'ye göre calc() uzunluk, frekans, açı, zaman, yüzde, sayı ve tam sayı değerleriyle çalışır ve her işlenende farklı bir birim kullanabilirsiniz. Birimsiz yazılabilen tek tür <number> türüdür; diğer bütün işlenenlerin px, em ya da % gibi bir birimi olmalıdır.

.afis {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  /* her iki yanda 40px boşluk kalacak şekilde pencere boyunca uzanır */
}

.alan {
  width: calc(2em * 5);
  /* sonuç: 10em */
}

.toplam {
  width: calc(10px + 100px);
  /* sonuç: 110px */
}

calc() en çok yüzde ile sabit bir uzunluğu birleştirmek için kullanılır, çünkü bu hesap ancak tarayıcı yerleşimi yaparken çözülebilir. 100% kapsayıcının genişliğine bağlıdır; 80px sabittir. Kapsayıcı 1000 piksel genişliğindeyse sonuç 1000 - 80 = 920 piksel, 600 piksel ise 600 - 80 = 520 piksel olur. Aynı bildirim her boyutta doğru çalışır.

Boşluk kuralı: + ve - etrafında boşluk zorunludur

calc() ile ilgili en sık hata boşluk eksikliğidir. MDN, + ve - operatörlerinin mutlaka boşlukla çevrelenmesi gerektiğini belirtir. calc(50% -8px) yazdığınızda tarayıcı bunu "bir yüzde ve ardından negatif bir uzunluk" olarak okur; arada operatör olmadığı için ifade geçersizdir ve bildirim yok sayılır. calc(50% - 8px) ise "yüzde, çıkarma operatörü ve uzunluk" olarak doğru okunur. Benzer şekilde calc(8px + -50%), bir uzunluğa negatif bir yüzdenin eklenmesi anlamına gelir. * ve / için boşluk zorunlu değildir, ama tutarlılık için yine de boşluk bırakmanız önerilir.

.dogru {
  width: calc(50% - 8px);
}

.yanlis {
  width: calc(50% -8px);
  /* geçersiz: operatör yok sayılır, bildirim uygulanmaz */
}

Sonuç türü bağlama uymalı

calc() bir değerin yalnızca sayısal kısmının yerine geçemez, değerin tamamının yerine geçmelidir. MDN'nin örneğiyle: calc(100 / 4)% geçersizdir, calc(100% / 4) geçerlidir. Sonucun türü de kullanıldığı özelliğe uymalıdır: margin: calc(1px + 2px) geçerlidir, ama margin: calc(1 + 2) sonuçta margin: 3 yazmakla aynıdır ve birimsiz bir sayı margin için geçerli olmadığından özellik yok sayılır.

Toplama ve çıkarmada iki işlenenin türü tutarlı olmalıdır. Sıradan CSS'te sıfır uzunluğu birimsiz yazabilirsiniz, ama calc() içinde bu geçerli değildir: calc(0px + 20px) çalışır, calc(0 + 20px) geçersizdir. Yüzdeler bağlama göre çözülür; margin-top: calc(50% + 20px) geçerlidir çünkü margin-top yüzdeleri uzunluğa çevirir.

Çarpmada yalnızca bir işlenen birim taşıyabilir: 200px * 4px desteklenmez, çünkü "piksel kare" CSS'te anlamsızdır. Bölmede ise MDN, destekleyen tarayıcıların aynı türden iki birimli değere izin verdiğini belirtir: 200px / 4px birimsiz 50 sonucunu verir. Bu birimsiz sonuç, sayı bekleyen yerlerde kullanılabilir ya da birimli bir değerle çarpılarak başka bir türe çevrilebilir.

Tam sayı beklenen bir yerde calc() ondalıklı bir sayıya çözülürse en yakın tam sayıya yuvarlanır. MDN'ye göre calc(1.4) sonucu 1 olur. Ondalık kısım tam olarak 0,5 ise yuvarlama pozitif sonsuza doğru yapılır: calc(1.5) sonucu 2, calc(-1.5) sonucu -1 olur.

calc() neyi yapamaz?

• auto ve fit-content gibi içsel boyut değerleriyle hesap yapamaz. Bunun için MDN calc-size() fonksiyonunu gösterir.
• Tablo sütunları, satırları ve hücrelerinin genişlik ve yüksekliklerinde yüzde içeren ifadeler auto verilmiş gibi değerlendirilebilir.
• Özellik adlarında ya da seçicilerde kullanılamaz; yalnızca özellik değerlerinde çalışır.

İç içe calc() yazmak serbesttir ve içteki calc() yalnızca parantez gibi işlenir. Bu, değişkenlerle çalışırken özellikle işe yarar. Değişkenlerin içinde calc() zincirlemenin örneği CSS değişkenleri yazısında anlatılıyor. Ayrıca calc() göreli renk sözdiziminde renk kanallarını değiştirmek için de kullanılabilir: lch(from rebeccapurple l c calc(h + 80)); bunun ayrıntıları color-mix() ve göreli renkler yazısında.

min() ve max(): en küçük ve en büyük değer

min() virgülle ayrılmış bir ya da daha fazla ifade alır ve en küçük (en negatif) sonucu değer olarak kullanır. max() ise en büyük (en pozitif) sonucu seçer. Argümanlarda farklı birimler kullanabilir, dört işlemi doğrudan yazabilir, hatta min() ile max() fonksiyonlarını iç içe kullanabilirsiniz. MDN, bu fonksiyonların içindeki ifadelerin tam matematik ifadeleri olduğunu, yani ayrıca calc() yazmanız gerekmediğini belirtir. + ve - etrafındaki boşluk kuralı burada da geçerlidir.

Bu iki fonksiyonun mantığı ilk bakışta ters gelir, çünkü işlevleri adlarının tersini çağrıştırır: min() bir üst sınır koyar, max() bir alt sınır koyar. MDN'nin örneklerini hesaplayarak görelim.

.logo {
  width: min(50vw, 200px);
  /* en fazla 200px; görünüm alanı 400px'ten darsa daha küçük */
}

.pano {
  width: max(20vw, 400px);
  /* en az 400px; görünüm alanı 2000px'ten genişse daha büyük */
}

min(50vw, 200px) için: 1vw görünüm alanı genişliğinin yüzde biridir. Görünüm alanı 1200 piksel ise 50vw = 600 piksel olur; 600 ile 200 arasından küçüğü seçilir ve genişlik 200 piksel olur. Görünüm alanı 300 piksel ise 50vw = 150 piksel olur; 150 ile 200 arasından küçüğü 150'dir. Eşitlik noktası 400 pikseldir, çünkü orada 50vw tam 200 piksele eşittir. Sonuç: Genişlik hiçbir zaman 200 pikseli geçmez, yani min() bir tavan koyar.

max(20vw, 400px) için: 1200 piksellik görünüm alanında 20vw = 240 piksel olur; 240 ile 400 arasından büyüğü seçilir ve genişlik 400 piksel olur. 2500 piksellik alanda 20vw = 500 piksel olur ve 500 seçilir. Eşitlik noktası 2000 pikseldir (20vw = 400 piksel). Sonuç: Genişlik hiçbir zaman 400 pikselin altına düşmez, yani max() bir taban koyar. MDN de max() fonksiyonunu "bir özellik için izin verilen en küçük değeri bulmak" olarak düşünmenizi önerir.

İkiden fazla argüman verebilirsiniz; birden çok kısıtınız varsa hepsi aynı listede karşılaştırılır. MDN'nin erişilebilir yazı boyutu örneği bunu gösterir: font-size: max(4vw, 2em, 2rem) yazı boyutunun en az 2rem olmasını garanti eder, ama geniş ekranlarda 4vw ile büyümesine izin verir.

clamp(): alt ve üst sınır arasında tutmak

clamp() üç argüman alır: en küçük değer, tercih edilen değer ve en büyük değer. Tercih edilen değer iki sınırın arasında kaldığı sürece o kullanılır; alt sınırın altına inerse alt sınır, üst sınırı aşarsa üst sınır kullanılır. MDN çözümlemeyi tek satırla verir: clamp(MIN, VAL, MAX), max(MIN, min(VAL, MAX)) olarak çözülür.

h1 {
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
  /* görünüm alanıyla büyür ama 1.8rem'in altına inmez, 2.8rem'i geçmez */
}

Bu kuralı kök yazı tipi boyutunun 16 piksel olduğunu varsayarak hesaplayalım. Alt sınır 1.8rem = 1,8 x 16 = 28,8 piksel, üst sınır 2.8rem = 2,8 x 16 = 44,8 pikseldir. Tercih edilen değer 2.5vw, görünüm alanının yüzde 2,5'idir.

Formülden çıkan ilginç bir sonuç daha var: max(MIN, min(VAL, MAX)) ifadesinde en dışta max() bulunduğu için, en küçük değer yanlışlıkla en büyük değerden büyük yazılırsa sonuç her zaman en küçük değer olur. Argüman sırası bu yüzden önemlidir: her zaman önce alt sınır, sonra tercih edilen değer, en son üst sınır.

MDN bu fonksiyonların hepsi için erişilebilirlik uyarısı yapar. Yazı boyutunu calc() ile ayarlarken değerlerden biri rem gibi göreli bir birim içermelidir, böylece sayfa yakınlaştırıldığında metin de büyür (font-size: calc(1.5rem + 3vw) gibi). clamp() ile yazı boyutunu sınırlarken en büyük değer, en küçük değerin en az iki katı olan göreli bir birim olmalıdır; böylece metin yakınlaştırmada en az yüzde 200 büyüyebilir. clamp(1rem, 2.5vw, 2rem) bu kurala uyan bir örnektir. Bu önerilerin ortak amacı, kullanıcı sayfayı yakınlaştırdığında metnin de ölçeklenmesini güvenceye almaktır.

Uygulamalı mini örnek: medya sorgusuz akışkan sayfa

MDN'nin karşılaştırma örneği üç fonksiyonu tek sayfada kullanır: Satır uzunluğunu sınırlamak için min(), paragraf yazısı için taban koymak üzere max(), başlık için iki yönlü sınır koymak üzere clamp().

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

body genişliğini iki farklı kapsayıcı genişliği için hesaplayalım. Buradaki yüzde, body öğesinin kapsayıcısının genişliğine göre çözülür. Kapsayıcı genişliği 800 piksel ise 70% = 560 piksel, üzerine 100 eklenince 660 piksel olur; 1000 ile 660 arasından küçüğü 660'tır. Genişlik 1600 piksel ise 70% = 1120 piksel, artı 100 eşittir 1220 piksel; 1000 ile 1220 arasından küçüğü 1000'dir. Yani satırlar dar ekranlarda alana yayılır, geniş ekranlarda okunabilir bir uzunlukta durur. Paragraf yazısı ise 1.2vw değeri 1.2rem'den büyük olmadıkça 1.2rem olarak kalır; kök boyut 16 piksel olduğunda bu sınır 1,2 x 16 = 19,2 piksel, eşitlik noktası da 19,2 / 0,012 = 1600 piksellik görünüm alanıdır.

İleri matematik fonksiyonları

MDN'nin matematik fonksiyonları rehberi, temel dört fonksiyonun çoğu düzen işi için yeterli olduğunu, ancak matematik eğitim içerikleri, 3B görselleştirmeler ya da animasyonlar gibi ileri kullanımlar için başka fonksiyonlar da bulunduğunu belirtir. Bunlar dört grupta toplanır:

• Basamaklı değer fonksiyonları: round() bir değeri seçilen stratejiye göre bir aralığın katına yuvarlar; mod() bölmenin kalanını bölenin işaretiyle, rem() bölünenin işaretiyle döndürür.
• Trigonometrik fonksiyonlar: sin(), cos(), tan(), asin(), acos(), atan() ve atan2().
• Üstel fonksiyonlar: pow(), sqrt(), hypot(), log() ve exp().
• İşaret fonksiyonları: abs() mutlak değeri, sign() işareti (-1, 0 ya da 1) döndürür.

round() fonksiyonunun dört stratejisi vardır: nearest (varsayılan, tam ortadaysa yukarı yuvarlar), up, down ve to-zero. Yuvarlanacak değer bir sayıysa aralık yazılmayabilir ve 1 kabul edilir; birimli bir değerde aralığı yazmak zorunludur. mod() ile rem() arasındaki fark negatif sayılarda ortaya çıkar. MDN'nin hesabıyla mod(21, -4): 21 / -4 = -5,25; aşağı yuvarlanınca -6; -6 x -4 = 24; 21 - 24 = -3. Sonuç bölenin işaretini taşır. rem(27, 5) ise 27 = 5 x 5 + 2 olduğu için 2 döndürür ve bölünenin işaretini taşır.

.izgara-ogesi {
  width: round(var(--genislik), 50px);
  /* --genislik 130px ise en yakın 50px katı: 150px */
}

.donus {
  rotate: mod(100deg, 30deg);
  /* 100 - 3 x 30 = 10deg */
}

.mutlak {
  font-size: abs(var(--yazi-boyutu));
  /* negatif bir değer pozitife çevrilir */
}

Örnekteki round() hesabını kontrol edelim: 130 pikselin altındaki ve üstündeki 50 katları 100 ve 150 pikseldir. 130, 100'e 30, 150'ye 20 uzaklıktadır; en yakın kat 150 olduğu için sonuç 150 pikseldir. MDN, yuvarlanan değer ya da aralık sabit ve bilinen değerlerse round() kullanmanın gereksiz olduğunu, fonksiyonun asıl değerinin özel özelliklerle birlikte ortaya çıktığını belirtir.

Sık yapılan hatalar

• Operatör etrafında boşluk bırakmamak: calc(100%-20px) geçersizdir; calc(100% - 20px) yazın.
• Toplamada birimsiz sıfır: calc(0 + 20px) geçersizdir; 0px yazın.
• Birimi ifadenin dışına yazmak: calc(100 / 4)% geçersizdir; birimi işlenene ekleyin: calc(100% / 4).
• min() ile alt sınır koymaya çalışmak: min() tavan, max() taban koyar. "En az 300px olsun" için max(300px, ...) gerekir.
• clamp() argümanlarını karıştırmak: Sıra her zaman en küçük, tercih edilen, en büyüktür.
• auto ile hesap yapmaya çalışmak: calc(auto - 20px) çalışmaz; içsel boyutlar için calc-size() gerekir.
• Uyumsuz türleri toplamak: calc(10px + 2s) gibi uzunluk ile zamanı toplamak anlamsızdır ve ifade geçersiz olur.

Sık Sorulan Sorular

min() içinde calc() yazmam gerekir mi?

Hayır. min(), max() ve clamp() argümanları tam matematik ifadeleridir; min(1000px, 70% + 100px) yazabilirsiniz. Okunabilirlik için calc() eklemek de geçerlidir, çünkü iç içe calc() parantez gibi işlenir.

calc(100% - 20px) neden çalışmıyor?

En olası neden boşluklardır. Operatörün iki yanında boşluk olduğundan emin olun. Boşluklar doğruysa sonucun türünün özelliğe uyduğunu kontrol edin. Tablo sütunu, satırı ya da hücresi üzerinde çalışıyorsanız MDN'nin belirttiği gibi yüzdeli ifadeler auto verilmiş gibi değerlendirilebilir.

clamp() ile akışkan yazı boyutu erişilebilir mi?

Doğru kurulursa evet. MDN, en büyük değerin en küçük değerin en az iki katı olan göreli bir birim olmasını önerir; böylece kullanıcı sayfayı yakınlaştırdığında metin en az yüzde 200 büyüyebilir. Alt ve üst sınırlarda rem kullanmak bu yüzden iyi bir alışkanlıktır.

calc() renklerle de kullanılabilir mi?

Evet, göreli renk sözdiziminde. lch(from rebeccapurple calc(l + 20) c h) gibi bir ifade, kaynak rengin açıklık kanalını 20 artırır. Renk kanallarının birimsiz sayılara çözüldüğünü ve hesabın bu sayılarla yapıldığını unutmayın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · CSS birimleri: px, em, rem, vw · CSS değişkenleri ve var() · CSS color-mix() ve göreli renkler · CSS grid auto-fill, auto-fit ve minmax() · CSS @media sözdizimi · Sayfa hızı ve Core Web Vitals