Safari 26.5 Unveiled: New CSS Powers, SVG Improvements, and Bug Fixes

Safari 26.5 has arrived, bringing a suite of new features and refinements that enhance both developer capabilities and user experience. This release introduces the :open pseudo-class, updates to the CSS random() function with element-scoped support, and important advances in SVG rendering. Additionally, the ToggleEvent.source property for popovers and the Origin API debut, while over 60 bug fixes address areas like SVG, WebRTC, networking, editing, and more. Scroll-driven animations and Anchor Positioning receive multiple corrections, and rendering at various zoom levels works more reliably. Progress continues on handling layouts where block-level elements appear inside inline elements.

CSS Enhancements

The :open Pseudo-Class

The new :open pseudo-class provides a unified way to style the open state of interactive elements like <details>, <dialog>, <select>, and <input>. Previously, developers relied on the [open] attribute selector for <details> and <dialog>, which worked limitedly but didn't extend to <select> or <input>. The attribute approach was a workaround best handled by a proper pseudo-class. With :open, you now have a consistent selector applicable across all these element types.

Safari 26.5 Unveiled: New CSS Powers, SVG Improvements, and Bug Fixes — Source: webkit.org

For <dialog>, :open matches whenever the dialog is displayed, whether opened with showModal() or show(). For <input>, it applies when an associated picker (such as a date or color picker) is visible. For <select>, the pseudo-class matches when the drop-down menu is expanded.

select:open {
  border: 1px solid skyblue;
}

This improvement simplifies everyday CSS. Progressive enhancement is straightforward: browsers lacking :open support simply ignore those rules, while the elements continue working normally.

Refined CSS random() with Element-Scoped Keyword

In Safari 26.2, WebKit became the first browser to ship the CSS random() function. Since then, the CSS Working Group revised how named random values operate. A named value like random(--size, 100px, 200px) now produces a global result, rather than one scoped to each element. Safari 26.5 implements these changes and adds a new element-scoped keyword for scenarios where per-element behavior is desired.

For instance, consider eight <div class="box"> elements with the following CSS:

.box {
  width: random(100px, 200px);
  height: random(100px, 200px);
  border: 2px solid black;
}

Each box receives a unique random width and height, because each call to random() generates a fresh number between 100px and 200px. This has been the behavior since Safari 26.2.

To make all eight boxes identical in size — with the same random dimensions — you can use named random values:

.box {
  width: random(--w, 100px, 200px);
  height: random(--h, 100px, 200px);
}

Here, one random width (named --w) and one random height (named --h) are chosen globally and applied to every box. For fine-grained control where each element gets its own random value, the element-scoped keyword can be used.

SVG and Graphics Updates

Color-Interpolation for SVG Gradients

WebKit 26.5 adds support for the color-interpolation property in SVG gradients. This allows developers to control the color space used during gradient interpolation, offering more precise and visually consistent gradients across different browsers and devices.

Web Platform Improvements

ToggleEvent.source for Popovers

Popovers now come with a ToggleEvent that includes a source property. This property provides a reference to the element that triggered the popover's visibility change, enabling more interactivity and accessibility enhancements.

Origin API

The Origin API is now available, giving developers a standardized way to retrieve the origin of a resource. This simplifies security checks and cross-origin communication scenarios.

Bug Fixes and Rendering Enhancements

This release includes 63 bug fixes — the largest May update for WebKit ever. The fixes span SVG rendering, WebRTC stability, networking reliability, editing behavior, and more. Scroll-driven animations and Anchor Positioning have received multiple corrections. Rendering at different zoom levels now works more consistently, and the handling of layouts where block-level elements reside inside inline elements continues to improve.

For a complete list of changes, refer to the official WebKit release notes.

Tags: