Skip to content
What are you looking for?. Open searchSR
brands and shortcuts
Webweak signalverifiedsupport checked August 22, 2026

May Baseline digest: container style queries and the :open pseudo-class

Newly available now includes container style queries, which let you style based on a custom property of a parent element, along with the :open pseudo-class for dialog and details, the ToggleEvent.source property, the image-rendering property that keeps pixel art and QR codes sharp when scaled, the text-decoration-skip-ink: all value, and SharedWorker. Widely available now covers the lh and rlh units, Navigator.userActivation, clip-path, and the :user-invalid pseudo-class.

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

Source

Majski Baseline digest: upiti o stilu kontejnera i pseudoklasa :open

web.dev Blog · Original published May 1, 2026

The monthly Baseline digest is the shortest way to track what has become safe to use. The May edition brings several things that take work off JavaScript directly.

Newly available

  • Container style queries let you style based on a custom property of a parent element, which makes components genuinely self-contained.
  • The :open pseudo-class brings clean CSS for open and closed states on dialog and details.
  • ToggleEvent.source tells you which control opened a popover.
  • image-rendering controls how an image scales, which matters for pixel art and QR codes.
  • text-decoration-skip-ink: all forces an underline to skip every glyph.
  • SharedWorker is a background worker reachable from several contexts of the same origin.

Widely available

  • The lh and rlh units refer to the line height of the element and of the root element.
  • Navigator.userActivation checks whether the user actually initiated something.
  • clip-path cuts a shape using basic shapes and SVG paths.
  • The :user-invalid pseudo-class shows a form error only after the user has done something, rather than on load.

What pays off immediately

:user-invalid is the easiest win on forms, because it solves the familiar problem of red fields shouting before the user has typed anything. The lh unit tidies vertical rhythm without invented numbers.

TagsBaselineCSScontainer queriesbrowser support

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