Fitur baru CSS Variable, Salah satu permintaan yang paling sering ditanyakan, paling diinginkan, paling ditunggu-tunggu oleh web designer adalah “Apakah CSS bisa mendeklarasikan variable?”. Dan akhirnya pertanyaan itu dijawab sudah oleh W3C. Setelah banyak diskusi, akhirnya CSS Custom Property untuk menentukan variable di css mulai bisa diimplementasikan. Fitur ini tentunya memungkinkan penulis kode css bisa menentukan variable untuk bisa digunakan berulang kali di dalam dokumen css.
Untuk mencobanya anda bisa menggunakan Mozilla Firefox Nightly mulai versi 29 atau yang terbaru.
Referensi ke variabel dapat dibuat dalam nilai properi menggunakan sintak var().

Image Credit : IaRuth
Sifat kustom yang mendeklarasikan variabel semuanya harus diberinama yang dimulai dengan var-. Nilai properti kustom harus unik. Semua dapat mengambil hampir semua aliran token, asalkan seimbang.
Sebagai contoh, seorang penulis akan menyatakan beberapa nilai umum pada aturan gaya penulisan yang cocok dengan elemen root, sehingga akan tersedia pada setiap elemen dalam dokumen.
Untuk Cross Browser mungkin bisa menggunakan sintak berikut ini.
Variabel dapat direferensikan pada setiap posisi elemen dalam nilai properti lain, termasuk properti kustom lainnya. Variabel dalam stylesheet diatas dapat digunakan, misalnya, sebagai berikut:
Selanjutnya buat sintak html sebagai berikut.
maka hasilnya dalah seperti ini:
Variabel diselesaikan berdasarkan nilai variabel di element property dengan referensi variabel yang diterapkan. Jika elemen H2
memiliki style="var-theme-colour-1: black"
diatasnya, maka H2{color: var(theme-colour-1);}
menurut aturan akan diselesaikan dengan menggunakan nilai yang ada di :root
.
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 variabel theme-colour-1 tidak didefinisikan pada salah satu elemen heading.
Sekian pengenalan singkat tentang penggunaan variabel di CSS, untuk info lebih lanjut silahkan baca dokumen resmi dari W3C
kok malah lebih rumit ya gan, haduuuuh..
Ah gak rumit kok, malah bikin gampang.
Cuma perlu hapalin 2 cara aja
var-xxx
dan
var(xxx)
ya itu, ribetnya pake variabel, kalau belum hafal susah banget.. hehe..
Yaelah cuma dua doank, kalo gitu aja susah gausah berurusan sama pembuatan web lah :D
Keren gan, tapi klo menurut saya kok jadi bukan kyk css ya? hehe
Masih agak pusing @_@ , tapi mangstab inponya :D
sip, cukup pusing. tapi mantabb :D
belum support semua browser ya ?
knp ga pake LESS aja.. dah pake variable kok kl mau kasih style ke CSS nya. cm abis itu di convert, bootstrap pake LESS
kok text nya, gak ada warnanya gan?
Ya tinggal di warnain aja sih… :) #simple
[…] TWD Editorial URL:http://goo.gl/aemBR1 December 26th, 2013 Headline, News, Web Design 9 Comments […]
ternyata CSS masih terlalu luas untu dipelajari
semangat belajar lagi :D
Perkembangan CSS selalu menarik karena berhubungan langsung dengan visual :D
jelek