CSS’de “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. Hesaplamalar kafamızı karıştırmaya başlaığı noktada imdadımıza calc() fonksiyonu yetişir.
“Calc()” Fonksiyonu
CSS calc() fonksiyonu, bizi farklı birimlerde verilmiş ölçüler arasında yapılacak hesaplama işlerinin zahmetinden kurtarır. Örneğin, bir div’in genişliğini ekranın yarısından 20 piksel daha az yapmak istediğimizi düşünelim. Bu durumda hesaplamalarla boğuşma yerine aşağıdaki gibi bir kod yazabiliriz:
div {
width: calc(50% - 20px);
}
Bunun yanı sıra; toplama, çıkarma, çarpma ve bölme gibi çeşitli matematiksel işlemleri de yapabiliriz. Bakınız:
div {
width: calc(100% - 40px);
margin: calc(50px + 10px);
font-size: calc(1rem * 2);
}
❗ Ancak, işlemleri yaparken ilgili operatörlerin (+, -, *, / işaretlerinin) etrafında boşluk bırakılması gerekmektedir. Aksi takdirde hata verecektir. Bakınız:
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() fonksiyonu, geniş bir kullanım alanına sahiptir ve farklı tasarım ihtiyaçlarına çözüm sunar. Ancak bazı CSS özellikleri, bu fonksiyonun sağladığı esneklik ve uygulanabilirlik avantajı nedeniyle daha sık tercih edilir. Bakınız:
- width
- height
- margin
- padding
- font-size
- background-position
- grid-template-columns
- grid-template-rows
- flex-basis
- top, right, bottom, left
.example {
/* 1. Elementin genişliği, ebeveyn genişliğinin %100'ünden 20px çıkarılarak ayarlanır. */
width: calc(100% - 20px);
/* 2. Elementin yüksekliği, ebeveyn yüksekliğinin %50'sine 10px eklenerek ayarlanır. */
height: calc(50% + 10px);
/* 3. Dış boşluk (margin), 1rem'den %2 daha fazla olacak şekilde hesaplanır. */
margin: calc(1rem + 2%);
/* 4. İç dolgu (padding), 10px'e %1 eklenerek dinamik hale getirilmiştir. */
padding: calc(10px + 1%);
/* 5. Font boyutu, 1rem ile ekran genişliğinin %1'inin toplamına göre ayarlanır. */
font-size: calc(1rem + 1vw);
/* 6. Arkaplan resmi, yatayda merkeze hizalanmış ve 10px sağa kaydırılmıştır. */
background-position: calc(50% + 10px);
/* 7. Grid düzeninde, ikinci sütunun genişliği 100px + %5'tir. */
grid-template-columns: 1fr calc(100px + 5%);
/* 8. Flex öğesinin temel boyutu, %30'dan 10px eksiktir. */
flex-basis: calc(30% - 10px);
/* 9. Element, yukarıdan %50 ile ortalanmış ve 15px yukarı kaydırılmıştır. */
top: calc(50% - 15px);
}
Yukarıdaki örneğimiz, calc() fonksiyonunun nasıl kullanılacağına dair bir gösterge olarak verilmiştir.
Bir e-ticaret sitesinin ürün listeleme sayfasını düşünün. Her ürün kartı belirli bir genişliğe sahip olsun. Ama bu genişlik ekran boyutuna göre değişiklik gösterecektir. 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() fonksiyonunu kullanarak şu şekilde çözebiliriz:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Ürün Kartları</title>
<style>
/* Ürün listesi düzeni */
.product-list {
display: flex;
flex-wrap: wrap; /* Ürün kartlarını satırlara yayar */
justify-content: space-between; /* Aralarında boşluk bırakır */
gap: 15px;
}
/* Ürün kartları */
.product-card {
box-sizing: border-box;
padding: 10px;
margin-bottom: 20px;
width: calc(25% - 15px); /* 4 ürün yan yana */
text-align: center;
color: white;
font-weight: bold;
border-radius: 8px;
}
/* Özel Renkler */
.product-card:nth-child(1) {
background-color: #FFD700; /* Altın rengi */
}
.product-card:nth-child(2) {
background-color: #FF6347; /* Domates rengi */
}
.product-card:nth-child(3) {
background-color: #8A2BE2; /* Mavi menekşe rengi */
}
.product-card:nth-child(4) {
background-color: #20B2AA; /* Hafif deniz yeşili */
}
/* Ekran genişliği 768px'in altında olduğunda */
@media (max-width: 768px) {
.product-card {
width: calc(100% - 20px); /* Tam genişlikte ürün kutuları */
margin: 0 auto 20px; /* Ortalanmış ürün kartları */
}
}
</style>
</head>
<body>
<h1>Responsive Ürün Kartları</h1>
<div class="product-list">
<div class="product-card">Ürün 1</div>
<div class="product-card">Ürün 2</div>
<div class="product-card">Ürün 3</div>
<div class="product-card">Ürün 4</div>
</div>
</body>
</html>
Ö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, zorlu matematiksel hesaplamalarla hiç uğraşmadan tasarımınızı optimize edebilirsiniz.