Exploring Safari 26.5: New WebKit Features and Enhancements

Safari 26.5 brings a set of fresh features and over 60 bug fixes, making it the most robust May release yet from WebKit. This update introduces the :open pseudo-class for styling open elements, refined CSS random() functionality with an element-scoped keyword, improved color interpolation in SVG gradients, the ToggleEvent.source property for popovers, and the Origin API. Alongside these additions, numerous fixes enhance rendering, scrolling, anchor positioning, and editing. Below, we answer key questions about these updates.

What is the new :open pseudo-class in CSS and how does it improve styling?

The :open pseudo-class offers a unified way to style elements in their open state, such as <details>, <dialog>, <select>, and <input>. Previously, developers relied on the [open] attribute selector, which only worked for <details> and <dialog>. With :open, you now have a consistent method across all these elements. For example, you can style a <select> when its dropdown expands:

Exploring Safari 26.5: New WebKit Features and Enhancements — Source: webkit.org

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

For <dialog>, :open matches when the dialog is displayed via showModal() or show(). For <input>, it applies when a picker (e.g., date or color) is visible. This pseudo-class simplifies styling and provides progressive enhancement—browsers without support simply ignore the rules, ensuring backward compatibility.

How has the CSS random() function changed in Safari 26.5?

The CSS random() function, first shipped in Safari 26.2, underwent refinements by the CSS Working Group. Previously, named random values (e.g., random(--size, 100px, 200px)) were scoped to each element. Now, they produce a global result shared across elements. To regain per-element behavior, Safari 26.5 introduces the element-scoped keyword. For instance, applying random(100px, 200px) without a name generates a unique number for each element, leading to varied sizes. Using random(--w, 100px, 200px) with a name makes all elements share the same random width. The new keyword lets you choose between global and local randomness, offering finer control in designs like grids or animations.

What is the ToggleEvent.source property and how does it help with popovers?

The ToggleEvent.source property is part of the Popover API enhancements in Safari 26.5. When a popover is shown or hidden using declarative methods (e.g., via popovertoggle event), the event object now includes a source property that references the element that triggered the toggle. This makes it easier to identify the invoker (like a button) in JavaScript, enabling more responsive interactions. For example, you can listen to the toggle event on a popover and access event.source to style or disable the trigger button. This improvement simplifies managing multiple popovers and their associated controls, reducing manual event binding.

What improvements have been made to SVG gradients in WebKit?

Safari 26.5 adds support for the color-interpolation property in SVG gradients. This property controls how colors are interpolated between gradient stops, allowing smoother or more precise transitions. It works alongside existing SVG gradient features, enabling developers to specify interpolation in the sRGB or linearRGB color spaces. This enhancement aligns SVG rendering with CSS standards, improving consistency for icons, charts, and decorative graphics. The update is part of a broader effort in this release to polish SVG rendering, including fixes for gradient transformations and pattern fills.

What is the Origin API and what does it bring to Safari?

The Origin API (part of the Origin Policy specification) is now available in Safari 26.5. It provides a standardized way to retrieve the origin of the current document or worker via self.origin (or globalThis.origin). This replaces manual parsing of location.origin or document.domain, offering a more reliable and consistent method across contexts. The API is particularly useful for security-sensitive code, such as when validating origins in Service Workers or cross-origin communication. By exposing a direct property, it reduces complexity and improves performance in origin checks.

What bug fixes and rendering improvements does this release include?

Safari 26.5 fixes 63 bugs, making it the largest May release ever. Key areas include scroll-driven animations and Anchor Positioning, both receiving multiple corrections. Rendering at different zoom levels now works more reliably, addressing visual inconsistencies. The team also improved handling of block-level elements inside inline contexts, which previously caused layout issues. Other fixes span SVG, WebRTC, networking, and editing. These improvements ensure smoother performance and better compliance with web standards, particularly for complex layouts and interactive components.

How does the :open pseudo-class compare to the [open] attribute selector?

The :open pseudo-class offers broader element support than the [open] attribute selector. While [open] works on <details> and <dialog>, it does not apply to <select> or <input> elements when their dropdowns or pickers are active. :open fills this gap, providing a single selector for all these elements. Additionally, :open is a pseudo-class, which conceptually matches a state rather than an attribute, making it more semantic and future-proof. For example, with <input type="date">, :open triggers when the date picker appears, while [open] would not work. This consistency simplifies stylesheets and reduces the need for workarounds.

Tags: