Panduan Pemula untuk Variabel CSS (alias Properti Kustom CSS)

Daftar Isi:

• Variabel CSS di praprosesor #
• Variabel (Properti Kustom) dalam CSS asli #
• Mengapa "Properti Kustom"? #
• Di mana Variabel CSS didefinisikan? #
• Catatan teknis tentang Variabel CSS #
• Memahami fungsi var() #
• Menggunakan Variabel CSS dengan calc() #
• Trik dengan Variabel CSS#

Variabel CSS di praprosesor

Praprosesor CSS telah menggunakan Variabel CSS selama lebih dari 10 tahun. Saya tidak akan membahas secara rinci opsi-opsi tersebut di sini, tetapi saya pikir akan sangat membantu untuk mengetahui bagaimana masing-masing perpustakaan preprosesor populer menggunakan variabel.

Di Sass (atau SCSS), Anda mendeklarasikan variabel sebagai berikut:

Perhatikan tanda dolar ($). Baris pertama adalah deklarasi variabel dan nilainya. Dua blok berikut adalah contoh variabel yang digunakan nanti di stylesheet.

Variabel di Less.js menggunakan simbol @ :

Dan dalam variabel Stylus terlihat seperti ini:

Anda dapat berkonsultasi dengan bagian dokumentasi individual untuk setiap praprosesor yang ditampilkan di atas jika Anda ingin melihat lebih jauh ke dalam variabel menggunakan teknologi pihak ketiga ini.

Variabel (Properti Kustom) dalam CSS asli

Ini membawa kita ke Variabel CSS, atau Properti Kustom, seperti yang didefinisikan dalam spesifikasi CSS. Untuk mendeklarasikan variabel dalam CSS biasa, tempatkan dua tanda hubung di depan nama khusus yang Anda pilih untuk variabel, atau properti, lalu gunakan fungsi var() untuk menempatkan nilai itu di mana pun Anda inginkan:

Dalam contoh ini, saya telah mendefinisikan dua variabel CSS: --main dan --accent . Saya kemudian menggunakan setiap variabel CSS pada dua elemen berbeda, menunjukkan fleksibilitas yang mereka buka.

Seperti halnya variabel dalam bahasa pemrograman apa pun, ini memungkinkan Anda untuk mendeklarasikan variabel di satu tempat. Jika nanti Anda ingin mengubah nilai itu di mana pun di stylesheet Anda, itu hanya masalah mengubah deklarasi asli dan itu akan berlaku untuk semua tempat di mana Anda menggunakan variabel.

Mengapa "Properti Kustom"?

Dalam percakapan sehari-hari, pengembang sering menyebut fitur ini sebagai "variabel CSS", sejalan dengan cara praprosesor dan bahasa pemrograman merujuk ke fitur yang sama. Namun dari sudut pandang teknis yang ketat, ini sebenarnya bukan "variabel" melainkan Properti Khusus .

Mereka memiliki sintaks yang sama seperti properti yang telah ditentukan sebelumnya di CSS, kecuali untuk dua tanda hubung yang muncul di depan nama properti. Dua tanda hubung memungkinkan penulis CSS untuk menggunakan pengenal putus-putus yang valid tanpa takut berkonflik dengan properti CSS biasa.

Spesifikasi menjelaskan bahwa dua tanda hubung saja tidak valid (tampaknya dicadangkan untuk penggunaan di masa mendatang) dan CSS tidak akan pernah memberi arti pada pengenal putus-putus apa pun yang valid di luar penggunaannya sebagai properti khusus yang ditentukan oleh penulis.

Tidak seperti properti CSS biasa, Properti Kustom peka terhadap huruf besar-kecil. Ini berarti --main-color tidak sama dengan --Main-Color . Karakter yang valid untuk disertakan dalam nama properti kustom adalah huruf, angka, garis bawah, dan tanda hubung.

Di mana Variabel CSS didefinisikan?

Seperti yang dapat Anda lihat pada contoh yang saya berikan di atas, Anda akan sering melihat properti kustom CSS yang ditentukan langsung pada elemen root dari dokumen HTML atau shadow DOM. Selektor pseudo-class :root menyelesaikan ini.

Tetapi Variabel CSS tidak terbatas hanya didefinisikan pada elemen root dan seringkali bermanfaat untuk mendefinisikannya di tempat lain. Pemilih :root biasanya dipilih karena ini selalu menargetkan elemen paling atas di pohon DOM (apakah itu dokumen lengkap atau DOM bayangan).

Dalam kebanyakan kasus, Anda akan mendapatkan hasil yang sama dengan mendefinisikan properti kustom pada elemen html (yang merupakan elemen root dalam dokumen HTML) atau bahkan elemen body . Menggunakan :root memungkinkan kode menjadi lebih tahan masa depan (misalnya jika suatu hari spesifikasi menambahkan elemen baru sebagai root, CSS akan tetap sama) dan saya kira juga memungkinkan stylesheet untuk diterapkan ke jenis dokumen berbeda yang memiliki elemen akar yang berbeda.

Misalnya, kode berikut akan membatasi properti kustom Anda untuk digunakan hanya di elemen .sidebar :

Untuk tujuan demonstrasi, Anda akan sering melihat variabel yang didefinisikan pada :root , tetapi Anda dapat menggunakannya di mana saja yang praktis. Faktanya, banyak pengembang merekomendasikan untuk menyetelnya lebih rendah di pohon DOM untuk modul yang lebih kecil selama pengembangan awal, kemudian naik ke atas menuju :root saat Anda membuat nilai yang cakupannya lebih besar.

Catatan teknis tentang Variabel CSS

Selain dapat diterapkan ke elemen apa pun, Variabel CSS cukup fleksibel dan mudah ditangani.

Berikut beberapa hal yang perlu diperhatikan:

• Mereka diselesaikan dengan warisan CSS biasa dan aturan kaskade
• Anda dapat menggunakannya dalam kueri media dan aturan bersyarat lainnya
• Anda dapat mendefinisikannya dalam atribut style elemen
• Mereka dapat dibaca atau diatur menggunakan fitur Model Objek CSS.

Perlu diperhatikan juga bahwa pada dasarnya Anda dapat membuat sarang variabel CSS. Perhatikan contoh berikut:

Perhatikan saya telah mendefinisikan variabel --main-color lalu saya menggunakan nama variabel yang sama sebagai nilai untuk variabel CSS berikut.

Anda juga dapat menggunakan kata kunci !important dalam nilai variabel CSS, tetapi ini hanya menerapkan "kepentingan" ke variabel itu sendiri dalam kaitannya dengan definisi variabel lain dan bukan pada nilai yang digunakan pada satu atau beberapa elemen dalam dokumen. Jika ini membingungkan, berikut ini contohnya:

Dalam contoh di atas, warna latar belakang akan menjadi "biru muda", meskipun oranye muncul kemudian dalam definisi variabel. Tetapi nilai latar belakang itu sendiri pada elemen body tidak akan menjadi penting.

Variabel CSS juga dapat berisi nilai kata kunci di seluruh CSS seperti initial , inherit , dan unset tetapi all properti tidak memengaruhi Variabel CSS (yaitu tidak disetel ulang).

Memahami fungsi var()

Anda telah melihat fungsi var() yang digunakan dalam beberapa contoh umum dalam tutorial Variabel CSS ini. Tapi ada lebih banyak var() daripada yang telah saya bahas sejauh ini.

Pertama, fungsi var() hanya valid dalam suatu nilai; nama properti atau pemilih tidak dapat menggunakan variabel CSS. Juga, nilai kueri media tidak dapat menggunakan Variabel CSS (mis @media (max-width: var(--my-var)) tidak valid).

Fungsi var() membutuhkan dua argumen:

• Nama properti khusus yang akan disertakan
• Nilai cadangan jika properti khusus tidak valid

Berikut adalah contoh di mana argumen kedua berlaku:

Perhatikan dalam kode di atas saya telah mengeja nama variabel awal menggunakan kata "warna" Inggris atau Kanada tetapi ketika saya menggunakan variabel saya memasukkan ejaan Amerika "warna". Ini membuat variabel secara teknis tidak valid dan latar belakang abu-abu polos ( #ccc ) yang berlaku.

Perhatikan juga bahwa nilai fallback dapat berisi komanya sendiri. Jadi misalnya, jika fallback Anda adalah tumpukan font, ini akan menjadi cara yang valid untuk mendefinisikannya:

Perhatikan lagi variabel saya memiliki cacat, mendeklarasikan --main-type yang tidak diketahui alih-alih --main-font . Ini memicu nilai fallback, yang merupakan tumpukan font alternatif. Jadi, semua setelah koma pertama (bahkan termasuk koma lainnya) adalah nilai fallback.

Menggunakan Variabel CSS untuk sebagian

Saat mendefinisikan variabel CSS, nilai yang dipegangnya tidak harus berupa nilai CSS yang valid; itu bisa menjadi nilai parsial yang dapat digunakan sebagai bagian dari nilai lengkap.

Misalnya, Anda dapat memecah tumpukan font:

Dalam hal ini, masing-masing nilai variabel bekerja dengan sendirinya, tetapi ini menunjukkan maksudnya. Mari kita coba contoh yang lebih dibuat-buat menggunakan notasi warna rgba() :

Anda dapat melihat betapa bergunanya ini, memungkinkan Anda untuk pada dasarnya "membangun" nilai secara dinamis.

Menggunakan Variabel CSS dengan calc()

Salah satu cara yang berguna untuk memasukkan Variabel CSS ke dalam proyek Anda adalah dengan menggunakan fungsi calc() . Seperti yang Anda ketahui, calc() memungkinkan Anda untuk melakukan perhitungan dalam suatu nilai. Jadi Anda dapat melakukan sesuatu seperti ini:

Properti kustom CSS memungkinkan Anda untuk membawa calc() ke tingkat berikutnya, misalnya dengan ukuran yang telah ditentukan sebelumnya. Ahmad Shadeed menggambarkan sesuatu yang serupa dan inilah contohnya:

Dengan ini, saya dapat menggunakan set aturan .module dan .module-* di dalam kueri media, memungkinkan saya untuk menampilkan gaya tersebut secara kondisional untuk ukuran viewport tertentu atau fitur media lainnya. Modul kecil/menengah/besar akan memiliki kelas yang sama dengan modul utama tetapi hanya ukuran modul yang ditimpa sesuai kebutuhan. Dalam contoh di atas, nilai 240 awal untuk ukuran bertindak sebagai semacam default tetapi saya juga bisa meneruskan 240px sebagai argumen kedua di var() untuk berfungsi sebagai fallback.

Trik dengan Variabel CSS

Beberapa pengembang telah berbagi tips dan trik menggunakan Variabel CSS selama bertahun-tahun. Saya tidak akan menjelaskannya secara mendetail di sini karena ini sebagian besar merupakan tutorial pemula, tetapi berikut adalah beberapa ringkasan singkat:

• Seperti yang saya sebutkan sebelumnya, Anda dapat menggunakan Variabel CSS dalam gaya sebaris, seperti dalam kasus kotak rasio aspek.
• Karakter spasi adalah nilai yang valid untuk variabel CSS, yang memungkinkan Anda untuk melakukan trik on/off (misalnya untuk sesuatu seperti mode gelap), yang dapat Anda baca di posting Lea.
• Anda tidak dapat menulis gaya hover dalam gaya sebaris, tetapi Anda dapat menyiasatinya menggunakan Variabel CSS.
• Variabel CSS membantu membuat SVG multi-warna dengan lebih mudah, seperti yang dijelaskan di sini.
• Anda dapat membangun sistem dan tema desain yang praktis dan dapat dipelihara dengan Variabel CSS, dijelaskan secara rinci dalam posting ini
• Anda dapat menggunakan Variabel CSS untuk membuat kisi yang lebih efisien dan dapat dipelihara menggunakan fitur Tata Letak Kotak, seperti yang dijelaskan oleh Michelle Barker.

Kesimpulan

Variabel CSS, atau Properti Kustom CSS, siap digunakan hari ini dengan lebih dari 90% browser yang digunakan secara global mendukung fitur praktis ini. Saya harap diskusi tentang dasar-dasar dan sintaks ini akan mendorong Anda untuk mempertimbangkan Variabel CSS dalam proyek terbaru Anda, jika Anda belum melakukannya.

Jika penggunaan Variabel CSS Anda terbatas pada beberapa warna tema global, mungkin tutorial ini akan menginspirasi Anda untuk lebih memanfaatkannya dan mungkin menemukan beberapa trik Anda sendiri.

Sekarang setelah Anda selesai dengan variabel CSS, lihat beberapa panduan kami yang lain:

• Tata letak kotak CSS
• Pengantar Parcel.js
• Tutorial CSS flexbox
• Paket web untuk pemula
• Tutorial Interaksi Mikro untuk Pengembang Pemula

Jika Anda memiliki pertanyaan tentang tutorial Variabel CSS ini, jangan ragu untuk mengirimkannya di komentar di bawah.

Tata letak dan presentasi oleh Chris Fitzgerald dan Karol K.