Variabel CSS, lebih akurat dikenal sebagai properti khusus CSS, akan hadir di Chrome 49. Mereka dapat berguna untuk mengurangi pengulangan di CSS, dan juga untuk efek runtime yang kuat, seperti peralihan tema dan memperluas/mem-{i>plying<i} fitur CSS mendatang.
Kekacauan CSS
Saat mendesain aplikasi, sebaiknya sisihkan sekumpulan merek warna yang akan digunakan kembali untuk menjaga konsistensi tampilan aplikasi. Sayangnya, mengulangi nilai warna ini secara berulang-ulang dalam CSS Anda adalah tidak hanya pekerjaan rumah, tetapi juga rentan terhadap kesalahan. Jika, pada suatu saat, salah satu warna perlu diubah, Anda dapat berhati-hati saat menghadapi angin dan “cari-dan-ganti” segala sesuatunya, tetapi pada proyek yang cukup besar ini bisa dengan mudah menjadi berbahaya.
Belakangan ini banyak pengembang yang beralih ke praprosesor CSS seperti SASS atau MINIMAL menyelesaikan masalah ini melalui penggunaan variabel preprosesor. Meskipun alat ini telah sangat meningkatkan produktivitas pengembang, variabel yang mereka gunakan memiliki kelemahan utama, yaitu perangkat itu statis dan tidak dapat berubah pada saat runtime. Menambahkan kemampuan untuk mengubah variabel saat {i>runtime<i} tidak hanya membuka pintu ke hal-hal seperti tema aplikasi dinamis, tetapi juga memiliki dampak terhadap desain responsif dan potensi mem-polyfill CSS di masa mendatang baru. Dengan dirilisnya Chrome 49, kemampuan ini kini tersedia di dalam bentuk properti khusus CSS.
Ringkasan properti kustom
Properti khusus menambahkan dua fitur baru ke toolbox CSS:
- Kemampuan penulis untuk menetapkan nilai arbitrer ke sebuah properti dengan nama yang dipilih penulis.
- Fungsi
var()
, yang memungkinkan penulis menggunakan nilai-nilai ini dalam properti baru.
Berikut adalah contoh singkat untuk mendemonstrasikan
:root {
--main-color: #06c;
}
#foo h1 {
color: var(--main-color);
}
--main-color
adalah properti kustom yang ditentukan penulis dengan nilai #06c. Catatan
bahwa semua properti kustom dimulai dengan dua tanda hubung.
Fungsi var()
mengambil dan mengganti dirinya sendiri dengan properti kustom
nilai, menghasilkan color: #06c;
Selama properti khusus ditentukan
di suatu tempat di stylesheet Anda harus tersedia untuk fungsi var
.
Sintaks mungkin terlihat sedikit aneh pada awalnya. Banyak pengembang bertanya, "Mengapa tidak
hanya menggunakan $foo
untuk nama variabel?" Pendekatan ini secara khusus
dipilih secara khusus untuk
sefleksibel mungkin dan kemungkinan besar memungkinkan makro $foo
di masa mendatang.
Untuk latar belakang, Anda dapat membaca postingan ini
dari salah satu penulis spesifikasi, Tab Atkins.
Sintaksis properti kustom
Sintaksis untuk properti kustom cukup jelas.
--header-color: #06c;
Perhatikan bahwa properti kustom peka huruf besar/kecil, jadi --header-color
dan
--Header-Color
adalah properti kustom yang berbeda. Meskipun mungkin tampak sederhana
nilai nominal, sintaksis yang diizinkan untuk properti khusus sebenarnya cukup
dan permisif. Misalnya, berikut adalah properti kustom yang valid:
--foo: if(x > 5) this.width = 10;
Meskipun ini tidak akan berguna sebagai variabel, karena akan menjadi tidak valid dalam properti normal, data tersebut berpotensi dibaca dan ditindaklanjuti dengan JavaScript di waktu beroperasi. Ini berarti properti khusus memiliki potensi untuk membuka semua jenis teknik menarik yang saat ini tidak mungkin dilakukan pada praprosesor CSS saat ini. Namun kalau Anda berpikir “menguap Saya punya SASS jadi siapa peduli...” maka coba lihat kembali! Ini bukan variabel yang biasa Anda gunakan untuk bekerja.
Air terjun
Properti kustom mengikuti aturan berurutan standar, sehingga Anda dapat menentukan properti di berbagai tingkat kekhususan
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
Artinya, Anda dapat memanfaatkan properti khusus di dalam kueri media untuk membantu dengan desain responsif. Salah satu kasus penggunaannya adalah memperluas margin di sekitar elemen bagian utama Anda saat ukuran layar meningkat:
:root {
--gutter: 4px;
}
section {
margin: var(--gutter);
}
@media (min-width: 600px) {
:root {
--gutter: 16px;
}
}
Penting untuk diingat bahwa cuplikan kode di atas tidak mungkin digunakan menggunakan praprosesor CSS saat ini yang tidak dapat menentukan variabel di dalam media terhadap kueri. Dengan memiliki kemampuan ini, banyak potensi yang muncul.
Anda juga dapat memiliki properti khusus yang memperoleh nilainya dari properti khusus. Hal ini bisa sangat berguna untuk penerapan tema:
:root {
--primary-color: red;
--logo-text: var(--primary-color);
}
Fungsi var()
Untuk mengambil dan menggunakan nilai properti khusus, Anda harus menggunakan
Fungsi var()
. Sintaksis untuk fungsi var()
terlihat seperti ini:
var(<custom-property-name> [, <declaration-value> ]? )
Dengan <custom-property-name>
adalah nama properti khusus yang ditentukan penulis,
seperti --foo
, dan <declaration-value>
adalah nilai penggantian yang akan digunakan saat
properti khusus yang direferensikan tidak valid. Nilai penggantian dapat dipisahkan dengan koma
yang akan digabungkan
menjadi satu nilai. Misalnya, var(--font-stack,
"Roboto", "Helvetica");
menentukan penggantian "Roboto", "Helvetica"
. Tetap di
bahwa nilai ringkas, seperti yang digunakan
untuk margin dan pelapis, tidak
dipisahkan koma, sehingga penggantian yang tepat untuk padding akan terlihat seperti ini.
p {
padding: var(--pad, 10px 15px 20px);
}
Dengan menggunakan nilai pengganti ini, penulis komponen bisa menulis gaya defensif untuk elemen mereka:
/* In the component’s style: */
.component .header {
color: var(--header-color, blue);
}
.component .text {
color: var(--text-color, black);
}
/* In the larger application’s style: */
.component {
--text-color: #080;
/* header-color isn’t set,
and so remains blue,
the fallback value */
}
Teknik ini sangat berguna untuk memberi tema pada Komponen Web yang menggunakan Bayangan DOM, karena properti khusus bisa melewati batas bayangan. Penulis Komponen Web dapat membuat desain awal menggunakan nilai penggantian, dan mengekspos tema "hook" dalam bentuk properti kustom.
<!-- In the web component's definition: -->
<x-foo>
#shadow
<style>
p {
background-color: var(--text-background, blue);
}
</style>
<p>
This text has a yellow background because the document styled me! Otherwise it
would be blue.
</p>
</x-foo>
/* In the larger application's style: */
x-foo {
--text-background: yellow;
}
Saat menggunakan var()
, ada beberapa hal yang harus diperhatikan. Variabel tidak boleh berupa
nama properti. Misalnya:
.foo {
--side: margin-top;
var(--side): 20px;
}
Namun, hal ini tidak sama dengan menyetel margin-top: 20px;
. Sebagai gantinya,
deklarasi kedua tidak valid dan dibuang sebagai error.
Demikian pula, Anda tidak dapat (naif) membangun nilai yang sebagiannya disediakan oleh variabel:
.foo {
--gap: 20;
margin-top: var(--gap)px;
}
Sekali lagi, setelan ini tidak sama dengan menetapkan margin-top: 20px;
. Untuk membangun
Anda memerlukan nilai lain: fungsi calc()
.
Membangun nilai dengan calc()
Jika Anda belum pernah menggunakannya sebelumnya, fungsi calc()
merupakan
yang memungkinkan Anda melakukan perhitungan untuk menentukan nilai CSS. Alat ini didukung di semua browser modern, dan dapat digabungkan
dengan properti khusus untuk membangun nilai baru. Contoh:
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px); /* niiiiice */
}
Menggunakan properti kustom di JavaScript
Untuk mendapatkan nilai properti khusus saat runtime, gunakan getPropertyValue()
objek CSSStyleDeclaration yang dikomputasi.
/* CSS */
:root {
--primary-color: red;
}
p {
color: var(--primary-color);
}
<!-- HTML -->
<p>I’m a red paragraph!</p>
/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'
Demikian pula, untuk menetapkan nilai properti khusus saat runtime, gunakan atribut
Metode setProperty()
dari objek CSSStyleDeclaration
.
/* CSS */
:root {
--primary-color: red;
}
p {
color: var(--primary-color);
}
<!-- HTML -->
<p>Now I’m a green paragraph!</p>
/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');
Anda juga dapat menetapkan nilai properti khusus untuk merujuk ke properti khusus lainnya
pada runtime dengan menggunakan fungsi var()
dalam panggilan Anda ke
setProperty()
.
/* CSS */
:root {
--primary-color: red;
--secondary-color: blue;
}
<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>
/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');
Karena properti khusus dapat merujuk ke properti khusus lainnya di Anda bisa membayangkan bagaimana hal ini bisa menghasilkan segala macam efek runtime.
Dukungan browser
Saat ini Chrome 49, Firefox 42, Safari 9.1, dan iOS Safari 9.3 mendukung kustom properti baru.
Demo
Coba contoh untuk melihat sekilas semua teknik menarik yang sekarang dapat Anda manfaatkan, terima kasih pada properti khusus.
Bacaan lebih lanjut
Jika Anda tertarik untuk mempelajari properti khusus lebih lanjut, Philip Walton dari tim Google Analytics telah menulis penjelasan tentang alasan ia tertarik dengan properti kustom dan Anda dapat terus memantau kemajuan mereka di {i>browser<i} lain dalam waktu chromestatus.com.