Membuat tata letak CSS yang bagus dimulai dengan menetapkan ukuran untuk semua hal yang ditempatkan di aplikasi web. Salah satu fitur yang sangat diminta adalah kemampuan untuk menentukan ukuran menggunakan campuran unit ukuran. Misalnya, akan lebih baik jika Anda dapat mencadangkan 50% area ditambah jumlah ruang tetap, misalnya 10 piksel. Anda dapat melakukannya sekarang menggunakan properti calc(). Anda dapat menggunakan fitur ini di mana pun panjang atau angka digunakan, sehingga Anda dapat menggunakannya untuk memosisikan sesuatu, atau juga dalam nilai warna rgb(), sehingga memiliki banyak kegunaan yang bagus dalam sheet gaya.
Apa yang dapat Anda lakukan dengan calc()?
Properti calc() dapat digunakan di mana saja yang memiliki panjang atau angka CSS dalam stylesheet Anda.
Hal ini memberi Anda dua fitur utama untuk membuat tata letak lebih fleksibel:
- Mencampur persentase dan nilai absolut.
- Menggabungkan unit ukuran.
Menggabungkan persentase dengan unit absolut
Mari kita lihat contoh penggabungan persentase dengan satuan absolut. Misalnya, kita ingin mengalokasikan 50% area yang tersedia dikurangi jumlah piksel tetap, maka kita dapat menulisnya sebagai berikut:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Jika memiliki warna latar belakang hijau, tampilannya akan seperti ini:
dan jika Anda memperkecil ukuran induk, tampilannya akan terlihat seperti:
Keuntungannya adalah kita selalu tahu bahwa tepi kanan konten akan berada 100 piksel di sebelah kiri tengah area penampung. Dengan kemampuan untuk menggabungkan berbagai jenis nilai dengan cara ini, aplikasi web Anda dapat menangani tata letak di perangkat dengan ukuran yang berbeda dengan kontrol yang jauh lebih besar daripada sebelumnya.
Unit pencampuran
Hal hebat lainnya adalah kemampuan untuk menggabungkan unit dengan pengukuran yang berbeda untuk mendapatkan ukuran yang dihasilkan. Misalnya, Anda dapat menetapkan ukuran relatif terhadap ukuran font saat ini dengan menggabungkan unit 'em' dan 'px'.
#bar {
height: calc(10em + 3px);
}
Anda dapat menemukan beberapa contoh bagus untuk menggabungkan nilai di sini dan di sini.
Cobalah
Dengan calc(), Anda dapat menggunakan +, -, *, dan / untuk menambahkan, mengurangi, mengalikan, dan membagi nilai, sehingga memungkinkan berbagai kemungkinan. Anda dapat menggunakan calc() di mana pun panjang atau angka CSS dapat digunakan. Kami juga sedang berupaya menambahkan calc() untuk properti sudut dan frekuensi dalam waktu dekat. Properti calc() untuk panjang kini tersedia di Chrome 19 (build saluran Dev) dengan menggunakan properti -webkit-calc, di Firefox sejak versi 8 menggunakan properti -moz-calc, dan di Internet Explorer sejak versi 9 tanpa awalan. Beri tahu kami pendapat Anda dengan menulis komentar di bawah.