--- title: 'CSS Fonksiyonları' source: 'https://academia.sh/tr/kurslar/css-temelleri/css-fonksiyonlari' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:18+00:00' license: 'CC BY-SA 4.0' --- # CSS Fonksiyonları calc ile birim karışımı, min ve max ile sınır koyma, clamp ile aralık kelepçeleme ve bu fonksiyonların ölçek üretiminde birleştirilmesi. Birimler tanımlandı ama hâlâ tek tek sabit değerler yazılıyor. Biçem dosyasında ölçüler elle hesaplanıp yazılmış durumda: `max-width: 70ch`, `padding-inline: 1rem`, `font-size: 2.4414rem`. Bu değerlerden bazıları bir başkasına bağlıdır ve bağ dosyada görünmez. Bu ders hesabı biçem dosyasının içine taşıyan fonksiyonları tanımlar. Kursun son dersidir; sonunda kurs boyunca kurulan biçem dosyası toparlanır. ## Dört Fonksiyon `calc()` — dört işlemle bir uzunluk hesaplar. Farklı birimler karıştırılabilir; çözüm, değerlerin bilindiği aşamada yapılır. `min()` ve `max()` — virgülle ayrılmış değerlerden en küçüğünü ya da en büyüğünü seçer. İkiden çok değer alabilirler. `clamp()` — üç değer alır: en küçük, tercih edilen, en büyük. Tercih edilen değeri iki sınır arasına kelepçeler. ```js // fonksiyon.mjs — calc, min, max ve clamp degerlerinin cozulmesi const px = (v) => +v.toFixed(2); // clamp(en_kucuk, tercih, en_buyuk) = max(en_kucuk, min(tercih, en_buyuk)) const clamp = (k, t, b) => Math.max(k, Math.min(t, b)); console.log("--- clamp: gorus alani genisligine gore yazi boyutu ---"); console.log("font-size: clamp(1rem, 0.75rem + 1.2vw, 1.5rem) (kok 16px)"); for (const vw of [320, 480, 640, 800, 1024, 1440]) { const tercih = 0.75 * 16 + 1.2 * vw / 100; const sonuc = clamp(1 * 16, tercih, 1.5 * 16); const hangisi = sonuc === 16 ? "alt sinir" : sonuc === 24 ? "ust sinir" : "tercih"; console.log(`gorus alani ${String(vw).padStart(4)}px -> tercih ${px(tercih)}px, uygulanan ${px(sonuc)}px (${hangisi})`); } console.log("\n--- calc: farkli birimlerin karisimi ---"); const KAPSAYAN = 640, KOK = 16; const ifadeler = [ ["100% - 2rem", KAPSAYAN - 2 * KOK], ["100% / 3", KAPSAYAN / 3], ["100% / 3 - 16px", KAPSAYAN / 3 - 16], ["50% + 20px", KAPSAYAN * 0.5 + 20], ["2rem * 1.5", 2 * KOK * 1.5], ]; for (const [ifade, sonuc] of ifadeler) { console.log(`calc(${ifade})`.padEnd(24) + `-> ${px(sonuc)}px (kapsayan ${KAPSAYAN}px, kok ${KOK}px)`); } console.log("\n--- min ve max: hangisi sinir koyar ---"); for (const kapsayan of [320, 640, 1200]) { const minSonuc = Math.min(kapsayan * 0.9, 600); const maxSonuc = Math.max(kapsayan * 0.9, 600); console.log(`kapsayan ${String(kapsayan).padStart(4)}px -> min(90%, 600px)=${px(minSonuc)} max(90%, 600px)=${px(maxSonuc)}`); } console.log("\n--- clamp'in min/max ile esdegerligi ---"); for (const t of [10, 16, 20, 24, 30]) { const a = clamp(16, t, 24); const b = Math.max(16, Math.min(t, 24)); console.log(`tercih=${String(t).padStart(2)} -> clamp=${a} max(16,min(t,24))=${b} esit=${a === b}`); } console.log("\n--- ic ice: aralik olcegi ---"); const TABAN = 16; for (const n of [0, 1, 2, 3, 4]) { const deger = TABAN * Math.pow(1.5, n); console.log(`--aralik-${n}: ${px(deger / KOK)}rem = ${px(deger)}px`); } ``` ``` --- clamp: gorus alani genisligine gore yazi boyutu --- font-size: clamp(1rem, 0.75rem + 1.2vw, 1.5rem) (kok 16px) gorus alani 320px -> tercih 15.84px, uygulanan 16px (alt sinir) gorus alani 480px -> tercih 17.76px, uygulanan 17.76px (tercih) gorus alani 640px -> tercih 19.68px, uygulanan 19.68px (tercih) gorus alani 800px -> tercih 21.6px, uygulanan 21.6px (tercih) gorus alani 1024px -> tercih 24.29px, uygulanan 24px (ust sinir) gorus alani 1440px -> tercih 29.28px, uygulanan 24px (ust sinir) --- calc: farkli birimlerin karisimi --- calc(100% - 2rem) -> 608px (kapsayan 640px, kok 16px) calc(100% / 3) -> 213.33px (kapsayan 640px, kok 16px) calc(100% / 3 - 16px) -> 197.33px (kapsayan 640px, kok 16px) calc(50% + 20px) -> 340px (kapsayan 640px, kok 16px) calc(2rem * 1.5) -> 48px (kapsayan 640px, kok 16px) --- min ve max: hangisi sinir koyar --- kapsayan 320px -> min(90%, 600px)=288 max(90%, 600px)=600 kapsayan 640px -> min(90%, 600px)=576 max(90%, 600px)=600 kapsayan 1200px -> min(90%, 600px)=600 max(90%, 600px)=1080 --- clamp'in min/max ile esdegerligi --- tercih=10 -> clamp=16 max(16,min(t,24))=16 esit=true tercih=16 -> clamp=16 max(16,min(t,24))=16 esit=true tercih=20 -> clamp=20 max(16,min(t,24))=20 esit=true tercih=24 -> clamp=24 max(16,min(t,24))=24 esit=true tercih=30 -> clamp=24 max(16,min(t,24))=24 esit=true --- ic ice: aralik olcegi --- --aralik-0: 1rem = 16px --aralik-1: 1.5rem = 24px --aralik-2: 2.25rem = 36px --aralik-3: 3.38rem = 54px --aralik-4: 5.06rem = 81px ``` ## clamp Üç Bölgeli Bir Fonksiyondur İlk blok, `clamp()` fonksiyonunun üç bölgesini gösteriyor. 320 birimlik bir görüntü alanında tercih edilen değer 15,84 piksel hesaplandı ama alt sınırın altında kaldığı için 16 piksel uygulandı. 480'den 800'e kadar tercih edilen değer aralıkta kaldı ve doğrudan kullanıldı. 1024'ten sonra üst sınıra dayandı. Dördüncü blok eşdeğerliği doğruluyor: `clamp(a, t, b)` her zaman `max(a, min(t, b))` sonucunu verir. `clamp()` ayrı bir mekanizma değil, bu bileşimin adıdır. Tercih edilen değerdeki `0.75rem + 1.2vw` yazımı bir kalıptır: sabit bir taban ile görüntü alanına oranlı bir bileşenin toplamı. Sabit bileşen olmadan yalnızca `vw` yazılsaydı, kullanıcı yakınlaştırma yaptığında metin büyümezdi — bir önceki derste anılan sorun. Sabit bileşen bu bağı korur. ## calc Birim Karıştırır İkinci blok `calc()` fonksiyonunun asıl işini gösteriyor: aynı ifadede yüzde, `rem` ve `px` karıştırılabiliyor. Bu, başka türlü yazılamayacak ilişkileri kurar. `calc(100% - 2rem)` — kapsayanı doldur ama iki taban birim boşluk bırak. `calc(100% / 3 - 16px)` — üçte bir genişlik al ve aradaki boşluğu düş. Yazım kurallarında bir ayrıntı vardır: `+` ve `-` işleçlerinin **iki yanında da boşluk zorunludur**. `calc(100%-2rem)` yazımı geçersizdir, çünkü `-2rem` negatif bir sayı olarak okunur. `*` ve `/` için boşluk zorunlu değildir, ama tutarlılık için yazılır. İkinci kısıt: çarpmada işlenenlerden en az biri, bölmede bölen birimsiz bir sayı olmalıdır. İki uzunluk çarpılamaz. `calc()` iç içe yazılabilir ve `var()` çağrılarını da kapsayabilir. Özel özelliklerle birlikte kullanıldığında bir ölçeğin tek bir tabandan türetilmesini sağlar — dördüncü blok bunun sonucunu veriyor. ## min ve max Sınır Koyar Üçüncü blok bir okuma alışkanlığını düzeltiyor. `min()` bir **üst sınır** koyar: verilen değerlerin en küçüğü seçilir, dolayısıyla sonuç hiçbirini aşamaz. `max()` bir **alt sınır** koyar. Adlarla işlevlerin ters gibi görünmesi sık karıştırılan bir noktadır. Çıktıda `min(90%, 600px)` yazımı, kapsayan 1200 birim olduğunda 600'de durdu — yani bir üst sınır işlevi gördü. Bu iki fonksiyonun bir üstünlüğü vardır: `min-width` ve `max-width` gibi ayrı özellikler yazmadan, aynı bildirimin içinde sınır koyarlar. Ayrıca kısayol değerlerinin içinde de kullanılabilirler — `padding: min(5%, 2rem)` yazılabilir, oysa `padding` için bir `max-` özelliği yoktur. ## Kursun Biçem Dosyası Kurs boyunca istasyon sayfasının biçem dosyası adım adım büyüdü. Toparlanmış hâli, bu kursta kurulan bütün kararları taşır: ```css /* istasyon.css — toparlanmış hâl */ /* 1. Taban */ *, *::before, *::after { box-sizing: border-box; } :root { font-size: 100%; } /* 2. Ölçekler */ :root { --ton: 203; --marka-koyu: hsl(var(--ton) 61% 20%); --zemin: hsl(var(--ton) 18% 97%); --cizgi: hsl(207 15% 86%); --metin: hsl(211 29% 16%); --metin-soluk: hsl(211 12% 45%); --uyari: hsl(0 66% 33%); --aralik-0: 1rem; --aralik-1: calc(var(--aralik-0) * 1.5); --aralik-2: calc(var(--aralik-1) * 1.5); --aralik-3: calc(var(--aralik-2) * 1.5); --yazi-govde: clamp(1rem, 0.9rem + 0.35vw, 1.125rem); --yazi-h1: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem); } /* 3. Belge */ body { color: var(--metin); font-family: "Istasyon Sans", system-ui, sans-serif; font-size: var(--yazi-govde); line-height: 1.5; } main { max-width: min(70ch, 100% - var(--aralik-1)); margin-inline: auto; padding-block: var(--aralik-2); } main > * + * { margin-block-start: var(--aralik-0); } main > section { margin-block-start: var(--aralik-3); } /* 4. Künye */ .kunye { padding: var(--aralik-1); margin-block-end: var(--aralik-2); background-color: var(--zemin); border-block-end: 4px solid var(--marka-koyu); } .kunye > :first-child { margin-block-start: 0; } h1 { font-size: var(--yazi-h1); line-height: 1.15; } /* 5. Ölçüm çizelgesi */ .cizelge-sarmalayici { overflow-x: auto; } .olcum-cizelgesi { width: 100%; min-width: 40rem; border-collapse: collapse; } .olcum-cizelgesi th, .olcum-cizelgesi td { padding-block: 0.5rem; padding-inline: 0.75rem; border-block-end: 1px solid var(--cizgi); } .olcum-cizelgesi thead th { position: sticky; z-index: 10; inset-block-start: 0; background-color: var(--zemin); text-transform: uppercase; letter-spacing: 0.04em; } :where(.olcum-cizelgesi) .deger { text-align: end; font-variant-numeric: tabular-nums; } :where(.olcum-cizelgesi) .eksik { color: var(--uyari); } .olcum-cizelgesi tbody tr:nth-child(odd) { background-color: var(--zemin); } /* 6. Konum bölümü */ .konum-bolumu { display: flow-root; } .konum-gorseli { float: inline-start; inline-size: min(200px, 40%); margin-inline-end: var(--aralik-0); margin-block-end: 0.5rem; } .konum-gorseli img { max-width: 100%; height: auto; } .kaynak-notu { clear: both; color: var(--metin-soluk); font-size: 0.875em; } /* 7. Durumlar */ a:focus-visible, input:focus-visible { outline: 3px solid var(--marka-koyu); outline-offset: 2px; } input, select, textarea, button { font: inherit; color: inherit; } input[required] { border-inline-start: 3px solid var(--uyari); } input:invalid { border-color: var(--uyari); } .gorsel-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } ``` Dosya yedi bölüme ayrılmış durumda ve sıra rastgele değil: taban kuralları en üstte, en düşük özgüllükle; bileşen kuralları altta. Basamaklama dersinde kurulan sıra ölçütü, bu düzenin öngörülebilir olmasını sağlar — aynı özgüllükteki bir çakışma her zaman sonra yazılan lehine çözülür. Ölçekler tek bir yerde tanımlı ve birbirinden türetilmiş durumda. `--aralik-1` değeri `--aralik-0` değerine bağlı; taban değiştiğinde bütün aralıklar birlikte değişir. `main` ögesinin genişliği iki kısıtın küçüğü: okunabilir satır uzunluğu ve ekran kenarında bırakılacak boşluk. Bu, kutu boyutlandırma, birim ve fonksiyon derslerinin birleşimidir. ## Özet - `calc()` farklı birimleri aynı ifadede karıştırır; toplama ve çıkarma işleçlerinin iki yanında boşluk zorunludur ve çarpmada en az bir işlenen birimsiz olmalıdır. - `min()` bir üst sınır, `max()` bir alt sınır koyar; adlar işlevlerin tersi gibi görünse de seçilen değer sırasıyla en küçük ve en büyüktür. - `clamp(a, t, b)`, `max(a, min(t, b))` bileşiminin adıdır ve üç bölgeli davranır: tercih edilen değer aralıktaysa kullanılır, dışındaysa ilgili sınıra kelepçelenir. - Ölçeklenen tipografide tercih edilen değer sabit bir taban ile görüntü alanına oranlı bir bileşenin toplamı olarak yazılır; yalnızca görüntü alanı birimi yazmak yakınlaştırma bağını koparır. - Fonksiyonlar özel özelliklerle birleştirildiğinde bir ölçek tek bir tabandan türetilir ve ölçeğin tamamı tek bir değerin değiştirilmesiyle kaydırılır. ## Kurs Kapanışı Bu kurs, Web'in Temelleri ve HTML kursunda kurulan ölçüm istasyonu belgesini biçimlendirdi ve bunu üç katmanda yaptı. Birinci konu **kuralların belgeye nasıl ulaştığını** kurdu: bir bildirimin sözdizimi, seçicinin döndürdüğü küme, çakışmaların basamaklama ve özgüllükle çözümü, değerin kalıtımla ya da başlangıç değeriyle doldurulması. Bu konunun ayırt edici yanı, sorulan her sorunun hesaplanabilir bir yanıtı olmasıydı: özgüllük bir üçlü, basamaklama bir sıralama, kalıtım bir ağaç yürüyüşüdür. İkinci konu **kutuların nasıl ölçüldüğünü ve dizildiğini** kurdu: kutu modelinin aritmetiği, iki boyutlandırma modelinin sayısal farkı, normal akışın kuralları, dış boşluk çökmesi, kaydırma, konumlandırma ve yığılma bağlamı. Buradaki tekrarlanan ders şuydu: bir yerleşim sorunu önce akışın kurallarıyla çözülmeye çalışılır; akıştan çıkaran her bildirim bir bedelle gelir. Üçüncü konu **görsel kararları ölçeğe bağladı**: renk uzayları ve kontrast hesabı, modüler tipografi ölçeği, yazı tipi yükleme davranışı, arka plan katmanları, geçişler, kenarlıklar, birimler ve hesap fonksiyonları. Buradaki ilke, tek tek değerler yerine türetilmiş ölçekler kurmaktı. Kursun kapsamadığı bir şey kaldı: **iki boyutlu düzen**. Bu kursta kutular ya akışta alt alta dizildi ya da kaydırmayla bir kenara itildi. Sütunlar kurmak, kutuları bir ızgaraya yerleştirmek, aralarındaki boşlukları çökmeden vermek ve bütün bunları ekran genişliğine göre uyarlamak ayrı bir modelin işidir. Düzen Sistemleri ve Duyarlı Tasarım kursu bu modeli kurar. Esnek kutu ve ızgara düzenleriyle iki boyutlu yerleşim, içerikten türetilen kesme noktalarıyla duyarlı tasarım ve biçem mimarisinin ölçeklenebilir biçimde düzenlenmesi orada ele alınır. Bu kursta öğrenilen her şey orada da geçerlidir: özgüllük hesabı aynı hesaptır, kutu modeli aynı modeldir, ölçekler aynı ölçeklerdir. Değişen tek şey, kutuların birbirine göre nasıl yerleştirildiğidir.