CSS calc() Fonksiyonu

Bilmeyenler için css‘de özellikle modern dökümler yaparken çokça kullandığım calc() fonksiyonundan bahsetmek istiyorum..

Nedir?

Css’de matematik hesapları yapmak için kullanılır.. İçerisinde değerler toplanabilir, çıkartılabilir, bölünebilir, çarpılabilinir..

Nerede, Ne İçin Kullanılır?

Aslında kullanım yeri çook fazladır.. Öyle ki bu css fonksiyonunu sonradan keşfetmem bile benim için üzücü oldu 🙂 En basit örnek vermek gerekirse.. Sağ ve Sol adlı iki nesnemiz olsun.. Sağ bölümün genişliği sabit, sol bölümün ise yüzdeli.. Buna göre bu 2 nesneyi kolayca nasıl yanyana getirebiliriz? Elbette cevap belli winked

Birkaç Basit Örnek Kullanımı

div {
    width: calc(100% - 200px); /* 100%'ün 200px küçüğü */
}
a {
    font-size: calc(2 * 15px);
    /* önek kullanımı */
    font-size: -webkit-calc(2 * 15px)
}

Tarayıcı Desteği

Internet Explorer IE9 ve üzerisi için geçerlidir.
Firefox 15.0 sürümünden öncesi için -webkit- öneki ile birlikte kullanılıyor. Ancak 15.0 sonrası için kullanılmasına gerek yok. (Not: Şuanki sürümü 24.0 siz düşünün)
Chrome 25.0 sürümünden öncesi için -webkit- öneki ile birlikte kullanılıyor. Ancak 25.0 sonrası için kullanılmasına gerek yok. (Not: Şuanki sürümü 30.0 siz düşünün)
Safari6.0 ile birlikte kullanılmaya başlanıldı. Ancak -webkit- öneki olmak şartıyla. Şuan 7.0 sürümünde önek olmadan kullanılabilinir.
Opera15.0 sürümü ile birlikte geldi. Önek olmadan kullanılabilinir.
Daha fazla tarayıcı desteği için tıklayın!

Dış Kaynaklar

Şunlarada bakmanızda fayda var;
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
http://www.w3.org/TR/css3-values/#calc

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“CSS calc() Fonksiyonu” üzerine 9 yorum

  1. şuana kadar neden görmemişim ben bu kodu 🙂 Boşuna onlarca hesap vs. uğraşıyorduk 🙁

  2. Uzun zamandır bunu arıyordum.Muhakkak vardır diyordum.
    Responsive'lere rahatça başlayabiliriz artık…

  3. bunu margin-top için kullanmak mümkün değilmi ben hala margin-top değerinde calc fonksiyonu uygulayamadım

  4. matematiksel değer belirttiğiniz her özellikte değer olarak kullanabilirsiniz.

Bir Cevap Yazın

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