Kodcular
Published in

Kodcular

CSS’te Min Max ve Clamp Fonksiyonları

CSS yazarken hayatımızı kolaylaştıran bazı fonksiyonlar var. Bazı durumlarda kullanılan genişlik, font-size gibi değerlerin dinamik olarak hesaplanmasına ihtiyacımız olabiliyor. Örneğin, bir kart sayfada 70% yer kaplasın fakat 300px’den küçük olmasın gibi bir senaryomuz varsa, bu durumda şöyle bir CSS yazılmasını bekleriz;

.card {
width: 70%;
min-width: 300px;
}

CSS min() fonksiyonu bu kodu tek satırda çözmeyi sağlıyor;

.card {
width: min(300px, 70%);
}

Her iki kodda kartın 300px’den küçük olmayacak şekilde bulunduğu kapsayıcıya 70% sığacak şekilde hesaplama yapar. Aynı şeyi max-width değeri içinde kullanıp, kısa yazımını max() fonksiyonu ile kullanabiliriz.

.card {
width: 70%;
max-width: 1000px;
}
.card {
/* Bu kod yukarıdaki kod ile aynı şekilde çalışır. */
width: max(70%, 1000px);
}

Peki her iki özelliği bir arada kullanmak istersek nasıl bir kod yazmalıyız? Aynı örnek üzerinden devam edelim.

Şöyle geliştirmeye ihtiyacımız olsun; kart sayfaya 70% sığsın fakat min 300px, max 1000px’te sınırlandırılsın. Bu durumda clamp() fonksiyonu işi tek satırda çözüyor.

clamp fonksiyonu 3 parametre alıyor; min, value ve max değeri.

.card {
width: 70%;
min-width: 300px;
max-width: 1000px;
}
.card {
/* Bu kod yukarıdaki kod ile aynı şekilde çalışır. */
width: clamp(300px, 70%, 1000px);
}

Bu fonksiyonları sadece width değerinde değil istediğimiz CSS ile kullanabiliriz. Aşağıdaki video’da hem logo hemde yazı font-size’ında clamp fonksiyonundan yararlanılmıştır. Dikkatlice izlerseniz, logo genişliğinin ve font-size’ın sayfa çözünürlüğü değiştiğinde dinamik olarak hesaplanıp belli değerden aşağı inmiyor.

Video’da kullanılan CSS kodları şu şekilde;

.logo {
width: clamp(350px, 75%, 800px);
}
.title {
font-size: clamp(1.5rem, 5vw, 4rem);
}

https://www.youtube.com/watch?v=ROFKG0jacwE&feature=emb_title

Kişisel sitemde clamp fonksiyonunu aktif olarak kullanmaktayım. Herhangi bir başlık yada paragrafın CSS kodlarını incelerseniz değerlerin dinamik olarak hesaplandığını görebilirsiniz.

Tarayıcı desteği konusunda gayet başarılı;

Tarayıcıların CSS min max ve clamp destekleri

Kişisel Blog Sitem: omergulcicek.com

Makaleyi alkışlayarak destek olabilirsiniz 🌹

--

--

“Kodcular, Türkiye’nin En Büyük Medium Yazılım Topluluğudur.” Bu yayın yazılım üzerine üretilen blogların bir araya geldiği bir Türkçe yayındır.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store