- Daftar ini merangkum fitur CSS/HTML yang baru ditambahkan atau dukungannya diperluas tahun ini dari sudut pandang praktik nyata, mencakup transisi UI, form, tipografi, hingga CSS fungsional secara luas
- Fitur baru utama mencakup transisi ukuran ke kata kunci seperti
auto, HTML popover/invoker, dan CSS @function·if(); banyak di antaranya masih didukung terutama di Chrome sehingga memerlukan strategi peningkatan bertahap
- Input yang meluas otomatis dengan
field-sizing, Custom Select, text-wrap: balance/pretty, easing linear(), dan jalur shape() dapat dengan mudah meningkatkan kualitas visual dan kegunaan
- Bertambahnya alat kontrol nilai dan alur seperti
attr() yang lebih kuat, reading-flow untuk mengatur urutan baca, dan calc-size() memperluas cakupan desain yang bisa ditangani hanya dengan CSS
- Tetap perhatikan Masonry,
random(), margin-trim, dan perluasan View Transitions yang masih dalam proses standardisasi dan dukungan, sementara Container Queries, :has(), dvh, dan lainnya sudah menjadi keterampilan dasar di dunia kerja
Animate to Auto
- Fitur untuk memungkinkan transisi halus antara nilai tetap ↔︎
auto pada elemen dengan tinggi konten yang berubah-ubah
- Jika
interpolate-size: allow-keywords dideklarasikan secara global, transisi seperti height: 0 → auto akan diizinkan
- Atau, tanpa
interpolate-size, transisi bisa dilakukan dengan calc-size() lewat height: calc-size(auto, size)
- Keunggulannya adalah menghilangkan alternatif rapuh seperti trik
max-height atau pengukuran di luar layar + animasi JS, sambil tetap menjaga layout asli
- Status dukungan saat ini berfokus pada Chrome, dan karena animasi bersifat bagus jika ada, maka cocok diterapkan dengan PE (Progressive Enhancement)
Popovers & Invokers
- Atribut
popover adalah fitur HTML yang memberi elemen sembarang perilaku buka/tutup beserta API JS terkait, dan termasuk kategori overlay ringan yang berbeda dari modal
- Dengan atribut invoker, kontrol deklaratif bisa dilakukan tanpa JS
- Maknanya adalah karena aksesibilitas, keyboard, dan manajemen fokus disediakan secara bawaan di level HTML, risiko ada bagian implementasi yang terlewat jadi berkurang
- Dukungan untuk Popover sudah luas, sedangkan Invoker masih Chrome lebih dulu, dan ada perbedaan dukungan pada fitur detail seperti
popover="hint"
- Karena tersedia polyfill, adopsi untuk UX yang esensial tetap memungkinkan
@function
- Memperkenalkan fungsi buatan pengguna ke sistem fungsi nilai CSS, sehingga logika bersama dapat diabstraksikan dalam bentuk seperti
@function --foo(--x) { result: ... }
- Memberikan efek mengurangi duplikasi (DRY) dan menyederhanakan deklarasi, sehingga keterbacaan dan kemudahan perawatan meningkat
- Dukungan masih Chrome lebih dulu; bila masuk akal, bisa memakai graceful fallback dengan
property: fallback lalu di baris berikutnya property: --func()
- Perlu diingat, ini tidak kompatibel dengan fungsi Sass
if()
- Fungsi percabangan tingkat nilai pertama di CSS; kondisi
media(), supports(), dan style() bisa disusun seperti switch statement untuk mengembalikan nilai pertama yang cocok
- Contoh:
grid-template-columns per breakpoint dapat ditulis dalam satu deklarasi
- Efeknya adalah meningkatkan keterbacaan dan mengurangi pengulangan, serta sangat cocok dipadukan dengan
@function kustom
- Dukungan masih Chrome lebih dulu; disarankan mendeklarasikan nilai fallback lebih dulu dan menerapkan pola PE
field-sizing
- Pengenalan properti
field-sizing yang membuat elemen input/edit otomatis membesar sesuai isi
- Contoh paling umum adalah perluasan tinggi otomatis pada
<textarea>, dan ini juga bisa dipakai untuk UX resize inline secara instan
- Dukungan tersedia di Chrome dan Safari direncanakan menyusul; bila perlu bisa diganti dengan JS ringan
- Karena sifatnya adalah peningkatan UX, bukan fungsi wajib, adopsi bertahap sangat cocok
Custom Selects
- Mendukung kustomisasi penuh bukan hanya pada tampilan
select, tetapi juga pada UI pemilihan yang terbuka itu sendiri, setelah melakukan opt-in eksplisit
- PE-nya sangat baik, sehingga pada lingkungan yang belum mendukung akan fallback dengan aman ke
<select> bawaan
- Dukungan masih Chrome lebih dulu; area kontrol bisa diperluas dengan
appearance: base-select dan ::picker(select)
text-wrap
text-wrap: balance menyeimbangkan panjang baris untuk teks besar seperti judul, sedangkan text-wrap: pretty memperbaiki widow line dan estetika bahkan pada isi teks- Efeknya adalah peningkatan keterbacaan dan kualitas tipografi yang bisa langsung terasa tanpa biaya tambahan
- Dukungan untuk
balance sudah luas, sedangkan pretty masih lebih dulu di Chrome dan Safari, sehingga cocok untuk PE
linear() easing
- Berbeda dari kata kunci
linear, fungsi linear() memungkinkan definisi kurva easing yang presisi dengan jumlah titik sesuka hati, sehingga cocok untuk gerakan kompleks seperti bounce
- Sementara
cubic-bezier() sebagai alternatif lebih terbatas, linear() memberi kontrol timing yang lebih detail dan sudah didukung penuh
- Bila perlu, fallback bisa dilakukan dengan named easing atau
cubic-bezier()
shape()
- Fungsi
shape() melengkapi path() yang lama dengan keterbatasan khusus piksel dan sintaks yang sulit, sehingga jalur arbitrer bisa ditulis memakai unit responsif dan properti kustom
- Dengan
clip-path, bentuk bebas bisa dipakai untuk masking; dengan offset-path, elemen bisa ditempatkan/dianimasikan mengikuti jalur, dan integrasi dengan shape-outside juga sudah diisyaratkan untuk masa depan
- Dukungan ada di Chrome dan Safari, Firefox masih dalam tahap flag, sehingga di pengembangan nyata disarankan menyiapkan fallback yang elegan
More Powerful attr()
attr() kini mendukung penentuan tipe, sehingga nilai non-string seperti angka dan warna bisa langsung dibaca dari atribut HTML dan dipakai sebagai nilai CSS- Maknanya adalah perluasan pola untuk menyuntikkan warna tema, jumlah, ukuran, dan sebagainya dari markup
- Dukungan masih Chrome lebih dulu; sebaiknya diterapkan bertahap mulai dari elemen penguatan visual, bukan ketergantungan pada layout inti
Reading Flow
- Diperkenalkannya properti
reading-flow untuk mengoreksi urutan tab secara logis pada layout yang urutan visualnya berbeda dari urutan sumber
- Saat grid disusun ulang, alur fokus yang sesuai metode layout bisa ditentukan, misalnya dengan
reading-flow: grid-rows
- Karena risiko aksesibilitas bisa dikurangi hanya dengan satu deklarasi CSS, kebebasan layout menjadi lebih besar
- Dukungan masih Chrome lebih dulu, sehingga disarankan menahan diri dari penyusunan ulang berlebihan sampai dukungan lebih umum tersedia
Stuff to Keep an Eye On
- Layout Masonry masih dalam tahap perapian spesifikasi, dan proposal
item-flow diperkirakan akan memperluas kemungkinan penataan melampaui grid
- Fungsi
random() sudah tersedia di Safari dan berguna untuk membuat desain variasi yang lebih ekspresif
margin-trim berguna namun masih berfokus di Safari, sementara sibling-index()/count() tersedia di Chrome dan cocok untuk stagger animation- Ada perkembangan positif lintas browser seperti
view-transition-name: match-element; pada View Transitions dan pengembangan di Firefox
- Rasionalisasi operasi perkalian/pembagian
calc() untuk campuran unit hampir lolos eksperimen, sehingga kebutuhan akan hack konversi tipe lama diperkirakan berkurang
- Diangkat pula isu tidak adanya penamaan versi seperti “CSS4”, beserta pengenalan daftar referensi berisi fitur baru dari 5 tahun terakhir
Great Stuff to Remember
- Container Queries & unit terkait tetap menjadi keterampilan dasar paling penting dengan peningkatan produktivitas terbesar sejak media query
:has() memungkinkan seleksi berbasis induk dan status, memberi kegunaan luas untuk menyelesaikan selector kombinasi yang kompleks hanya dengan CSS- View Transitions, Anchor Positioning, Scroll-Driven Animations kini telah hadir di Safari, sehingga hambatan adopsi di dunia kerja makin rendah
- Unit viewport tambahan (dvh, dll.) telah masuk Baseline, meningkatkan stabilitas viewport di perangkat mobile
Sorotan kode/contoh penggunaan
- Transisi ukuran: deklarasikan
interpolate-size: allow-keywords secara global atau, saat state ditoggle, gunakan height: calc-size(auto, size) untuk membuat animasi tinggi konten
- Percabangan grid: pakai pola
if(media(...): nilai; ... else: nilai;) untuk merangkum template column per breakpoint dalam satu deklarasi
- Custom Select:
select, ::picker(select) { appearance: base-select } untuk mengaktifkan picker buatan pengguna
- Bounce easing:
animation-timing-function: linear( ... banyak titik ... ) untuk membuat kurva pantulan/redaman yang detail
- Clip path:
clip-path: shape( ... ) untuk menyusun masking bentuk berbasis rasio yang responsif
Panduan penerapan di dunia kerja
- Untuk item dengan perbedaan dukungan browser yang besar, lakukan adopsi berdasarkan desain yang mengutamakan fallback dan efek dibanding biaya masuknya
- Animasi, tipografi, dan efek visual cocok menjadi kandidat PE lebih dulu, sedangkan aksesibilitas inti seperti fokus/urutan tab lebih baik diadopsi setelah dukungan luas tersedia
- Fungsi/percabangan sendiri akan memberi ROI maksimal jika aturan desain didokumentasikan dan dipadukan dengan token serta properti kustom sebagai pola bersama tim
- Peningkatan UX form seperti
field-sizing dan Custom Select memberi manfaat yang sangat terasa dalam skenario mobile-first
Kesimpulan
- CSS modern edisi 2025 adalah tahun ketika fungsi nilai, percabangan logis, dan kontrol bentuk berkembang sehingga “lebih banyak hal bisa dilakukan dengan CSS”, dan bersama strategi PE ia sangat layak diadopsi secara bertahap
- Dengan meletakkan dasar-dasar seperti Container Queries,
:has(), dan unit viewport terlebih dahulu, lalu memprioritaskan item berdampak tinggi seperti animate-to-auto·if()·shape(), kita mendapatkan roadmap yang realistis
3 komentar
CSS sekarang rasanya sudah hampir menjadi sebuah bahasa. Implementasi logis sekarang jadi cukup memungkinkan sampai titik tertentu.. Jadi terasa, ini masih stylesheet atau bukan ya.
Wah, bakal ada banyak fitur yang sangat berguna. Selama ini banyak hal yang harus diimplementasikan pakai JavaScript.
CSS benar-benar sudah jauh lebih baik.