Skip to content
What are you looking for?. Open searchSR
brands and shortcuts
Webmedium signalverified

New on the web platform in July: Firefox 153 and Chrome 151

Rachel Andrew summarizes July's stable releases. Firefox 153 widens how the select element is parsed so that any nested element is allowed inside it, which opens the path to genuinely customizable dropdowns without JavaScript replacements. The same release brings the Picture-in-Picture API to desktop, the Intl.Locale Info API with getCalendars(), getTimeZones(), and getWeekInfo(), and IndexedDB getAllRecords(). Chrome 151 adds the CSS ruby-overhang property, manual slot assignment in declarative Shadow DOM through the shadowrootslotassignment attribute, and the animation property on the AnimationEvent and TransitionEvent interfaces.

By Redakcija WebAiRadarPublished 1 min readwritten by a model
Image: web.dev

Source

New to the web platform in July

web.dev Blog · Original published July 31, 2026

Rachel Andrew summarizes July's stable browser releases. One item matters considerably more than the rest.

Firefox 153

  • The way the select element is parsed was widened so that any nested element is allowed inside it, opening the path to genuinely customizable dropdowns without JavaScript replacements.
  • The Picture-in-Picture API arrived on desktop.
  • The Intl.Locale Info API brings getCalendars(), getTimeZones(), and getWeekInfo().
  • IndexedDB gains getAllRecords().

Chrome 151

  • The CSS ruby-overhang property was added.
  • Manual slot assignment in declarative Shadow DOM arrived, through the shadowrootslotassignment attribute.
  • The animation property is available on the AnimationEvent and TransitionEvent interfaces.

Why the customizable select matters most

The hand-built dropdown has been the leading source of accessibility problems on client sites for decades. Every library solved it slightly differently, and all of them were worse than the native control on mobile. A native select you can style removes that entire category of problem.

TagsFirefoxChromeCSSHTMLShadow DOMselect

Related

The prefix selector, a hyphen followed by an asterisk, set between two oversized curly braces.
Webmedium signal

A class prefix selector is now spec text in Selectors Level 5

The draft of August 18 adds section 2.1, Class Prefix Selectors, defining .foo-* to match any class beginning with that prefix. It replaces the attribute-selector workarounds every design system carries. Nothing implements it yet, and the matching rule has an edge that will catch people: .foo-* does not match foo--bar.

CSS Working Groupverified

The Baseline wordmark beside its double check mark, on a pale green field.
Webmedium signal

Put Baseline in CI so the browser stops deciding for you

Three packages and about 20 minutes. One config tells your build which browsers you target, a linter warns when a stylesheet reaches past that line, and CI says it on the pull request instead of a user saying it in a bug report six weeks later.

web.dev, npmverified

SVGSMILa timing chart before the markup
Webweak signal

A timing chart as the blueprint for SMIL animation in SVG

On August 20 at Smashing Magazine, Johan Grobler described a method in which a complex SMIL animation is first drawn as a timing chart and only then written in markup. Every bar on the chart corresponds to one animate element, and its length and position become the values of the dur and begin attributes. Because a single animate changes exactly one property of one element, the count climbs fast: a three-dot loader takes six of them. The piece also covers synchronizing to another animation's start or end through the begin attribute, and honoring prefers-reduced-motion through the picture element.

Smashing Magazineverified