Retronal

POLA MOTOR - STOCK LOGO VECTOR - TEMPLATE UNDANGAN PERNIKAHAN

Mendeklarasikan Variabel Di CSS

Suci Liestiani Putriby 0 comments
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 Mendeklarasikan Variabel Di CSS
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.
view source
print?
1:root {
2  var-theme-colour-1: #009EE0;  // Biru
3  var-theme-colour-2: #FFED00;  // Kuning
4  var-theme-colour-3: #E2007A;  // Merah
5  var-spacing: 24px;
6  // var-xxxx untuk membuat variabel lain, syarat variabel harus diawali dengan prefix var-
7}
Untuk Cross Browser mungkin bisa menggunakan sintak berikut ini.
1:root {
2    /* Cross Browser */
3    -webkit-var-theme-colour-1: #009EE0;
4    -moz-var-theme-colour-1: #009EE0;
5    -ms-var-theme-colour-1: #009EE0;
6    -o-var-theme-colour-1: #009EE0;
7    var-theme-colour-1: #009EE0;
8    ...
9    ...
10    -webkit-var-theme-colour-2: #FFED00;
11    ...
12  }
Variabel dapat direferensikan pada setiap posisi elemen dalam nilai properti lain, termasuk properti kustom lainnya. Variabel dalam stylesheet diatas dapat digunakan, misalnya, sebagai berikut:
1h1, h2 {
2  /* Cross Browser */
3  color: webkit-var(theme-colour-1);
4  color: moz-var(theme-colour-1);
5  color: ms-var(theme-colour-1);
6  color: o-var(theme-colour-1);
7  color: var(theme-colour-1);
8}
9h1, h2, p {
10  margin-top: var(spacing);
11}
12em {
13  background-color: var(theme-colour-2);
14}
15blockquote {
16  margin: var(spacing) calc(var(spacing) * 2);
17  padding: calc(var(spacing) / 2) 0;
18  border-top: 2px solid var(theme-colour-3);
19  border-bottom: 1px dotted var(theme-colour-3);
20  font-style: italic;
21}
Selanjutnya buat sintak html sebagai berikut.
1<!DOCTYPE html>
2<h1>The title of the document</h1>
3<h2>A witty subtitle</h2>
4<p><em>Please</em> consider the following quote:</p>
5<blockquote>Text of the quote goes here.</blockquote>
maka hasilnya dalah seperti ini:
css variabel Mendeklarasikan Variabel Di CSS
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:
1h1, h2 {
2  color: var(theme-colour-1, rgb(14, 14, 14));
3}
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/

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Bottom Ad [Post Page]