Mendeklarasikan Variabel Di CSS

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.

:root {
  var-theme-colour-1: #009EE0;  // Biru
  var-theme-colour-2: #FFED00;  // Kuning
  var-theme-colour-3: #E2007A;  // Merah
  var-spacing: 24px;
  // var-xxxx untuk membuat variabel lain, syarat variabel harus diawali dengan prefix var-
}

Untuk Cross Browser mungkin bisa menggunakan sintak berikut ini.

:root {
    /* Cross Browser */
    -webkit-var-theme-colour-1: #009EE0;
    -moz-var-theme-colour-1: #009EE0;
    -ms-var-theme-colour-1: #009EE0;
    -o-var-theme-colour-1: #009EE0;
    var-theme-colour-1: #009EE0;
    ...
    ...
    -webkit-var-theme-colour-2: #FFED00;
    ...
  }

Variabel dapat direferensikan pada setiap posisi elemen dalam nilai properti lain, termasuk properti kustom lainnya. Variabel dalam stylesheet diatas dapat digunakan, misalnya, sebagai berikut:

h1, h2 {
  /* Cross Browser */
  color: webkit-var(theme-colour-1);
  color: moz-var(theme-colour-1);
  color: ms-var(theme-colour-1);
  color: o-var(theme-colour-1);
  color: var(theme-colour-1);
}
h1, h2, p {
  margin-top: var(spacing);
}
em {
  background-color: var(theme-colour-2);
}
blockquote {
  margin: var(spacing) calc(var(spacing) * 2);
  padding: calc(var(spacing) / 2) 0;
  border-top: 2px solid var(theme-colour-3);
  border-bottom: 1px dotted var(theme-colour-3);
  font-style: italic;
}

Selanjutnya buat sintak html sebagai berikut.

<!DOCTYPE html>
<h1>The title of the document</h1>
<h2>A witty subtitle</h2>
<p><em>Please</em> consider the following quote:</p>
<blockquote>Text of the quote goes here.</blockquote>

maka hasilnya dalah seperti ini:

css-variabel

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:

h1, h2 {
  color: var(theme-colour-1, rgb(14, 14, 14));
}

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

Ref: http://dev.w3.org/csswg/css-variables

TWD Editorial

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

15 thoughts on “Mendeklarasikan Variabel Di CSS”

Dhimas Kirana says:

December 26, 2013 at 12:34

kok malah lebih rumit ya gan, haduuuuh..

TWD Editorial says:

December 26, 2013 at 12:42

Ah gak rumit kok, malah bikin gampang.
Cuma perlu hapalin 2 cara aja
var-xxx
dan
var(xxx)

Reply
- Dhimas Kirana says:
  
  December 29, 2013 at 06:49
  
  ya itu, ribetnya pake variabel, kalau belum hafal susah banget.. hehe..
  
  Reply
  - TWD Editorial says:
    
    December 29, 2013 at 19:47
    
    Yaelah cuma dua doank, kalo gitu aja susah gausah berurusan sama pembuatan web lah :D
    
    Reply