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 .
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)
Safari – 6.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.
Opera – 15.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