Fitur Front-End Baru untuk Desainer di 2025

• Seiring perkembangan teknologi web modern, banyak hal yang dulu harus diimplementasikan dengan JavaScript kini bisa dilakukan dengan mudah hanya dengan HTML dan CSS
• Teknologi baru seperti styling berbasis komponen, styling elemen induk, dan definisi warna relatif kini tersedia luas di berbagai browser
• Memberikan cara bagi desainer dan developer untuk membuat komponen UI dengan lebih sederhana dan efektif

CSS Container Queries dan Style Queries

• Memungkinkan styling berbasis komponen
  • Menerapkan style CSS dengan melakukan query pada lebar dan informasi style dari container
  • Berguna untuk styling komponen yang dapat digunakan ulang dengan berbagai variasi
  • Referensi: Pengenalan CSS Style Queries

Menyeimbangkan Teks (text-wrap: balance)

• Menjaga keseimbangan tipografi
  • Secara otomatis menghitung agar teks terdistribusi merata pada judul, judul kartu, dan sebagainya
  • Referensi: Panduan Ahmad Shadeed

Penyesuaian Ukuran Otomatis pada Field Input Form

• Mengotomatiskan ukuran input
  • Ukuran input teks atau menu pilihan menyesuaikan otomatis dengan konten
  • Dapat diimplementasikan hanya dengan satu baris CSS sederhana
  • Referensi: Penjelasan Adam Argyle

Konten Tersembunyi Bisa Dicari (hidden=until-found)

• Meningkatkan aksesibilitas UI
  • Konten tersembunyi seperti section accordion yang terlipat tetap bisa ditemukan melalui pencarian dalam halaman maupun mesin pencari
  • Referensi: Panduan Joey Arhar

Dukungan Warna Resolusi Tinggi (OKLCH, OKLAB)

• Mendukung 50% lebih banyak warna
  • Spesifikasi warna baru yang dirancang berdasarkan persepsi warna manusia
  • Cocok untuk design system dan gradient
  • Referensi: Penjelasan Vitaly Friedman

Warna Relatif CSS

• Menghitung warna berdasarkan warna yang sudah ada
  • Menggunakan keyword from untuk menyesuaikan kecerahan warna, menghitung warna komplemen, dan lain-lain
  • Referensi: Code snippet Adam Argyle

View Transitions API

• Transisi layar yang mulus
  • Mengimplementasikan perpindahan yang halus dengan memanfaatkan animasi CSS saat berpindah dari layar lama ke layar baru
  • Mendukung transisi dalam satu dokumen maupun antar dua dokumen
  • Referensi: Panduan Bramus Van Damme

CSS Scroll Snap

• Memberikan pengalaman scroll yang presisi
  • Memungkinkan pengaturan container scroll agar pengguna otomatis snap ke item konten tertentu
  • Referensi: Panduan Ahmad Shadeed

Styling Elemen Induk (:has)

• Menata elemen induk berdasarkan status elemen anak
  • Di luar relasi induk-anak, style juga dapat disesuaikan berdasarkan status elemen lain
  • Referensi: Panduan Josh W. Comeau

Fitur Menarik Lainnya

• Peningkatan styling status input: :user-valid, :user-invalid memberikan feedback setelah pengguna mengubah inputnya
• Optimasi keyboard mobile: inputmode dan enterkeyhint meningkatkan keyboard virtual
• Elemen HTML <dialog>: mengimplementasikan modal dan popover yang aksesibel

Kesimpulan

• Teknologi front-end baru yang praktis membawa dampak inovatif pada desain UI dan UX
• Fitur yang akan hadir ke depan: layout masonry, kustomisasi <selectmenu>, penyelarasan text box, dan lainnya
• Terima kasih kepada semua developer yang bekerja untuk memajukan platform web, dan semoga tulisan ini bermanfaat untuk meningkatkan project dan aplikasi Anda. Selamat berkarya!

[savvykang]

Seperti yang juga ditunjukkan orang lain, penulis sama sekali tidak mempertimbangkan kompatibilitas antar-browser maupun konsistensi perilaku. Selain itu, ada juga kasus di mana implementasi atau perilakunya berbeda antar-browser, jadi kita tidak bisa begitu saja memilih fitur baru. Seberapa pun tinggi pangsa penggunaan Chrome, karena ada iOS, setidaknya perlu mempertimbangkan apakah fitur tersebut berjalan baik di Safari.

[n00nietzsche]

Saya setuju.. sepertinya akan sulit untuk langsung menggunakannya di produk

[cichol]

Belum diimplementasikan di Safari, Firefox

• Penyesuaian ukuran otomatis pada kolom input formulir
• Konten tersembunyi bisa dicari (hidden=until-found)

Belum diimplementasikan di Firefox

• View Transitions API

Untuk fitur frontend baru, pada praktiknya lebih mudah menganggapnya sebagai fitur baru eksklusif Chrome.
Dalam kasus ekstrem, ada juga yang memakan waktu sampai 5 tahun seperti OffscreenCanvas. (Chrome 2018, Safari 2023)

[kyc1682]

Container query dan :has sangat memudahkan.