Jadikan CSS Anda Dinamis dengan CSS Custom Properties

Jika Anda telah menulis CSS untuk sementara waktu, Anda pasti pernah merasakan kebutuhan akan variabel. Properti kustom CSS agak seperti implementasi variabel CSS sendiri. Namun, ketika digunakan dengan benar, mereka bisa menjadi lebih dari sekadar variabel.

Properti kustom CSS memungkinkan Anda untuk:

• Tetapkan nilai arbitrer ke properti dengan nama pilihan Anda
• Gunakan fungsi var() untuk menggunakan nilai-nilai ini di properti lain

Meskipun dukungan untuk properti kustom CSS agak sulit saat ini, dan beberapa browser mendukungnya di bawah tanda yang perlu diaktifkan atau disetel ke true sebelumnya, dukungan mereka diharapkan meningkat secara dramatis, jadi penting untuk dipahami bagaimana menggunakan dan memanfaatkannya. ¹

Dalam artikel ini, Anda akan mempelajari bagaimana Anda dapat menggunakan CSS Custom Properties untuk membuat stylesheet Anda sedikit lebih dinamis, mungkin membuat langkah Sass/LESS ekstra di pipeline aset Anda menjadi usang.

Variabel CSS Asli, dan Kurang Kuat

Sebelum kita mulai membahas properti kustom CSS, perlu dicatat bahwa untuk waktu yang lama sekarang, CSS memiliki semacam variabel, dan itu adalah kata kunci currentColor saat ini. Variabel yang jarang digunakan tetapi didukung secara luas ini, mengacu pada nilai warna elemen saat ini. Itu dapat digunakan pada deklarasi apa pun yang menerima nilai color , dan mengalir dengan sempurna.

Mari kita lihat sebuah contoh:

 .element { color: blue; border: 2px solid currentColor; /* Sets a solid, 2px wide, blue border to the element */ }

Selain mengalir, ini juga dapat menghasilkan yang berikut:

 .element span { background: currentColor; /* Sets a blue background color for every span child of .element, unless a color property is declared in this same block */ } .element span.red { color: red; /* Sets a red background color for every span child of .element that has the class .red, since currentColor is applied to the background of every span child of .element no matter if they have the .red class or not */ }

Masalah utama dengan currentColor , selain dari fakta bahwa itu tidak ada dalam spesifikasi sebagai variabel semata, adalah bahwa ia hanya menerima nilai dari properti warna, yang dapat mempersulit pengerjaan dalam beberapa kasus.

Variabel CSS yang lengkap

Salah satu keuntungan utama menggunakan pra/pascaprosesor CSS adalah memungkinkan nilai disimpan dalam kata kunci dan memiliki cakupan ke pemilih tertentu jika perlu.

Setelah lama diminta oleh pengembang, draf interpretasi variabel asli untuk CSS telah ditulis. Ini secara resmi disebut sebagai properti kustom CSS, tetapi terkadang juga disebut sebagai variabel CSS.

Spesifikasi saat ini untuk properti kustom CSS asli mencakup semua perilaku yang sama seperti variabel pra/pascaprosesor. Ini memungkinkan Anda untuk menyimpan kode warna, ukuran dengan semua unit yang diketahui, atau hanya bilangan bulat jika diperlukan (misalnya, ketika Anda perlu menggunakan pembagi atau pengali yang sama).

Sintaks untuk properti kustom CSS agak aneh dibandingkan dengan bahasa lain, tetapi sangat masuk akal jika Anda membandingkan sintaksnya dengan fitur lain dalam ekosistem CSS yang sama:

 :root { --color-black: #2e2e2e; } .element { background: var(--color-black); }

Sekarang, Anda mungkin berpikir: “Sintaks macam apa itu!?”

Nah, Lea Verou menjelaskan alasan sintaks "tanda hubung" ini dengan sangat sederhana, seperti yang dia katakan dalam ceramahnya yang luar biasa, Variabel CSS: var(–subtitle):

Mereka bekerja dengan cara yang persis sama seperti properti CSS lainnya […]. Begitu banyak orang bertanya kepada saya mengapa kami tidak menggunakan [tanda] dolar atau semacamnya dan alasan kami tidak menggunakan [tanda] dolar adalah karena kami ingin orang-orang dapat menggunakan SASS, atau variabel preprosesor dan variabel CSS. Keduanya adalah hal yang berbeda, mereka mencapai tujuan yang berbeda, ada hal-hal yang dapat Anda lakukan dengan variabel CSS yang sama sekali tidak dapat Anda lakukan dengan SASS, dan ada hal-hal yang dapat Anda lakukan dengan variabel SASS yang tidak dapat Anda lakukan dengan variabel CSS, jadi kami ingin orang untuk dapat menggunakan keduanya dalam stylesheet yang sama, sehingga Anda dapat membayangkan sintaks tanda hubung seperti properti awalan dengan awalan kosong.

Kita bisa mengambil nilai properti kustom menggunakan fungsi var() , yang bisa kita gunakan di mana saja kecuali untuk penyeleksi, nama properti, atau deklarasi kueri media.

Perlu dicatat bahwa sementara variabel pra/pascaprosesor hanya digunakan pada waktu kompilasi, variabel CSS dapat digunakan dan diperbarui secara dinamis. Apa artinya ini? Ini berarti bahwa mereka disimpan dalam stylesheet CSS yang sebenarnya. Jadi gagasan bahwa mereka adalah variabel akan tetap ada bahkan setelah stylesheet dikompilasi.

Untuk membuatnya lebih jelas, izinkan saya menggambarkan situasi menggunakan beberapa contoh. Blok kode berikut adalah bagian dari stylesheet SASS:

 :root { $value: 30px; } @media screen and (min-width: 768px) { $value: 60px; } .corners { border-radius: $value; }

Cuplikan deklarasi dan aturan SASS ini dikompilasi ke CSS sebagai berikut:

 .corners { border-radius: 30px; }

Anda dapat melihat bahwa kedua properti di dalam :root dan kueri media hilang setelah kompilasi, karena variabel SASS tidak dapat ada di dalam file CSS (atau, lebih tepatnya, mereka dapat dipaksa untuk ada dalam file CSS, tetapi diabaikan karena beberapa sintaksnya adalah CSS yang tidak valid), sehingga nilai variabel tidak dapat diperbarui setelahnya.

Sekarang mari kita pertimbangkan kasus yang sama, tetapi diterapkan hanya menggunakan Variabel CSS tanpa pra/pascaprosesor CSS yang diterapkan (yaitu, tanpa transpilasi atau kompilasi apa pun yang dilakukan):

 :root { --value: 30px; } @media screen and (min-width: 768px) { --value: 60px; } .corners { border-radius: var(--value); }

Jelas, tidak ada yang berubah karena kami belum mengkompilasi/mentranskripsikan apa pun, dan nilai properti kustom dapat diperbarui secara dinamis. Jadi, misalnya, jika kita mengubah nilai --value menggunakan sesuatu seperti JavaScript, nilainya akan diperbarui di setiap instance yang dipanggil menggunakan fungsi var().

Kemampuan properti kustom membuat fitur ini begitu kuat sehingga Anda bahkan dapat melakukan hal-hal seperti autoprefixing.

Lea Verou memberikan contoh menggunakan properti clip-path . Kita mulai dengan menyetel nilai properti yang ingin kita awali ke initial tetapi menggunakan properti kustom, dan kemudian melanjutkan untuk menyetel nilai setiap properti awalan ke nilai properti kustom:

 * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

Setelah ini, yang tersisa hanyalah mengubah nilai properti khusus di dalam pemilih:

 header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); }

Jika Anda ingin tahu lebih banyak tentang ini, lihat artikel lengkap Lea tentang autoprefixing dengan variabel CSS.

Properti Kustom CSS anti peluru

Seperti yang telah disebutkan, dukungan browser untuk CSS Custom Properties sebagian besar masih non-standar. Jadi bagaimana ini bisa diatasi?

Di sinilah PostCSS, dan pluginnya, variabel postcss-css, berperan.

Jika Anda bertanya-tanya apa itu PostCSS, periksa artikel saya PostCSS: Tanggal Putar Baru SASS, dan kembali ke sini setelah Anda selesai. Anda kemudian akan memiliki ide dasar tentang apa yang dapat Anda lakukan dengan alat luar biasa ini dan tidak akan merasa bingung saat membaca sisa artikel.

Dengan postcss-css-variables , dan opsi simpannya disetel ke true, kita dapat preserve semua deklarasi fungsi var() dalam output dan memiliki nilai yang dihitung sebagai deklarasi fallback. Itu juga menyimpan deklarasi --var yang dihitung. Perlu diingat bahwa, dengan menggunakan plugin PostCSS ini, properti kustom dapat diperbarui secara dinamis setelah proses transpilasi, tetapi nilai fallback akan tetap sama kecuali jika ditargetkan secara khusus dan diubah secara eksplisit satu per satu.

Jika Anda mencari cara bebas pra/pascaprosesor untuk menggunakan variabel CSS, Anda selalu dapat memeriksa dukungan saat ini secara manual dengan aturan CSS @support dan menerapkan penggantian yang tepat saat dukungan tidak merata atau tidak ada. Sebagai contoh:

 :root { --color-blue: #1e90ff; /* hex value for dodgerblue color */ } .element { background: var(--color-blue); } @supports (not(--value: 0)) { /* CSS variables not supported */ .element { background: dodgerblue; } }

Mengubah Nilai Properti Khusus Menggunakan JavaScript

Saya telah menyebutkan di seluruh artikel ini bahwa variabel dapat diperbarui menggunakan JavaScript, jadi mari kita masuk ke dalamnya.

Katakanlah Anda memiliki tema terang dan ingin mengubahnya menjadi tema gelap, dengan asumsi Anda memiliki beberapa CSS seperti berikut:

 :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); }

Anda dapat memperbarui properti kustom --text-color dan --background-color dengan melakukan hal berikut:

 var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black');

Kasus Penggunaan yang Menarik

Selama bertahun-tahun pengembangan dan diskusi mengenai spesifikasi Properti Kustom CSS, beberapa kasus penggunaan yang menarik telah muncul. Berikut adalah beberapa contoh:

Tema: Menggunakan serangkaian tema untuk situs agak mudah saat menerapkan variabel CSS. Ingin variasi terang atau gelap dari gaya Anda saat ini? Cukup ubah nilai beberapa properti khusus menggunakan JavaScript dan selesai.

Penyetelan jarak: Perlu menyempurnakan jarak situs, misalnya selokan di antara kolom? Ubah nilai variabel CSS tunggal dan lihat perubahan ini tercermin di seluruh situs.

Fungsi calc() sepenuhnya dinamis: Sekarang Anda dapat memiliki fungsi calc() sepenuhnya dinamis menggunakan properti khusus di dalam fungsi ini, menghilangkan kebutuhan untuk membuat perhitungan yang rumit atau sementara di dalam JavaScript dan kemudian memperbarui nilai-nilai ini secara manual pada setiap instance.

Bernapaskan Kehidupan Baru ke dalam File CSS Anda

Properti kustom CSS adalah cara yang kuat dan inovatif untuk menghadirkan lebih banyak kehidupan pada stylesheet Anda, memperkenalkan nilai yang sepenuhnya dinamis untuk pertama kalinya dalam CSS.

Spesifikasi saat ini berada di bawah status Rekomendasi Kandidat, yang berarti bahwa standarisasi sudah dekat, alasan yang baik untuk mendalami fitur ini dan mendapatkan hasil maksimal darinya.