CSS @property dan Gaya Baru

 (ryanmulligan.dev)
2 poin oleh GN⁺ 2024-09-05 | 1 komentar | Bagikan ke WhatsApp
  • Dengan dukungan CSS @property di seluruh browser modern terbaru, kini kita dapat menentukan sintaks, nilai awal, dan apakah diwariskan untuk custom property, sehingga browser bisa menginterpolasi nilai secara alami
  • Contoh tombol CTA mendefinisikan --gradient-angle sebagai <angle> untuk transisi dari 0deg ke 360deg, lalu memakai conic-gradient untuk membuat border mengilap yang berputar
  • Efek hover dibuat dengan memberi tipe pada properti seperti --gradient-percent, --gradient-angle-offset, dan --gradient-shine, sehingga panjang dan kecerahan kilau berubah dengan halus
  • Kecepatan rotasi diatur dengan mendeklarasikan animasi yang sama dua kali, menempatkan animasi kedua dalam keadaan arah terbalik dan dijeda, lalu saat hover membuatnya melambat menjadi setengah kecepatan dari posisi saat ini
  • Definisi custom property berbasis @property memungkinkan ekspresi CSS yang dulu sulit diimplementasikan, dan punya ruang pemanfaatan besar juga untuk aplikasi skala besar serta design system

Animasi custom property yang dibuka oleh @property

  • @property adalah aturan untuk menentukan sintaks yang diizinkan, nilai awal, dan apakah diwariskan pada custom property CSS
  • Ini adalah fitur yang terhubung dengan CSS Properties and Values API dari CSS Houdini, dan belakangan sudah didukung oleh semua browser modern terbaru
  • Jika browser mengetahui tipe custom property, ia dapat menginterpolasi antar nilai, sehingga lebih mudah membuat transisi dan animasi yang halus dibanding hanya memakai variabel CSS biasa

Border kilau berputar pada tombol CTA

  • Contohnya mengimplementasikan gaya tombol CTA berkilau yang sering terlihat di web menggunakan CSS
  • Custom property utamanya adalah --gradient-angle, yang dideklarasikan dengan sintaks <angle> dan nilai awal 0deg melalui @property
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
  • Berkat definisi ini, browser bertransisi secara alami dari 0deg ke 360deg, dan merender conic-gradient seolah-olah sedang 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;
}
  • Konsep ini dapat dilihat dengan kode minimal di demo CodePen

Kilau border yang dibuat dengan layer background

  • Border mengilap dibuat dengan memasukkan linear-gradient dan conic-gradient bersama-sama ke background, lalu menetapkan origin yang berbeda untuk tiap background
    • linear-gradient memakai padding-box agar tidak meluber ke area border
    • conic-gradient memakai border-box agar meluas hingga ruang yang terbentuk oleh lebar border
    • Border transparan 1px ditambahkan agar conic-gradient yang berputar terlihat
.border-gradient {
  background:
    linear-gradient(black, black) padding-box,
    conic-gradient(from var(--gradient-angle), transparent 25%, white, transparent 50%) border-box;
  border: 1px solid transparent;
}

Gradien yang berubah mulus saat hover

  • Untuk setiap custom property yang diperlukan dalam transisi hover, syntax dideklarasikan di @property agar browser bisa menginterpolasi perubahan nilai
  • Background tombol terdiri dari linear-gradient yang menangani warna bagian dalam dan conic-gradient yang menangani kilau border
  • --gradient-percent menentukan ukuran area kilau, dan saat hover berubah ke persentase yang lebih tinggi sehingga panjang kilau bertambah
  • --gradient-angle-offset dipakai untuk menyesuaikan kembali sudut gradien agar kilau tidak tampak melompat maju-mundur saat hover
  • Kecerahan --gradient-shine diturunkan agar lebih menyatu secara alami dengan warna highlight di sekitarnya

Cara memperlambat kecepatan rotasi saat hover

  • Tips CSS untuk memperlambat kecepatan rotasi adalah mendeklarasikan animasi rotasi yang sama dua kali
  • Animasi kedua dibuat dalam arah terbalik, durasinya dibagi dua, dan keadaan default-nya disetel ke paused
  • Saat hover, animation-play-state: running menimpa paused sehingga rotasi melambat menjadi setengah kecepatan
  • Ketika hover berakhir, animasi tidak melompat ke posisi awal, melainkan kembali dipercepat dari posisi saat ini
  • Animasi tombol CTA memakai cara ini agar rotasi dan gerakan tetap saling selaras bahkan saat kecepatannya berubah

Kilau kecil dan highlight internal

  • Pola titik kecil di dalam tombol dirender dengan membuat background radial-gradient pada pseudo-element ::before
  • --gradient-angle juga digunakan kembali di sini, dan mask conic-gradient berputar sambil hanya menampilkan sebagian pola titik
  • Sudut gradien mask diberi offset 45deg agar selaras dengan rotasi border mengilap
.shiny-cta::before {
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
}
  • Pada pseudo-element ::after, gradien yang berisi warna highlight ditambahkan agar ikut berputar bersama area kilau
  • Highlight internal menambahkan kesan cahaya yang mengalir ke bagian dalam tombol

Penyesuaian warna hover dan penyelesaian akhir

  • Karena ::before dan ::after pada tombol sudah digunakan, teks tombol dibungkus dengan span
  • Salah satu pseudo-element milik span diberi box-shadow buram yang berisi warna highlight dan diperluas hingga ukuran tombol
  • Saat hover, pseudo-element ini perlahan membesar lalu mengecil, menciptakan kesan seperti napas yang lembut
  • Dikombinasikan dengan warna highlight yang berputar di dalam, efek akhir tombol CTA menjadi lengkap

Potensi menuju design system

Bacaan terkait

1 komentar

 
GN⁺ 2024-09-05
Opini Hacker News

  • Saya bukan pengembang web, tetapi pernah membuat situs web mainan tanpa framework dan melakukan pekerjaan dasar di beberapa framework web. Saat CSS pertama kali muncul, setelah sedikit waktu kita bisa memasukkan semuanya ke kepala dan menggunakannya
    CSS pada contoh CodePen pertama terlihat hampir seperti sintaks yang sulit dipahami dan nyaris tak bisa dikenali, dan saya bertanya-tanya apakah sistem styling memang perlu punya bahasa pemrograman animasi kecil di dalamnya
    Rasanya ini sesuatu yang bisa dilakukan dengan JavaScript, dan saya paham penolakan terhadap penggunaan JS untuk segala hal, tetapi kalau bicara bahasa pemrograman, hal seperti ini terasa lebih dekat dengan tugas utamanya

    • Saya tidak begitu menangkap perasaan itu. Kalau bukan pengembang web, terutama pengembang frontend, Anda mungkin juga jarang perlu membuat elemen HTML dengan efek mencolok seperti ini, jadi saya tidak mengerti mengapa kemampuan CSS lewat fitur tingkat lanjut menjadi masalah
      Tentu saja ini juga bisa dilakukan dengan JavaScript, dan Anda juga bisa menaruh canvas lalu memprogram efek di GPU dengan WebGL. Sebagai gantinya, Anda harus membuat ulang sendiri semua fitur aksesibilitas tombol HTML, dan saya ragu itu akan lebih mudah
    • Alasannya performa. Kalau dilakukan dengan JS, ia harus berjalan mulus 60 kali per detik, tetapi JS itu single-threaded, jadi begitu main thread terblokir, frame akan terlewat
      Mesin JS modern memang luar biasa, tetapi tidak seefisien kode native, sehingga penggunaan CPU meningkat, dan pada akhirnya juga buruk untuk daya tahan baterai
    • Kalau ada kesempatan menghindari JavaScript di situs, saya menyambutnya meski pekerjaannya jadi lebih banyak. Pengunjung yang mematikan JavaScript bisa menghindari banyak eksploit dan pelacak yang mengganggu web saat ini
      Karena alasan yang sama, saya menghargai situs yang tidak mewajibkan JavaScript
    • Membutuhkan bahasa pemrograman lengkap hanya untuk hal-hal yang berkaitan dengan tampilan halaman bukanlah ide yang bagus
      Sebagian platform hosting, demi keamanan, mengizinkan personalisasi HTML dan CSS tetapi memblokir JS. Tempat seperti Itch.io, yang memungkinkan orang menghias game dan profil, adalah contohnya; dengan animasi CSS, efek keren bisa dibuat tanpa memberi hak akses JS, sehingga ini masuk akal dan berguna
    • Sepertinya ini kasus ketika seseorang tidak benar-benar memahami domain masalah dan tidak tahu sintaksnya, lalu melihat sesuatu yang tidak langsung dipahami sebagai perubahan negatif

  • Saat membaca tulisan ini, saya merasa otak saya menolak konsep yang asing. Sebelum melihat contoh blognya, saya menyarankan membaca dulu artikel MDN yang ditautkan di kalimat pertama
    @property tampaknya baru terasa setelah dicoba sendiri, dan jika ingin mengimplementasikan UI kompleks sambil mengurangi ketergantungan pada JS, mengetahui fitur CSS yang sulit dipahami seperti ini bisa menjadi senjata yang kuat

    • Bahkan setelah membaca artikel MDN, saya sama sekali tidak memahaminya. Bukankah ini secara harfiah variabel CSS?
      Variabel CSS juga bisa mengikuti cascade dan ditimpa oleh class, dan hal seperti bg-opacity di Tailwind juga menggunakan cara semacam itu, bukan?
    • Saya juga mirip. Menurut saya tulisan ini benar-benar buruk dalam menjelaskan
      Dari MDN, kedengarannya hampir sama dengan variabel CSS lama, tetapi cakupannya dibatasi pada elemen tertentu atau anaknya, dan ditambahkan constraint yang mengenali unit CSS seperti sudut dan persentase
      Meski begitu, sepertinya saya tidak akan memakainya. Keuntungan kecil seperti ini tidak membenarkan biaya kompleksitas dan kompatibilitasnya, dan saya berusaha menghindari sintaks baru yang tidak perlu. Sejak variabel CSS, minat saya pada fitur baru CSS banyak berkurang
    • Saya kira hanya saya yang merasa begitu, tetapi memang terasa sangat asing
      Saya tidak begitu tahu apa kelebihannya dibanding memakai CSS transform

  • Sebagai orang yang suka bekerja dengan CSS tetapi juga bekerja dengan rekan-rekan yang kesulitan dengan CSS, saya sangat merekomendasikan kanal YouTube Kevin Powell
    Ia sudah beberapa kali membahas fitur ini, dan dalam video yang diunggah seminggu lalu ia menunjukkan satu fitur berguna yang dimungkinkan oleh properti terdaftar: https://youtu.be/U8NykwZNbGs
    Ada juga tulisan yang menjelaskan properti terdaftar dengan contoh yang mudah diikuti: https://moderncss.dev/providing-type-definitions-for-css-wit...

  • Saya menantikan pekerjaan CSS belakangan ini, terutama Houdini. Sudah lama saya tidak merasakan hal seperti ini sejak melihat buku fitur IE 5.5
    Selama 14 tahun terakhir memang banyak fitur baru muncul di CSS, tetapi kebanyakan terasa seperti fitur dasar yang memang diharapkan dari framework styling, seperti opsi layout baru atau variabel
    Namun para pengembang IE benar-benar tanpa ragu-ragu, bahkan bisa membuat kode JS menjadi modul dan menempelkannya ke elemen lewat CSS. Rasanya akhirnya fitur-fitur radikal seperti itu datang lagi
    Contoh: https://developer.chrome.com/docs/css-ui/houdini

    • Saya tidak yakin apakah ungkapan “tanpa ragu-ragu” di sini dipakai secara positif atau negatif
    • Bukankah itu cara kerja css3pie(http://css3pie.com/)?

  • Tulisan yang singkat dan bagus. Jika ingin melihat lebih banyak contoh, terutama contoh yang jauh lebih sederhana sehingga lebih cepat dipahami, saya merekomendasikan artikel lama CSS-Tricks
    Artikel dari 2021, tetapi masih relevan dan dibuat dengan baik: https://css-tricks.com/exploring-property-and-its-animating-...
    Saya rasa Anda akan terutama menyukai contoh flip display seperti angka bandara/timer yang berganti

  • Saya sudah cukup lama tidak berkecimpung di pengembangan web, dan butuh terlalu lama bagi saya untuk memahami apa sebenarnya fungsi fitur ini. Rasanya artikelnya kurang menjelaskan dengan baik
    Sejauh yang saya pahami, alih-alih nilai primitif seperti 360deg, kita menulis sesuatu seperti from var(--gradient-angle), lalu nilainya diambil dan digantikan dari tempat yang didefinisikan dalam blok @property --gradient-angle {...}
    Ada juga inherits: false;; saya paham perilakunya, tetapi tidak tahu kenapa itu diperlukan. Dengan selector CSS kita sudah bisa mengontrol pewarisan, jadi sulit mengikuti apakah sekarang itu juga bisa dikontrol dari tempat lain
    Saya juga bertanya-tanya kenapa tipe harus didefinisikan di blok @property. Di bagian CSS lain kita tidak mendefinisikan tipe; tidak bisakah browser menebaknya dari lokasi tempat @property digunakan?

    • Bagi saya, keuntungan terbesarnya adalah fitur ini memungkinkan animasi variabel CSS
      Dulu dalam eksperimen mengubah desain YouTube menjadi seperti neon, saya membuat warna utama dikendalikan oleh satu variabel CSS dan menggerakkan hue-nya perlahan melintasi seluruh spektrum
      Tanpa @property, variabel CSS tidak bisa dianimasikan, jadi ini bukan sekadar memakai variabel alih-alih nilai primitif, melainkan memungkinkan variabel itu dan semua tempat yang merujuknya dianimasikan bersama. Dengan satu @keyframes neon-flow { from { --dc-neon-hue: 0; } to { --dc-neon-hue: 360; } }, warna utama, bayangan, dan lainnya semuanya bisa bergerak
      inherits: false mengontrol bagaimana properti kustom diwariskan. Bisa dibuat diwariskan ke anak seperti color: red, atau hanya berlaku pada elemen tersebut seperti display: flex
      Tipe tampaknya diperlukan agar pada tahap statis diketahui apa yang akan dianimasikan. Variabel CSS bisa berisi apa saja, sedangkan properti CSS biasa memberi informasi tipe lewat propertinya sendiri, seperti color
      Yang menarik, sintaks tipe ini sama dengan sintaks formal yang terlihat di MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/color#forma... Rasanya seperti bagian internal CSS diekspos sebagai API yang bisa dipakai developer
    • Properti CSS sendiri sudah ada sebelum @property; misalnya kita bisa mendeklarasikan --my-prop: 10px lalu memakainya di tempat lain dengan var(--my-prop)
      Fitur baru @property memungkinkan properti didefinisikan lebih dulu, sehingga bisa ditentukan tipe sintaks apa yang boleh diterima, apakah mewarisi nilai dari induk, dan apa nilai bawaan initial-value-nya
      Jadi jika suatu elemen memasukkan --my-prop: 5px ke properti yang dideklarasikan sebagai tipe sudut, nilainya akan diabaikan. Sebelumnya itu akan menjadi nilai yang valid dan bisa menimbulkan efek samping tak terduga tergantung tempat penggunaannya
      Selain itu, jika menulis --my-prop: initial, kita bisa memakai initial-value tanpa harus tahu persis nilai bawaannya
    • Terima kasih atas penjelasan ini. Sulit dipahami karena artikelnya tidak menjelaskan apa yang dilakukan @property atau bagaimana menggunakannya
      Semuanya benar-benar tertutup oleh contoh yang terlalu rumit

  • Melihat situs web ini membuat saya merasa senang
    Saya memang suka mengutak-atik CSS, tetapi setelah lebih dari 10 tahun melakukan pengembangan web dan menjadikan pekerjaan terkait web sebagai profesi, saya juga jadi tahu betapa banyak orang membenci CSS
    Saya bisa menghabiskan waktu tanpa henti menjelajah dan bereksperimen dengan HTML+CSS yang ditulis tangan, bahkan sampai men-deploy-nya untuk melihat rasanya di ponsel sungguhan. 99% di antaranya tidak dipakai di mana pun
    Bagi kebanyakan orang mungkin itu buang-buang waktu, tetapi situs ini benar-benar membuat hari saya menyenangkan

    • Saya benar-benar suka CSS. Menurut saya CSS juga cukup mudah dipahami
      Memang menjadi lebih kompleks selama 10 tahun terakhir, tetapi hal-hal yang kita lakukan 10 tahun lalu sekarang bisa dilakukan jauh lebih sederhana, dan kode dari masa itu pun masih tetap berjalan
    • Orang-orang yang lantang mengatakan benci CSS umumnya adalah orang yang tidak memahami CSS
      Tapi itu tidak apa-apa. Saya juga tidak memahami APEX atau APL, atau framework terbaru hari ini. Namun saya memahami CSS, jadi saya cukup menikmatinya
      Bagi sebagian orang terasa intuitif, bagi sebagian lain tidak. Masalah muncul ketika orang yang tidak cocok dengan CSS harus mengerjakan CSS karena pekerjaan, dan tentu saja mereka jadi membencinya. Kalau pekerjaan saya adalah memelihara instalasi Active Directory, saya juga akan membencinya. Tapi CSS itu sendiri bukan sesuatu yang buruk
    • CSS menyenangkan untuk dimainkan, dan fitur-fitur barunya juga layak dieksplorasi. Hanya saja fitur CSS kadang terasa muncul dari suasana “apa lagi yang bisa kita buat?”
      Pasti ada forum di suatu tempat tempat diskusi serius berlangsung, tetapi sepertinya saya melewatkannya
    • Masih cukup minimal, tetapi saya sedang mencoba menulis lebih banyak CSS secara manual untuk mendapatkan rasa bekerja di luar alat seperti Bootstrap atau Tailwind
      Di produksi, khususnya, hampir semua frontend yang saya tulis selama ini menggunakan JSX, tetapi setelah masuk ke lubang kelinci web scraping, pemahaman saya tentang logika selector jauh meningkat
      Sebagai pemikiran terkait yang agak provokatif, jika dalam praktik kita lebih banyak memakai elemen semantik, logika selector mungkin tidak akan menjadi sumber sakit kepala sebesar sekarang. Perilaku yang sudah didefinisikan oleh HTML murni, seperti modal, juga tidak perlu kita pelihara sendiri
    • Begitu bukan hanya mengutak-atik kombinasi perangkat, layar, browser, versi browser, dan OS milik sendiri, melainkan harus mengimplementasikan sesuatu yang didukung cukup luas, berbagai pelanggaran spesifikasi yang halus benar-benar menjengkelkan
      Dulu Microsoft adalah pelanggar spesifikasi paling terkenal, dan sekarang menurut saya Apple yang begitu

  • Animasi-animasi ini membuat semuanya terlihat seperti iklan display era 2000-an. Dalam arti buruk
    Saya benar-benar berharap selera visual seperti ini tidak menjadi tren

    • Saya juga sama. Menarik bahwa contoh CodePen itu bisa dilakukan hanya dengan CSS, tetapi terasa agak berlebihan; kalau saya melihat tombol ajakan bertindak pertama itu di situs web nyata, saya akan menganggapnya norak dan memalukan
      Hal-hal seperti ini sangat terasa seperti marketing dan manipulasi. Saya ingin situs membiarkan saya membaca dan memutuskan apa yang akan saya lakukan. Saya tidak ingin perhatian saya dipaksa ditarik ke elemen yang menghasilkan uang dan mengganggu saya
    • Awalnya saya kira CodePen sedang mencoba melakukan upsell kepada saya
    • Hal-hal seperti ini sudah dilakukan dalam kode aplikasi native, jadi web juga perlu punya fitur padanannya
      Kalau tidak, semua orang akan mengimplementasikannya di dalam ekosistem tertutup

  • PFM, atau ungkapan “pure freaking magic”, terasa sangat tepat saat melihat apa yang bisa dilakukan dengan animasi CSS
    Namun karena terlalu terspesialisasi untuk CSS dan hanya CSS, ini lebih sulit dipelajari dan dikonseptualisasikan dibanding mengimplementasikannya secara prosedural dengan JS. Cara berpikir seperti itu tidak mudah masuk, dan opsi penggunaan CSS flex saja sudah cukup membuat kewalahan

    • CSS benar-benar terasa seperti ranah alien tersendiri. Sintaksnya yang asing bagi sebagian besar developer juga tidak membantu
      Namun CSS itu kuat, benar-benar sangat kuat, dan sangat efisien di sebagian besar browser. Mayoritas besar developer aplikasi web tidak membutuhkan 99% dari apa yang ditawarkan CSS, tetapi mengetahui bahwa fitur-fitur seperti itu ada tetap keren
    • Karena itu, kami mempekerjakan desainer yang bisa mengode HTML+CSS
      Jika kami meletakkan elemen tanpa style yang terhubung ke logika bisnis di halaman, sang desainer bisa menatanya sesuai keinginan. Jika perlu, penyempurnaan UI bisa diulang belakangan
    • Ini adalah paradigma deklaratif seperti SQL
      Dari sudut pandang yang murni imperatif, memang perlu waktu untuk membaca spesifikasi dan bereksperimen, tetapi menurut saya ini adalah cara berpikir yang nilainya melampaui sekadar memakai SQL dan CSS. Tentu saja SQL dan CSS itu sendiri juga sudah cukup bernilai
    • JS selalu, benar-benar selalu, menjadi pilihan terakhir. Dalam beberapa tahun terakhir, ketika fitur CSS masuk ke sebagian besar browser, saya banyak menyingkirkan JS dari kode, dan saya suka membuat halaman menjadi JavaScript Zero
      Saya akan sangat senang jika nama untuk fitur CSS “masonry”[1] segera diputuskan agar bisa dipakai tanpa skrip
      [1] https://github.com/w3c/csswg-drafts/issues/9733
    • Dalam kasus ini, property adalah bagian dari CSS Houdini API, dan memungkinkan JavaScript memanipulasi CSS dengan jauh lebih kuat daripada sebelumnya
      https://developer.mozilla.org/en-US/docs/Web/API/Houdini_API...

  • Antusiasme penulis terhadap potongan CSS baru ini adalah sesuatu yang nyaris tidak pernah saya lihat dalam hampir 10 tahun, dan itu sangat menyenangkan
    Kalau saya masih berusia 20-an, mungkin saya akan mengutak-atik kemungkinan fitur ini selama berjam-jam, berhari-hari. Membuat sesuatu bekerja di CSS dulu terasa menyenangkan
    Sekarang, berkat flexbox, grid, dan karena sebagian besar situs web serta aplikasi mengikuti prinsip desain standar, semuanya menjadi cukup mudah, dan saya menganggap UI web sebagian besar sudah mendekati masalah yang terselesaikan

    • Saya penasaran apa yang dimaksud dengan prinsip desain standar itu
    • Saya tidak tahu apa yang katanya sudah terselesaikan. Layout?
      Saya masih kadang harus membaca ulang bagian-bagian ambigu dari flex dan grid. Penentuan posisi sticky adalah salah satu fitur paling berguna, tetapi jika karena alasan apa pun tidak bekerja, men-debug dan memahami penyebabnya bisa sangat sulit atau hampir mustahil. Misalnya masalah apakah ada overflow di salah satu parent
      Dokumentasi yang menjelaskan kasus-kasus tepi seperti ini dengan baik juga sulit ditemukan, dan men-debug CSS hanya dari kode sumber tanpa developer tools hampir mustahil, jadi kita harus memeriksa elemen saat runtime
      Sebagian besar elemen input native masih memiliki kemungkinan styling yang sangat terbatas, dan modal serta popover native pun harus ditunggu selama bertahun-tahun. Terakhir kali saya cek, kita bahkan masih belum bisa menganimasikan tinggi dari display: none ke block
      Saya merasa mungkin kita sudah terlalu terbiasa dengan berbagai masalah CSS sampai kehilangan daya kritis terhadapnya