Mengenal dan Memahami CSS3 calc() Function
CSS3 calc() function adalah sebuah fungsi yang digunakan untuk melakukan perhitungan matematis di dalam deklarasi nilai-nilai CSS. Fungsi ini membantu untuk menghitung nilai-nilai yang kompleks atau bergantung pada nilai-nilai yang lain.
Contoh penggunaan dari CSS3 calc() function adalah sebagai berikut:
1. Mengatur lebar elemen secara dinamis:
```css
div {
width: calc(100% - 20px);
}
```
Dalam contoh di atas, lebar elemen div akan menjadi 100% dari lebar parentnya dikurangi 20 piksel.
2. Mengatur margin secara dinamis:
```css
div {
margin: calc(10px + 5%);
}
```
Pada contoh di atas, margin pada elemen div akan menjadi 10 piksel ditambah 5% dari lebar parentnya.
3. Mengatur tinggi elemen secara dinamis:
```css
div {
height: calc(50vh - 50px);
}
```
Pada contoh ini, tinggi elemen div akan menjadi setengah dari tinggi viewport dikurangi 50 piksel.
Beberapa hal yang perlu diperhatikan dalam penggunaan CSS3 calc() function:
1. Operator matematika yang dapat digunakan antara lain adalah + (penjumlahan), - (pengurangan), * (perkalian), dan / (pembagian).
2. Perlu adanya spasi sebelum dan sesudah operator matematika. Misalnya, calc(100% - 50px), bukan calc(100%-50px).
3. Nilai yang digunakan dalam perhitungan dapat berupa angka, satuan, atau persen.
4. CSS3 calc() function tidak mendukung penggunaan nested calc(). Artinya, tidak bisa menggunakan calc() di dalam calc().
Penutup
Mungkin itu saja yang dapat codepelajar sampaikan semoga dengan artikel di atas dapat menambah pemahaman pembaca tentang CSS3 calc() function, terimakasih.