New Web Features in May: Styling, Media, and Device Updates

Explore stable and beta web platform updates in May 2026, including container queries, lazy-loading media, Picture-in-Picture, and Web Serial API expansion

2026-06-03 GIGATAP Team #security
#web platform#browser update#CSS

New Web Platform Features in May 2026#

Source: web.dev

What Changed#

Several features reached stable or beta browsers in May. CSS pseudo-classes for open/closed states are now baseline in Safari 26.5, allowing semantic styling of elements like <details> or pickers. Chrome 148 added name-only container queries, letting developers target containers by name without additional size or type conditions. Firefox 151 supports container style queries for custom properties, enabling styling based on parent properties beyond size. Lazy loading for <video> and <audio> elements became native in Chrome 148, improving page load and bandwidth efficiency. Firefox 151 also rolled out the Document Picture-in-Picture API, allowing always-on-top windows with arbitrary HTML content. Web Serial API support expanded: Firefox 151 on desktop and Chrome 148 on Android now allow secure read/write access to serial devices.

Beta updates preview upcoming features. Chrome 149 beta introduces CSS gap decorations, basic shape functions in CSS, improved programmatic scroll Promises, and WebSocket-compatible back/forward caching (BFCache). Firefox 152 beta brings auto-sizing for form controls.

Why It Matters#

These updates impact performance, UX, and operational security. Lazy-loading media reduces bandwidth and resource consumption. Picture-in-Picture enhancements support persistent interactive overlays. Container queries and style queries increase flexibility in responsive and context-aware designs. Expanded Web Serial API support allows controlled access to peripheral devices, but operational checks remain critical for secure integration.

Beta features give an early view of upcoming web behavior. Testing them before stable release can prevent regressions and surface compatibility issues.

What to Check#

  • Verify your CSS and container queries behave as expected across updated browsers.
  • Test lazy-loading behavior for video/audio elements to ensure deferred load does not break UX.
  • Evaluate Picture-in-Picture overlays for any interactive content that should persist across pages.
  • Confirm Web Serial API permissions and integration match your security requirements.
  • Experiment with beta features in isolated environments to identify potential impact on layout, performance, and caching.

What Not to Overclaim#

  • Browser support details may shift; MDN data may lag behind very recent releases.
  • Features reaching baseline do not guarantee universal adoption across all user environments.
  • Beta features are subject to change and should not be relied on in production without testing.

These updates show incremental but meaningful changes to web platform capabilities, especially in styling flexibility, media handling, and device integration.