Bu fonksiyonun varlığından haberdar değilken küçücük bir css komutunun yaptığı işi javascript ile yapmak için satırlarca kod yazmak zorunda kalıyordum. calc() fonksiyonu hayatımıza CSS3 ile girdi, günümüzde kullanılan tüm tarayıcıların son sürümleri tarafından desteklenmektedir, yanlızca Blackbarry browser için -webkit ön ekini kullanmak zorundayız.

Lafı fazla uzatmadan ne iş yaptığına ve nasıl kullandığına gözatalım.

calc() fonklsiyonu CSS'te matematiksel (toplama, çıkartma, çarpma, bölme) gibi işlemleri yapmamızı sağlar. örnek kullanım için aşağıdaki kodu inceleyebiliriz.

.hede {
    width: calc(3 * 50px);
}

Yukarıdaki örnekte .hede class ının genişliğini 150px yaptık, bu örnek pek kullanışlı değil bunun yerine 150px de yazabilirdik diye düşünenler şimdi hazır olun :)

<div class="sol">sol taraf</div>
<div class="sag">sağ taraf</div>
.sol {
    width: calc(100% - 200px);
    float: left;
    height: 150px;
    background-color: #268580
}
.sag {
    width: 200px;
    float: left;
    height: 150px;
    background-color: #E6E6E6
}

Örneği incelemek için tıklayın

Yukarıdaki örneği eğer javascript ile yazıyor olsaydık sırasıyla yapacaklarımızı yazalım.

  1. Program çalışınca ekranın toplam genişliğini al
  2. Toplam genişlikten 200px çıkart
  3. .sol class ın genişliğini çıkan sonuç kadar yap
  4. Ekran resize ını dinle
  5. Ekranın toplam genişliğini al 
  6. Toplam genişlikten 200px çıkart
  7. .sol class ın genişliğini sonuç kadar yap

Örnekte de gördüğümüz gibi calc() fonksiyonu bizi uzun uzun yazılan js kodundan kurtarıyor, yanlız kullanırken -webkit ön ekini kullanmayı unutmayın, calc() fonksiyonu kullanıyorsanız kodunuzun son hali aşağıdaki gibi olmalıdır.

.hede {
    width: calc(3 * 50px);
    width: -webkit-calc(3 * 50px);
}

Tarayıcı uyumluluk tablosu için tıklayın.