CSS calc nedir?

By Admin
29/Eylül/2020
Okuma Süresi: 3 dk.

Merhaba sevgili okur,

CSS'te calc ile basit matematiksel değerleri hesaplayıp dinamik bazı ölçüleri kullanabiliriz. Bu ne demek peki?

Mesela width değeri değişen ya da genişliğini bilmediğimiz bir divin genişliğinden 75px çıkar ve sonucu alıp kullanabiliriz. Bu calc() gelmeden önce bu tarz işlemler için javascript kullanılmak zorundaydı. İşleri css tarafında halletmek çok basit bir hale geldi.

Örnek vereyim de netleşsin;

.eskiz { width: calc(50% - 20px); }

Burada eskiz div'inin genişliği yüzde 50'sinden 20 piksel çıkartılarak bulunuyor. Eskiz div'inin absolute olduğunu düşünürsek bu dinamik sonuç bizim için çok değerli olur. Çünkü absolute olan değil de relative olan div'in genişliği neyse onu alır bu calc fonksiyonu. Bu önemli bir detay. Yani genişliğin %100 değeri 1200px'de olabilir, 800 piksel'de olabilir. Bu farklılık bizi ilgilendirmeden responsive tasarımlar elde edebiliriz bu şekilde.

Özetle faydalı bir fonksiyondur kendisi. Kullanınız. 

 


ETİKETLER: CSS
Codeigniter'da zip kütüphanesindeki read_file fonksiyonunda yaşanan FCPATH dosya yolu sorunu
PhpStorm'da faydalı bir kod hizalama tekniği