CSS Calc

Calc (fungsi penghitung) pada CSS

Calc (calculate) adalah fungsi penghitung yang digunakan dalam CSS terutama untuk menentukan nilai properti yang berkaitan dengan ukuran, seperti atribut width dan height.

Dalam penggunaannya, fungsi calc() dapat diterapkan dengan menyebutkan perintah (deklarasi) fungsi seperti berikut :

1. calc() : menghitung nilai.
2. min() : menentukan nilai dan batas minimal.
3. max() : menentukan nilai dan batas maksimal.

Penggunaan calc()

Fungsi calc() dapat digunakan untuk menghitung :
1. penjumlahan dengan simbol operator (+) plus.
2. pengurangan dengan simbol operator (-) minus.
3. perkalian dengan simbol operator (*) asterik / bintang.
4. pembagian dengan simbol operator(/) slash / garis miring

Contoh :

Kontainer induk width: 100%; padding: 5px;

Kolom A
width:100%

Kolom B
width:200px

Pada contoh diatas, terdapat Kolom A dan Kolom B yang akan disejajarkan bersebelahan. Dengan lebar Kolom A 100%, maka membutuhkan penghitungan yang tepat agar kolom bisa ditampilkan bersebelahan. Karena dengan lebar 100%, maka Kolom B tidak akan mendapatkan tempat.

Alih-alih melakukan penghitungan dan mencari hasilnya untuk ditetapkan pada nilai properti Kolom A, akan lebih akurat jika menggunakan fungsi calc() seperti dibawah ini :

Kolom A width = calc (width Kolom A (100%) dikurangi width Kolom B (200px + padding)).
Maka, width:calc(100% - 205px)

Hasil penerapan nilai calc() :

Kontainer induk width: 100%; padding: 5px;

Kolom A
width:calc(100% - 205px)

Kolom B
width:200px

Setelah terdapat ruang untuk posisi kolom B, kini tinggal menambahkan atribut display:inline-block, Maka hasilnya akan seperti ini :

Kontainer induk width: 100%; padding: 5px;

Kolom A
width:calc(100% - 205px)

Kolom B
width:200px

Penggunaan fungsi calc() ini sangat membantu untuk penerapan desain responsive.
Karena nilai dari calc() secara otomatis menyesuaikan lebar viewport halaman pada layar perangkat yang berbeda ukuran.

Selanjutnya, lihat juga Membagi 3 kolom dengan fungsi calc().