Css clamp özelliği nedir?

Clamp, ağustos ayında hayatımıza giren yep yeni bir css fonksiyonu. Internet explorer'ın yavaş yavaş hayatımızdan çekildiği şu günlerde yeni gelen css özelliklerini kullanmaya daha cesaretli oluyor insan. Nedir bu clamp, hangi sorunu çözüyor gelin göz atalım.

Can I use clamp?

Sorun

Responsive bir tipografiye sahip olmak için css media query yazmak ya da fontSize değerini vw olarak vermek gerekiyor. Örneğin;

@media only screen and (max-width: 767px) {
   h1 {
      font-size: 1em;
   }
}

ya da

   h1 {
      font-size: 3vw;
   }

vw birimi, yataydaki ekran boyutunun 100/1'ine denk gelen bir ölçü birimi. Fontsize'a 2 vw'lik bir değer verdiğimizde aşağıdaki gibi bir hesaplamayla karşılaşacağız.

Ekran çözünürlüğümüzü 1366x768 olduğunu düşünelim, 2x1366/100 = 27,32 px boyutunda bir değer elde ediyoruz. Bu ekran genişliğimize göre dinamik olduğu için, değer ekran küçüldükçe değişecektir. Bu her ne kadar da sevimli gözükse de mobil tarafında karınca, büyük ekranlarda ise dev gibi font ile karşılaşabiliyoruz. Peki bu değerlere min/max değer verebildiğimizi düşünürsek?

Clamp

İşte bu noktada clamp devreye giriyor. Clamp fonksiyonu içine üç parametre ister. clamp(MIN, VAL, MAX)

  • Birinci parametre minimum hangi değerde kalacağını belirliyor. Ekran boyutu ne kadar küçülürse küçülsün o boyutta kalcak.
  • İkinci parametre yukarıda belirlediğimiz ortalama vw değeri.
  • Üçüncü parametre tahmin edebildiğiniz üzere maksimum değer. Ekran boyutu ne kadar büyürse büyüsün o değeri aşamıyor. Clamp kullanmıyor olsaydık, font size değeri ekran boyutu ile paralel büyüyor olacaktı.
h1 {
font-size: clamp(1rem, 2.5vw, 2rem); 
 }

Yukarıda gördüğümüz örneğin nasıl bir şeye benzediği gözünüzün önüne geldi mi? Tam olarak aşağıdaki gibi. Ne kadar estetik gözüküyor değil mi?

fluidtext Codepen

Clamp değeri sadece fontsize'a özel bir fonksiyon değil. İhtiyaca göre img ve ya div elementlerinde de kullanılabilir. Görüşmek üzere!

Kaynak:

https://docs.w3cub.com/css/clamp/

You can say hello to me below or you can hire me.