Dipublikasikan: 13 Februari 2025
Setelah sukses besar Interop 2024, project ini kembali hari ini dengan serangkaian area fokus baru untuk tahun 2025. Meskipun kami tidak dapat menyertakan setiap saran yang dibuat tahun ini, daftar akhir mencakup seluruh platform web—dari CSS hingga fitur terkait performa.
Area fokus untuk tahun 2025
- Penempatan anchor
backdrop-filter
- Data Web Inti
- Elemen
<details>
- Tata Letak
- Modul
- Navigation API
- Peristiwa pointer dan mouse
- Menghapus peristiwa mutasi
@scope
scrollend
peristiwa- Storage Access API
text-decoration
URLPattern
- View Transition API
- WebAssembly
- Kompatibilitas web
- WebRTC
- Mode penulisan
Selain itu, dan seperti tahun-tahun sebelumnya, ada serangkaian area untuk investigasi. Ini adalah area tempat kami tidak memiliki cukup informasi atau pengujian untuk disertakan sebagai area fokus, tetapi grup merasa beberapa pekerjaan harus dilakukan untuk membawanya ke tahap tempat kami dapat menyertakannya.
- Pengujian aksesibilitas
- Pengujian Gamepad API
- Pengujian seluler
- Pengujian privasi
- WebVTT
Kami senang dengan semua fitur ini dan peningkatan yang akan diberikan project tahun ini ke platform. Dan, seperti pada tahun lalu, project ini akan membuat serangkaian Baseline Baru tersedia. Postingan ini membagikan informasi selengkapnya tentang beberapa fitur dalam daftar, dengan link ke informasi untuk mengetahui lebih lanjut.
Anda dapat mengikutinya di dasbor Interop 2025 di wpt.fyi/interop-2025 dan saat menjadi Baseline Baru tersedia, hal tersebut juga akan muncul di Daftar Baseline 2025 di webstatus.dev.

CSS dan UI
Beberapa fitur yang disertakan dalam Interop 2025 adalah fitur yang Anda tandai sebagai penting dalam survei Status CSS 2024. Hal ini akan membantu Anda membuat pengalaman pengguna yang lebih baik dan berperforma tinggi.
Penempatan anchor
Fitur ini memungkinkan Anda mengaitkan elemen yang diposisikan ke anchor, yang sangat berguna saat menampilkan popover.
Dengan menjadikan fitur ini sebagai bagian dari Dasar Pengukuran, pembuatan antarmuka pengguna akan jauh lebih mudah, tanpa harus mengandalkan library pihak ketiga. Pelajari lebih lanjut di dokumentasi pemosisi anchor, dan juga di MDN—Pemosisi Anchor CSS.
Transisi tampilan dokumen yang sama
Yang juga disertakan tahun ini adalah transisi tampilan, khususnya transisi tampilan dokumen
yang sama, dan properti CSS view-transition-class
.
Pelajari lebih lanjut transisi tampilan di Transisi tampilan dokumen yang sama untuk aplikasi satu halaman dan di dokumentasi MDN untuk transisi tampilan.
Properti backdrop-filter
Properti
backdrop-filter
telah menjadi Dasar Pengukuran Baru yang tersedia sejak September 2024. Dengan begitu, Anda
dapat membuat efek di belakang konten. Misalnya, untuk memburamkan atau membuat efek yang
mungkin Anda harapkan hanya tersedia di aplikasi grafis.
Meskipun sebagian besar bersifat interoperabilitas, Anda dapat melihat dari pengujian yang gagal untuk
backdrop-filter
bahwa
ada bug dan masalah dalam implementasi tersebut. Meskipun masalah ini mungkin tidak
menjadi masalah bagi semua orang, kami tahu bahwa banyak dari Anda mengalaminya. Akan lebih baik jika
fitur ini berfungsi dengan sangat baik.
Elemen <details>
Elemen <details>
adalah widget pengungkapan yang dapat diluaskan untuk menampilkan
konten tambahan. Elemen <details>
itu sendiri adalah Dasar Pengukuran yang Tersedia secara luas.
Namun, ada sejumlah fitur terkait yang baru saja
ditambahkan yang membuat <details>
lebih
berguna.
- Elemen pseudo CSS
::marker
dan::details-content
. - Menggunakan
content-visibility
untuk mengalihkan konten, bukandisplay
. - Memperluas elemen
<details>
secara otomatis dengan pencocokan temukan di halaman. - Atribut
hidden="until-found"
, yang menyembunyikan elemen hingga ditemukan menggunakan penelusuran temukan di halaman browser atau diarahkan langsung dengan mengikuti fragmen URL.
Aturan at-@scope
CSS
Aturan at @scope
memungkinkan Anda menentukan cakupan pemilih ke sub-hierarki DOM, atau
bahkan memilih antara batas atas dan bawah dalam hierarki. Misalnya, CSS berikut hanya memilih elemen <img>
di dalam elemen dengan class
.card
.
@scope (.card) {
img {
border-color: green;
}
}
Dalam contoh berikutnya, batas atas dan bawah digunakan. Elemen <img>
hanya dipilih jika berada di antara elemen dengan class .card
dan juga
di luar elemen dengan class .card__content
.
@scope (.card) to (.card__content) {
img {
border-color: green;
}
}
Temukan contoh lain tentang cara menggunakan @scope
di Membatasi jangkauan pemilih dengan aturan at @scope
CSS dan di dokumentasi @scope
di MDN.
Peristiwa scrollend
Tanpa peristiwa scrollend
, tidak ada cara yang andal untuk mendeteksi bahwa scroll telah
selesai. Yang terbaik yang dapat Anda lakukan adalah menggunakan setTimeout()
untuk memeriksa apakah scroll
telah berhenti selama jangka waktu tertentu. Hal ini membuatnya lebih mirip dengan peristiwa scroll telah dijeda, bukan peristiwa scroll telah berakhir.
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
Dengan peristiwa scrollend
, browser akan melakukan semua evaluasi yang sulit ini untuk
Anda.
document.onscrollend = event => {
// ...
}
Lihat contoh lainnya di Scrollend, peristiwa JavaScript
baru dan
juga di dokumentasi MDN untuk
scrollend
.
Properti text-decoration
Properti
text-decoration
adalah singkatan untuk text-decoration-line
, text-decoration-color
,
text-decoration-style
, dan text-decoration-thickness
. Ini dianggap sebagai Dasar Pengukuran
yang Tersedia secara luas, tetapi di Safari, satu-satunya properti singkatan tanpa awalan yang
berfungsi adalah text-decoration-line
. Hal inilah yang akan diatasi selama tahun 2025.
Mode penulisan
Properti writing-mode
CSS
memiliki sejumlah kemungkinan nilai, yang sebagian besar dirancang untuk menata letak
skrip yang ditampilkan secara vertikal. Namun, terkadang Anda ingin menata letak teks
secara vertikal sebagai bagian dari desain, bukan karena alasan dukungan bahasa. Nilai
sideways-lr
dan sideways-rl
dirancang untuk hal ini, tetapi memiliki
kompatibilitas browser yang buruk. Masalah ini akan diperbaiki selama tahun 2025.
Selain itu, properti CSS logis overflow-inline
dan overflow-block
disertakan. Hal ini memungkinkan Anda mengontrol apa yang terjadi saat konten
melebihi batas kotak, terlepas dari mode penulisan.
Data Web Inti
Data Web dapat membantu Anda mengukur pengalaman penggunaan situs dan mengidentifikasi peluang untuk peningkatan. Inisiatif Web Vitals bertujuan untuk menyederhanakan lanskap, dan membantu situs berfokus pada metrik yang paling penting, yaitu Data Web Inti.
Interop 2025 mencakup metrik Largest Contentful Paint (LCP) dan Interaction to Next Paint (INP) dengan menerapkan LargestContentfulPaint API dan Event Timing API di seluruh browser. Metrik Pergeseran Tata Letak Kumulatif (CLS) tidak berada dalam cakupan.
LCP API
Event Timing API (untuk INP)
WebAssembly (Wasm)
WebAssembly API memungkinkan Anda memuat kode WebAssembly, yaitu format petunjuk biner portabel. Dengan demikian, Anda dapat melakukan hal-hal seperti menjalankan seluruh aplikasi blog, termasuk semua persyaratan server, di browser.
Tahun ini, pekerjaan akan berfokus pada fitur berikut:
- Built-in string JavaScript: untuk membuat fungsi string bawaan WebAssembly mencerminkan subset JavaScript String API sehingga dapat dipanggil tanpa kode lem JavaScript.
- Integrasi buffering yang dapat diubah ukurannya: untuk mengintegrasikan WebAssembly ke dalam kode JavaScript yang menggunakan buffering yang dapat diubah ukurannya.
Penghapusan fitur
Tahun ini, project ini mencakup penghapusan dari platform. Peristiwa perubahan tidak digunakan lagi dan diganti dengan Mutation Observer API yang jauh lebih berperforma dan tersedia secara luas di Dasar Pengukuran. Chrome menghapus peristiwa ini di Chrome 126, dan area fokus ini adalah untuk menghapusnya dari semua browser.
Untuk memahami histori, dan alasan peristiwa ini dihapus, baca Peristiwa mutasi akan dihapus dari Chrome.
Pelajari lebih lanjut
Deskripsi daftar lengkap fitur dapat ditemukan di README project. Selain itu, baca postingan dari perusahaan lain yang mengerjakan Interop 2025.