Pengenalan Variabel CSS: Manfaat dan Cara Penggunaannya
Ngulik Kode - CSS Variables atau yang lebih dikenal sebagai Custom Properties adalah salah satu fitur dari CSS yang memungkinkan kita untuk mendefinisikan variabel dalam CSS. Variabel CSS dapat digunakan untuk menyimpan nilai yang akan digunakan berulang kali dalam stylesheet. Variabel CSS juga dapat diubah nilai atau nilainya dapat diwariskan (inheritance) ke elemen yang dituju.
Cara Menggunakan CSS Variables
Variabel CSS didefinisikan menggunakan tanda -- diikuti dengan nama variabel dan nilai yang diberikan. Misalnya, kita ingin mendefinisikan variabel untuk warna primer dan warna sekunder dalam sebuah halaman web. Berikut adalah contoh penggunaan variabel CSS untuk warna primer dan sekunder:
Pada contoh di atas, kita mendefinisikan variabel untuk warna primer dengan nama --color-primary dan nilai #007bff. Kemudian, kita juga mendefinisikan variabel untuk warna sekunder dengan nama --color-secondary dan nilai #6c757d. Variabel ini didefinisikan pada elemen root dengan selector :root sehingga nilai dari variabel tersebut dapat digunakan oleh semua elemen dalam dokumen.
Setelah variabel didefinisikan, kita dapat menggunakannya dalam stylesheet dengan menggunakan fungsi var(). Misalnya, jika kita ingin menggunakan warna primer pada background elemen, kita dapat menuliskannya seperti berikut:
Variabel --color-primary digunakan sebagai nilai dari properti background-color pada elemen dengan class .element. Kita juga dapat mengganti nilai dari variabel dengan menggunakan JavaScript, seperti yang akan dijelaskan pada bagian berikutnya.
Mengubah Nilai Variabel CSS dengan JavaScript
Variabel CSS dapat diubah nilainya dengan JavaScript. Untuk mengubah nilai variabel CSS, kita dapat menggunakan method setProperty() pada objek style dari elemen yang dituju. Misalnya, kita ingin mengubah nilai dari variabel --color-primary pada elemen root, kita dapat menuliskannya seperti berikut:
Pada contoh di atas, kita memanggil method setProperty() pada elemen root dengan menggunakan document.documentElement. Kemudian, kita memberikan dua parameter yaitu nama variabel yang ingin diubah dan nilai baru yang ingin diberikan. Dalam contoh ini, kita mengubah nilai variabel --color-primary menjadi #ff0000.
Warisan Nilai Variabel CSS
Variabel CSS juga dapat diwariskan (inheritance) ke elemen yang dituju. Misalnya, jika kita mendefinisikan variabel --font-family pada elemen root, nilai variabel ini akan diwariskan ke seluruh elemen dalam dokumen. Berikut adalah contoh penggunaan variabel CSS untuk font-family:
Pada contoh di atas, kita mendefinisikan variabel --font-family pada elemen root dengan nilai `'Open Sans', sans-serif`. Variabel ini kemudian diwariskan ke elemen `body` dengan menggunakan fungsi `var()`. Sehingga, font-family pada elemen body menggunakan nilai dari variabel `--font-family`.
Keuntungan Menggunakan CSS Variables
Menggunakan CSS Variables memiliki beberapa keuntungan dibandingkan dengan penggunaan nilai statis pada stylesheet. Beberapa keuntungan tersebut adalah:
1. Memudahkan Perubahan Nilai
Kita dapat dengan mudah mengubah nilai variabel CSS dengan JavaScript, sehingga memungkinkan kita untuk memodifikasi nilai dalam waktu nyata. Hal ini sangat membantu ketika kita ingin membuat tema yang dapat diubah warnanya, atau ketika kita ingin mengubah tata letak (layout) halaman web dengan cepat.
2. Memudahkan Pemeliharaan
Dengan menggunakan variabel CSS, kita dapat menyimpan nilai yang akan digunakan berulang kali dalam stylesheet. Sehingga, ketika kita ingin mengubah nilai dari variabel tersebut, kita hanya perlu mengubah nilai variabelnya saja. Hal ini akan memudahkan pemeliharaan stylesheet dan meminimalisir kesalahan ketika kita ingin mengubah nilai pada beberapa properti.
3. Meningkatkan Konsistensi dan Keseragaman Tampilan
Dengan menggunakan variabel CSS, kita dapat memastikan bahwa nilai yang sama digunakan pada beberapa properti yang berbeda, sehingga meningkatkan konsistensi dan keseragaman tampilan halaman web.
Kesimpulan
CSS Variables atau Custom Properties memungkinkan kita untuk mendefinisikan variabel dalam CSS dan menggunakannya berulang kali dalam stylesheet. Variabel CSS dapat diubah nilainya dengan JavaScript, sehingga memungkinkan kita untuk membuat tampilan halaman web yang dinamis dan mudah diubah-ubah. Penggunaan variabel CSS juga dapat meningkatkan konsistensi dan keseragaman tampilan halaman web serta memudahkan pemeliharaan stylesheet.
0 comments
Posting Komentar