Yang baru di web

Rachel Andrew

Dipublikasikan: 20 Mei 2025

Di Google I/O 2025, keynote What's new in web membagikan semua pengumuman Baseline, beserta sekilas info tentang beberapa fitur yang telah menjadi bagian dari Baseline tahun ini. Tahun ini adalah tahun yang luar biasa bagi web, dan bagi Baseline, postingan ini adalah ringkasan semua hal yang disebutkan, dengan semua link untuk mengetahui lebih lanjut.

Dasbor Platform Web dan fitur web

Pada tahun 2024, kami mengumumkan peluncuran awal Dasbor Platform Web, yang menggunakan set data fitur web, sehingga Anda dapat menjelajahi semua fitur yang merupakan bagian dari Baseline.

Data fitur web kini telah selesai, dengan semua fitur platform dipetakan. Saat fitur baru bergabung dengan Baseline setiap bulan, data akan diperbarui, dan semuanya ditampilkan di dasbor.

Alat untuk membantu Anda menemukan target Dasar Anda sendiri

Meskipun Anda dapat mendasarkan kebijakan dukungan browser pada target bergerak yang Tersedia Luas—seperti agensi Inggris Clearleft—Anda juga dapat menerapkan target tetap berdasarkan tahun Dasar. Sekarang Anda dapat menggunakan data pengguna Anda sendiri, bersama dengan data fitur web untuk menentukan target terbaik untuk Anda.

Tahun lalu di I/O, kami mengumumkan bahwa RUMvision akan menerapkan Baseline ke dalam produknya, dan integrasi ini kini sudah aktif.

Karena menggunakan data RUM Anda, fitur ini membantu Anda mengidentifikasi Tahun dasar mana yang akan digunakan berdasarkan data tersebut, bukan rata-rata global. Fitur ini juga dapat membantu Anda melihat apakah Baseline Tersedia luas cocok untuk Anda.

Anda juga dapat menggunakan data Google Analytics untuk melihat dengan jelas persentase pengguna yang mendukung setiap target Dasar dengan Pemeriksa Dasar Google Analytics yang baru.

Ini hanyalah dua dari sekumpulan alat yang terus bertambah yang membantu Anda memetakan data pengguna sebenarnya ke Baseline.

Web DX Community Group baru-baru ini meluncurkan ekstensi untuk Netlify yang menunjukkan dukungan untuk berbagai tahun Dasar dan Tersedia luas di situs Anda untuk membantu Anda memutuskan target yang akan dituju di alat build Anda. Integrasi dengan produk RUM Observatory Cloudflare dan Contentsquare akan segera hadir.

Mengintegrasikan data dengan alat Anda sendiri

Data fitur web bersifat terbuka dan tersedia untuk integrasi Anda sendiri. Kami berupaya mempermudah proses tersebut.

Gunakan Web Platform Dashboard API, atau gunakan data fitur web secara langsung dari paket npm.

Anda kini dapat memetakan versi browser ke target Dasar menggunakan modul baseline-browser-mapping dari W3C WebDX Community Group. Modul ini dapat digunakan di lingkungan JavaScript sisi server, atau dengan mendownload file JSON atau CSV yang diperbarui setiap hari dari repositori.

Data ini mencakup pemetaan tidak hanya untuk set browser Baseline inti, tetapi juga untuk browser hilir seperti Samsung Internet, Opera, UC Browser, dan Android Webview.

Mempelajari apakah fitur didukung oleh target Dasar Anda

Informasi dasar kini ada di sebagian besar halaman MDN dan Can I Use, dan juga dapat ditemukan di Dasbor Platform Web, serta di artikel di web.dev dan CSS Tricks. Namun, semua ini mengharuskan Anda mencari dukungan. Akan jauh lebih bermanfaat jika informasi Baseline ditampilkan di IDE saat Anda membuat kode, dan sebagai bagian dari semua alat lain yang Anda gunakan.

Dengan senang hati kami sampaikan bahwa banyak alat utama kini memiliki dukungan Baseline bawaan, atau dapat diintegrasikan dengan mudah.

browserslist-config-baseline

Banyak alat seperti Babel dan PostCSS menggunakan browserslist untuk menentukan browser mana yang akan didukung.

Bersama dengan CG WebDX dan anggota komunitas, tim Chrome membantu merilis alat baru yang disebut browserslist-config-baseline. Dengan begitu, Anda dapat mengonfigurasi target browserslist dalam istilah Dasar seperti tersedia luas atau tahun Dasar.

Dengan demikian, setiap alat yang menggunakan target browserslist kini dapat dinyatakan dalam istilah Baseline.

Cari tahu selengkapnya di Menggunakan Baseline dengan browserlist.

Dasar pengukuran di linter—ESLint dan Stylelint

Penggunaan Baseline dengan linter baru-baru ini dimungkinkan dengan beberapa alat baru di ruang linter, dimulai dengan ESLint untuk CSS.

ESLint dasar memiliki aturan use-baseline. Anda dapat menyetel ini ke target Dasar yang diinginkan, dan Anda akan diperingatkan saat menggunakan fitur yang lebih baru dari target Anda. Anda dapat memilih cara menyelesaikan peringatan tersebut: baik dengan mengganti fitur tersebut dengan primitif atau dengan menekan peringatan linter, yang merupakan solusi yang sepenuhnya valid jika Anda tahu bahwa Anda menggunakan fitur canggih dengan aman, misalnya jika itu adalah peningkatan progresif.

Secara default, ESLint tidak akan memperingatkan jika fitur yang lebih baru digunakan dalam blok @supports, karena browser yang tidak didukung tidak akan mengevaluasinya.

Untuk kebutuhan linting HTML, ada juga plugin komunitas yang disebut html-eslint.

Stylelint secara resmi mendukung plugin yang disebut stylelint-plugin-use-baseline. Aturan ini berperilaku seperti aturan ESLint untuk CSS, tetapi berjalan di Stylelint.

Banyak linter juga memiliki plugin IDE, sehingga Anda bisa mendapatkan masukan langsung tentang status Dasar saat melakukan coding dengan garis bawah bergelombang.

Baseline di VS Code dan JetBrains WebStorm

Banyak IDE telah lama mendukung cara mengarahkan kursor ke fitur di editor dan melihat daftar versi browser yang didukung.

Namun, cukup sulit untuk memahami apakah fitur tersebut benar-benar aman untuk digunakan—Anda perlu memproses secara mental apakah ada browser utama yang tidak ada dalam daftar tersebut dan seberapa baru versi browser tersebut.

Untuk memperbaiki masalah tersebut, kami telah berpartner dengan IDE paling populer yang digunakan oleh jutaan developer web, VS Code, untuk mengintegrasikan data Baseline langsung ke kartu infografis ini.

Sekarang Anda dapat mengarahkan kursor ke suatu fitur dan fitur tersebut akan memberi tahu Anda apakah fitur tersebut dianggap sebagai Dasar dan selama berapa lama, atau apakah ada browser utama yang belum mengimplementasikannya sepenuhnya.

Fitur yang didukung mencakup properti CSS, elemen HTML, dan atribut HTML. Cari tahu selengkapnya di Visual Studio Code kini mendukung Baseline.

Integrasi ini berarti bahwa IDE apa pun yang berbasis VS Code juga akan mendapatkan manfaat dari kartu infografis ini.

Selain itu, kami juga dapat mengumumkan bahwa JetBrains menerapkan kartu info ke dalam IDE JavaScript dan TypeScript WebStorm mereka.

Web berkembang lebih cepat dari sebelumnya

Kami harap Baseline membantu Anda memanfaatkan fakta bahwa web yang dapat beroperasi secara bersama-sama berkembang lebih cepat dari sebelumnya.

Anda dapat menggunakan Dasbor Platform Web untuk melihat semua fitur yang telah menjadi Tersedia Baru di Baseline dalam dua belas bulan terakhir—sejak Google I/O 2024.

Ada juga sejumlah fitur yang dapat Anda yakini akan segera tersedia sebagai fitur Baru yang Kompatibel karena disertakan dalam project Interop 2025. Anda dapat membaca semua fitur yang disertakan di Interop2025: tahun peningkatan platform web lainnya.

Mode penulisan menyamping

Kita telah melihat satu fitur menjadi Tersedia di Baseline, yaitu nilai sideways-rl dan sideways-lr untuk properti CSS writing-mode. Jika Anda menggunakan mode penulisan vertikal hanya untuk tujuan tata letak, nilai samping kemungkinan adalah nilai yang harus digunakan.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Penempatan anchor

Pemosisian anchor diluncurkan di Chrome 125. Cara ini memberi Anda cara untuk mengikat posisi elemen ke anchor, misalnya saat membuka tooltip dengan tombol.

Sekarang sudah disertakan dalam Interop 2025, jadi kita akan melihatnya bergabung dengan Baseline tahun ini.

Core Web Vitals: LCP dan INP

LCP API

Event Timing API (untuk INP)

Data Web dapat membantu Anda mengukur pengalaman penggunaan situs Anda dan mengidentifikasi peluang untuk peningkatan. Inisiatif Web Vitals bertujuan untuk menyederhanakan lanskap dan membantu situs berfokus pada metrik yang paling penting, yaitu Core Web Vitals.

Interop 2025 mencakup metrik Largest Contentful Paint (LCP) dan Interaction to Next Paint (INP) dengan menerapkan API LargestContentfulPaint dan Event Timing API di seluruh browser.

Peningkatan pada elemen <details>

Elemen <details> itu sendiri sudah tersedia secara luas di Baseline. Fitur ini telah disertakan dalam Interop 2025 karena ada sejumlah fitur yang membuat widget pengungkapan dengan <details> lebih berguna.

Elemen <details> berisi elemen <summary> yang merupakan bagian yang terlihat di halaman saat elemen <details> diciutkan. Di luar <summary> adalah konten elemen <details>, yang disembunyikan hingga pengguna mengklik ringkasan.

Salah satu hal yang dibuat dapat beroperasi selama Interop 2025 adalah menyembunyikan konten menggunakan content-visibility, bukan display, yang berarti jika tidak diperluas, konten tidak akan dirender sama sekali.

Bagian dari upaya Interop 2025 juga mencakup elemen semu ::marker. Elemen semu ::marker memungkinkan Anda menata gaya segitiga pengungkapan elemen <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Kemudian, elemen semu lainnya—::details-content.

::details-content merepresentasikan konten—bagian elemen detail yang diperluas dan diciutkan, serta memungkinkan Anda mengubah gayanya.

[open]::details-content {
  border: 5px dashed hotpink;
}

Ada juga beberapa peningkatan menarik seperti memperluas elemen <details> secara otomatis dengan kecocokan temukan di halaman, dan menghadirkan nilai until-found dari atribut HTML hidden ke Baseline yang Baru Tersedia. Tindakan ini menyembunyikan elemen hingga ditemukan menggunakan penelusuran temukan di halaman browser atau diakses langsung dengan mengikuti fragmen URL.

CSS @scope

Aturan CSS @scope memungkinkan Anda membatasi jangkauan pemilih. Dengan menetapkan root cakupan dengan @scope, semua aturan gaya yang disarangkan di dalam aturan @hanya berlaku untuk hierarki DOM tersebut.

Misalnya, jika Anda hanya ingin menargetkan elemen <img> di dalam elemen dengan class .card, maka .card akan menjadi root cakupan.

@scope (.card) {
    img {
        border-color: green;
    }
}

Pelajari lebih lanjut di Membatasi jangkauan pemilih dengan aturan @scope CSS.

scrollend

Fitur lain yang mengurangi kompleksitas dan meningkatkan kualitas antarmuka scrolling adalah scrollend. Tanpa peristiwa scrollend, tidak ada cara yang andal untuk mendeteksi bahwa scroll telah selesai.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Dengan peristiwa scrollend, browser melakukan semua evaluasi sulit ini untuk Anda.

document.onscrollend = event => {…}

Lihat contoh lainnya di Scrollend, peristiwa JavaScript baru.

Transisi tampilan dokumen yang sama

Terakhir, tetapi yang tak kalah penting, transisi tampilan adalah bagian dari Interop 2025. Pekerjaan ini melibatkan transisi tampilan dalam dokumen yang sama, sehingga transisi tampilan untuk aplikasi halaman tunggal dan juga class transisi tampilan.

Ikuti perkembangan dasbor Interop 2025 untuk melihat perkembangan proyek ini seiring berjalannya tahun.

Fitur yang disertakan dalam Interop 2025 tidak akan menjadi satu-satunya hal yang menjadi bagian dari Baseline tahun ini, tetapi penyertaannya dalam project memberi kita tanda yang cukup baik bahwa fitur tersebut diprioritaskan dan akan segera hadir.

Kami baru saja mulai

Tahun ini adalah tahun yang menarik bagi Baseline, dan kami telah berkembang jauh dari pengumuman kami tahun lalu. Sekarang kita berada dalam posisi di mana pengisian ulang data fitur web telah selesai. Hal ini telah membuka jalan dan memungkinkan pembuatan alat developer. Kami baru saja memulai di sini, dan jika Anda memiliki produk atau alat open source yang akan diuntungkan dengan menyertakan data ini, kami ingin mendengar dari Anda.

Pantau web.dev karena kami akan terus memublikasikan pengumuman tentang alat baru beserta tutorial untuk membantu Anda memanfaatkan semua yang ditawarkan web.