Apa itu calc () di CSS (dan cara menggunakannya)

Beberapa fungsi CSS sangat kuat tetapi jarang digunakan, bukan karena sulit, tetapi karena alternatif yang lebih mudah tersedia. Calc () adalah salah satunya. Ini sangat berguna tetapi sering dibayangi oleh Clamp ().

Calc () memecahkan beberapa masalah tata letak yang tidak dapat disentuh. Ini bagus untuk ketinggian bagian yang menyempurnakan, menyesuaikan untuk header lengket, dan mencampur unit yang fleksibel dan tetap dalam satu baris kode. Dan inilah kabar baiknya: Anda dapat menggunakan calc () tanpa menulis satu baris kode.

Di Divi 5, itu dibangun langsung ke antarmuka, jadi ketik saja nilai Anda, dan Divi menangani sisanya. Ingin melihat bagaimana? Dalam posting ini, Anda akan belajar bagaimana calc () bekerja, di mana ia membantu, dan bagaimana menggunakannya di dalam Divi 5.

Divi 5 siap digunakan di situs web baru , tetapi tunggu sedikit sebelum bermigrasi yang sudah ada.

Apa itu calc () di CSS?

Calc () adalah fungsi CSS asli yang memungkinkan Anda melakukan matematika sederhana seperti menambahkan, mengurangi, mengalikan, dan membagi (dengan beberapa batasan tergantung pada konteks) secara langsung dalam aturan gaya Anda. Ini bagus untuk mengutak -atik ukuran dan jarak, terutama ketika mencampur nilai -nilai yang tetap dan fleksibel untuk mendapatkan tata letak yang lebih halus tanpa menggunakan semuanya.

Mari kita pahami ini dengan sebuah contoh. Misalkan Anda ingin elemen mengambil 80% dari layar tetapi masih meninggalkan ruang untuk padding. Anda bisa menulis:

width: calc(80% - 40px);

Ini memberi tahu browser untuk menghitung lebar secara dinamis dengan mengurangi 40 piksel dari 80 persen dari wadahnya. Ketika dikombinasikan dengan teknik pemusatan seperti margin otomatis, ruang yang tersisa dari pengurangan didistribusikan secara merata. Nilai menyesuaikan secara otomatis berdasarkan ukuran layar.

Sekilas, itu mungkin tidak terasa inovatif. Tapi calc () sangat ideal untuk menyelesaikan masalah tata letak sehari-hari, seperti jarak yang rusak di layar kecil, elemen yang tumpang tindih header tetap, dan bagian off-center. Alih -alih kueri media yang panjang, calc () dalam satu baris sering kali cukup. Berikut adalah beberapa kasus penggunaan satu baris yang umum:

• padding: calc (5VW + 20px); terus memadukan cairan. Bahkan di layar kecil, tidak pernah turun di bawah 20 piksel.
• Tinggi: Calc (100VH - 80px); Menjaga konten terlihat saat Anda memiliki header tetap. Itu menyesuaikan secara otomatis berdasarkan ketinggian layar.
• Lebar: Calc (60% - 1REM); memberi Anda kontrol yang fleksibel atas lebar bagian sambil mempertahankan jarak yang konsisten. Anda dapat menyesuaikan margin di sekitarnya menggunakan nilai-nilai seperti margin-kiri: calc (40% + 0,5rem); untuk berpusat secara visual atau menyelaraskan elemen dalam wadahnya.

Singkatnya, calc () menghilangkan kebutuhan untuk menulis CSS tambahan untuk setiap breakpoint. Alih -alih menulis ulang gaya berulang kali, Anda dapat membangun logika langsung ke dalam nilai -nilai Anda dan membiarkan tata letak merespons secara otomatis. Anda tidak hanya menentukan ukuran tetapi juga memutuskan bagaimana elemen harus berperilaku.

Memahami cara kerja ()

Sintaks dasar calc () terlihat seperti ini:

 calc(value operator value) 

Di sini, Anda dapat menggunakan nilai panjang atau unit yang valid, dan operator dapat +, -, *, atau /.

Misalnya, jika Anda ingin mengurangi lebar elemen dengan 40 piksel, Anda akan menulis lebar: Calc (100% - 40px);. Perhatikan penggunaan %? Itulah yang membuat lebar fleksibel.

Jika kami menggunakan CALC (100px - 40px), hasilnya akan selalu 60 piksel, yaitu statis. Tetapi dengan menggunakan persentase, kami membiarkan browser menghitung ukuran berdasarkan layar atau elemen induk. Itu menyesuaikan secara otomatis saat tata letak berubah.

Kiat cepat (& juga aturan umum): Selalu tambahkan spasi antara nilai dan operator untuk membuat calc () berfungsi dengan baik. Tanpa spasi, CSS tidak akan berhasil. Di bawah ini, Anda akan melihat lebar kontainer dipulihkan ke default karena fungsi calc () tanpa spasi tidak lagi valid:

Menggunakan beberapa unit

Anda baru saja melihat bagaimana manfaat sebenarnya dari calc () datang ketika Anda mulai menggabungkan unit relatif yang berbeda. Misalnya, persentase dengan piksel atau lebar viewport dengan REMS, karena saat itulah tata letak Anda mulai merespons berdasarkan perubahan ukuran layar.

Untuk membuatnya lebih jelas, berikut adalah beberapa kombo yang berguna untuk mencoba melihat bagaimana mereka bekerja dalam tata letak nyata.

Anda juga dapat menggabungkan beberapa nilai dan unit dalam satu baris, yang membuat tata letak responsif ukuran lebih akurat. Contoh di bawah ini menggunakan %, PX, dan REM untuk mencampur penskalaan tata letak, jarak tetap, dan tipografi:

 width: calc(50% - 40px + 1rem); 

• 50% skala dengan wadah
• 40px Kurangi ruang tetap seperti bilah samping
• 1Rem menambahkan jarak berdasarkan ukuran font

Fungsi sarang kalk ()

Anda juga dapat bersarang satu calc () di dalam yang lain untuk membangun logika tata letak yang lebih kompleks. Ini adalah cara yang bagus untuk mencerminkan cara Anda berpikir tentang desain (lapisan demi lapisan) dengan hubungan yang jelas antara nilai -nilai. Misalnya, lebar: calc (200px - calc (100px + 2rem));

Di sini, browser pertama kali menghitung 100px + 2rem , yang dapat mewakili padding, margin, atau ukuran elemen lain. Kemudian mengurangi total dari 200px untuk mendapatkan lebar akhir. Lebar tetap relatif karena REM.

Jenis sarang ini berguna ketika tata letak Anda tergantung pada lebih dari satu faktor. Alih -alih melakukan matematika sendiri atau nilai tetap hardcoding, Anda dapat menulis hubungan secara langsung di CSS. Ini membuat desain Anda fleksibel dan lebih mudah diperbarui nanti.

Anda tidak akan sering membutuhkan kalk () bersarang, tetapi dapat membantu ketika berhadapan dengan elemen spasi atau tumpang tindih berlapis. Yang mengatakan, Anda mungkin ingin memulai dengan perhitungan sederhana terlebih dahulu, karena mereka bisa menjadi luar biasa. Menambahkan kompleksitas akan terasa alami setelah Anda merasa nyaman dengan cara kerjanya.

Mengapa menggunakan calc () saat Anda memiliki klem ()?

Jika Anda menggunakan Clamp () lebih sering, Anda mungkin memiliki pertanyaan ini. Untuk mendapatkan jawaban yang jelas, akan menjadi ide yang baik untuk memahami perbedaan antara keduanya:

Clamp () modern, jadi bersemangat menggunakannya untuk membangun desain cairan tanpa mengandalkan kueri media itu mudah. Tetapi meskipun klem () terasa lebih pintar, ada banyak situasi di mana calc () lebih relevan, seperti yang berikut:

• Mengurangi nilai tetap dari tata letak fleksibel: Menggunakan tinggi: Calc (100VH - 80px) Pastikan bahwa bagian mengisi layar dikurangi ketinggian header tetap, sehingga elemen tidak tumpang tindih. Clamp () tidak dapat melakukan ini karena tidak mendukung pengurangan.
• Elemen offset dengan presisi: nilai seperti margin-kiri: calc (50%-200px); menggeser elemen relatif terhadap wadahnya sambil tetap seimbang secara visual. Clamp () tidak dapat melakukan posisi relasional semacam ini.
• Menyelaraskan bagian berdampingan: membantu Anda membuat tata letak dua kolom yang responsif di mana satu kolom dengan lebar: Calc (60%-2rem); mengambil 60% dari ruang dikurangi celah yang konsisten. Clamp () sangat ideal untuk meningkatkan nilai tunggal, sementara calc () unggul ketika hubungan antara beberapa nilai diperlukan.

Secara keseluruhan, Clamp () sangat bagus ketika mendefinisikan bagaimana nilai tunggal harus skala di seluruh ukuran layar. Tapi calc () adalah apa yang Anda butuhkan ketika tata letak Anda tergantung pada lebih dari satu hal sekaligus, seperti dalam kasus di atas.

Menggabungkan calc () + clamp ()

Sedangkan calc () dan clamp () sangat kuat, mengapa menggunakan satu ketika Anda dapat menggabungkan keduanya? Anda dapat menyarangkan calc () di dalam klem () untuk membangun desain cairan dengan logika bawaan, seperti menggabungkan penskalaan fleksibel dengan kontrol yang tepat.

Misalnya, padding: klem (1rem, calc (2VW + 10px), 3rem); Membuat jarak yang skala antara 1rem dan 3rem, tetapi nilai "yang disukai" didasarkan pada rumus calc () yang memadukan lebar viewport dan nilai tetap.

Ini memberi Anda kontrol yang responsif, logis, dan tepat atas desain Anda. Setelah Anda belajar kapan menggunakan calc () dan klem () secara individual dan kapan harus menggabungkannya, Anda dapat sepenuhnya mengontrol tata letak Anda tanpa mengandalkan breakpoint khusus

Menggunakan variabel CSS dengan calc ()

Anda juga dapat memperpanjang fleksibilitas Calc () dengan variabel CSS. Gabungkan variabel dengan unit lain, lakukan matematika, dan bangun logika tata letak di sekitar nilai yang dapat digunakan kembali. Misalnya, jika Anda mendefinisikan: root {–gap: 40px;}, maka menggunakan padding: calc (var (–gap) + 1rem); membantu Anda mengatur bantalan responsif berdasarkan nilai root Anda.

Catatan: Saat menggunakan variabel CSS di dalam calc (), bungkus variabel Anda di sekitar var (). Lihat bagaimana saya melakukannya di atas.

Ini memungkinkan Anda untuk membangun situs web lengkap menggunakan sistem desain yang konsisten (variabel CSS Anda) sambil tetap memiliki kontrol yang tepat dengan calc (). Dan jika Anda ingin membuat perubahan (global), seperti menyesuaikan jarak di seluruh tata letak Anda, Anda dapat melakukannya dengan mengubah nilai root.

Ini tidak mudah dengan klem (). Sementara Clamp () mendukung variabel CSS, setiap nilai harus diselesaikan ke unit yang lengkap dan valid. Apa yang saya maksud dengan ini?

Fungsi seperti Clamp (1REM, VAR (–fluid-size), 3REM) hanya berfungsi jika –fluid-size diselesaikan menjadi sesuatu seperti 4VW. Dan jika Anda perlu melakukan matematika dengan variabel, seperti menambahkan atau mengurangi darinya, Anda perlu membungkus bagian itu dalam calc (). Hal -hal kecil ini membuat calc () penting saat membangun nilai dinamis dengan variabel.

Calc () di Divi 5

Baik calc () dan clamp () adalah fungsi CSS canggih yang memberi Anda kontrol yang kuat atas tata letak, jarak, dan responsif, tetapi hanya jika Anda nyaman menulis kode. Itu membatasi penggunaannya untuk pengembang atau profesional web. Tetapi bagaimana dengan mereka yang lebih suka alur kerja visual dan masih ingin menggunakan calc () dan klem () dalam desain mereka? Bisakah Anda melakukan ini?

Ya, Anda bisa. Di dalam Divi 5, baik calc () dan clamp () tersedia sebagai unit canggih, dan Anda tidak perlu menulis satu baris kode tunggal untuk bekerja dengannya.

Berlangganan saluran YouTube kami

Yang Anda lakukan adalah memasukkan calc () langsung di dalam bidang input numerik, dan hanya itu.

Divi Builder bertindak secara instan. Setelah Anda memasukkan nilai calc () Anda, Anda mendapatkan umpan balik langsung saat mendesain. Tidak perlu beralih di antara pembangun, devtools, atau pratinjau, dan tidak ada yang menebak bagaimana tampilannya.

Divi 5 membuat bangunan lebih pintar dan desain yang lebih fleksibel mudah tanpa menyentuh kode. Anda bahkan dapat menggabungkan calc () dengan variabel desain Divi atau variabel CSS Anda sendiri untuk membuat tata letak dinamis yang dapat digunakan kembali. Saya akan menunjukkan kepada Anda bagaimana melakukannya di bagian selanjutnya.

Ngomong -ngomong, apakah Anda tahu Divi 5 juga mendukung semua fungsi CSS di unit canggih? Anda mungkin ingin belajar tentang mereka juga

Pelajari segalanya tentang unit canggih Divi 5

Bagaimana Divi 5 Membuat Menggunakan Calc () Mudah

Anda baru saja melihat bahwa Divi 5 membuat menggunakan calc () dalam desain Anda dengan mudah sambil memberi Anda pratinjau instan saat Anda bekerja. Tapi masih ada lagi. Divi tidak hanya memberikan solusi tetapi juga cara yang terintegrasi sepenuhnya, tanpa kode untuk membangun tata letak berbasis logika yang responsif menggunakan alat yang sama dengan pengembang, tanpa menulis baris kode.

Begini cara membantu Anda menggunakan calc () dengan heroik sambil diam -diam bekerja di bayang -bayang:

1. Terapkan calc () ke bidang numerik apa pun

Hanya karena Anda tidak mengkode tidak berarti Anda terbatas. Dalam Divi 5, Calc () berfungsi di mana saja nilai numerik diterima (pikirkan: lebar, tinggi, padding, margin, celah, ukuran font, di mana saja). Jika bidang menerima angka, itu mendukung calc ().

Dan menerapkan calc () relatif mudah. Yang perlu Anda lakukan adalah memilih calc () dari unit canggih lainnya dan memasukkan formula Anda.

Ini berarti Anda dapat menangani tata letak matematika secara visual tanpa meninggalkan pembangun. Apakah mengurangi tinggi header tetap, menambahkan jarak yang fleksibel ke ukuran font, atau unit pencampuran untuk responsif yang lebih baik, Divi memungkinkan Anda melakukan semuanya langsung di dalam bidang desain.

Cukup ketikkan formula Anda, dan hasil pembaruan secara instan-tidak ada panel kode, tidak ada switching tab, dan tidak ada tebakan kedua. Ini kontrol penuh, dibangun langsung ke alur kerja Anda.

2. Dapatkan pratinjau langsung instan

Salah satu bagian terbaik tentang menggunakan calc () di Divi 5 adalah Anda dapat melihat apa yang Anda lakukan secara real time. Anda tidak perlu menebak bagaimana jarak atau penyelarasannya. Saat Anda memasukkan formula calc () Anda, pembaruan pembangun secara instan.

Seperti yang Anda lihat, bantalan berubah segera saat saya memasukkan nilai calc (). Saya juga beralih di antara breakpoint yang berbeda untuk menunjukkan kepada Anda bagaimana padding menyesuaikan berdasarkan ukuran layar.

Perubahan apa pun yang Anda buat, Anda akan melihat hasilnya saat Anda mengetik. Umpan balik langsung ini membantu Anda memahami bagaimana perhitungan mempengaruhi tata letak Anda dan memungkinkan Anda mengubah nilai dengan cepat tanpa mengganti tab.

3. Bangun alur kerja lanjutan dengan calc ()

Menggunakan calc () dalam Divi 5 tidak kuat karena Anda sekarang dapat menambah atau mengurangi nilai. Kekuatan sebenarnya adalah membuka kunci alur kerja yang lebih cerdas. Divi memungkinkan Anda menggabungkan calc () dengan alat canggih seperti clamp (), variabel CSS, variabel desain, dan preset grup opsi, semuanya di dalam pembangun visual.

Anda tidak terbatas pada penyesuaian satu kali sederhana. Menggunakan Divi, Anda dapat membuat sistem tata letak yang merespons dengan lancar ke ukuran layar, mengikuti aturan jarak yang konsisten, dan memperbarui secara otomatis ketika token desain berubah. Mari kita lihat caranya:

1. Perpanjang Calc () dengan variabel CSS

Divi 5 mendukung variabel CSS langsung di dalam bidang desain, yang berarti Anda dapat mendefinisikan nilai yang dapat digunakan kembali dan menghitung darinya secara visual. Katakanlah saya ingin menggunakan bantalan tetap pada semua bagian halaman saya, jadi saya akan menyimpannya sebagai variabel CSS:

:root {
--section-padding: calc(4rem + 2vw);
}

Untuk melakukannya, saya akan pergi ke Pengaturan Halaman> Lanjutan> CSS khusus dan menambahkan nilai root saya di sini:

Sekarang, alih-alih memasukkan formula lengkap di mana-mana, Anda bisa menggunakan VAR (–P-Padding) di bidang bantalan apa pun di dalam Divi. Hasil pembaruan langsung, dan jika saya mengubah nilai root nanti, seluruh tata letak langsung mencerminkan perubahan itu.

Perhatikan bahwa unit canggih yang diperbarui menunjukkan calc var, yang berarti variabel CSS dimasukkan menggunakan fungsi var () di dalam rumus calc ().

Menggunakan variabel CSS di Divi secara mengejutkan sederhana. Anda bisa mendefinisikannya di halaman itu sendiri tanpa menyentuh stylesheet Anda. Ini membantu mempertahankan kerangka desain yang konsisten, menguji nilai -nilai baru, dan membangun aturan tata letak yang responsif.

2. Gunakan calc () dalam kerangka desain Anda

Divi 5 memungkinkan Anda menyimpan nilai calc () sebagai variabel desain, membuatnya mudah untuk menggunakan kembali satu tata letak di seluruh situs web Anda. Katakanlah Anda ingin bagian layanan Anda selalu mengisi layar dikurangi ketinggian header tetap. Kemudian, Anda dapat membuat variabel angka dan menyebutkannya tinggi bagian dengan nilai kalk (120vh - 30px).

Di sini, 30px adalah tinggi header tetap.

Sekarang, untuk menerapkan variabel yang disimpan, buka pengaturan desain bagian dan melayang di atas ketinggian untuk menemukan ikon bidang dinamis. Klik di atasnya, dan variabel yang Anda simpan akan muncul. Klik pada bagian tinggi bagian untuk menerapkannya.

Pendekatan ini memberi Anda kontrol tata letak penuh sambil menjaga desain Anda konsisten. Anda tidak terkunci dalam preset atau nilai statis. Sebaliknya, Anda sedang membangun logika yang beradaptasi di seluruh halaman, templat, dan ukuran layar semuanya secara visual.

Variabel desain membuka kemungkinan besar. Misalnya, Anda dapat membangun kerangka desain Anda secara visual dan menggunakannya di semua halaman situs web Anda untuk menjaga aturan desain konsisten di seluruh. Kami juga menyarankan Anda membangun tipografi dan spasi dan sistem ukuran sebelum merancang halaman apa pun.

3. Buat & Simpan Preset Grup Opsi

Setelah tata letak Anda menggunakan nilai calc () secara konsisten, Divi 5 membuat menyimpan logika untuk menggunakan kembali. Anda dapat menyimpan seluruh pengaturan gaya Anda (atau pengaturan individual seperti padding, celah, margin, dan lebar) sebagai preset grup opsi. Ini berarti alih -alih menerapkan rumus calc () berulang kali, Anda cukup memilih preset, dan matematika tata letak diterapkan secara instan.

Misalnya, jika Anda menggunakan padding: Calc (4REM + 2VW) di beberapa bagian, Anda tidak perlu mengetik ulang di mana -mana. Simpan saja sebagai preset:

Sekarang, terapkan preset yang Anda simpan di mana pun dibutuhkan. Semua pembaruan secara visual, sehingga Anda dapat melihat efeknya segera.

Bahkan lebih baik, jika Anda menggunakan variabel desain di preset tersebut, Anda dapat memperbarui nilai secara global nanti. Ubah variabel sekali, dan setiap preset menggunakannya akan mencerminkan pembaruan. Ini membuat pengeditan besar-besaran cepat dan konsisten.

Perhatikan bagaimana dengan mengubah nilai yang disimpan dalam variabel desain, mereka juga diperbarui di bagian padding sementara juga memberi kami pratinjau langsung? Itu karena saya menggunakan variabel tinggi bagian di dalam bagian spasi yang telah ditetapkan.

Itulah kekuatan divi 5 yang dibawa. Ini membantu Anda mengukur sistem desain Anda sambil menjaga logika tata letak canggih konsisten di seluruh situs. Setelah Anda terbiasa menggabungkan unit -unit canggih seperti calc () (lihat di sini lebih banyak calc () menggunakan casing dengan tips menguasai mereka secara efektif) dengan sistem desain modular Divi, Anda akan membuka kunci cara yang efisien dan menyenangkan untuk membangun situs web.

Divi membuat matematika terasa mudah

Anda tidak harus menjadi pengembang untuk menggunakan fungsi CSS seperti calc () dan clamp (). Divi 5 membawa alat -alat canggih ini ke antarmuka visual yang mudah dieksplorasi, diuji, dan diterapkan. Anda dapat melakukan segalanya mulai dari tata letak sederhana hingga sistem desain yang kompleks tanpa menulis baris kode.

Apakah Anda menyesuaikan jarak, menggunakan variabel, atau membangun preset yang dapat digunakan kembali, Divi membuat matematika desain responsif dapat diakses untuk semua orang. Ingin menguji seberapa lancar calc () bekerja di dalam divi? Unduh Divi Public Alpha hari ini dan rasakan sendiri.

Divi 5 siap digunakan di situs web baru, tetapi tunggu sedikit sebelum bermigrasi yang sudah ada.