Published: June 3, 2026
Welcome to the Baseline monthly digest. In May 2026, several new CSS features, event properties, and API additions became Baseline Newly available, while CSS units, user interaction properties, and pseudo-classes reached Baseline Widely available, alongside important updates from the developer community.
State of CSS 2026 survey
The web community's annual pulse-check is here: the State of CSS 2026 survey is now open. This year, the organizers have made a conscious effort to refine the survey, focusing on the features that matter most to developers in an era of AI-assisted coding. Browser vendors closely monitor these results to help prioritize their engineering roadmaps and address developer pain points. Be sure to lend your voice and share your experience with the evolving CSS landscape before it closes on July 1.
Baseline newly available features
The features in this section are supported as of May 2026 in the core browser set and are now Baseline newly available.
Container style queries
Container queries are no longer limited to size. With style queries, you can now apply styles to elements based on the custom properties of a parent container. This lets you build highly modular components that can adapt their theme or styling based on their contextual placement without relying on complex class structures.
Learn more in the MDN reference page for @container.
:open pseudo-class
Styling elements that have open and closed states—like <dialog> and <details>—previously required checking attributes or managing classes. The :open pseudo-class simplifies this by matching these elements only when they are currently in their open state, allowing for cleaner and more declarative CSS.
Read about it in the MDN page for the :open pseudo-class.
ToggleEvent.source
When working with the Popover API, reacting to state changes is crucial. The source property of the ToggleEvent interface returns the control element that triggered the popover toggle action. This lets you identify the origin of the event and coordinate complex UI interactions.
Find out more on the MDN documentation for ToggleEvent.source.
image-rendering property
The image-rendering CSS property lets you control the scaling algorithm used when resizing images. This is particularly useful for pixel art, low-resolution images, or QR codes where it's important to avoid blurry interpolation and keep scaling sharp and pixelated.
Learn how to use it on the MDN page for image-rendering.
text-decoration-skip-ink: all
Underlines passing through descenders can sometimes look cluttered. While text-decoration-skip-ink: auto skips ink only when intersecting, setting it to all forces the underline to skip all glyphs regardless of intersection, offering more control over typography aesthetics.
Read the details on the MDN guide for text-decoration-skip-ink.
SharedWorker
The SharedWorker API provides a specialized background worker that can be accessed from multiple browsing contexts, such as different windows, tabs, or iframes on the same origin. This is powerful for sharing state, managing connections, or coordinating background tasks across tab boundaries.
Check out the MDN documentation for SharedWorker.
Baseline widely available features
The following features became Baseline widely available, meaning that they are now broadly compatible and usable in your projects.
lh length unit
The lh relative unit corresponds to the computed line-height of the element on which it is used. This makes it simpler to size elements—such as icon badges or background highlights—to perfectly match the height of a line of text.
Learn more in the MDN reference for length units.
rlh length unit
Similar to lh, the rlh unit represents the line-height, but specifically of the root element (<html>). This lets you establish a consistent vertical rhythm across your entire page, regardless of local font size or line-height overrides.
Read more in the MDN reference for length units.
Navigator.userActivation
Many web APIs (such as video playback, popups, or clipboard access) require user interaction before they can be triggered. The Navigator.userActivation property returns an object containing information about the user's current and historical activation state on the window, letting scripts verify if a user gesture has occurred.
Find out how to use it on the MDN page for Navigator.userActivation.
clip-path
The clip-path CSS property lets you create a clipping region that defines what portion of an element should be visible. By using basic shapes (like circles, ellipses, or polygons) or SVG paths, you can create engaging layout designs and transitions without hiding overflow.
Check the implementation details on the MDN page for clip-path.
:user-invalid pseudo-class
Unlike :invalid, which applies styling as soon as a page loads (often leading to poor UX), the :user-invalid pseudo-class only matches invalid form elements after the user has interacted with them. This means you can show form validation feedback after the user leaves the field.
Learn how it works in the MDN documentation for :user-invalid.
That's a wrap
Tell us if we missed anything Baseline-related, and we will make sure it gets captured in a future edition! If you have any questions or want to provide feedback on Baseline, you can file an issue in our issue tracker.