Baru menggunakan platform web pada bulan Juni

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

Rachel Andrew

Dipublikasikan: 30 Juni 2026

Rilis browser stabil

Chrome 149, Chrome 150, dan Firefox 152 dirilis ke versi stabil selama bulan Juni. Tidak ada rilis stabil Safari bulan ini. Postingan ini membahas fitur baru yang tersedia di browser web.

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 browser-compat-data.

Mengatur ukuran kontrol formulir dengan field-sizing menjadi Dasar

Firefox 152 memperkenalkan dukungan untuk properti CSS field-sizing, sehingga membuat ukuran kontrol formulir otomatis tersedia di semua mesin browser utama.

Properti field-sizing memungkinkan kontrol formulir seperti <textarea>, <input>, dan <select> menyusut atau bertambah secara dinamis agar sesuai dengan kontennya (field-sizing: content), bukan tetap berukuran default (field-sizing: fixed). Dengan demikian, tidak perlu lagi solusi sementara JavaScript saat membuat input teks atau textarea yang ukurannya berubah saat pengguna mengetik.

textarea {
  field-sizing: content;
}

Browser Support

• 123
• 123
• 152
• 26.2

Source

Bentuk dasar rect() dan xywh() di shape-outside menjadi Dasar Pengukuran

Dengan Chrome 149 yang mendukung fungsi bentuk rect() dan xywh() di properti shape-outside, bentuk dasar ini kini tersedia di Baseline Baru tersedia di seluruh browser utama.

Fungsi rect() dan xywh() memungkinkan Anda menentukan area pengecualian float persegi panjang menggunakan koordinat inset yang tepat atau sintaksis asal dan dimensi. Hal ini menawarkan sintaksis yang lebih sederhana dan mudah dibaca daripada menggunakan polygon() untuk membungkus bentuk float persegi panjang.

Browser Support

• 149
• 149
• 149
• 17.2

Source

Penskalaan font otomatis dengan CSS text-fit

Chrome 150 memperkenalkan properti CSS text-fit, yang memungkinkan developer menskalakan ukuran font secara otomatis agar sesuai dengan lebar kotak yang berisi.

.headline {
  text-fit: grow;
}

Dekorasi celah CSS

Chrome 149 memperkenalkan dukungan untuk dekorasi ruang CSS dalam tata letak petak dan flexbox. Dekorasi celah memungkinkan Anda menambahkan garis dan gaya langsung ke jarak antar-item petak dan item fleksibel, mirip dengan column-rule dalam tata letak multi-kolom.

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

Pelajari lebih lanjut di Dekorasi celah: Kini tersedia di Chromium.

Browser Support

• 149
• 149
• x
• x

CSS background-clip: border-area

Chrome 150 menambahkan dukungan untuk background-clip: border-area dari CSS Backgrounds Level 4.

Nilai ini memangkas latar belakang elemen secara khusus ke area batas, sehingga Anda dapat membuat batas gradien kustom, tepi bingkai dekoratif, dan efek batas animasi tanpa memerlukan elemen pembungkus tambahan atau elemen semu.

Browser Support

• x
• x
• x
• 18.2

Janji scroll terprogram

Chrome 150 mengupdate metode scroll terprogram (scrollTo(), scrollBy(), dan scrollIntoView()) untuk menampilkan Promise.

Promise yang ditampilkan akan diselesaikan saat animasi scroll lancar selesai, memberikan sinyal yang andal untuk memicu tindakan lanjutan setelah scroll berhenti.

Navigasi keyboard deklaratif dengan focusgroup

Chrome 150 memperkenalkan dukungan untuk atribut focusgroup.

Atribut focusgroup memungkinkan developer mengelola navigasi tombol panah secara deklaratif di seluruh kontrol UI komposit (seperti toolbar, tablist, dan menu) tanpa menulis pemroses peristiwa keyboard secara manual.

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

Pelajari lebih lanjut dari Penjelasan Focusgroup.

WebSocket yang didukung di Back/Forward Cache (bfcache)

Di 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. Sekarang, browser akan otomatis menutup koneksi WebSocket aktif saat bfcache dimasuki, sehingga halaman dapat di-cache dan dipulihkan secara instan saat dinavigasi kembali.

Waktu respons header dan sementara di Waktu Resource

Firefox 152 menambahkan dukungan untuk firstInterimResponseStart dan finalResponseHeadersStart di antarmuka PerformanceResourceTiming.

Metrik ini dapat digunakan untuk mengukur berapa lama waktu yang dibutuhkan browser untuk menerima respons HTTP sementara dan respons HTTP akhir setelah mengirim permintaan.

Browser Support

• 115
• 115
• 152
• 26.4

Source

Tombol tindakan untuk Notifikasi

Firefox 152 menambahkan dukungan untuk tombol tindakan notifikasi menggunakan properti actions pada Notification dan opsi di ServiceWorkerRegistration.showNotification().

Anda kini dapat menyertakan tombol tindakan pada notifikasi OS dan memantau interaksi pengguna saat tombol diketuk.

Browser Support

• 53
• 18
• 152
• 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 Firefox 153 dan Safari 27.

Beta Firefox 153 memperkenalkan dukungan untuk Error.stackTraceLimit guna mengonfigurasi kedalaman stack trace maksimum yang diambil, IDBObjectStore.getAllRecords() dan IDBIndex.getAllRecords() untuk mengambil rekaman terindeks, serta RTCDtlsTransport.getRemoteCertificates() untuk pemeriksaan keamanan WebRTC. Developer add-on juga mendapatkan API publicSuffix baru dan metode userScripts.execute() untuk injeksi skrip sesuai permintaan.

Safari 27 beta memperkenalkan penempatan anchor yang mendukung transformasi, :heading pseudo-class untuk mencocokkan elemen heading, kata kunci revert-rule untuk mengembalikan lapisan bertingkat, dukungan untuk kata kunci stretch dalam ukuran kotak, dan :host:has() pemilih gabungan.