Menguasai CSS: Registrasi Properti Kustom dengan @property

Properti kustom (juga dikenal sebagai variabel CSS) telah merevolusi cara kita menulis dan memelihara CSS. Mereka memungkinkan kita mendefinisikan nilai yang dapat digunakan kembali, membuat stylesheet kita lebih fleksibel dan mudah dikelola. Tetapi bagaimana jika Anda bisa melampaui sekadar mendefinisikan nilai? Bagaimana jika Anda dapat mendefinisikan tipe nilai yang dimiliki properti kustom, bersama dengan nilai awalnya dan perilaku pewarisannya? Di situlah @property berperan.

Apa itu @property?

@property adalah at-rule CSS yang memungkinkan Anda secara eksplisit mendaftarkan properti kustom ke browser. Proses pendaftaran ini memberikan browser informasi tentang tipe nilai yang diharapkan dari properti, nilai awalnya, dan apakah properti tersebut harus mewarisi dari elemen induknya. Ini membuka beberapa kemampuan lanjutan, termasuk:

• Pengecekan Tipe: Memastikan properti kustom diberi nilai dengan tipe yang benar.
• Animasi: Memungkinkan transisi dan animasi mulus untuk properti kustom dari tipe tertentu, seperti angka atau warna.
• Nilai Default: Menyediakan nilai fallback jika properti kustom tidak ditentukan secara eksplisit.
• Kontrol Pewarisan: Menentukan apakah properti kustom mewarisi nilainya dari elemen induknya.

Anggap saja seperti menambahkan keamanan tipe ke variabel CSS Anda. Ini memungkinkan Anda membuat stylesheet yang lebih kuat dan dapat diprediksi.

Sintaks @property

Aturan @property mengikuti sintaks dasar ini:

@property --nama-properti {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

Mari kita uraikan setiap bagian:

• --nama-properti: Nama properti kustom yang ingin Anda daftarkan. Harus diawali dengan dua tanda hubung (--).
• syntax: Mendefinisikan tipe nilai yang diharapkan untuk properti. Ini penting untuk pengecekan tipe dan animasi. Kita akan menjelajahi nilai sintaks yang tersedia secara detail di bawah ini.
• inherits: Nilai boolean yang menunjukkan apakah properti harus mewarisi dari elemen induknya. Nilai defaultnya adalah false jika tidak ditentukan.
• initial-value: Nilai default untuk properti jika tidak secara eksplisit diatur pada elemen. Ini memastikan nilai fallback selalu tersedia.

Memahami Deskriptor syntax

Deskriptor syntax adalah bagian terpenting dari aturan @property. Ini memberi tahu browser tipe nilai apa yang diharapkan untuk properti kustom. Berikut adalah beberapa nilai sintaks umum:

• *: Memungkinkan nilai apa pun. Ini adalah sintaks yang paling permisif dan pada dasarnya mereplikasi perilaku variabel CSS standar tanpa registrasi. Gunakan ini dengan hemat.
• <length>: Mengharapkan nilai panjang (misalnya, 10px, 2em, 50%). Ini memungkinkan animasi mulus antar nilai panjang yang berbeda.
• <number>: Mengharapkan nilai numerik (misalnya, 1, 3.14, -5). Berguna untuk menganimasikan properti numerik seperti opacity atau skala.
• <percentage>: Mengharapkan nilai persentase (misalnya, 25%, 100%).
• <color>: Mengharapkan nilai warna (misalnya, #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Memungkinkan transisi dan animasi warna yang mulus.
• <image>: Mengharapkan nilai gambar (misalnya, url(image.jpg), linear-gradient(...)).
• <integer>: Mengharapkan nilai integer (misalnya, 1, -10, 0).
• <angle>: Mengharapkan nilai sudut (misalnya, 45deg, 0.5rad, 200grad). Berguna untuk menganimasikan rotasi.
• <time>: Mengharapkan nilai waktu (misalnya, 1s, 500ms). Berguna untuk mengontrol durasi animasi atau penundaan melalui properti kustom.
• <resolution>: Mengharapkan nilai resolusi (misalnya, 300dpi, 96dpi).
• <transform-list>: Mengharapkan daftar fungsi transformasi (misalnya, translateX(10px) rotate(45deg)). Memungkinkan animasi transformasi yang kompleks.
• <custom-ident>: Mengharapkan pengenal kustom (string). Mirip dengan enum.
• <string>: Mengharapkan nilai string (misalnya, "Hello World"). Hati-hati dengan ini, karena menganimasikan string umumnya tidak didukung.
• Sintaks Kustom: Anda dapat membuat sintaks yang lebih kompleks menggunakan kombinasi dari yang di atas dan operator | (atau), [] (pengelompokan), + (satu atau lebih), * (nol atau lebih), dan ? (nol atau satu). Misalnya: <length> | <percentage> memungkinkan nilai panjang atau persentase.

Memilih syntax yang tepat sangat penting untuk memanfaatkan kekuatan penuh @property.

Contoh Praktis @property

Mari kita lihat beberapa contoh praktis cara menggunakan @property di CSS Anda.

Contoh 1: Menganimasikan Warna Latar Belakang

Misalkan Anda ingin menganimasikan warna latar belakang tombol. Anda dapat menggunakan @property untuk mendaftarkan properti kustom untuk warna latar belakang dan kemudian menganimasikannya menggunakan transisi CSS.

@property --warna-latar {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.tombol {
  background-color: var(--warna-latar);
  transition: --warna-latar 0.3s ease;
}

.tombol:hover {
  --warna-latar: #f00; /* Merah */
}

Dalam contoh ini, kami mendaftarkan properti kustom --warna-latar dengan sintaks <color>, yang berarti ia mengharapkan nilai warna. initial-value diatur ke putih (#fff). Saat tombol diarahkan kursor, --warna-latar diubah menjadi merah (#f00), dan transisi menganimasikan perubahan warna latar belakang dengan mulus.

Contoh 2: Mengontrol Radius Border dengan Angka

Anda dapat menggunakan @property untuk mengontrol radius border elemen dan menganimasikannya.

@property --radius-border {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.kotak-bulat {
  border-radius: var(--radius-border);
  transition: --radius-border 0.5s ease;
}

.kotak-bulat:hover {
  --radius-border: 20px;
}

Di sini, kami mendaftarkan --radius-border sebagai <length>, memastikan ia menerima nilai panjang seperti px, em, atau %. Nilai awalnya adalah 0px. Saat mengarahkan kursor ke .kotak-bulat, radius border menganimasikan ke 20px.

Contoh 3: Menganimasikan Offset Bayangan

Misalkan Anda ingin menganimasikan offset horizontal dari bayangan kotak.

@property --offset-bayangan-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.kotak-bayangan {
  box-shadow: var(--offset-bayangan-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --offset-bayangan-x 0.3s ease;
}

.kotak-bayangan:hover {
  --offset-bayangan-x: 10px;
}

Dalam kasus ini, --offset-bayangan-x didaftarkan sebagai <length>, dan nilai awalnya adalah 0px. Properti box-shadow menggunakan properti kustom ini untuk offset horizontalnya. Saat diarahkan kursor, offset menganimasikan ke 10px.

Contoh 4: Menggunakan <custom-ident> untuk Tematisasi

Sintaks <custom-ident> memungkinkan Anda mendefinisikan sekumpulan nilai string yang telah ditentukan, secara efektif membuat enum untuk variabel CSS Anda. Ini berguna untuk tematisasi atau mengontrol keadaan yang berbeda.

@property --tema {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --tema: light; /* Tema Default */
}

body {
  background-color: var(--tema) == light ? #fff : #333;
  color: var(--tema) == light ? #000 : #fff;
}

.tema-gelap {
  --tema: dark;
}

Di sini, --tema didaftarkan dengan sintaks <custom-ident>. Meskipun kita tidak secara eksplisit mencantumkan pengenal yang diizinkan dalam aturan @property itu sendiri, kode tersebut menyiratkan bahwa itu adalah light dan dark. CSS kemudian menggunakan logika kondisional (var(--tema) == light ? ... : ...) untuk menerapkan gaya yang berbeda berdasarkan tema saat ini. Menambahkan kelas `dark-theme` ke elemen akan mengalihkan tema ke gelap. Perhatikan bahwa logika kondisional menggunakan `var()` bukanlah CSS standar dan seringkali membutuhkan preprocessor atau JavaScript. Pendekatan yang lebih standar akan menggunakan kelas CSS dan cascading:

@property --tema {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --tema: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-tema="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript untuk mengganti tema */
/* document.body.setAttribute('data-theme', 'dark'); */

Dalam contoh yang direvisi ini, kami menggunakan atribut `data-theme` pada elemen `body` untuk mengontrol tema. JavaScript (dikomentari) akan digunakan untuk mengganti atribut antara `light` dan `dark`. Ini adalah pendekatan yang lebih kuat dan standar untuk tematisasi dengan variabel CSS.

Manfaat Menggunakan @property

Menggunakan @property menawarkan beberapa keuntungan:

• Keterbacaan dan Pemeliharaan Kode yang Ditingkatkan: Dengan secara eksplisit mendefinisikan tipe nilai yang diharapkan untuk properti kustom, Anda membuat kode Anda lebih mudah dipahami dan tidak rentan terhadap kesalahan.
• Kemampuan Animasi yang Ditingkatkan: @property memungkinkan transisi dan animasi mulus untuk properti kustom, membuka kemungkinan baru untuk membuat antarmuka pengguna yang dinamis dan menarik.
• Kinerja Lebih Baik: Browser dapat mengoptimalkan rendering elemen yang menggunakan properti kustom terdaftar, yang mengarah pada peningkatan kinerja.
• Keamanan Tipe: Browser memvalidasi bahwa nilai yang ditetapkan cocok dengan sintaks yang dideklarasikan, mencegah perilaku tak terduga dan mempermudah debugging. Ini sangat berguna dalam proyek besar di mana banyak pengembang berkontribusi pada basis kode.
• Nilai Default: Memastikan properti kustom selalu memiliki nilai yang valid, bahkan jika tidak diatur secara eksplisit, mencegah kesalahan dan meningkatkan ketahanan CSS Anda.

Kompatibilitas Peramban

Pada akhir 2023, @property memiliki dukungan peramban yang baik, tetapi belum universal. Fitur ini didukung di sebagian besar peramban modern, termasuk Chrome, Firefox, Safari, dan Edge. Namun, peramban yang lebih lama mungkin tidak mendukungnya. Selalu periksa informasi kompatibilitas peramban terbaru di situs web seperti Can I use... sebelum menggunakan @property dalam produksi.

Untuk menangani peramban yang lebih lama, Anda dapat menggunakan kueri fitur (@supports) untuk memberikan gaya fallback:

@supports (--properti: nilai) {
  /* Gaya yang menggunakan @property */
}

@supports not (--properti: nilai) {
  /* Gaya fallback untuk peramban yang tidak mendukung @property */
}

Ganti --properti dan nilai dengan properti kustom aktual dan nilainya.

Kapan Menggunakan @property

Pertimbangkan untuk menggunakan @property dalam skenario berikut:

• Saat Anda perlu menganimasikan properti kustom: Ini adalah kasus penggunaan utama untuk @property. Mendaftarkan properti dengan sintaks yang benar memungkinkan animasi yang mulus.
• Saat Anda ingin memberlakukan keamanan tipe untuk properti kustom: Jika Anda ingin memastikan bahwa properti kustom selalu menyimpan nilai dari tipe tertentu, gunakan @property untuk mendaftarkannya.
• Saat Anda ingin memberikan nilai default untuk properti kustom: Deskriptor initial-value memungkinkan Anda menentukan nilai fallback.
• Dalam proyek besar: @property meningkatkan pemeliharaan kode dan mencegah kesalahan, menjadikannya sangat bermanfaat untuk proyek besar dengan banyak pengembang.
• Saat membuat komponen yang dapat digunakan kembali atau sistem desain: @property dapat membantu memastikan konsistensi dan prediktabilitas di seluruh komponen Anda.

Kesalahan Umum yang Harus Dihindari

• Melupakan deskriptor syntax: Tanpa deskriptor syntax, browser tidak akan mengetahui tipe nilai yang diharapkan, dan animasi tidak akan berfungsi dengan benar.
• Menggunakan nilai syntax yang salah: Memilih sintaks yang salah dapat menyebabkan perilaku yang tidak terduga. Pastikan untuk memilih sintaks yang secara akurat mencerminkan tipe nilai yang diharapkan.
• Tidak menyediakan initial-value: Tanpa nilai awal, properti kustom mungkin tidak terdefinisi, yang menyebabkan kesalahan. Selalu berikan nilai default yang masuk akal.
• Terlalu sering menggunakan * sebagai sintaks: Meskipun nyaman, menggunakan * menghilangkan manfaat pengecekan tipe dan animasi. Gunakan hanya jika Anda benar-benar perlu mengizinkan tipe nilai apa pun.
• Mengabaikan Kompatibilitas Peramban: Selalu periksa kompatibilitas peramban dan berikan gaya fallback untuk peramban yang lebih lama.

@property dan CSS Houdini

@property adalah bagian dari sekumpulan API yang lebih besar yang disebut CSS Houdini. Houdini memungkinkan pengembang untuk memanfaatkan mesin rendering browser, memberi mereka kontrol yang belum pernah ada sebelumnya atas proses penataan gaya dan tata letak. API Houdini lainnya meliputi:

• Paint API: Memungkinkan Anda mendefinisikan gambar latar belakang dan border kustom.
• Animation Worklet API: Menyediakan cara untuk membuat animasi berkinerja tinggi yang berjalan langsung di thread komposer browser.
• Layout API: Memungkinkan Anda mendefinisikan algoritma tata letak kustom.
• Parser API: Menyediakan akses ke parser CSS browser.

@property adalah API Houdini yang relatif sederhana untuk dipelajari, tetapi membuka pintu untuk menjelajahi fitur Houdini yang lebih canggih.

Kesimpulan

@property adalah at-rule CSS yang ampuh yang membuka kapabilitas lanjutan untuk properti kustom. Dengan mendaftarkan properti kustom ke browser, Anda dapat memberlakukan keamanan tipe, mengaktifkan animasi yang mulus, dan meningkatkan ketahanan kode CSS Anda secara keseluruhan. Meskipun dukungan peramban belum universal, manfaat menggunakan @property, terutama dalam proyek besar dan sistem desain, menjadikannya alat yang berharga untuk pengembangan web modern. Rangkullah @property dan tingkatkan keterampilan CSS Anda ke level berikutnya!