Bagaimana cara menggunakan variabel dan properti khusus CSS?

25-February-20022

Variabel secara umum adalah sarana untuk menyimpan nilai dan mengambilnya nanti. Mereka membantu menghindari duplikasi kode yang sama berulang kali dan membuat kode lebih mudah dipelihara.

Sebelumnya di CSS, tidak ada cara untuk mendefinisikan variabel. Jika kita harus menggunakan warna yang sama, kita perlu mengulang kode warna jika diperlukan. Demikian pula, jika kita harus menggunakan 10pxsebagai margin standar, kita harus melakukan hardcode di mana-mana. Memperbarui data ini di mana saja bisa jadi sulit dan rawan kesalahan.

Untuk mengatasi masalah ini dukungan variabel ditambahkan dalam CSS.

Mari kita lihat cara kerjanya.

Mendeklarasikan variabel CSS

Variabel CSS dapat dideklarasikan menggunakan --tanda hubung ganda

di mana

• --text-coloradalah nama variabel

• rebeccapurpleadalah nilai variabel--text-color

Ingat , nama variabel peka huruf besar/kecil yang berarti --text-colordan --text-Colormerupakan dua variabel yang berbeda.

Anda dapat mendeklarasikan variabel secara global di dalam :rootpemilih atau pemilih valid lainnya sebagai berikut:

Variabel CSS juga memiliki sifat cascading yaitu jika variabel tidak ditemukan dalam lingkup saat ini, browser mencarinya di elemen induk lagi jika tidak ditemukan di elemen induk, itu terus mencari sampai mencapai elemen root.

Juga, nilai yang --text-colordidefinisikan di dalam headerelemen menimpa nilai yang ditentukan di dalam :rootelemen.

Mengkonsumsi Variabel CSS

Untuk mengkonsumsi nilai variabel CSS kita harus menggunakan var()fungsi sebagai berikut:

Mari kita konsumsi nilai yang didefinisikan di dalam --text-colorvariabel diheader

Elemen headermendapatkan nilai warna mediumpurplekarena menimpa --text-colorvariabel dalam cakupan saat ini.

Seperti yang Anda lihat, kemungkinannya tidak terbatas. Anda dapat membuat variabel untuk

• margin

• perbatasan

• bayangan kotak

• gradien

• warna dan warna latar belakang

• font dan ukuran font

• warna tema situs yaitu tema terang dan gelap

• nilai yang dihitung secara dinamis

• buat elemen responsif dengan mengganti variabel dalam kueri media

Apa pun yang Anda lihat dalam kode yang diulang bahkan sekali dapat diubah menjadi variabel sehingga mudah untuk mempertahankan dan mengubah nilai itu di masa mendatang.

Nilai mundur

Variabel CSS juga memungkinkan kita untuk mendefinisikan beberapa nilai fallback ketika variabel yang diberikan belum ditentukan. Mari kita pahami ini dengan contoh

Seperti yang dapat kita lihat pada contoh di atas, variabel --gradienttidak didefinisikan dalam lingkup saat ini atau tidak didefinisikan dalam :rootelemen global. Dalam hal ini, browser akan kembali ke nilai kedua yang dipisahkan oleh koma yaitu linear-gradient(to right,#8900b7 0%,#f3430d 100%. Bahkan dimungkinkan untuk mendefinisikan beberapa nilai fallback yang dipisahkan oleh koma sebagai berikut:

Memperbarui variabel CSS menggunakan JavaScript

Mari kita lihat bagaimana kita dapat memperbarui nilai variabel CSS saat runtime.

Pertama, kita mendapatkan pegangan elemen dokumen

Selanjutnya, kita dapat memperbarui properti yang diinginkan dengan mengaturnya ke nilai baru sebagai berikut:

Sekali lagi, jika kita memperbarui variabel yang didefinisikan di dalam : rootelemen, perubahan akan tercermin di mana pun variabel digunakan.

Contoh

nginx/1.19.5

Dukungan peramban

Variabel CSS didukung secara luas oleh semua browser utama. Hanya IEbrowser yang membutuhkan mekanisme mundur - di bawah ini adalah tangkapan layar dari caniuse

Dukungan browser variabel CSS

Ringkasan

• Deklarasikan variabel CSS menggunakan tanda hubung ganda--

• Variabel CSS peka terhadap huruf besar-kecil

• Konsumsi variabel CSS menggunakan var()fungsi

• Variabel CSS memiliki efek berjenjang

• Beberapa nilai fallback dapat diberikan dengan memisahkannya dengan koma.

• Nilai variabel CSS dapat diubah secara dinamis menggunakan JavaScript