Güzel bir CSS düzeni oluşturmak, bir web uygulamasına yerleştirilen tüm öğelere boyut atamayla başlar. Çok istenen özelliklerden biri, beden ölçü birimlerini bir arada kullanarak bedenleri belirtme olanağıydı. Örneğin, bir alanın% 50'sini ve sabit bir alan miktarını (ör. 10 piksel) ayırabilmek iyi olurdu. calc() mülkünü kullanarak bunu hemen yapabilirsiniz. Bu özelliği, uzunluk veya sayı kullanılan her yerde kullanabilirsiniz. Böylece öğeleri konumlandırmak için veya rgb() renk değerlerinde de kullanabilirsiniz. Bu nedenle, stil sayfasında birçok harika kullanım alanı vardır.
calc() işlevini kullanarak neler yapabilirsiniz?
calc() mülkü, stil sayfanızda CSS uzunluğu veya sayının bulunduğu her yerde kullanılabilir.
Bu sayede, sayfa düzenini daha esnek hale getirmek için iki temel özellikten yararlanabilirsiniz:
- Yüzdeleri ve mutlak değerleri karıştırma.
- Boyutlandırma birimlerini karıştırma.
Yüzdeleri mutlak birimlerle karıştırma
Yüzdeleri mutlak birimlerle karıştırmaya dair bir örneğe göz atalım. Mevcut alanın% 50'sini sabit bir piksel miktarından hariç tutarak ayırmak istediğimizi varsayalım. Bu durumda bunu şu şekilde yazabiliriz:
#foo {
width: calc(50% - 100px);
}
<div id=">;foo"Always 100 pixels less than half the avai<labl>e area/div
Arka plan rengi yeşil olsaydı şöyle görünürdü:
Ana boyutu küçülttüyseniz şöyle görünür:
Buradaki güzel nokta, içeriğin sağ kenarının her zaman kapsayıcı alanın ortasının 100 piksel solunda olacağıdır. Farklı değer türlerini bu şekilde birleştirebilmek, web uygulamanızın farklı boyutlardaki cihazlarda düzeni daha önce olduğundan çok daha fazla kontrol sahibi olarak yönetmesine olanak tanır.
Birimleri karıştırma
Bir boyut elde etmek için farklı ölçü birimlerine sahip birimleri birleştirebilmeniz de çok kullanışlıdır. Örneğin, "em" ve "px" birimlerini karıştırarak boyutları mevcut yazı tipi boyutuna göre ayarlayabilirsiniz.
#bar {
height: calc(10em + 3px);
}
Değerleri birleştirmeyle ilgili bazı mükemmel örnekleri burada ve burada bulabilirsiniz.
Deneyin
calc() ile +, -, * ve / kullanarak değerleri ekleyebilir, çıkarabilir, çarpabilir ve bölebilirsiniz. Böylece her türlü olasılığı değerlendirebilirsiniz. calc(), CSS uzunluğu veya sayısının kullanılabileceği her yerde kullanılabilir. Ayrıca açı ve frekans mülkleri için calc() özelliğini yakında eklemek üzere çalışıyoruz. Uzunluklar için calc() mülkü artık Chrome 19'da (geliştirici kanalı derlemesi) -webkit-calc mülkü kullanılarak, Firefox'ta 8 sürümünden beri -moz-calc mülkü kullanılarak ve Internet Explorer'da 9 sürümünden beri ön ek olmadan kullanılabilir. Aşağıda yorum yaparak düşüncelerinizi bizimle paylaşın.