Menggunakan Properti Kustom CSS untuk UX yang Lebih Baik
Diterbitkan: 2019-11-29
Terakhir diperbarui - 8 Juli 2021
CSS3 membawa salah satu tambahan terbesar yang dimiliki spesifikasi CSS untuk waktu yang lama. Ini menghasilkan banyak desas-desus karena membahas masalah utama yang telah mengganggu pengembang selama bertahun-tahun, dan merupakan penyebab utama orang lebih memilih penggunaan pra-prosesor seperti SASS: kemampuan untuk menggunakan variabel.
Dengan penambahan variabel CSS, banyak kode yang harus ditulis untuk mendukung fitur dasar seperti tema tidak lagi diperlukan. Ini adalah fitur berguna yang dapat digunakan untuk menghindari pengulangan dan memungkinkan lebih banyak kasus penggunaan seperti ukuran font dinamis dan kesederhanaan dalam penambahan daya tanggap dalam aplikasi web.
Menyingkirkan kekacauan dengan variabel CSS
Fitur umum dari sebagian besar aplikasi adalah warna merek yang harus tetap sama dan konsisten di seluruh aplikasi. Tidak ada yang memiliki pikiran untuk menyimpan sepuluh nilai hex yang berbeda di kepala mereka untuk referensi di masa mendatang, dan bolak-balik antara file untuk menyalin nilai tidak hanya rumit, tetapi juga merusak produktivitas. Sekarang, bayangkan jumlah pekerjaan yang harus dilakukan jika warna-warna itu perlu diubah.
Menggunakan praprosesor CSS dengan WordPress adalah cara paling umum untuk mengatasi masalah tersebut. Ini menawarkan dukungan untuk seluruh host fitur seperti mixin, deklarasi bersarang dan, tentu saja, variabel, yang merupakan dorongan besar untuk produktivitas.
Yang perlu Anda lakukan hanyalah menulis kode Anda sekali dan kode itu akan dikompilasi ke CSS, yang dapat Anda akses dan ubah dengan bebas jika diinginkan. Namun, ketidakmampuan untuk menemukan dan mengubah nilai-nilai ini saat runtime, katakanlah, menambahkan tema gelap ke aplikasi web Anda adalah kelemahan terbesarnya. Ini adalah masalah besar bukan hanya karena SASS tidak mendukungnya, tetapi kemungkinan besar tidak akan pernah.
Penambahan variabel built-in kustom ke CSS terbuka memiliki pengaruh besar pada cara kita menulis aplikasi, terutama yang berkaitan dengan tema dan desain responsif.
Seperti apa dukungan browser untuk variabel CSS?
Ini adalah pertanyaan paling umum yang muncul ketika variabel CSS dibawa ke dalam diskusi. Menurut Caniuse , dukungan browser untuk variabel CSS mencapai 93,16%. Ini didukung di semua browser modern (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+, dan Edge 16+). Seperti biasa, IE hilang dari pertunjukan dan memiliki pangsa pasar 6,47% yang mengejutkan. Untuk pengembang miskin yang harus mendukung browser lama, jangan khawatir. Polyfill , atau lebih tepatnya, ponyfill, ada di sini untuk menyelamatkan hari.
Pengantar formal untuk variabel CSS
Jika Anda terbiasa dengan variabel CSS, Anda seharusnya tidak mengalami masalah dengan variabel CSS.
Variabel SASS dideklarasikan seperti ini:
<pra>
$facebook-biru: #4267B2;
</pre>
Sementara variabel CSS dideklarasikan sedikit berbeda:
<pra>
:akar {
–warna-merek: #4267B2;
}
.brand-navbar {
latar belakang: var(- -brand-color);
}
</pre>
Perhatikan beberapa perbedaan antara dua sintaks:
- Variabel CSS harus didahului oleh dua tanda hubung
- Variabel CSS biasanya dideklarasikan di dalam ':root', tetapi dapat dideklarasikan ulang kapan saja.
- Properti CSS diambil menggunakan fungsi 'var()'.
Variabel CSS juga menawarkan akses ke beberapa fitur tambahan.
Nilai berjenjang
Kaskade properti CSS mengikuti aturan kaskade normal. Dengan kata lain, deklarasi ulang di bawah tidak memengaruhi yang di atas.
<pra>
:root { –warna: kuning; }
div { –warna: biru; }
#hebat { –warna: hijau; }
* { warna: var(–warna); }
<p>Saya akan menjadi kuning, diwarisi dari akar!</p>
<div>Saya biru!</div>
<div id="hebat">
Itu berhasil! aku hijau!
<p>Saya juga hijau! Diwarisi dari atas!</p>
</div>
</pre>
Nilai mundur
Fungsi 'var()' menerima beberapa parameter. Yang kedua dapat digunakan sebagai nilai mundur jika properti CSS khusus tidak ditentukan. Ini adalah fitur yang berguna bagi siapa saja yang perlu mengakses variabel CSS melalui JavaScript.
Tanda tangannya terlihat seperti 'var(<custom-property-name> [, <declaration-value> ]?)' dan dapat digunakan dengan cara berikut
<pra>
.brand-navbar {
latar belakang: var(–warna-merek, “#4267B2”);
}
</pre>
Jika '–brand-color' tidak ditentukan, “#4267B2” akan digunakan sebagai gantinya,
Akses melalui JavaScript
Salah satu alasan terbaik untuk menggunakan variabel CSS di atas praprosesor adalah kemampuan untuk mengakses variabel khusus melalui JavaScript. Variabel praprosesor tidak hidup di browser. Mereka dievaluasi ketika kode dikompilasi. Dengan cara ini, variabel preprocessor tidak dapat diakses di browser. Dengan variabel CSS, properti tinggal di browser, memberikan kemampuan untuk mengedit nilai saat itu juga.
Pertimbangkan dasbor yang memungkinkan pengguna untuk memilih warna khusus melalui sembulan atau yang serupa.
<pra>
.brand-navbar {
latar belakang: var(–warna-merek, “#4267B2”);
}
//Untuk mendapatkan nilai saat ini
getComputedStyle(document.documentElement).getPropertyValue('–brand-color');
//Untuk menetapkan nilai
document.documentElement.style.setProperty('–brand-color', 'red');
//Anda bahkan dapat menetapkan satu properti CSS ke properti lainnya
document.documentElement.style.setProperty('–brand-color','var(–secondary-color)');
</pre>
Lingkup global dan lokal
Jika Anda terbiasa dengan JavaScript (atau bahasa pemrograman apa pun, sebenarnya), maka Anda mungkin memahami konsep pelingkupan. Variabel biasanya dapat didefinisikan sedemikian rupa sehingga hanya dapat diakses oleh bagian kode tertentu, yang disebut cakupan lokal, atau tersedia untuk digunakan di seluruh aplikasi, yang disebut cakupan global.
Variabel CSS bekerja dengan cara yang sama. Beberapa variabel harus dicakup secara global untuk referensi yang lebih mudah, misalnya warna merek dan jarak vertikal. Ini biasanya tetap sama di seluruh aplikasi dan jika ada perubahan, itu harus tercermin di mana-mana. Sebaliknya, variabel yang mungkin memerlukan pelingkupan lokal termasuk tombol dengan varian besar dan kecil yang berbeda. Jika Anda ingin mengubah bantalan pada tombol tertentu, Anda tidak ingin perubahan melintasi seluruh DOM. Itu perlu diubah hanya dalam satu titik di aplikasi.
Secara default, properti CSS dicakup secara lokal. Dan jika Anda telah bekerja dengan JavaScript atau bahasa pemrograman lainnya, pelingkupan memiliki serangkaian masalah sendiri. Karena mereka dapat diwariskan, mereka juga bertindak seperti variabel lokal, yang dapat memiliki beberapa akibat yang menarik jika Anda tidak berhati-hati dengan bagaimana mereka digunakan. Karena nilai mengalir, Anda harus memperhatikan bagaimana Anda mengubahnya, terutama ketika menyangkut JavaScript.
Menggunakan properti khusus dengan kueri media
Sama seperti dengan praprosesor, kelemahan utama menggunakan properti CSS adalah mereka tidak dapat digunakan dalam kueri media. Misalnya, ini tidak akan berhasil.
<pra>
@media (lebar minimum: var(–breakpoint)){
bantalan: 1 rem;
}
</pre>
Yang dapat Anda lakukan adalah mendefinisikan ulang properti kustom dalam kueri media. Jika Anda perlu mengubah ukuran font saat browser diperkecil, Anda beruntung. Dengan variabel CSS, Anda dapat mendengarkan perubahan browser menggunakan JavaScript dan mengubah ukuran apa pun yang perlu diperkecil sekali saja.
Apa sajakah aplikasi praktis dari properti CSS khusus?
“Saat ini, selain menggunakan layanan CDN untuk meningkatkan kinerja situs , menggunakan properti kustom CSS adalah salah satu cara tercepat untuk meningkatkan produktivitas,” saran Colby Stuart, desainer web layanan penulisan makalah kustom .
Terlepas dari manfaat yang disorot dengan baik, itu menambah produktivitas, apakah ada contoh nyata tentang bagaimana mereka dapat digunakan dalam aplikasi web?
Menambahkan mode gelap
Tren baru yang telah merebut pasar konsumen adalah permintaan mode gelap di semua perangkat lunak modern – termasuk aplikasi web. Ini mungkin sedikit lebih rumit daripada menambahkan warna latar belakang gelap. Hal-hal lain yang perlu dipertimbangkan termasuk bagaimana warna teks akan berubah dan bagaimana gambar dengan latar belakang putih akan terpengaruh.
Semua ini dimungkinkan dengan terlebih dahulu mendeklarasikan variabel di seluruh aplikasi Anda. Saat pengguna memicu sakelar untuk mengubah tema situs web menjadi gelap, picu fungsi JavaScript yang mengubah variabel CSS. Jika aplikasi web Anda lebih rumit, ini juga dapat mencakup mengganti gambar saat ini dengan yang ramah mode gelap.
Menambahkan mode Gelap di WordPress
Variabel CSS telah begitu berpengaruh sehingga mereka telah mencapai dunia WordPress. Saat ini, membuat mode gelap (atau, lebih umum, bertema) aplikasi WordPress cukup sepele.
Sebagian besar pengembang WordPress mengandalkan Customizer untuk mengubah tampilan dan fungsionalitas situs mereka. Ini menyediakan akses ke hal-hal seperti warna, font, gambar latar belakang dan sebagainya dengan mengakses CSS situs Anda. Masalah utama dengan ini adalah bahwa dengan mengubah CSS dengan cara ini memaksa PHP untuk merender ulang HTML Anda, dan dengan demikian, menyebabkan server mengirim ulang seluruh file ke browser. Aplikasi Anda membuat permintaan yang tidak perlu, menghabiskan lebih banyak data daripada yang diperlukan.
“Jika aplikasi semacam itu menghadap ke konsumen, Anda mungkin akan mendapatkan banyak keluhan. Jika Anda tidak memiliki file CSS khusus untuk variabel apa pun yang ingin Anda ubah, semuanya menjadi jauh lebih buruk.” Helena Newman, pengembang senior di tinjauan paperowl dan penerbit untuk layanan penulisan resume menganggapnya sebagai tambahan yang diperlukan untuk spesifikasi CSS.
Menggunakan variabel CSS, semua warna diubah di browser menggunakan JavaScript. Satu-satunya permintaan yang akan dibuat adalah mempertahankan tema saat ini ke server jika perlu. Dan bahkan kemudian, variabel seperti itu dapat disimpan di browser.
Menambahkan desain responsif ke situs web
Dengan lebih banyak ponsel di internet daripada sebelumnya, kebutuhan akan situs web responsif tidak pernah lebih jelas. Aspek paling penting dari desain responsif yang menarik perhatian pengembang adalah mengubah ukuran font. Untuk aplikasi yang menggunakan banyak font atau font dinamis, melacaknya dan mengubahnya untuk browser yang berbeda adalah tugas yang sulit.
Sebagai gantinya, properti CSS khusus memungkinkan Anda menentukan ukuran font universal yang dapat digunakan dan digunakan kembali di seluruh situs web Anda. Jika perlu diubah, yang perlu Anda lakukan hanyalah memanggil fungsi JavaScript dan semuanya berfungsi.
Jika Anda tidak perlu mendukung peramban kuno, variabel CSS khusus dapat digunakan bersama dengan sistem CSS kisi (yang relatif) baru untuk menghilangkan kebutuhan akan kueri media sama sekali.
Kemudian lagi, kueri media mungkin masih diperlukan jika Anda perlu mendengarkan perubahan lebar di dalam CSS itu sendiri. Ini adalah satu-satunya cara Anda dapat mendukung browser yang tidak mengizinkan JavaScript untuk berjalan.
Kesimpulan
Variabel CSS khusus adalah beberapa tambahan paling signifikan untuk spesifikasi dalam beberapa waktu. Mereka dapat menyederhanakan proses desain Anda dengan menghapus kekacauan dari file CSS Anda dan menghilangkan kebutuhan untuk membuat permintaan tambahan yang tidak perlu.