New to the web platform in May  |  Blog  |  web.dev

The concept of "Baseline Newly available" is particularly noteworthy, representing a critical milestone in web standards. It indicates that a feature is broadly supported across major browsers, allowing developers to implement it with confidence, knowing it will function consistently for a vast majority of their audience. This concerted effort by browser vendors and standards bodies like the W3C and WHATWG streamlines development and reduces the need for complex workarounds or browser-specific code.

Major Stable Browser Releases: A Deep Dive into May’s Innovations

May’s stable releases brought a rich collection of features, each addressing different facets of web development, from styling and responsiveness to performance and hardware interaction.

Safari 26.5: Enhancing Semantic Styling with the :open Pseudo-class

Safari 26.5, while primarily focusing on stability and existing feature refinements, delivered a crucial new CSS pseudo-class: :open. This addition achieves "Baseline Newly available" status, making it a reliable tool for developers across all modern browsers. The :open pseudo-class allows developers to style elements that have distinct "open" and "closed" states, specifically targeting elements such as <details> and <dialog> when they are expanded, or <select> and <input> elements (like color or date pickers) when their associated picker interfaces are visible.

Historically, developers often relied on attribute selectors like details[open] or JavaScript to manage the styling of these dynamic states. The :open pseudo-class offers a cleaner, more semantic, and performant CSS-native solution. It aligns with the ongoing trend of empowering CSS to handle more complex UI states declaratively, reducing reliance on JavaScript for presentational logic. This enhancement simplifies stylesheets, improves readability, and contributes to better accessibility by ensuring visual cues are tied directly to the semantic state of the element. Web platform advocates have long championed such additions, recognizing their potential to streamline front-end development and enhance the overall user experience by providing more intuitive and responsive interfaces.

Chrome 148: Redefining Responsive Design with Name-Only Container Queries

Chrome 148 introduced a significant advancement in responsive design with the stable release of name-only container queries, also achieving "Baseline Newly available" status. This feature revolutionizes how developers approach component-based design, moving beyond the limitations of global viewport-based media queries.

Prior to this update, implementing container queries typically required specifying a size or style condition alongside a container name, and explicitly defining the container’s type using the container-type property. With name-only container queries, developers can now query the mere presence of a named container without needing to include any additional conditions. Furthermore, the container-type property is no longer mandatory on the ancestor element if the query is solely based on the container’s name. This simplification dramatically improves the ergonomics of container queries, making them more intuitive and less verbose.

For example, a component can now adjust its internal layout simply by detecting if it is placed within a named --sidebar container, regardless of the sidebar’s specific dimensions. This paradigm shift enables truly independent, self-contained components that adapt their styles based on their immediate parent’s context, rather than the global viewport. This capability is particularly impactful for design systems and modular web development, allowing components to be highly reusable and maintainable across diverse layouts. Industry analysts predict this will significantly accelerate the adoption of advanced responsive patterns, leading to more robust and adaptable web interfaces.

Firefox 151: Advanced Theming and Dynamic Styling with Custom Property Style Queries

Firefox 151 made a significant contribution to dynamic styling by introducing full support for style() queries on @container, bringing container style queries for custom properties to "Baseline Newly available" status. This feature empowers developers to apply styles based on the CSS properties of a parent container, not just its dimensions.

While size queries are invaluable for responsive layouts, style queries unlock new possibilities for context-aware theming and dynamic component variations. The full cross-browser support for querying custom properties is particularly powerful. Developers can now check if a custom property, such as --theme, is set to a specific value like dark on a parent container, and then apply corresponding styles to child elements. This allows for highly flexible and maintainable theming systems, where an entire section or component subtree can adapt its appearance based on a single custom property set higher up in the DOM.

For instance, a card component can automatically switch to a dark mode background and light text color when its parent container has --theme: dark defined. This eliminates the need for JavaScript-driven class toggling or complex selector chains, leading to more declarative and efficient styling solutions. The ability to propagate thematic information contextually through CSS custom properties and then query it with @container style() marks a substantial leap forward in the sophistication of CSS-driven UI.

Performance Boost: Native Lazy Loading for Video and Audio in Chrome 148

Chrome 148 introduced a crucial performance enhancement by adding native lazy loading support for <video> and <audio> elements, utilizing the familiar loading="lazy" attribute. This feature, previously available for <img loading="lazy"> and <iframe loading="lazy">, extends the browser’s ability to defer the loading of media resources until they are near the user’s viewport.

The implications for web performance are substantial. By preventing media content that is initially off-screen from loading immediately, pages can achieve faster initial load times, reduce bandwidth consumption, and lower data usage for users, especially on mobile networks. This directly contributes to better Core Web Vitals scores, which are increasingly important for SEO and user retention. Studies have consistently shown that faster page loads lead to lower bounce rates and improved engagement.

The implementation of native lazy loading for these media types simplifies development, eliminating the need for custom JavaScript solutions that were often complex and less performant than browser-native implementations. The Squarespace engineering team, instrumental in this feature’s development, highlighted in their blog post, "How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today," the streamlined approach this provides for modern web development, emphasizing ease of use and inherent performance benefits.

Beyond Video: The Interactive Canvas of Document Picture-in-Picture API in Firefox 151

Firefox 151 brought a groundbreaking API to desktop platforms: the Document Picture-in-Picture API. This new interface significantly expands upon the capabilities of the existing Picture-in-Picture API, which is limited to displaying a <video> element in an always-on-top window. The Document Picture-in-Picture API, in contrast, allows developers to open an always-on-top window containing arbitrary HTML content.

This distinction unlocks a vast array of new possibilities for interactive web applications. Developers can now create rich, interactive overlays that persist even when the user navigates away from the main page or switches to another application. Potential use cases are diverse and exciting:

• Video Conferencing: Displaying grids of participant video feeds in a floating window.
• Productivity Tools: Interactive stock tickers, timers, or note-taking widgets that remain visible.
• Media Players: Custom video controls, lyrics displays, or related content alongside a video.
• Educational Applications: Interactive quizzes or supplementary information windows.

The API empowers developers to design multi-tasking experiences that are deeply integrated with the web content, moving beyond simple media playback to full-fledged, always-on-top web components. This represents a significant step towards blurring the lines between native desktop applications and web experiences, offering users unprecedented flexibility in how they interact with web content.

Bridging the Physical and Digital: Web Serial API Expands Reach

The Web Serial API saw a significant expansion in its platform support this month, with Firefox 151 adding support for desktop platforms and Chrome 148 extending its reach to Android devices. This API provides a standardized way for websites to read from and write to serial devices, fostering a new era of web-connected hardware.

The implications for fields like education, industrial control, and creative computing are substantial. The Web Serial API enables direct communication with a wide range of peripheral hardware, including microcontrollers (like Arduino or Raspberry Pi), 3D printers, development boards, and specialized sensors. This capability opens the door for web applications to control physical devices, visualize real-time data from sensors, or interact with custom hardware without requiring native desktop applications.

Crucially, both Firefox and Chrome implementations prioritize user security and privacy. In Firefox, utilizing the Web Serial API necessitates users installing a synthetically generated site permission add-on, ensuring an explicit and controlled mechanism for granting access to serial devices. Chrome’s Android support also incorporates robust permission models. This careful approach to security is paramount when bridging the web with physical hardware, ensuring that users maintain full control over their devices and data. The expansion of this API across major platforms marks a critical step towards a more interconnected and interactive web, where the digital realm can seamlessly interface with the physical world.

The Road Ahead: Insights from Beta Browser Releases

Beyond the stable releases, the beta versions of Chrome 149 and Firefox 152 offer an exciting preview of features slated for the next stable cycles. These beta channels are invaluable for developers to test upcoming changes, identify potential impacts on their sites, and provide feedback before widespread release. This month, there was no Safari beta update.

Chrome 149 Beta: Glimpses into Advanced CSS and Performance

Chrome 149 beta is packed with promising updates, particularly in the realm of CSS and performance.

• CSS Gap Decorations: This innovative feature allows developers to style the whitespace (gaps) between flex and grid items. This provides granular control over the visual separation within complex layouts, enabling more sophisticated and visually appealing designs without resorting to margins on individual items, which can be cumbersome.
• Expanded shape-outside Properties: The beta introduces support for path(), shape(), rect(), and xywh() basic shape functions within the shape-outside property. This significantly enhances the ability to wrap text around complex, non-rectangular shapes, opening up new creative possibilities for web typography and layout design.
• path-length CSS Property: This new CSS property provides a way to define the total length of a path, which can be useful for SVG animations and dynamic drawing effects.
• Programmatic Scroll Method Promises: Programmatic scroll methods such as scrollTo(), scrollBy(), and scrollIntoView() will now return Promises that resolve once smooth scrolling operations are complete. This crucial update enables developers to chain animations or execute code reliably after a scroll action has finished, leading to more robust and predictable scroll-driven interactions.
• BFCache for WebSocket Connections: Pages with active WebSocket connections can now qualify for back/forward caching (BFCache). This is a significant performance improvement, as BFCache allows pages to load almost instantly when navigating back or forward in browser history, previously a limitation for real-time applications using WebSockets. This change will dramatically improve the perceived performance for users of collaborative tools and chat applications.

Firefox 152 Beta: Enhancing User Input and Notification Capabilities

Firefox 152 beta also brings a set of impactful features that will enhance user input and notification systems.

• Full field-sizing Property Support: This beta introduces full support for the field-sizing property, which allows form controls (like textareas and input fields) to automatically adjust their size to fit their content. This improves the user experience by providing dynamically resizing input areas, reducing the need for manual resizing or scrolling within fields, and making forms more intuitive.
• Notification API Enhancements: The Notification interface gains new actions and maxActions properties. These additions empower developers to create richer, more interactive web notifications, allowing users to perform quick actions directly from the notification itself, without needing to open the web page. This can greatly improve user engagement and productivity for applications that rely on timely alerts.
• options.pseudoElement Support in Element.getAnimations(): This update adds options.pseudoElement support to Element.getAnimations(), providing developers with more comprehensive control and introspection over animations, including those applied to pseudo-elements. This aids in debugging and orchestrating complex CSS animations.

The Significance of "Baseline Newly Available" and Cross-Browser Alignment

The frequent mention of "Baseline Newly available" throughout May’s releases underscores a concerted industry effort to standardize the web platform. Baseline, a project spearheaded by the web.dev team in collaboration with browser vendors, identifies features that are reliably supported across a critical mass of modern browsers. Its "Newly available" status signifies that a feature has recently achieved this widespread support.

This initiative is profoundly impactful for developers. It provides clear guidance on which features can be used without extensive polyfills or browser-specific hacks, thereby reducing development time, improving code maintainability, and fostering a more consistent user experience across different browsers. The commitment to Baseline reflects a maturing web ecosystem where interoperability is a primary goal, allowing developers to focus on innovation rather than compatibility challenges. This collaborative approach, involving contributions from the W3C, WHATWG, and individual browser teams, is crucial for the continued evolution and health of the open web.

Broader Implications for Web Development and User Experience

The collective updates in May 2026, both stable and beta, paint a clear picture of the web platform’s ongoing evolution towards greater power, flexibility, and user-centricity.

• Enhanced Developer Efficiency: Features like :open, name-only container queries, and custom property style queries empower developers with more declarative CSS solutions, reducing the reliance on JavaScript for UI state management and responsive adaptations. This streamlines workflows and makes codebases more maintainable.
• Superior User Experience: Native lazy loading for media, the Document Picture-in-Picture API, and improved BFCache for WebSocket connections directly translate to faster, more fluid, and more interactive web experiences. Users will benefit from quicker page loads, seamless multi-tasking capabilities, and more responsive real-time applications.
• Expanded Web Capabilities: The Web Serial API’s expanded platform support signifies the web’s growing ability to interact with the physical world, opening new avenues for IoT applications, educational tools, and creative hardware projects. The Document Picture-in-Picture API pushes the boundaries of web-based desktop-like applications.
• Richer Design Possibilities: CSS gap decorations and expanded shape-outside functions provide designers and developers with more granular control over layouts and typography, enabling more sophisticated and visually compelling interfaces.

These advancements collectively reinforce the web as a robust and dynamic application platform. As browser vendors continue to collaborate on standardizing and enhancing core capabilities, the distinction between web applications and native applications continues to diminish, offering users powerful, accessible, and performant experiences across a multitude of devices. May 2026 stands as a testament to the continuous innovation driving the open web forward.