Menü Kapat

calc() fonksiyonu ile CSS’te matematik

CSS'te basit işlemler yapmaya yarayan calc() fonksiyonu

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.

calc() fonksiyonunu ie8, opera mini ve android tarayıcı 4.3 hariç tüm tarayıcılar destekliyor
calc() fonksiyonunu ie8, opera mini ve android tarayıcı 4.3 hariç tüm tarayıcılar destekliyor

Kaynaklar

Bu yazılar da ilginizi çekebilir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir