Akhirnya Google Chrome Sekarang Mendukung CSS Variabel

css code

Google Chrome Sekarang Mendukung CSS Variabel – Jika kamu seorang developer front-end, pasti pernah merasakan ketika website sudah menjadi besar akan cukup sulit untuk sekedar mengganti warna brand agar warna pada web tetap konsisten. Kadang bosan harus mengganti warna hex satu persatu. Jika di-replace semua akan beresiko, warna yang seharusnya tidak diubah akan ikut berubah. Developer harus kerja dua kali menelusuri kode CSS.

Untuk meyiasati kekacauan itu sebagian developer telah banyak yang telah beralih menggunakan CSS preprocessor seperti SCSS atau LESS karena developer bisa membuat variabel sendiri. Tools ini terbukti meningkatkan produktifitas pada front-end developer. Namun CSS prepocessor ini juga memiliki kekurangan, kode yang dibuat menggunakan SCSS atau LESS tidak dapat langsung digunakan atau runtime. Developer harus meng-compile SCSS atau LESS tersebut agar terkonversi ke kode standar CSS. Berikut contoh penggunaan CSS variabel.

Google Chrome 49 sekarang mendukung penuh penggunaan variabel CSS, sehingga para pengembang dapat menentukan variabel yang akan digunakan di seluruh kode mereka dan dapat diubah secara realtime. Pengembang tidak memerlukan kompilasi tambahan.

Developer sekarang dapat menggunakan fungsi var() untuk mendeklarasikan nama custom property dan value-nya dapat digunakan kembali di seluruh CSS mereka. Chrome juga mendukung menggunakan variabel-variabel kustom baru di JavaScript tanpa ada issue apapun. Saat ini hanya Chrome 49, Firefox 42, Safari 9.1, dan iOS Safari 9.3 yang mendukung custom property.

Via TNW
Sumber Google Developers
Dilihat 208 kali

Related Posts

About The Author

From developer, become tech journalist