Membuat tata letak CSS yang bagus dimulai dengan menetapkan ukuran untuk semua hal yang ditempatkan di aplikasi web. Salah satu fitur yang banyak diminta adalah kemampuan untuk menentukan ukuran menggunakan campuran unit ukuran. Misalnya, akan menyenangkan jika Anda dapat mereservasi 50% area plus jumlah ruang tetap, misalnya 10px. Anda dapat melakukannya sekarang menggunakan properti calc(). Anda dapat menggunakan fitur ini di mana pun menggunakan panjang atau angka, sehingga Anda dapat menggunakannya untuk memosisikan berbagai hal, atau juga dalam nilai warna rgb(), sehingga memiliki banyak kegunaan besar dalam lembar gaya.
Apa yang dapat Anda lakukan dengan calc()?
Properti calc() dapat digunakan di mana saja yang memiliki panjang atau nomor CSS di stylesheet Anda.
Ini memberi Anda dua fitur utama untuk membuat tata letak lebih fleksibel:
- Menggabungkan persentase dan nilai absolut.
- Mencampur unit ukuran.
Mencampur persentase dengan satuan absolut
Mari kita lihat contoh penggabungan persentase dengan satuan absolut. Misalnya kita ingin mengalokasikan 50% dari area yang tersedia dikurangi jumlah piksel tetap, maka kita dapat menulisnya seperti 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, warnanya akan terlihat seperti:
dan jika Anda menyusutkan ukuran induk, akan terlihat seperti ini:
Hal yang menyenangkan di sini adalah kita selalu tahu bahwa tepi sebelah kanan konten adalah 100px di sebelah kiri tengah area penampung. Mampu menggabungkan berbagai jenis nilai dengan cara ini memungkinkan aplikasi web Anda menangani tata letak pada 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 berbeda untuk mendapatkan ukuran yang dihasilkan. Misalnya, Anda dapat menetapkan ukuran sesuai dengan ukuran font saat ini dengan menggabungkan unit 'em' dan 'px'.
#bar {
height: calc(10em + 3px);
}
Anda dapat menemukan beberapa contoh penggabungan nilai yang bagus di sini dan di sini.
Cobalah
Dengan calc(), Anda dapat menggunakan +, -, * dan / untuk menambahkan, mengurangi, mengalikan, dan membagi nilai, sehingga memungkinkan segala macam kemungkinan. Anda dapat menggunakan calc() di mana pun dengan panjang atau angka CSS yang dapat digunakan. Kami juga sedang berupaya menambahkan calc() untuk properti sudut dan frekuensi dalam waktu dekat. Properti calc() untuk durasi kini tersedia di Chrome 19 (Build saluran Dev) 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.