İyi bir CSS düzeni oluşturmak, bir web uygulamasına yerleştirilen her şey için boyut atamakla başlar. En çok istenen özelliklerden biri de her zaman, boyutlandırma birimlerinin bir karışımını kullanarak boyutları belirtebilmek olmuştur. Örneğin, bir alanın% 50'sini ve örneğin 10 piksel gibi sabit bir alanı rezerve edebilmek güzel olurdu. calc() özelliğini kullanarak bunu hemen yapabilirsiniz. Bu özelliği, bir uzunluğun veya sayının kullanıldığı her yerde kullanabilirsiniz. Böylece öğeleri konumlandırmak için veya rgb() renk değerlerinde de kullanabilirsiniz. Böylece, stil sayfalarında pek çok kullanım alanı olur.
calc() ile neler yapabilirsiniz?
calc() özelliği, stil sayfanızda CSS uzunluğu veya numarası olan her yerde kullanılabilir.
Düzeni daha esnek hale getirmeniz için iki ana özellik sunar:
- Yüzdeler ile mutlak değerlerin karıştırılması.
- Boyutlandırma birimlerinin karıştırılması.
Yüzdeleri mutlak birimlerle karıştırma
Yüzdelerin mutlak birimlerle karıştırılmasına ilişkin bir örneğe göz atalım. Kullanılabilir alanın% 50'sini sabit sayıda pikselden çıkarmak istediğimizi varsayalım. Bunu aşağıdaki şekilde yazabiliriz:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Arka plan rengi yeşil olsaydı şu şekilde görünürdü:
Üst boyutu küçültürseniz şöyle görünür:
Buradaki iyi şey, her zaman içeriğin sağ kenarının, kapsayıcı alanın ortasının solunda 100 piksel olacağını bilmemizdir. Web uygulamanızın, farklı değer türlerini bu şekilde birleştirebilmesi, eskisinden çok daha fazla kontrole sahip farklı boyutlardaki cihazlarda düzeni işlemesine olanak tanır.
Karıştırma birimleri
Bir başka mükemmel özellik de nihai bir boyut elde etmek için birimleri farklı ölçülerle birleştirebilme olanağıdır. Örneğin, "em" ve "piksel" birimlerini birlikte kullanarak geçerli yazı tipi boyutuna göre boyutları ayarlayabilirsiniz.
#bar {
height: calc(10em + 3px);
}
Değerleri birleştirmeyle ilgili birkaç başarılı örneği burada ve burada bulabilirsiniz.
Deneyin
calc() ile değerleri eklemek, çıkarmak, çarpmak ve bölmek için +, -, * ve / işaretlerini kullanabilirsiniz. Böylece her türlü olasılığa imkan tanırsınız. CSS uzunluğu veya numarasının kullanılabileceği her yerde calc() kullanabilirsiniz. Ayrıca, yakın zamanda açı ve frekans özellikleri için calc() özelliğini eklemek için de çalışıyoruz. Uzunluklar için calc() özelliği, Chrome 19'da (Yeni geliştirilenler kanalı oluşturma) artık Firefox'ta -moz-calc özelliğini kullanan sürüm 8'den ve Internet Explorer 9 sürümünden itibaren -webkit-calc özelliği kullanılarak kullanılabilmektedir. Aşağıya bir yorum yazarak düşüncelerinizi bize bildirin.