June 2026 brought new stable releases of Chrome 149, Chrome 150, and Firefox 152. No Safari stable release shipped during the month.

Form controls and layout

field-sizing reaches Baseline

Firefox 152 adds the field-sizing CSS property, which makes automatic form control sizing Baseline Newly available across all major browser engines. Controls such as <textarea>, <input>, and <select> can shrink or grow to fit their content with field-sizing: content rather than staying at a default size with field-sizing: fixed, removing the JavaScript workarounds previously needed for inputs and textareas that resize while the user types.

textarea {
  field-sizing: content;
}

rect() and xywh() in shape-outside

Chrome 149 ships the rect() and xywh() shape functions for shape-outside, making both Baseline Newly available. They define rectangular float exclusion areas either through exact inset coordinates or through origin-and-dimensions syntax, offering a simpler and more readable alternative to polygon() when the wrapping shape is a rectangle.

Font scaling with text-fit

Chrome 150 introduces the text-fit CSS property, which scales font sizes automatically so text fits the width of its containing box.

.headline {
  text-fit: grow;
}

Gap decorations and background-clip: border-area

Chrome 149 adds CSS gap decorations for grid and flexbox layouts, letting you draw lines and apply styling to the spacing between items in the same way column-rule works in multi-column layouts.

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

Chrome 150 also supports background-clip: border-area from CSS Backgrounds Level 4. The value clips an element's background to the border area, enabling gradient borders, decorative frame edges, and animated border effects without extra wrapper elements or pseudo-elements.

Scripting and navigation

Programmatic scroll promises

The programmatic scroll methods scrollTo(), scrollBy(), and scrollIntoView() now return a Promise in Chrome 150. It resolves once the smooth scrolling animation completes, giving a signal for follow-up actions that should wait for scrolling to settle.

Declarative focus with focusgroup

Chrome 150 adds the focusgroup attribute for declaratively managing arrow key navigation across composite UI controls such as toolbars, tablists, and menus, without hand-written keyboard event listeners.

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

WebSockets and bfcache

Pages with active WebSocket connections can enter the Back/Forward Cache (bfcache) as of Chrome 149. Open connections previously made a page ineligible; the browser now closes them on bfcache entry so the page can be cached and restored instantly on back navigation.

Resource timing and notifications in Firefox

Firefox 152 adds firstInterimResponseStart and finalResponseHeadersStart to the PerformanceResourceTiming interface. The two can measure the time from sending a request until the browser receives interim HTTP responses and the final HTTP response, respectively.

The same release supports notification action buttons through the actions property on Notification and its options in ServiceWorkerRegistration.showNotification(), so OS notifications can carry action buttons and report when one is tapped.

Beta previews

Firefox 153 and Safari 27 entered beta this month.

Firefox 153 beta adds Error.stackTraceLimit for configuring the maximum captured stack trace depth, IDBObjectStore.getAllRecords() and IDBIndex.getAllRecords() for retrieving indexed records, and RTCDtlsTransport.getRemoteCertificates() for WebRTC security inspection. Add-on developers get a new publicSuffix API and a userScripts.execute() method for injecting scripts on demand.

Safari 27 beta brings transform-aware anchor positioning, the :heading pseudo-class for matching heading elements, the revert-rule keyword to roll back cascade layers, support for the stretch keyword in box sizing, and :host:has() compound selectors.