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 mulaiversi 29 atau yang terbaru.
Referensi ke variabel dapat dibuat dalam nilai properi menggunakan sintakvar().
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:
Variabel diselesaikan berdasarkan nilai variabel di element property dengan referensi variabel yang diterapkan. Jika elemen
H2 memilikistyle="var-theme-colour-1: black" diatasnya, makaH2{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
Sumber : http://www.tutorial-webdesign.com/mendeklarasikan-variabel-di-css/
0 komentar:
Post a Comment