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 🌹

--

--

--

Bu yayın yazılım üzerine üretilen blogların bir araya geldiği 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
Ömer Gülçiçek

Ömer Gülçiçek

Frontend Developer

More from Medium

Let’s play with Hyperlinks

5 classes you may not know about in the Tailwind universe

How to Code Swaying Bamboo with CSS🎋

QuantumAlert - A Javascript Alert Library 💙

https://quantumalert.cosmogic.com/