Fitur-fitur Modern HTML/CSS yang Kurang Dikenal

• Penyebab utama penurunan performa situs web belakangan ini adalah penggunaan JavaScript yang berlebihan dan skrip pelacakan, padahal dalam banyak kasus hal itu bisa cukup digantikan dengan HTML/CSS saja
• Fitur-fitur yang baru ditambahkan seperti CSS nesting, relative colors, unit viewport baru (lvh, svh, dvh) memungkinkan penyelesaian sederhana untuk hal-hal yang dulu bergantung pada JS atau preprocessor
• CSS bukan sekadar alat styling, melainkan bahasa yang kuat yang mampu mewujudkan animasi, validasi input, tema dark mode, hingga menu accordion
• Dari sisi performa, CSS berjalan dengan akselerasi GPU dan di thread terpisah sehingga lebih mulus dan efisien daripada JS untuk animasi dan efek transisi
• Penulis menekankan CSS bukan hanya alat praktis, tetapi juga sarana ekspresi dan seni, serta mendorong para web developer untuk lebih memanfaatkan potensi CSS modern

---

Pendahuluan: Kompleksitas web, dan upaya baru

• Banyak situs web mengalami penurunan performa dan kompleksitas akibat penggunaan framework JavaScript yang berlebihan
  • Aplikasi React membutuhkan beberapa detik untuk memuat, dan NextJS memunculkan hydration error
  • Folder node_modules dapat memakan ukuran hingga beberapa gigabita
• Bahkan tanpa JavaScript, HTML dan CSS saja sudah bisa mewujudkan fitur yang kuat
  • Selain keranjang belanja e-commerce yang kompleks atau dashboard, JavaScript mungkin tidak selalu wajib
• Tulisan ini memperkenalkan fitur-fitur terbaru CSS dan mendorong developer mengeksplorasi berbagai kemungkinan tanpa hanya bergantung pada JavaScript

Kesalahpahaman dan persepsi tentang CSS

Apakah CSS benar-benar sulit dan tidak nyaman digunakan?

• Persepsi negatif terhadap CSS berasal dari kurangnya pembelajaran dasar
  • Banyak developer melewati dasar-dasar CSS dan fokus pada JavaScript atau TypeScript
  • CSS bukan sekadar alat styling, melainkan bahasa khusus domain yang menyediakan kemampuan kuat
• CSS memungkinkan pembuatan layout kompleks dengan mudah lewat alat seperti flexbox
  • Contoh: memusatkan div cukup mudah dengan display: flex dan justify-content: center
  • Developer tools di browser menyediakan widget untuk menyesuaikan properti flexbox secara visual
• Jika hanya mendalami satu sisi saja (misalnya JS) dan mengabaikan CSS, wajar bila CSS terasa berat

Susahnya menulis CSS, dan perubahannya

• Dulu CSS memang tidak terlalu nyaman, sehingga lahirlah alat seperti Sass dan Tailwind
  • Contoh: harus mengelola rantai selector panjang seperti .post > .buttons .like:hover
• Belakangan ini ditambahkan fitur peningkatan kualitas (seperti nesting), sehingga pengembangan dengan CSS murni menjadi jauh lebih nyaman
  • CSS nesting mengumpulkan style yang saling terkait di satu tempat sehingga keterbacaan meningkat
    • Contoh: .post { & > .buttons { .like { &:hover { ... } } } }
    • Hubungan parent-child jadi lebih jelas, sehingga nama class bisa dibuat lebih pendek dan sederhana
• Relative colors memudahkan penyesuaian warna
  • Kecerahan dapat diatur dengan hsl(from #123456 h s calc(l + 10))
  • Menghasilkan warna dinamis dengan mencampur dua warna lewat color-mix()
• Sintaks rentang media query memungkinkan penetapan kondisi yang intuitif seperti (width <= 768px)
• Unit lh mendukung styling yang menyesuaikan tinggi baris
• Properti scrollbar-gutter menyelesaikan masalah pergeseran layout akibat scrollbar
• Baseline menjamin kompatibilitas fitur di browser utama
  • newly available berarti berfungsi di browser modern
  • widely available berarti didukung hingga browser dari 2,5 tahun lalu
  • Contoh: CSS nesting didukung di semua browser sejak Desember 2023

Mengapa membangun hanya dengan CSS/HTML?

• Sebagian pengguna menonaktifkan JavaScript secara default karena alasan keamanan, privasi, dan sebagainya
• Jika situs disajikan hanya dengan CSS/HTML murni, kemungkinan besar pengguna seperti ini tetap bisa memakainya
• Dari sudut pandang developer maupun pengguna, penggunaan CSS/HTML saja memberi keuntungan besar dalam hal kecepatan, aksesibilitas, serta penggunaan CPU/baterai
  • Animasi CSS berjalan di compositor thread, sehingga mengurangi beban CPU
  • JavaScript berjalan melalui event loop dan dapat menimbulkan sedikit latensi
• Aksesibilitas dan kemudahan penggunaan juga meningkat
  • Efek hover pada tombol, animasi toast, dan validasi input bisa dibuat dengan mudah memakai CSS

Contoh nyata dan fitur-fitur utama CSS

Membuat animasi awal yang natural dengan @starting-style

• Dulu animasi kemunculan elemen memerlukan struktur rumit seperti keyframes dan trigger JS
• Dengan hadirnya @starting-style, penentuan state awal menjadi sederhana. Animasi state awal elemen (misalnya fade-in) bisa dibuat dengan mudah
  • Diatur dengan transition: opacity 1s; @starting-style { opacity: 0; }
  • Berfungsi tanpa @keyframes atau JavaScript tambahan
• Cukup nyatakan state awal bersama transition agar animasi diterapkan secara natural
  • Contoh: menangani perubahan opacity dan posisi pesan toast dengan mulus

Pengaturan tema dark/light mode yang mudah

• color-scheme: light dark mengalihkan tema secara otomatis sesuai preferensi pengguna
• Fungsi light-dark(#000, #FFF) menentukan warna yang sesuai untuk mode terang/gelap
• Pemilihan tema oleh pengguna bisa didukung lewat radio button dan selector :has
  • Pergantian tema bisa dilakukan hanya dengan CSS tanpa JavaScript
  • Penyimpanan/pemuatan tema dengan JavaScript dapat ditambahkan secara opsional

Membuat UI kustom dengan radio/checkbox dan :has, :checked, dll.

• Interaksi kompleks seperti tab, accordion, dan toggle juga bisa dibuat tanpa JavaScript
• Radio button dapat diberi styling kustom dengan :checked dan :has
  • Contoh: menetapkan style tombol yang dipilih dengan label:has(input:checked)
  • Elemen input disembunyikan dengan opacity: 0, tetapi aksesibilitas screen reader tetap terjaga
• Elemen details cocok untuk membuat menu accordion seperti FAQ
  • Status buka tunggal dapat dikendalikan dengan atribut name
  • Animasi dapat ditambahkan berdasarkan state [open]

Validasi input dan refleksi state

• Dengan menggabungkan atribut HTML seperti pattern dan required serta pseudo-class CSS (:valid, :invalid, :user-valid, dll.), kita bisa memberi validasi real-time dan umpan balik visual
• Pengalaman pengguna meningkat lewat perubahan style seperti outline/border pada field input
• Atribut pattern di HTML memvalidasi isian field input
  • Contoh: \w{3,16} mengizinkan 3–16 huruf, angka, atau underscore
• :valid dan :invalid di CSS memberi styling sesuai validitas
  • :user-valid dan :user-invalid hanya menerapkan style setelah pengguna melakukan input
• Selector :has memungkinkan styling elemen lain berdasarkan state input
• Dalam beberapa kasus (misalnya syarat input yang kompleks), JS memang dibutuhkan, tetapi untuk kebanyakan hal CSS/HTML sudah cukup

Cara yang benar menggunakan unit viewport

• Unit vw/vh memiliki masalah akurasi di mobile karena address bar (navigation bar) dapat muncul dan menghilang
• Disarankan memakai unit viewport baru seperti lvh/svh/dvh (largest/smallest/dynamic viewport height)
  • lvh: untuk layar penuh (misalnya background penuh)
  • svh: untuk tombol, tautan, dan elemen lain yang harus selalu terlihat di layar
  • dvh: untuk mengalokasikan ukuran secara dinamis sesuai perubahan seperti scroll
• Overlay keyboard ditangani dengan properti interactive-widget atau VirtualKeyboard API
  • <meta name="viewport" content="width=device-width, interactive-widget=resizes-content">
  • Di browser berbasis Chromium, gunakan navigator.virtualKeyboard.overlaysContent = true

Wishlist CSS (fitur yang masih kurang atau diharapkan)

• Blok yang dapat digunakan ulang: menerapkan class lain di dalam class (misalnya @apply border)
• Selector media query gabungan: menggabungkan @media dengan selector class
• Variabel nth-child: styling dinamis dengan span { --nth: nth-child(); }
• Selector nth-letter: styling huruf tertentu (misalnya p::nth-letter(2))
• Menghapus unit: membuat nilai tanpa unit dengan calc(100vw / 1px)
• Fungsi image(): mendukung warna fallback dan potongan gambar
• Tag style di dalam body: dukungan standar resmi untuk mengurangi masalah FOUC

Penutup: CSS, dan sisi artistik web

• CSS bukan sekadar alat, melainkan sarana ekspresi kreatif
• Alat AI atau build chain (linter, alat minifikasi) dapat membatasi kreativitas
• CSS memenuhi performa, aksesibilitas, dan ekspresi artistik sekaligus
• Tulisan ini dibuat dengan HTML/CSS tanpa JavaScript berukuran sekitar 49kB
  • Semua widget interaktif dan elemen visual dibuat secara manual
  • Contoh: CSS click game membuktikan kemungkinan CSS sebagai bahasa pemrograman