CSS clamp() ve Akışkan Tipografi Nedir?
Geleneksel yaklaşımda yazı boyutları ve aralıklar çoğunlukla medya sorgularıyla, belirli kırılma noktalarında kademeli olarak değiştirilir. CSS clamp() ise bir değerin alt sınır, tercih edilen ifade ve üst sınır arasında kesintisiz değişmesini sağlar.
Sözdizimi clamp(min, val, max) biçimindedir; MDN'ye göre sonuç max(min, min(val, max)) olarak çözülür. Yani değer alt sınırın altına inmez ve üst sınırı aşmaz. Tercih edilen ifade burada görünüm alanı genişliğine (vw) bağlı doğrusal bir ifadedir.
Doğrusal Enterpolasyon, Sayı Biçimi ve Sınırlar
Belirlediğiniz iki görünüm genişliği ile iki boyut arasındaki ilişki şu formülle çözülür:
- Eğim (Slope): (maxSize - minSize) / (maxViewport - minViewport)
- Kesişim Değeri (Intercept): minSize - (slope * minViewport)
- Görünüm Alanı Oranı: slope * 100vw
Tercih edilen ifade px çıktısında calc(kesişim + oran vw) biçimindedir. rem seçildiğinde min, max ve kesişim kök font değerine bölünür; vw katsayısı değişmez. Negatif kesişim calc(5vw - 10px) gibi yazılır, çift işaret üretilmez.
Sayılar en fazla altı ondalıkla ve bilimsel gösterim olmadan yazılır. Üretilen CSS metni aracın içinde min, orta, max ve bunların dışındaki görünüm genişliklerinde yeniden hesaplanır; tam doğrusal sonuçtan 0,001 px'ten fazla sapıyorsa sonuç verilmez. Girdi sınırları aracın tasarım sınırlarıdır: görünüm genişliği 1 ile 100000 px, boyut 0,01 ile 100000 px, kök font 1 ile 1000 px. Bunların dışındaki değerler ve aşırı büyük katsayılar hata mesajıyla reddedilir.
Ondalık girdi nokta veya virgül kabul eder. Binlik ayırıcı, üstel gösterim ve onaltılık sayı kabul edilmez. Üretilen CSS her zaman nokta kullanır; ekrandaki etiketler ise dilinize göre biçimlenir.
Zoom, Kök Font ve Erişilebilirlik
vw görünüm alanı genişliğine, rem ise kök elemanın font boyutuna göre ölçülür. Yalnızca vw ile boyutlandırılan metin, tarayıcı yakınlaştırmasına rem ile boyutlandırılan metin kadar yanıt vermeyebilir. MDN, clamp() ile metin boyutu verirken en büyük değerin göreli bir birimle ve en küçük değerin en az iki katı olmasını önerir; amaç, sayfa yakınlaştırıldığında metnin en az %200 ölçeğe ulaşabilmesine yardım etmektir. Bu araç çıktının erişilebilirlik gereklerini sınamaz ve sertifikalandırmaz.
Ziyaretçinin kök fontu farklıysa yalnızca rem terimleri ölçeklenir; vw katsayısı aynı kalır. Bu yüzden ifadenin tamamı kök fontla birlikte büyümez ve alt ile üst sınırın devreye girdiği görünüm genişlikleri kayar. Örnek, formüllerden hesaplandı: varsayılan fikstür kök font 16 px iken 320 ve 1280 px'te sınırlara ulaşır, kök font 20 px olduğunda aynı rem çıktısı 400 ve 1600 px'te sınırlara ulaşır.
Yakınlaştırma ve yazı boyutu davranışı tarayıcıya ve ayarlara göre değişir. Çıktıyı kendi sayfanızda tarayıcı yakınlaştırmasını %200 düzeyine çıkararak ve varsayılan yazı boyutunu büyüterek elle deneyin; bu araç sonuç garantisi vermez. Tipografi hiyerarşisi için Arayüzde Tipografi yazısına bakabilirsiniz.
Önizleme ve Tasarım Sisteminde Kullanım
Canlı önizleme bir tasarım yardımcısıdır. Seçtiğiniz simüle edilen genişlik için hesaplanan px değerini kullanır ve rem etiketini girdideki kök fonta göre gösterir; sayfanızın gerçek görünüm alanını veya kök fontunu kullanmaz. Üretilen CSS ayrı bir kutuda kalır.
Çıktıyı doğrudan h1, h2 veya paragraf stillerinde kullanabilir ya da --font-size-hero: clamp(...) gibi özel özellikler olarak tanımlayabilirsiniz. Bu araç yalnızca sayısal alanlardan CSS üretir; serbest CSS veya kod girdisi kabul etmez.
Kaynak ve Kontrol Tarihi
clamp() çözümü ve erişilebilirlik notu 25.10.2026 tarihinde MDN clamp() sayfasıyla kontrol edildi. Örnek değerler (320 ile 1280 px, 16 ile 32 px, kök font 16 px) bir tasarım örneğidir, piyasa verisi değildir.
Sık sorulan sorular
clamp() hangi tarayıcılarda çalışır?
Destek bilgisi için MDN sayfasındaki tarayıcı uyumluluk tablosuna bakın ve hedef tarayıcılarınızda deneyin. Bu sayfa destek konusunda bir vaatte bulunmaz.
Neden px yerine rem tercih edilir?
rem, kök elemanın font boyutuna göre ölçülür; site kök fontu piksel olarak geçersiz kılmıyorsa bu değer tarayıcının varsayılan yazı boyutu ayarını izler. px ise sabit bir boyuttur. Bu bir tasarım tercihidir ve sonuç garantisi vermez.
Kullanıcının kök fontu 16 px dışındaysa ne olur?
Yalnızca rem terimleri ölçeklenir, vw katsayısı değişmez. İfadenin tamamı kök fontla birlikte büyümez ve sınırlara ulaşılan görünüm genişlikleri kayar; varsayılan örnekte kök font 20 px olunca 320 ve 1280 px, 400 ve 1600 px olur.
clamp() yalnızca yazı boyutu için mi kullanılır?
Hayır, uzunluk kabul eden CSS özelliklerinde kullanılabilir. Metin dışındaki kullanımlarda aynı üretici çalışır; yakınlaştırma önerisi ise metin boyutu içindir.
Minimum viewport maksimuma eşit veya büyükse ne olur?
Doğrusal bir aralık oluşmayacağı için araç hata verir. Maksimum görünüm genişliği minimumdan büyük, maksimum boyut ise minimum boyuttan küçük olmayan bir değer olmalıdır.
Hangi girdi sınırları var ve neden?
Bunlar aracın tasarım sınırlarıdır: görünüm genişliği 1 ile 100000 px, boyut 0,01 ile 100000 px, kök font 1 ile 1000 px. Sınırlar dışında kalan veya 0,001 px toleransla doğrulanamayan değerler reddedilir.