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.

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.