|

Mengetahui Lebih Dalam Variable Pada CSS

Kembali lagi bersama saya para penggemar IT disini saya akan membahas sebuah artikel yang menarik menurut saya karena kita akan membahas tentang bahasa CSS atau Cascading Style Sheet dimana CSS ini mempunyai fitur baru yaitu bisa mendeklarasikan sebuah Variable di dalam nya, sungguh menarik bukan ?.

Karena pada dasar nya ini lah yang di tunggu tunggu oleh pada Web Designer dan tidak beberapa lama akhir nya permintaan CSS Variable dijawab oleh W3C dan sekarang dapat diimplementasikan fitur ini tentunya memungkinkan penulis kode CSS bisa menentukan variable untuk bisa digunakan berulang kali di dalam dokumen CSS.

Variable dalam CSS ini kalian bisa mencoba nya dengan menggunakan Mozilla Firefox Nightly dari mulai versi 29 atau yang terbaru.

Untuk memulai referensi dalam CSS nya kalian bisa menggunakan sintax var() dan dari mulai sifat costume variable menggunakan nama var- pada setiap pendeklarasiannya. Nilai properti kustom harus unik. Semua dapat mengambil hampir semua aliran token, asalkan seimbang.

Sebagai contoh si penulis akan menyatakan beberapa nilai umum pada aturan gaya penulisan yang pas dengan elemen root, sehingga akan tersedia pada setiap elemen dalam dokumen.

Untuk Cross Browser mungkin bisa menggunakan sintax berikut ini.

Variabel dapat direferensikan pada setiap posisi elemen dalam nilai properti lain, termasuk properti costume lainnya.

Selanjutnya membuat sintax HTML berikut :

Maka hasil nya akan seperti ini :

Referensi variabel juga dapat mencakup fallback untuk digunakan dalam kasus variabel tidak ditentukan atau tidak valid ( karena menjadi bagian dari siklus referensi variabel).

Aturan pertama dalam stylesheet menggunakan variabel yang ditulis sebagai berikut:

Yang akan menghasilkan warna menjadi abu-abu gelap jika variabeltheme-colour-1

tidak didefinisikan pada salah satu elemen heading.

Demikian Artikel tentang Mengetahui Lebih Dalam Variable Pada CSS semoga bisa menambah pengetahuan kita semua tentang CSS fitur baru ini.
Referensi :
www.tutorial-webdesign.com/mendeklarasikan-variabel-di-css/

Sumber Gambar :
http://www.javascriptkit.com

Similar Posts