Exploring Safari 26.5: Key WebKit Updates and Developer Features

Introduction

Safari 26.5 arrives with a host of practical enhancements aimed at web developers. This release introduces several new capabilities including the :open pseudo-class, a scoped keyword for the CSS random() function, color interpolation for SVG gradients, the ToggleEvent.source property for popovers, and the Origin API. Beyond these additions, the WebKit team has fixed 63 bugs—the highest number for a May release—improving performance and stability across SVG, WebRTC, networking, editing, and more. Scroll-driven animations and Anchor Positioning also receive multiple fixes, while rendering at various zoom levels and handling block-level elements inside inline elements are notably better.

CSS Enhancements

The :open Pseudo-Class

The new CSS pseudo-class :open offers a clean, consistent method 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 but didn't extend to <select> or <input>. Moreover, an attribute selector was never the ideal tool for this job—a pseudo-class is far more appropriate. Now :open works uniformly across all these element types.

For <dialog>, the pseudo-class matches when the dialog is displayed, whether opened via showModal() or show(). For <input>, it applies when its associated picker (e.g., date or color picker) is visible. And for <select>, :open triggers when the drop-down is expanded. For example:

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

This is a practical, everyday improvement. The progressive enhancement is straightforward: browsers lacking :open support simply ignore these rules, and the underlying elements continue functioning normally.

Improvements to the CSS random() Function

Safari 26.2 was the first browser to ship the CSS random() function. Since then, the CSS Working Group updated how named random values behave. Using a named value like random(--size, 100px, 200px) now produces a global result rather than one scoped to each element. Safari 26.5 adopts these changes and introduces a new element-scoped keyword to regain per-element behavior when needed.

Consider eight <div class="box"> elements with this CSS:

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

This generates eight differently sized rectangles because each use of random() produces a new number. If you want all eight boxes to be the same size, you can use named random values:

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

Here, --w and --h are named once and reused across all elements. For situations where per-element randomness is desired, the new element-scoped keyword can be added: random(--size, 100px, 200px, element-scoped) ensures each element gets its own unique value, similar to the original unscoped behavior but with explicit naming.

SVG and Web API Updates

Color Interpolation for SVG Gradients

Safari 26.5 adds support for the color-interpolation property in SVG gradients. This property controls the color space used during gradient interpolation, allowing developers to choose between sRGB and linearRGB. By default, gradients interpolate in sRGB, but switching to linearRGB can produce smoother, more accurate color transitions, especially for vivid colors. This feature brings Safari in line with other modern browsers and enhances the visual fidelity of SVG graphics.

ToggleEvent.source Property for Popovers

The ToggleEvent interface now includes a source property. When a popover is toggled, this property returns the element that triggered the toggle event—typically the button or anchor that invoked showPopover() or hidePopover(). This gives developers finer control over popover interactions, enabling them to respond to which specific UI element caused the toggle, which is particularly useful in complex interfaces with multiple popover triggers.

The Origin API

The new Origin API provides a programmatic way to obtain the origin of the current context. It exposes an origin property on the WorkerGlobalScope and Window objects, returning a string representation of the origin. This simplifies cross-origin checks and reduces reliance on parsing location.origin or constructing URLs manually. The API is consistent with the Fetch specification and helps improve security-related code.

Quality and Bug Fixes

This release includes 63 bug fixes—the most for any May release of WebKit. The fixes span numerous areas:

• SVG: Improved rendering and compatibility fixes.
• WebRTC: Enhancements to real-time communication stability.
• Networking: Better handling of network requests and caching.
• Editing: Fixes for contenteditable and text selection.
• Scroll-driven animations: Multiple corrections to ensure animations behave as expected with scroll-linked effects.
• Anchor Positioning: Refinements to the CSS anchor positioning specification, improving layout reliability.
• Zoom levels: Rendering at different zoom percentages now works more consistently.
• Block-level elements inside inline elements: Continued work on handling layout when a block-level element appears within an inline context, a historically tricky area of CSS.

These improvements underline WebKit’s commitment to standards compliance and performance. Developers can expect a more robust browsing experience when building for Safari.

Conclusion

Safari 26.5 delivers a solid mix of new features and quality-of-life fixes. The :open pseudo-class simplifies styling for interactive widgets, the random() function gains flexibility with element-scoped values, SVG gradients become more vibrant with color interpolation, and developers gain better popover and origin introspection tools. With 63 bug fixes, this update significantly polishes WebKit’s behavior across many domains. It’s a worthy upgrade for any web developer aiming to take advantage of the latest platform capabilities.