Mengapa CSS Semakin Mirip JavaScript?

Halo sobat dev! Pernahkah kamu merasa lelah karena harus menulis banyak sekali JavaScript hanya untuk menangani perubahan state sederhana pada tampilan web? Kabar baiknya, CSS sekarang makin 'pintar' dan mulai mengambil alih tugas yang dulu biasanya dikerjakan lewat event listener. Meskipun CSS secara teknis menangani state (kondisi) dan bukan event (kejadian), rasanya makin hari perbedaannya semakin tipis.

Dulu, kalau mau bikin sesuatu berubah saat diklik atau saat mouse lewat, kita wajib pakai addEventListener. Sekarang? Pseudo-classes di CSS sudah sangat berkembang. Mari kita bedah lebih dalam apa saja yang bisa dilakukan CSS untuk memangkas baris kode kamu.

Pseudo-classes yang Bekerja Seperti Event Listener

Pseudo-classes CSS sering kali menangkap momen transisi di antara dua event JavaScript. Berikut adalah beberapa yang paling sering digunakan dalam pengembangan web modern:

  • :hover dan :active: :hover menangkap momen antara pointerenter dan pointerleave. Sedangkan :active mirip dengan kombinasi pointerdown dan pointerup.
  • :focus dan :focus-visible: Ini adalah penyelamat saat kita ingin membedakan fokus pada keyboard atau mouse tanpa harus ribet mengecek kondisi via script. Kamu bisa menggabungkan pengecekan ini di JS dengan cara: element.matches(":focus-visible").
  • :focus-within dan :has(): Ini adalah game changer! Kita bisa mengatur gaya elemen induk (misalnya form) hanya berdasarkan fokus atau kondisi elemen di dalam anak-anaknya. form:has(:focus) adalah cara elegan untuk mengubah tampilan form saat user sedang mengetik di salah satu inputnya.
  • :checked: Mirip dengan event change di JavaScript, CSS bisa langsung memberikan style pada checkbox atau radio button yang terpilih tanpa perlu memanggil fungsi JS apa pun.
  • :valid/:invalid/:user-valid/:user-invalid: Validasi form kini jauh lebih bersih. Kamu tidak perlu lagi menulis banyak if-else untuk mengecek checkValidity() karena CSS sudah bisa melakukannya secara langsung di sisi UI.

Fitur Masa Depan: Mengenal event-trigger

Mungkin kamu pernah dengar tentang spekulasi masa depan CSS bernama event-trigger. Meski saat ini belum didukung browser, konsepnya sangat menarik. Bayangkan kita bisa memicu animasi hanya dengan mendefinisikan event langsung di CSS:

button { event-trigger: --event click; }

div { animation-trigger: --event play-forwards; animation: fade-in 300ms both; }

Bayangkan betapa ringkasnya kodingan kita jika nanti fitur ini benar-benar rilis secara stabil. Kamu tidak perlu lagi repot-repot memanipulasi class lewat JS hanya untuk menjalankan animasi sederhana.

Worth It Gak Buat Mahasiswa?

Belajar memanfaatkan CSS untuk menangani state UI adalah investasi waktu yang sangat berharga. Bagi kamu yang sedang mengerjakan proyek akhir atau membangun portofolio, ini kelebihannya:

  • Performa: Mengurangi beban main thread JavaScript, bikin website lebih ringan (terutama buat yang akses lewat HP kentang).
  • Maintainability: Kode lebih bersih karena logic UI tetap berada di CSS, bukan tercecer di file JS.
  • Efisiensi: Kamu bisa mengerjakan fitur kompleks dengan baris kode yang jauh lebih sedikit.

Kekurangannya? Saat ini beberapa fitur seperti media element pseudo-classes masih terbatas dukungannya di browser tertentu. Jadi, pastikan selalu cek Can I Use sebelum mengimplementasikannya di project produksi.

Cara Mendaftar (Tips Belajar)

Ingin jago frontend? Jangan cuma baca, langsung praktik! Buatlah proyek kecil menggunakan :has() untuk sistem notifikasi atau validasi form. Portofolio dengan teknik CSS modern seperti ini sangat disukai rekruter karena menunjukkan kamu mengikuti standar web terkini.

Kalimat Motivasi: "Dunia teknologi bergerak sangat cepat, jangan mau ketinggalan! Segera buka teks editormu, perbarui CV dengan skill CSS modern, dan buktikan kalau kamu adalah developer masa depan yang siap bersaing di industri!"