CSS3 calc() işlevi, özellik değerleri üzerinde matematiksel işlemler gerçekleştirmemize izin verir. Örneğin, bir elemanın genişliğine ilişkin statik piksel değerlerini bildirmek yerine, genişliğin iki veya daha fazla sayısal değer eklenmesinin sonucu olduğunu belirtmek için calc() işlevini kullanabiliriz.
|
1 2 3 4 5 |
.foo { width: calc(100px + 50px); } |
Neden CSS calc()?
SASS gibi CSS ön işlemcileri kullandıysanız, yukarıdaki örnek karşılaşmış olabileceğiniz bir şeydir.
|
1 2 3 4 5 6 7 8 9 10 11 |
.foo { width: 100px + 50px; } $width-one: 100px; $width-two: 50px; .bar { width: $width-one + $width-two; } |
Ancak, calc() işlevi iki nedenden dolayı daha iyi bir çözüm sunar. İlk önce farklı birimleri birleştirebiliriz. Spesifik olarak, yüzdeler ve görünüm portları gibi göreceli birimleri piksel gibi mutlak birimlerle karıştırabiliriz. Örneğin, bir piksel değerini yüzde değerinden çıkaracak bir ifade oluşturabiliriz.
|
1 2 3 4 5 |
.foo { width: calc(100% - 50px); } |
Bu örnekte, .foo öğesi her zaman üst genişliğinin% 100’ünden 50 piksel daha küçük bir genişliğe sahip olacaktır.
İkincisi, calc() ile hesaplanan değer, ifadenin sonucu değil, ifadenin kendisidir. CSS ön işlemcileri ile matematiksel ifadeler yaparken, tarayıcıya verilen değer ifadenin sonuç değeridir.
|
1 2 3 4 5 6 7 8 9 10 11 |
// SCSS'de belirtilen değer .foo { width: 100px + 50px; } // Derlenmiş CSS ve tarayıcıda hesaplanan değer .foo { width: 150px; } |
Ancak, calc() ile tarayıcı tarafından ayrıştırılan değer gerçek calc() ifadesidir.
|
1 2 3 4 5 6 7 8 9 10 11 |
// CSS'de belirtilen değer .foo { width: calc(100% - 50px); } // Tarayıcıda hesaplanan değer .foo { width: calc(100% - 50px); } |
Bunun anlamı, tarayıcıdaki değerlerin daha dinamik olabileceği ve görünüm alanı değiştikçe adapte olabileceğidir. Görüntü alanı yüksekliği eksi mutlak bir değere sahip olan bir öğeye sahip olabiliriz ve görüntü alanı değiştikçe adapte olur.
CSS Calc() kullanımı
Calc () işlevi, sayısal özellik değerleriyle toplama, çıkarma, çarpma ve bölme hesaplamalarını yapmak için kullanılabilir. Spesifik olarak, <length>, <frequency>, <angle>, <time>, <number>, ve <integer> veri türleriyle kullanılabilir.
İşte birkaç örnek –
|
1 2 3 4 5 6 7 8 9 |
.foo { width: calc(50vmax + 3rem); padding: calc(1vw + 1em); transform: rotate( calc(1turn + 28deg) ); background: hsl(100, calc(3 * 20%), 40%); font-size: calc(50vw / 3); } |
İç içe calc() kullanımı
calc() işlevleri iç içe geçebilir. Bununla birlikte, iç fonksiyonlar parantez içine alınmış basit ifadeler olarak ele alınacaktır. Örneğin, aşağıdaki iç içe ifadeyi alın –
|
1 2 3 4 5 |
.foo { width: calc( 100% / calc(100px * 2) ); } |
Bu işlevin hesaplanan değeri aşağıdaki gibi olacaktır –
|
1 2 3 4 5 |
.foo { width: calc( 100% / (100px * 2) ); } |
calc() ‘ı bir değer olarak desteklemeyen tarayıcılar için, özellik-değeri ifadesinin tamamı yoksayılır. Bu, destekleyici olmayan tarayıcılar tarafından kullanılacak bir geri dönüş statik değerini kolayca sağlayabileceğimiz anlamına gelir.
|
1 2 3 4 5 6 |
.foo { width: 90%; /* eski tarayıcı uyumluluğu */ width: calc(100% - 50px); } |
CSS calc() özelliğini ne zaman kullanabiliriz?
calc() işlevi çeşitli durumlarda yararlı olabilir.
Örnek 1 – Öğeleri Ortalama
calc() kullanımı bize bir konteynerin içindeki yatay ve dikey olarak yatay elemanların yaşlanma problemine başka bir çözüm sunar. Alt öğenin boyutlarını biliyorsak, tipik bir çözüm, öğeyi yükseklik ve genişliğinin yarısı kaydırmak için negatif kenar boşlukları kullanmaktır;
|
1 2 3 4 5 6 7 8 9 10 |
//varsalım ki .foo 300 yükseklik ve genişlik değerine sahip .foo { position: absolute top: 50%; left: 50%; marging-top: -150px; margin-left: -150px; } |
calc() işlevini kullanarak tüm bunları yalnızca üst ve sol özelliklerde kullanarak başarabiliriz.
|
1 2 3 4 5 6 7 |
.foo { position: absolute top: calc(50% - 150px); left: calc(50% - 150px); } |
Flexbox’ın tanıtımıyla, bunun gibi yöntemlere ihtiyaç duyulması daha az olasıdır. Bununla birlikte, Flexbox’ın kullanılamadığı durumlarda, örneğin Elemanın kesinlikle yerleştirilmesi veya sabitlenmesi gerekiyorsa, bu yöntem yararlı olabilir.
Örnek 2 – Bir Kök Izgara Boyutu Oluşturma
calc() işlevi, rem ünitesinden görünüm alanı tabanlı bir ızgara oluşturmak için kullanılabilir. Bunu, kök elemanın font boyutunu tam görünüm genişliğinin bir parçası olacak şekilde ayarlayarak yapabiliriz.
|
1 2 3 4 5 |
html { font-size: calc(100vw / 30); } |
Şimdi 1rem, viewport genişliğinin 1 / 30’una karşılık gelecek. Sayfamızdaki herhangi bir metin için bu, görünüm alanına göre otomatik olarak ölçeklendirileceği anlamına gelir. Ayrıca, aynı görünüm boyutuna bakıldığında, aynı boyuttaki metin, görünümün gerçek boyutu ne olursa olsun ekranda her zaman olacaktır.
Sayfadaki diğer metin dışı öğeleri rem birimlerini kullanarak boyutlandırırsak, bu davranışı da takip ederler. 1rem genişliğinde bir eleman her zaman görünüm genişliğinin 1 / 30’unda olacaktır.
Örnek 3 – Netlik
Son olarak, calc() hesaplamaları daha net yapmak için faydalı olabilir. Örneğin, bir grup öğenin üst konteynerinin 1 / 6’sında olmasını istiyorsanız, bu şekilde yazabilirsiniz –
|
1 2 3 4 5 |
.foo { width: 16.666666667%; } |
Bununla birlikte, yazmak için CSS’yi okuyan insanlar için çok daha net olurdu –
|
1 2 3 4 5 |
.foo { width: calc(100% / 6); } |
Izgara Sistemi oluşturmak gibi calc () ile yapabileceğimiz daha birçok şey var. Kesinlikle CSS’deki en yeni özelliklerden biri.
Kaynak:
bitsofco.de/how-calc-works/
Yorum Yap