news

Safari 26.5 WebKit CSS features: :open, random() changes, Origin API, and 63 bug fixes

Safari 26.5 brings new WebKit CSS features: :open, random() element-scoped, Origin API, and 63 bug fixes. Test anchor positioning and scroll-driven animations.

Apple shipped Safari 26.5 alongside iOS 26.5, iPadOS 26.5, and macOS Tahoe 26.5, with the update also available for Sequoia and Sonoma. The WebKit Blog calls this “the largest May release of WebKit ever,” citing new CSS and Web Platform features plus 63 bug fixes across anchor positioning, scroll-driven animations, zoom rendering, WebRTC, and more. A handful of those fixes correct behavior that existing layouts may have been relying on, so testing on Safari 26.5 before assuming the release is a no-op is worth the time.

New CSS features and Web APIs in Safari 26.5 WebKit

The :open pseudo-class is the most broadly applicable addition for anyone working with interactive components. It matches <details>, <dialog>, <select>, and <input> when those elements are in their open state: an expanded dropdown, a visible dialog, an active date picker. Targeting the open state of a <select> previously required JavaScript or workarounds using :focus-within. The WebKit Blog notes that progressive enhancement is straightforward: browsers without :open support simply skip the rules, and the underlying elements keep working normally.

The random() function gains the element-scoped keyword, which ties the cached random value to the individual element rather than sharing it globally. The keyword can appear in either order: random(--name element-scoped, 0, 100) or random(element-scoped --name, 0, 100). There is a breaking change here for anyone who experimented with random() in earlier Technology Preview builds: the element-shared keyword has been removed. It was not equivalent to element-scoped: the two had distinct behaviors, so code using element-shared needs to be updated before shipping against Safari 26.5.

SVG gradients (<linearGradient> and related elements) now support color-interpolation="linearRGB", which switches the interpolation space from sRGB (the default) to linear RGB. This produces more perceptually even color transitions, particularly on gradients that cross very different hues. Because the value has to be set explicitly, this is not a breaking change, but existing SVG markup that already included it will now render differently in WebKit.

ToggleEvent.source gives popover event handlers a reference to the element that triggered the toggle, typically the invoker button. It removes the need to track those references manually. The Origin API introduces Origin.from(value) for constructing Origin objects from strings or built-in objects, and Origin.isSameSite(otherOrigin) for same-site comparisons, with correct handling of opaque origins whose serialized form is "null". Both methods standardize operations that previously required manual URL parsing.

63 bug fixes: where to pay attention

The fix count breaks down to 43 CSS fixes, 5 SVG, 5 WebRTC, 3 editing, and the remainder spread across networking, storage, media, accessibility, and Web Extensions. The WebKit Blog is specific enough about which areas were touched to make this a useful starting point for narrowing down where to look if something breaks.

Anchor positioning (5 fixes) and scroll-driven animations (4 fixes) are the two areas most likely to cause regressions in existing code. The anchor positioning fixes address media query re-evaluation during viewport resizing, chain resolution for three or more anchored elements, anchor() fallback values accepting unitless zero, display: contents correctly establishing anchor scope, and fixed-position elements anchored to sticky-positioned children. Each of these describes a previously incorrect behavior; if a layout had compensated for that behavior, the layout will change. Scroll-driven animations received four fixes but the blog post does not detail them individually; four corrections in a relatively new CSS area suggests the previous behavior diverged from the spec in some edge cases.

The 5 block-in-inline layout fixes and 6 zoom rendering fixes apply to narrower scenarios but can surface in complex layouts or apps that use zoom for accessibility. Grid, flexbox, tables, and multicolumn received 4 fixes combined.

What to check

The most actionable breaking change is the removal of element-shared from random(). If you are using that keyword anywhere in a codebase targeting Safari, the behavior will change in 26.5 and it will not fall back gracefully to element-scoped, because the two were not equivalent.

For anchor positioning, run your test suite or do a manual review on Safari 26.5, especially for layouts using chains of anchored elements or unitless-zero fallbacks. Scroll-driven animations that were tuned against earlier versions of Safari deserve the same check.

Safari updates automatically on iOS and iPadOS as part of the OS update; on macOS it goes through System Settings. There is no supported way to pin Safari to an earlier version on consumer devices. Safari Technology Preview 242, released in April, gave an early look at some WebKit directions, though not the specific features in this release.

The next thing to watch is cross-browser support for the Origin API. Safari 26.5 is one of the first stable releases to ship it; broader adoption will determine how quickly it becomes a viable tool without fallbacks.

Luca
Luca

Software developer, Apple user since 2012. I cover news and tools for developers building on Apple platforms.

About →