Selamat Datang

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().

css-variable

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





Penulis :

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

  1. kok malah lebih rumit ya gan, haduuuuh..

  2. Rangga says:

    Keren gan, tapi klo menurut saya kok jadi bukan kyk css ya? hehe

  3. Qy says:

    Masih agak pusing @_@ , tapi mangstab inponya :D

  4. Bayu Handono says:

    sip, cukup pusing. tapi mantabb :D

  5. Rsdaqb says:

    belum support semua browser ya ?

  6. loamx says:

    knp ga pake LESS aja.. dah pake variable kok kl mau kasih style ke CSS nya. cm abis itu di convert, bootstrap pake LESS

  7. mandrow says:

    kok text nya, gak ada warnanya gan?

  8. […] TWD Editorial URL:http://goo.gl/aemBR1 December 26th, 2013 Headline, News, Web Design 9 Comments […]

  9. Rivaldi says:

    ternyata CSS masih terlalu luas untu dipelajari
    semangat belajar lagi :D

  10. Perkembangan CSS selalu menarik karena berhubungan langsung dengan visual :D

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development