calc() fonksiyonu, CSS’te basit matematik işlemler yapmaya yarar. Bu işlemler toplama (+), çıkarma (-), çarpma (*) ve bölmedir (/).
İşlem sırası, genel matematik kurallarına göre çarpma, bölme, toplama, çıkarma sıralaması ile olur.
Esnek tasarım uygulamalarında sıkça gündeme gelen calc() fonksiyonunun en kullanışlı tarafı, farklı birimleri bir arada kullanabilmesidir. Böylece, mesela width: 50% - 50px;
gibi bir genişlik yazmamıza imkan verir. Örneklerle anlatmaya çalışayım.
Temel kullanım
.icerik { width: calc(100% - 200px); }
Yukarıdaki örnekte, .icerik
öğesinin genişliği, kendisinin kullanabileceği genişliğin tamamından, yani %100’ünden, 200 piksel daha dar.
Bu durumda, .icerik
öğesi eğer 800 piksel genişliğinde bir alan içindeyse genişliği 600 piksel olacak (800-200=600). Eğer 1200 piksel genişliğinde bir alan içindeyse o zaman 1000 piksel genişliğinde (1200-200=1000) olacak.
Temel sayfa yerleşimi
Bir önceki örnekten yola çıkarak, bir sütun ve içerik bölümünden oluşan temel sayfa yapısını aşağıdaki gibi uygulayabiliriz.
See the Pen calc() fonksiyonu ile iki sütunlu yerleşim. by Emre Başaran (@turzifer) on CodePen.
Burada sağdaki sütunun genişliği sabit, 160px. Ana içerik bölüme ise ekran genişliğine göre değişebiliyor. Gördüğünüz esnek (responsive) kodlama için gayet kullanışlı bir yöntem.
Bu örnekte çıkarma özelliğini kullandık.
Esnek sütunlar
See the Pen Calc() fonksiyonu ile esnek sütunlar by Emre Başaran (@turzifer) on CodePen.
Fonksiyonun esnek kodlamada kullanımına dair bir örnek. Toplam 12 sütundan oluşan bir yapıda, sütun genişliklerini CSS’te hesaplıyoruz. Bu yöntemin bir avantajı, yazdığımız kodun daha anlaşılabilir olması.
Bu örnekte hem çarpma hem de bölme işlemlerini kullandık.
Sadece genişlikle sınırlı değil
Verdiğim örnekler hep genişlik üzerinden gitti ama calc()’ın kullanım alanı elbette ki genişlikle sınırlı değil. Yükseklik, padding, margin, kısacası sayısal değer kullandığınız her yerde calc() kullanabilirsiniz.
Tarayıcı desteği
calc() fonksiyonunun tarayıcı desteği de oldukça iyi.