Fitur Baru Platform Web pada Juni 2026

Selama Juni 2026, Chrome 149, Chrome 150, dan Firefox 152 dirilis ke versi stabil, sementara tidak ada rilis stabil Safari pada bulan tersebut. Berbagai fitur menarik mendarat di peramban stabil dan beta selama periode tersebut.

Dukungan CSS field-sizing pada Firefox 152

Firefox 152 memperkenalkan dukungan untuk properti CSS field-sizing, sehingga pengubahan ukuran kontrol formulir otomatis menjadi Baseline Newly available di semua mesin peramban utama. Properti field-sizing memungkinkan kontrol formulir seperti textarea, input, dan select menyusut atau membesar secara dinamis agar sesuai dengan isinya melalui field-sizing: content, bukan tetap pada ukuran bawaan melalui field-sizing: fixed. Kemampuan tersebut menghilangkan kebutuhan solusi JavaScript saat membangun input teks atau textarea yang mengubah ukuran ketika pengguna mengetik.

textarea {
  field-sizing: content;
}

Fungsi Bentuk rect() dan xywh() pada Chrome 149

Dengan dukungan Chrome 149 untuk fungsi shape rect() dan xywh() pada properti shape-outside, bentuk dasar tersebut kini menjadi Baseline Newly available di peramban utama. Fungsi rect() dan xywh() memungkinkan pendefinisian area pengecualian float persegi menggunakan koordinat inset tepat atau sintaksis asal-dan-dimensi. Sintaksis tersebut menawarkan penulisan lebih sederhana dan mudah dibaca dibandingkan polygon() untuk bentuk pembungkus float persegi.

Chrome 150 memperkenalkan properti CSS text-fit. Properti tersebut memungkinkan penskalaan ukuran font secara otomatis agar sesuai dengan lebar kotak penampung.

.headline {
  text-fit: grow;
}

Dukungan Gap Decorations pada Flexbox dan Grid

Chrome 149 memperkenalkan dukungan untuk gap decorations CSS pada tata letak grid dan flexbox. Fitur gap decorations memungkinkan penambahan garis dan gaya langsung pada jarak antara item grid dan flex, serupa dengan column-rule pada tata letak multi-column. Penerbit sumber merujuk ke artikel Gap decorations: Now in Chromium untuk informasi lebih lanjut.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Pembaruan CSS Backgrounds dan Metode Scroll

Chrome 150 menambahkan dukungan untuk background-clip: border-area dari CSS Backgrounds Level 4. Nilai tersebut memotong latar elemen secara khusus ke area border, sehingga memungkinkan pembuatan gradient border kustom, tepi bingkai dekoratif, dan efek border animasi tanpa memerlukan elemen pembungkus tambahan atau pseudo-element. Chrome 150 juga memperbarui metode scroll programatik scrollTo(), scrollBy(), dan scrollIntoView() agar mengembalikan Promise. Promise yang dikembalikan terpenuhi ketika animasi smooth scrolling selesai, sehingga memberi sinyal andal untuk memicu tindakan lanjutan setelah scrolling stabil.

Chrome 150 memperkenalkan dukungan untuk atribut focusgroup. Atribut focusgroup memungkinkan pengelolaan navigasi tombol panah secara deklaratif pada kontrol UI gabungan seperti toolbar, tablist, dan menu tanpa menulis listener event keyboard secara manual. Penerbit sumber merujuk ke Focusgroup Explainer untuk penjelasan lebih lanjut.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Pada Chrome 149, halaman dengan koneksi WebSocket aktif kini dapat masuk ke Back/Forward Cache (bfcache). Sebelumnya, koneksi WebSocket terbuka membuat halaman tidak memenuhi syarat untuk bfcache. Kini peramban menutup koneksi WebSocket aktif secara otomatis saat masuk bfcache, sehingga halaman dapat di-cache dan dipulihkan seketika ketika dinavigasikan kembali.

Metrik Kinerja dan Aksi Notifikasi Firefox 152

Firefox 152 menambahkan dukungan untuk firstInterimResponseStart dan finalResponseHeadersStart pada antarmuka PerformanceResourceTiming. Kedua metrik tersebut masing-masing dapat digunakan untuk mengukur waktu yang dibutuhkan peramban untuk menerima respons interim HTTP dan respons final HTTP setelah permintaan dikirim. Firefox 152 juga menambahkan dukungan untuk tombol aksi notifikasi menggunakan properti actions pada Notification serta opsi di ServiceWorkerRegistration.showNotification(). Dukungan tersebut memungkinkan penyertaan tombol aksi pada notifikasi OS dan pemantauan interaksi pengguna ketika tombol diketuk.

Fitur Baru pada Peramban Versi Beta

Versi beta peramban memberi pratinjau fitur pada versi stabil berikutnya, dan menurut penerbit sumber periode tersebut merupakan waktu tepat untuk menguji fitur baru atau penghapusan yang dapat memengaruhi situs sebelum rilis tersebut tersedia luas. Beta baru pada bulan ini adalah Firefox 153 dan Safari 27. Firefox 153 beta memperkenalkan dukungan untuk Error.stackTraceLimit guna mengonfigurasi kedalaman stack trace tertangkap maksimum, IDBObjectStore.getAllRecords() dan IDBIndex.getAllRecords() untuk mengambil rekaman terindeks, serta RTCDtlsTransport.getRemoteCertificates() untuk inspeksi keamanan WebRTC. Pengembang add-on juga mendapatkan API publicSuffix baru dan metode userScripts.execute() untuk injeksi skrip sesuai permintaan. Safari 27 beta memperkenalkan anchor positioning yang sadar transform, pseudo-class :heading untuk mencocokkan elemen heading, kata kunci revert-rule untuk mengembalikan cascade layer, dukungan kata kunci stretch dalam box sizing, dan penyeleksi gabungan :host:has().

Terjemahan dan adaptasi dibantu AI oleh Zennovan News. Karya asli: New to the web platform in June, Rachel Andrew. Digunakan menurut CC BY 4.0.

Contoh kode asli: Apache 2.0; dipertahankan tanpa perubahan.