Safari 26.5: Major WebKit Updates with New CSS Features and Dozens of Fixes

By ● min read

Introduction

Safari 26.5 arrives with a suite of powerful new tools for web developers, including the :open pseudo-class, an element-scoped keyword for the random() function, color-interpolation support for SVG gradients, the ToggleEvent.source property for popovers, and the Origin API. This release also marks a significant quality milestone, with 63 bug fixes—the largest May update in WebKit's history. Improvements span SVG, WebRTC, networking, editing, and more, alongside targeted fixes for scroll-driven animations and Anchor Positioning. Rendering at various zoom levels has been refined, and handling of block-level elements nested within inline elements continues to improve.

CSS Enhancements

The :open Pseudo-Class

The new :open pseudo-class offers a unified way to style the open state of interactive elements such as <details>, <dialog>, <select>, and <input>. Previously, developers relied on the [open] attribute selector for <details> and <dialog>, but that approach failed for <select> and <input> elements. The new pseudo-class provides a consistent, cross-element pattern. For <dialog>, it matches whether the dialog is shown via showModal() or show(). For <input>, it applies when an associated picker (e.g., date or color picker) is displayed. For <select>, it matches when the dropdown is expanded.

Example usage:

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

This is a practical enhancement for everyday CSS. Progressive enhancement is straightforward—browsers that lack :open support simply ignore the rule, while the underlying elements continue to function normally.

Improvements to CSS random()

Since Safari 26.2 became the first browser to ship the CSS random() function, the CSS Working Group has refined its behavior. Named random values, such as random(--size, 100px, 200px), now produce a global result rather than being scoped to each element. Safari 26.5 implements these changes, including a new element-scoped keyword for per-element randomness.

For example, consider eight <div class="box"> elements with this CSS:

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

Each box gets a unique random width and height (between 100px and 200px). To make all eight boxes share the same randomly generated dimensions, use named values:

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

With named values (--w and --h), the random numbers are chosen once and applied uniformly to all matching elements. For per-element behavior, the new element-scoped keyword restores the original individual randomness.

SVG and UI Updates

Color-Interpolation for SVG Gradients

Safari 26.5 adds support for the color-interpolation property in SVG gradients. This property controls how colors are interpolated within gradient stops, offering more precise control over gradient rendering, especially for smooth transitions between color spaces.

ToggleEvent.source for Popovers

The ToggleEvent.source property is now available for popovers. This provides developers with access to the element that triggered a popover's state change, enabling more dynamic interactions and event handling.

Origin API

The Origin API is introduced, offering a standardized way to access and manage the origin of a document or worker. This enhances security and privacy capabilities for web applications.

Bug Fixes and Quality Improvements

This release includes 63 bug fixes, making it the largest May update ever for WebKit. Key areas of improvement include:

• Scroll-driven animations and Anchor Positioning receive multiple fixes, ensuring smoother and more reliable behavior.
• Rendering at different zoom levels works better, improving visual consistency across magnifications.
• Layout handling when a block-level element lives inside an inline element has been refined, resolving edge cases.
• Additional improvements across SVG, WebRTC, networking, editing, and more.

These updates collectively enhance WebKit's stability and performance, reinforcing Safari's commitment to a robust browsing experience.

Conclusion

Safari 26.5 delivers meaningful advancements for web developers, from the pragmatic :open pseudo-class to refined randomness and broader SVG capabilities. With a strong focus on quality through numerous bug fixes, this update solidifies WebKit's position as a premier rendering engine. Developers are encouraged to test these features and integrate them into their projects for improved styling and interactivity.