CSS “calc()” Fonksiyonu Kullanımı
CSS ile stilleme yaparken bazen belirli bir öğenin boyutlarını veya pozisyonunu tam olarak istediğimiz gibi ayarlamak için matematiksel hesaplamalara ihtiyaç duyarız. İşte tam da bu noktada calc() fonksiyonu devreye girer.
“calc()” Fonksiyonu
CSS calc() fonksiyonu, bizi farklı birimlerde verilmiş ölçüler arasında yapılacak hesaplama işlerinin zahmetinden kurtarır.
Örnek vermek gerekirse, bir div’in genişliğini ekranın yarısından 20 piksel daha az yapmak istediğimizi düşünelim. Bu durumda aşağıdaki gibi bir kod yazabiliriz:
|
1 2 3 |
div { width: calc(50% - 20px); } |
Bunun yanı sıra, toplama, çıkarma, çarpma ve bölme gibi aritmetik işlemleri de yapabiliriz. Aşağıdaki örnekleri inceleyiniz:
|
1 2 3 4 5 |
div { width: calc(100% - 40px); margin: calc(50px + 10px); font-size: calc(1rem * 2); } |
❗ Ancak, işlemleri yaparken operatörlerin (yani +, -, *, / işaretlerinin) etrafında boşluk bırakılması gerekmektedir. Aksi takdirde hata verecektir. Bakınız:
|
1 2 3 |
div { width: calc(100%-40px); /* Hatalı: '-' işaretinin etrafında boşluk yok. */ } |
Eğer yukarıdaki gibi bir hatalı kullanımı yaparsanız, tarayıcı calc() fonksiyonunu doğru bir şekilde yorumlayamaz ve ilgili öğenin ölçüsü beklediğiniz gibi olmaz. Bu nedenle, calc() fonksiyonunu kullanırken operatörlerin etrafında boşluk olmasına dikkat edilmelidir.
CSS calc() fonksiyonunun kullanımı geniş bir yelpazeye sahiptir, ancak bazı CSS özellikleri ve öğeleri, bu fonksiyonun uygulanabilirliği ve esnekliği nedeniyle onu daha sık kullanmaya daha yatkındır. Bakınız:
- width
- height
- margin
- padding
- font-size
- background-position
- grid-template-columns
- grid-template-rows
- flex-basis
- top, right, bottom, left
|
1 2 3 4 5 6 7 8 9 10 11 |
.example { width: calc(100% - 20px); /* 1. Elementin tam genişliğinden 20px çıkarılmıştır. */ height: calc(50% + 10px); /* 2. Elementin yüksekliği yarıdan 10px arttırılmıştır. */ margin: calc(1rem + 2%); /* 3. Elementin dış boşluğu 1rem'den 2% daha fazladır. */ padding: calc(10px + 1%); /* 4. Elementin iç dolgusu 10px'den 1% daha fazladır. */ font-size: calc(1rem + 1vw); /* 5. Font boyutu, ekran genişliğine göre ölçeklenmektedir. */ background-position: calc(50% + 10px); /* 6. Arkaplan resmi, ortadan 10px sağa kaydırılmıştır. */ grid-template-columns: 1fr calc(100px + 5%); /* 7. İkinci sütun genişliği 100px'den 5% daha geniştir. */ flex-basis: calc(30% - 10px); /* 9. Flex öğesinin temel boyutu, %30'dan 10px eksiktir. */ top: calc(50% - 15px); /* 10. Element, yukarıdan ortalanmış ve 15px yukarı kaydırılmıştır. */ } |
Yukarıdaki örneğimiz, calc() fonksiyonunun nasıl kullanılacağına dair bir gösterge olarak verilmiştir. Normalde tüm bu özelliklerin bir arada kullanılması pek yaygın değildir.
Bir e-ticaret sitesinin ürün listeleme sayfasını düşünün. Her ürün kartı belirli bir genişliğe sahip, ama bu genişlik ekran boyutuna göre değişiklik gösterebilir. Aynı zamanda bu ürün kartları arasında belli bir boşluk bırakmak istiyoruz. Ekran genişliği daraldıkça, sadece 1 ürün kartı gösterilmeli ve bu kartın genişliği, yatay kenar boşlukları dikkate alınarak hesaplanmalıdır. Bu durumu calc() kullanarak şu şekilde çözebiliriz:
See the Pen CSS calc() by 1kodum (@1kodum) on CodePen.
Örneğimizdeki width: calc(25% - 15px); kodunu şu işlemleri yapar:
- İlk olarak, toplam genişliğin %25’ini ele alıyoruz. Yani eğer konteyner (ya da ekran genişliği) 1000px ise, bu değer başlangıçta 250px olacaktır.
- Sonra bu değerden 15px çıkarıyoruz. Yani, eğer başlangıç değeri 250px ise son değer 235px olacaktır.
Özetle, calc() fonksiyonu, CSS içinde dinamik hesaplamalar yaparak tasarımlarımızı daha esnek ve duyarlı kılma olanağı sunar. Bu sayede, karmaşık tasarım ihtiyaçlarını bile kolayca karşılayabiliriz.