CSS3 ile gelen yeni özelliklerden bir tanesi calc. Calc ile css de hesaplamalar yapabilirsiniz. CSS eski sürümlerinde yüzde bir değerden px cinsinden bir değeri çıkarma yapamazsınız. İşte bu noktada CSS3 ile gelen calc yardımınıza koşuyor. Calc, responsive tasarımlar yaparken sıklıkla kullanabileceğiniz bir komuttur.
- %100 – 200 pixels: calc(100% -200px)
- %95 – 47 pixels: calc(95% – 47px)
- 2 * 15 pixels: calc(2 * 15px)
Aşağıda bulunan örneklerdeki gibi kullanabilirsiniz. Calc kullandıktan sonra hesaplama yapılıp değer uygulanacaktır. Aşağıda yanlış kullanımlar gösterilmiştir.
- Sonunda birim yazılmamalıdır. calc(100% – 200px)px
- İşlemler arası boşluk bırakılmalıdır. calc(100%-200px)
Son olarak %70 – 120px genişliğinde bir katman tanımlaması yapalım.
.div { width: calc(70% – 120px); }
