Baru menggunakan platform web pada bulan Mei

Temukan beberapa fitur menarik yang telah hadir di browser web stabil dan beta selama Mei 2026.

Rachel Andrew

Dipublikasikan: 29 Mei 2026

Rilis browser stabil

Chrome 148, Firefox 151, dan Safari 26.5 dirilis ke versi stabil selama bulan Mei. Postingan ini membahas berbagai fitur baru bulan ini.

Catatan: Data kompatibilitas browser yang diambil dari MDN disertakan dalam postingan ini dan mungkin belum diupdate untuk rilis browser terbaru. Postingan akan menampilkan informasi yang benar segera setelah muncul di rilisan data kompatibilitas browser.

Pseudo-class CSS :open menjadi Dasar Pengukuran

Safari 26.5 sebagian besar merupakan rilis perbaikan pada fitur yang ada. Namun, fitur ini juga mencakup dukungan untuk :open pseudo-class, sehingga fitur ini tersedia di Baseline Baru.

Dengan class semu :open, Anda dapat menata gaya elemen yang memiliki status "buka" dan "tutup" saat elemen tersebut terbuka. Hal ini berlaku untuk elemen seperti <details> dan <dialog> saat terbuka, serta elemen <select> dan <input> (seperti pemilih warna atau tanggal) saat antarmuka pemilihnya ditampilkan. Hal ini memberikan alternatif semantik yang lebih bersih untuk gaya menggunakan atribut seperti details[open].

Browser Support

• 133
• 133
• 136
• 26.5

Source

Kueri penampung hanya nama CSS menjadi Dasar

Dengan diluncurkannya Chrome 148 bulan ini, kueri penampung khusus nama kini tersedia sebagai Dasar Baru.

Sebelumnya, saat menulis kueri penampung, Anda harus menentukan kondisi kueri ukuran atau gaya bersama dengan nama penampung, dan menetapkan jenis penampung dengan properti container-type. Sekarang, Anda dapat membuat kueri keberadaan penampung bernama hanya berdasarkan namanya, tanpa kondisi tambahan. Selain itu, Anda tidak perlu lagi menetapkan container-type pada ancestor jika hanya membuat kueri berdasarkan nama:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

• 148
• 148
• 149
• 26.4

Kueri gaya penampung untuk properti kustom menjadi Dasar

Firefox 151 memperkenalkan dukungan untuk kueri style() di @container, sehingga kueri gaya penampung untuk properti kustom tersedia sebagai Dasar Baru.

Kueri gaya penampung memungkinkan Anda menerapkan gaya ke elemen berdasarkan properti CSS penampung induk. Meskipun kueri ukuran sangat canggih, kueri gaya memungkinkan Anda membuat kueri fitur non-ukuran. Khususnya, rilis ini menghadirkan dukungan lintas browser penuh untuk membuat kueri properti kustom. Misalnya, Anda dapat memeriksa apakah properti kustom --theme ditetapkan ke dark di penampung induk:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

• 111
• 111
• 151
• 18

Pemuatan lambat untuk elemen video dan audio

Chrome 148 memperkenalkan pemuatan lambat asli untuk elemen <video> dan <audio> dengan atribut loading="lazy".

Sama seperti elemen <img> dan <iframe>, Anda kini dapat menginstruksikan browser untuk menunda pemuatan resource media hingga resource tersebut berada dekat dengan area tampilan. Hal ini membantu meningkatkan performa pemuatan halaman, menghemat bandwidth, dan mengurangi penggunaan data bagi pengguna Anda. Pelajari lebih lanjut dari tim yang menerapkan fitur ini di Cara Menggunakan Pemuatan Lambat Video dan Audio HTML Standar di Web Sekarang.

Browser Support

• 148
• 148
• x
• x

Source

Document Picture-in-Picture API

Firefox 151 memperkenalkan dukungan untuk Document Picture-in-Picture API di platform desktop.

Tidak seperti Picture-in-Picture API standar yang memungkinkan Anda melihat elemen <video> di jendela selalu di atas, Document Picture-in-Picture API memungkinkan Anda membuka jendela selalu di atas yang berisi konten HTML arbitrer. Hal ini memungkinkan overlay interaktif yang kaya seperti petak peserta konferensi video, ticker saham interaktif, atau timer yang tetap ada meskipun Anda keluar dari halaman.

Browser Support

• 116
• 116
• 151
• x

Source

Web Serial API memperluas dukungan platform

Firefox 151 menambahkan dukungan untuk Web Serial API di platform desktop, dan Chrome 148 menambahkan dukungan untuknya di Android.

Web Serial API menyediakan cara bagi situs untuk membaca dan menulis ke perangkat serial, misalnya, mikrokontroler, printer 3D, papan pengembangan, dan hardware periferal. Di Firefox, penggunaan Web Serial API mengharuskan pengguna menginstal add-on izin situs yang dibuat secara sintetis, sehingga memastikan mekanisme yang aman dan terkontrol untuk mengelola akses.

Browser Support

• 89
• 89
• 151
• x

Source

Rilis browser Beta

Versi browser Beta memberi Anda pratinjau fitur di versi stabil browser berikutnya. Ini adalah waktu yang tepat untuk menguji fitur baru, atau penghapusan, yang dapat memengaruhi situs Anda sebelum rilis tersebut tersedia untuk publik. Versi beta baru bulan ini adalah Chrome 149 dan Firefox 152. Tidak ada versi beta Safari bulan ini.

Beta Chrome 149 menyertakan update CSS menarik seperti dekorasi celah CSS, yang memungkinkan Anda menata ruang kosong (celah) di antara item flex dan petak. API ini juga mendukung path() dan shape() serta fungsi bentuk dasar rect() dan xywh() di properti shape-outside, dan path-length sebagai properti CSS. Di sisi API, metode scroll terprogram seperti scrollTo(), scrollBy(), dan scrollIntoView() kini menampilkan Promise yang diselesaikan saat scroll halus selesai, dan halaman dengan koneksi WebSocket aktif kini dapat memenuhi syarat untuk caching kembali/maju (BFCache).

Beta Firefox 152 memperkenalkan dukungan penuh untuk properti field-sizing, yang memungkinkan kontrol formulir menyesuaikan ukurannya secara otomatis agar sesuai dengan kontennya. API ini juga menambahkan properti actions dan maxActions ke antarmuka Notification, serta dukungan options.pseudoElement di Element.getAnimations().