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:

Bunun yanı sıra, toplama, çıkarma, çarpma ve bölme gibi aritmetik işlemleri de yapabiliriz. Aşağıdaki örnekleri inceleyiniz:

❗ Ancak, işlemleri yaparken operatörlerin (yani +, -, *, / işaretlerinin) etrafında boşluk bırakılması gerekmektedir. Aksi takdirde hata verecektir. Bakınız:

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

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.

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu