CSS @property dan gaya baru

• Aturan @property didukung di semua browser modern dan menyediakan kemampuan untuk mendefinisikan secara eksplisit sintaks, nilai awal, dan pewarisan untuk properti kustom CSS
• Sudah banyak waktu berlalu sejak CSS Houdini dan CSS Properties and Values API pertama kali diperkenalkan
• Melalui demo yang mengeksplorasi kemungkinan @property, kita bisa melihat apa yang dapat ditawarkan oleh generasi berikutnya dari CSS

Calls to action (elemen ajakan bertindak)

• CTA yang menarik perhatian di halaman web digunakan di banyak situs
• Gaya ini telah dicoba langsung, dan hasilnya dapat dilihat di CodePen
• Jika membuka panel CSS pada demo, Anda bisa melihat aturan @property yang terkait dengan properti kustom yang memerlukan animasi

@property --gradient-angle {  
  syntax: "";  
  initial-value: 0deg;  
  inherits: false;  
}  

• Aturan @property memungkinkan sintaks tersebut di browser dan menetapkan nilai awal ke 0deg
• Dengan ini, browser dapat bertransisi mulus dari 0deg ke 360deg dan menampilkan gradient yang berputar

@keyframes rotate-gradient {  
  to {  
    --gradient-angle: 360deg;  
  }  
}  
.rotate-gradient {  
  background: conic-gradient(from var(--gradient-angle), transparent, black);  
  animation: rotate-gradient 10s linear infinite;  
}  

• Melalui demo rotasi gradient sederhana, kita dapat melihat beberapa baris kode yang diperlukan untuk menerapkan konsep ini

Transisi hover yang mulus

• Saat elemen di-hover, dibutuhkan beberapa komponen khusus untuk transisi gradient yang mulus
• Setiap properti kustom yang memerlukan animasi mendeklarasikan sintaks dalam definisi @property agar browser dapat mentransisikan perubahan nilainya dengan lancar

.shiny-cta {  
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,  
              conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),  
                            transparent, var(--shiny-cta-highlight) var(--gradient-percent),  
                            var(--gradient-shine) calc(var(--gradient-percent) * 2),  
                            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),  
                            transparent calc(var(--gradient-percent) * 4)) border-box;  
}  

• Nilai --gradient-percent menentukan ukuran area yang berkilau, dan saat hover cahaya dibuat lebih panjang dengan persentase yang lebih tinggi
• Nilai --gradient-angle-offset menyesuaikan ulang sudut gradient agar cahaya tidak bergerak kembali saat hover

Mengatur kecepatan rotasi

• Tip CSS untuk memperlambat rotasi saat hover sangat berguna
• Animasi rotasi yang sama dideklarasikan dua kali, yang kedua diatur terbalik lalu dijeda, dan durasinya dibagi dua
• Saat elemen di-hover, animation-play-state: running menimpa nilai jeda dan memperlambat rotasi menjadi setengah kecepatan

Titik-titik kecil yang berkilau

• Efek titik-titik kecil yang berkilau ditambahkan di dalam tombol
• Untuk ini dibuat latar belakang radial-gradient

.shiny-cta::before {  
  --position: 2px;  
  --space: calc(var(--position) * 2);  
  background: radial-gradient(circle at var(--position) var(--position),  
                              white calc(var(--position) / 4),  
                              transparent 0) padding-box;  
  background-size: var(--space) var(--space);  
  background-repeat: space;  
}  

• Properti kustom --gradient-angle digunakan dalam mask conic-gradient untuk menampilkan sebagian pola titik sambil berputar

Meningkatkan warna hover

• Gaya hover ditingkatkan agar terasa lebih dalam dan lebih menonjol
• Teks tombol dibungkus dalam elemen span, lalu diterapkan box-shadow blur agar mengembang dan menyusut saat hover

Memperkenalkan gaya baru

• Banyak teknik di atas hingga belum lama ini hampir mustahil dilakukan
• Dengan mendefinisikan properti kustom secara eksplisit, banyak peluang baru terbuka
• Menarik untuk menantikan bagaimana @property akan dimanfaatkan dalam aplikasi skala besar dan design system

Ringkasan GN⁺

• Aturan @property menyediakan kemampuan untuk mendefinisikan secara eksplisit sintaks, nilai awal, dan pewarisan untuk properti kustom CSS
• Melalui fitur ini, pengembang web dapat menerapkan animasi dan gaya yang lebih kompleks serta lebih canggih
• Fitur ini terutama berpotensi sangat berguna dalam aplikasi skala besar dan design system
• Proyek lain yang menyediakan kemampuan serupa antara lain CSS Houdini dan CSS Properties and Values API

[GN⁺]

Komentar Hacker News

• Merasa seperti otak menolak saat berhadapan dengan konsep baru

  • Merekomendasikan membaca artikel MDN
  • Perlu memahami dengan mencoba menggunakan @property secara langsung
  • Penting untuk meminimalkan ketergantungan pada JS saat membangun UI yang kompleks

• Bukan pengembang web, tetapi bisa menggunakan framework web dasar

  • Ingat saat CSS pertama kali muncul
  • Tidak memahami CSS pada contoh CodePen pertama
  • Mempertanyakan apakah sistem styling memang memerlukan bahasa pemrograman mini untuk animasi
  • Berpikir apakah ini tidak bisa dilakukan dengan JavaScript saja

• Baru-baru ini tertarik dengan pekerjaan CSS, terutama Houdini

  • Rasanya mirip seperti saat menerima buku fitur IE 5.5
  • Fitur-fitur baru telah ditambahkan ke CSS, tetapi sebelumnya hanya hal-hal dasar
  • Pengembang IE dulu bisa membuat kode JS sebagai modul lalu menempelkannya ke elemen lewat CSS
  • Sekarang kita kembali mendapatkan kemampuan seperti itu

• Hanya karena sesuatu bisa dilakukan bukan berarti harus dilakukan

  • Saat LED biru terang pertama kali muncul, semuanya dipasangi itu, tetapi tidak memberi nilai bagi pengguna

• Hal-hal yang bisa dilakukan dengan animasi CSS terasa seperti sihir

  • Karena khusus untuk CSS, ini sulit dipelajari dan sulit dikonseptualisasikan
  • Pemrograman dengan JS terasa lebih mudah
  • Kesulitan karena banyaknya opsi penggunaan CSS flex

• Demo ini menarik secara teknis, tetapi tombol tidak seharusnya dianimasikan seperti ini

  • Semua orang tampaknya ingin menambahkan dan menganimasikan border gradien ungu
  • Hanya karena bisa dilakukan bukan berarti harus dilakukan
  • Pedomannya adalah menulis CSS khusus untuk menghapus gaya seperti ini

• Kiriman-kiriman sebelumnya tidak banyak mendapat perhatian, tetapi menarik dan edukatif

  • Tautan

• Situs web ini memberi kebahagiaan

  • Selalu suka mengutak-atik CSS
  • Selama berkarier di pengembangan web, belajar bahwa banyak orang membenci CSS
  • Menghabiskan banyak waktu untuk mengeksplorasi dan bereksperimen dengan HTML+CSS
  • Kebanyakan orang mungkin akan menganggapnya buang-buang waktu
  • Situs ini membuat hari terasa menyenangkan

• Menikmati bekerja dengan CSS, tetapi melihat rekan kerja kesulitan

  • Sangat merekomendasikan channel YouTube Kevin Powell
  • Ada video yang menjelaskan fitur-fitur berguna dari registered properties
  • Tautan video
  • Ada juga artikel yang menjelaskan registered properties dengan mudah
  • Tautan artikel

• Sudah lama tidak melakukan pengembangan web dan perlu waktu untuk memahami fungsi fitur ini

  • Merasa artikelnya tidak menjelaskan dengan baik
  • Fitur baru ini memungkinkan penggunaan nilai yang didefinisikan dalam blok @property --gradient-angle {...}
  • Bagian inherits: false; jelas melakukan apa, tetapi tidak paham mengapa itu diperlukan
  • Bertanya-tanya mengapa harus dikendalikan di tempat kedua padahal selector CSS sudah bisa mengontrol pewarisan
  • Tidak memahami mengapa tipe harus didefinisikan dalam blok @property
  • Bertanya apakah browser tidak bisa menyimpulkan tipenya dengan melihat tempat @property digunakan