Interop 2025: tahun lain untuk peningkatan platform web

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.

Skor di awal project—Interop:33, Investigasi:0, Chrome Canary:91, Edge Dev:88, Firefox Nightly:52, Safari Technology Preview:55.
Dasbor Interop 2025 (per 13 Februari 2025).

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

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

Fitur ini memungkinkan Anda mengaitkan elemen yang diposisikan ke anchor, yang sangat berguna saat menampilkan popover.

Anchor dengan elemen yang diposisikan.

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

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

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

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, bukan display.
  • 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

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

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

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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.

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

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.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

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

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API (untuk INP)

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: not supported.
  • Safari: not supported.

Source

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.