Yang Baru di UI Web: Recap I/O 2025

Una Kravets

Dipublikasikan: 14 Agustus 2025

Saat musim acara Google I/O berakhir, postingan ini merangkum sorotan utama untuk CSS dan UI Web yang dibagikan di acara kami tahun ini.

Fitur yang sangat canggih yang dulu hanya diimpikan oleh developer kini telah hadir di browser dan mencapai kompatibilitas lintas browser lebih cepat dari sebelumnya. Namun, meskipun ada kemajuan ini, beberapa pola UI yang paling umum masih sulit diterapkan dengan benar. Anda sering kali harus mengandalkan framework JavaScript, trik CSS yang kompleks, dan banyak kode kustom untuk membangun komponen yang seharusnya lebih sederhana.

Tim Chrome, berkolaborasi dengan vendor browser lain, badan standar seperti CSSWG dan WHATWG, serta grup komunitas seperti Open UI, berfokus untuk membuat pola UI mendasar ini benar-benar mudah diterapkan.

Menu pilihan yang dapat disesuaikan

Elemen <select> sangat penting untuk formulir, tetapi struktur internalnya secara historis dilindungi oleh browser, sehingga membuat gaya CSS yang konsisten dan komprehensif hampir tidak mungkin. Untuk membuat <select> yang lebih baik, Anda harus memahami elemen penyusunnya—Popover API dan CSS Anchor Positioning API.

Popover API: Kini dalam Baseline

Drop-down kustom memerlukan kotak opsi mengambang yang muncul di atas semua elemen UI lainnya, mudah ditutup, dan mengelola fokus dengan benar. Popover API menangani semua ini, dan mulai tahun ini, API tersebut telah mencapai status Tersedia Baru di Baseline, yang berarti API tersebut stabil di setiap browser utama.

Untuk membuat popover, Anda memerlukan dua bagian: elemen pemicu (seperti <button>) dan elemen popover itu sendiri. Hubungkan dengan memberikan id dan atribut [popover] pada popover, lalu rujuk id tersebut dalam atribut [popovertarget] tombol.

Popover API mengelola seluruh siklus proses elemen, dengan menyediakan:

• Rendering lapisan teratas: Tidak perlu lagi berurusan dengan indeks z.
• Kemampuan penutupan ringan opsional: Popover ditutup saat pengguna mengklik di luar area popover.
• Pengelolaan fokus otomatis: Browser menangani navigasi tab ke dalam dan ke luar popover.
• Binding yang dapat diakses: Model interaksi yang mendasarinya ditangani secara native.

Elemen <dialog> mendapatkan upgrade

Meskipun popover sangat efektif, popover tidak selalu menjadi pilihan yang tepat. Misalnya, dalam interaksi pemblokiran halaman yang memerlukan masukan pengguna, modal <dialog> lebih tepat.

Sebelumnya, <dialog> tidak memiliki beberapa kemudahan [popover], tetapi hal itu berubah. Dengan atribut closedby="any" baru, dialog modal kini mendukung fungsi penutupan ringan, yang menutup saat pengguna mengklik di luar atau menekan tombol Escape.

Selain itu, pemanggil perintah ([command] dan [commandfor]) menyediakan cara deklaratif tanpa JavaScript untuk menghubungkan tombol ke tindakan, seperti membuka dialog dengan command="show-modal".

CSS Anchor Positioning

Setelah popover muncul, popover harus diposisikan relatif terhadap elemen yang membukanya. Menghitungnya secara manual dengan JavaScript tidak stabil dan dapat menurunkan performa.

Mulai Chrome 125, Anda dapat menggunakan CSS Anchor Positioning API. Kemampuan baru ini secara deklaratif mengikat satu elemen ke elemen lain, dan secara otomatis menangani pemosisian ulang saat elemen tersebut mendekati tepi layar. Fitur ini adalah bagian dari Interop 2025, sebuah inisiatif lintas browser untuk meluncurkan fitur yang sangat diminati, yang berarti kita dapat mengharapkan fitur ini ada di semua browser utama pada akhir tahun 2025.

Meskipun Anda dapat secara eksplisit menautkan elemen dengan properti anchor-name dan position-anchor, pembaruan dalam spesifikasi dan di Chrome 133 membuat hubungan anchor implisit antara <popover> dan <button> pemanggilnya. Hal ini sangat menyederhanakan kode, dan berarti Anda kini dapat memosisikan popover dengan satu baris CSS, seperti: position-area: bottom span-left.

Alat penahan dari chrome.dev menunjukkan cara menggunakan position-area untuk mendapatkan penempatan yang Anda inginkan:

Langkah selanjutnya adalah memosisikan ulang penanda oleh browser, sehingga tidak keluar dari layar, dengan menentukan penggantian menggunakan position-try-fallbacks. Demo berikut menunjukkan popover yang menggunakan properti ini untuk logika penempatan ulang bawaan:

<select> yang benar-benar dapat disesuaikan

Dengan adanya elemen penyusun tersebut di versi sebelumnya, gaya web-native untuk elemen <select> akhirnya hadir di Chrome 134. Hal ini mencakup properti appearance baru, elemen semu baru, dan elemen <selectedcontent>.

Untuk membuka kunci penyesuaian, terapkan appearance: base-select; ke elemen <select> dan pseudo-elemen ::picker(select) barunya, yang menargetkan daftar drop-down opsi. Hal ini mengekspos bagian internal baru untuk gaya, termasuk:

• <selectedcontent>: Merepresentasikan konten opsi yang dipilih yang ditampilkan di tombol.
• ::picker-icon: Ikon panah drop-down
• <option>:checked dan ::checkmark: Untuk menata gaya opsi yang dipilih dan indikator tanda centangnya

Hal ini memungkinkan konten yang kaya dalam opsi dan kontrol terperinci atas tampilan. Misalnya, Anda dapat menampilkan ikon dan subjudul dalam daftar opsi, tetapi menyembunyikannya dalam status tertutup menggunakan display: none dalam selectedcontent.

Yang terbaiknya adalah, API ini dapat ditingkatkan secara progresif. Di browser yang tidak mendukung fitur ini, pengguna akan tetap mendapatkan pilihan web-native yang berfungsi. Anda mendapatkan tampilan kustom sambil mempertahankan aksesibilitas bawaan, navigasi keyboard, dan integrasi formulir elemen select web-native.

Carousel

Carousel ada di mana-mana di web, dan tidak hanya di bagian hero. Hal ini mencakup konten yang dapat di-scroll secara horizontal dalam tata letak yang rapat seperti UI app store. Namun, membuat carousel di web masih sulit, dengan banyak pertimbangan seperti pengelolaan status, jank scroll, interaktivitas, dan aksesibilitas. Namun, jika Anda memikirkannya, carousel pada dasarnya adalah area scroll canggih dengan afordans UI tambahan.

Mulai menggunakan scroller

Untuk membuat carousel, Anda mulai dengan daftar item yang meluap dari penampungnya. Untuk menyembunyikan scrollbar horizontal sambil menjaga konten tetap dapat di-scroll, gunakan scrollbar-width: none. Selain itu, agar penggeser terasa "cepat", terapkan scroll-snap-type dan scroll-snap-align, yang memastikan bahwa item terpasang pada tempatnya saat pengguna men-scroll.

Sebelumnya dan berikutnya dengan ::scroll-button

Elemen semu ::scroll-button() baru, yang hadir di Chrome 135, memberi tahu browser untuk membuat tombol "berikutnya" dan "sebelumnya" yang memiliki status dan dapat diakses. Browser secara otomatis menangani peran ARIA yang benar, urutan tab, dan bahkan menonaktifkan tombol saat Anda mencapai awal atau akhir—semuanya tanpa JavaScript tambahan.

Untuk memulai tombol scroll, berikan konten dan label yang dapat diakses, seperti berikut:

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

Gaya tombol ini dan posisikan relatif terhadap carousel induknya dengan penempatan anchor CSS, yang merupakan pendekatan yang direkomendasikan untuk melakukannya.

Navigasi Langsung dengan ::scroll-marker

Untuk indikator titik atau thumbnail, elemen semu ::scroll-marker dan ::scroll-marker-group mengaitkan penanda navigasi langsung dengan item dalam penampung scroll Anda. Browser memperlakukan grup seperti tablist dan menangani navigasi keyboard.

Mirip dengan tombol scroll, mulai penanda scroll dengan memilih menggunakan properti content, dan berikan label yang dapat diakses. Dalam contoh berikut, atribut data digunakan untuk menetapkan label penanda scroll. Selain itu, posisikan penanda scroll di ::scroll-marker-group menggunakan properti scroll-marker-group. Terakhir, beri gaya pada penanda aktif menggunakan pseudo-class :target-current baru. Berikut adalah contoh tampilannya untuk carousel dasar:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

Kueri status scroll

Fitur CSS baru terkait scroll memungkinkan Anda membuat carousel yang lebih dinamis dan interaktif. Kueri status scroll adalah kueri media baru yang diterapkan berdasarkan status scroller. Ada tiga jenis kueri status scroll yang berbeda, yang dapat diakses menggunakan scroll-state() dalam pernyataan @container. Bagian-bagian tersebut adalah:

• scroll-state(snapped): Cocok saat elemen berada di posisi "disematkan". Dalam carousel, itu adalah saat item tersebut berada di tengah carousel.
• scroll-state(stuck): Menata gaya elemen, seperti header, saat induknya menjadi tetap.
• scroll-state(scrollable): Tambahkan indikator visual, seperti pudar, untuk menunjukkan bahwa ada lebih banyak konten yang dapat di-scroll.

Manfaatkan semuanya

Kombinasi primitif carousel CSS baru, kueri status scroll, dan penentuan posisi anchor memudahkan Anda membuat carousel interaktif yang disesuaikan. Tingkatkan kualitasnya dengan menyertakan animasi yang digerakkan scroll untuk menautkan animasi secara langsung ke posisi scroll, sehingga menciptakan efek berperforma tinggi seperti penskalaan dan pemudaran item saat di-scroll ke dalam tampilan. Animasi ini berjalan di luar thread utama, sehingga memungkinkan pengalaman yang sangat lancar.

Carousel interaktif ini menggabungkan kueri scroll-state(), ::scroll-button, ::scroll-marker, CSS anchor positioning, dan :target-current.

Selain itu, Anda dapat menggunakan properti baru yang disebut interactivity untuk membantu pengguna berfokus pada konten yang aktif. interactivity: inert memungkinkan pengguna menerapkan kelembaman menggunakan CSS, sehingga item carousel di luar layar tidak dapat difokuskan dan dihapus dari hierarki aksesibilitas.

Pelajari lebih lanjut Carousel CSS.

Kartu kehover interaktif

Kartu info—pop-up kaya konten yang muncul saat Anda mengarahkan kursor ke nama pengguna atau link—sangat berguna, tetapi terkenal sulit dibuat dengan benar. Memastikan penundaan, penanganan peristiwa, dan dukungan multi-perangkat berfungsi dengan baik dapat memerlukan waktu berbulan-bulan bagi tim khusus. Namun, kami sedang mengerjakan solusi deklaratif baru yang akan menyelesaikan masalah ini untuk selamanya.

Popover yang dipicu minat dengan [interestfor]

Keajaiban inti di balik kartu info saat mengarahkan kursor deklaratif adalah atribut[interestfor]. Fitur mendatang ini menghadirkan keunggulan popover, tetapi memicunya berdasarkan "minat" pengguna. Misalnya, minat pengguna pada perangkat penunjuk adalah pointer-hover, navigasi tab dengan keyboard, atau tekan lama atau ketuk pada layar sentuh. Interaksi seluler belum diselesaikan.

Untuk mengonversi popover berbasis klik menjadi popover berbasis minat, buat elemen pemanggilan, yang dapat berupa <button> atau <a>, dan berikan atribut [interestfor] yang sama dengan id elemen [popover]. Tampilannya seperti ini di HTML:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

Browser menangani semua logika peristiwa yang kompleks, termasuk:

• Peristiwa masuk dan keluar: Masuk saat mengarahkan kursor pada perangkat pointer halus, navigasi tab dengan keyboard, sentuh lama atau sentuh pada perangkat pointer kasar.
• Penundaan acara: Kontrol penundaan masuk dan keluar dengan satu properti CSS.

Fitur ini mendukung fitur popover lainnya seperti dukungan lapisan atas, tempat popover dirender di lapisan baru di atas pohon DOM lainnya. Selain itu, binding komponen semantik dan model pohon aksesibilitas yang mendasarinya ditangani secara native.

Menata gaya pemanggil minat

Pemicu minat mencakup beberapa kemampuan baru. Salah satunya adalah kemampuan untuk mengontrol penundaan masuk dan keluar menggunakan properti CSS: interest-target-delay. Yang lainnya adalah kemampuan untuk menata gaya elemen pemanggilan berdasarkan apakah elemen tersebut memiliki minat atau tidak, menggunakan pseudo-class :has-interest.

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" dan UI multifungsi

Bagian penting dari teka-teki untuk pemanggil minat adalah jenis pop-over baru: popover="hint". Pembeda utama dari popover lain adalah popover petunjuk tidak menutup popover lain saat terbuka. Ini sangat cocok untuk tooltip atau kartu pratinjau yang harus muncul tanpa menutup menu atau jendela chat yang sudah terbuka.

Dengan demikian, Anda dapat membangun UI multifungsi yang canggih secara deklaratif. Satu tombol kini dapat memiliki popover otomatis menggunakan popovertarget untuk tindakan klik utamanya (seperti membuka panel notifikasi) dan popover petunjuk yang dipanggil minat untuk menampilkan tooltip yang bermanfaat saat kursor diarahkan ke tombol.

Masa Depan adalah Deklaratif

Fitur yang dibahas di sini mewakili perubahan mendasar menuju platform web yang lebih canggih dan deklaratif. Dengan membiarkan browser menangani pekerjaan kompleks dan berulang dalam pengelolaan status dan aksesibilitas, kita dapat menghapus banyak JavaScript, meningkatkan performa, dan berfokus pada apa yang kita lakukan dengan baik: menciptakan pengalaman pengguna yang inovatif dan menarik. Ini benar-benar era keemasan untuk UI web, dan ini baru permulaan. Ikuti terus di sini saat kami berupaya membangun web yang lebih canggih, dan tentunya lebih mudah.

Referensi lainnya:

• Popover API
• Pemosisian Anchor
• Alat penanda
• Pemanggil Perintah
• Menu Pemilihan yang Dapat Disesuaikan (RFC)
• Carousel CSS
• Galeri Carousel CSS
• Konfigurasi Carousel CSS
• Kueri scroll-state CSS
• Penjelasan Pemanggil Minat