Safari 26.5: New CSS Features, API Enhancements, and Bug Fixes

Welcome to Safari 26.5, a significant update that brings a host of new capabilities and refinements to WebKit. This release introduces the :open pseudo-class for improved styling of interactive elements, a revised CSS random() function with per-element scoping, enhanced SVG gradients via color-interpolation, the ToggleEvent.source property for popovers, and the new Origin API. Alongside these features, over 60 bug fixes improve stability across SVG, WebRTC, networking, editing, and more. Dive into the details below.

1. What is the :open pseudo-class and how does it simplify styling?

The :open pseudo-class offers a consistent way to style elements when they are in an open state, such as <details>, <dialog>, <select>, and <input> pickers. Previously, developers relied on the [open] attribute selector for <details> and <dialog>, but that approach didn't work for <select> or <input> elements. The :open pseudo-class unifies these behaviors, matching when a dialog is shown (via showModal() or show()), when a <select> dropdown is expanded, or when an input picker (like date or color) is displayed. For example, select:open { border: 1px solid skyblue; } adds a blue border to an open select menu. This is a progressive enhancement—browsers without support simply ignore the rule, and the element continues to function normally.

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

The random() function, first shipped in Safari 26.2, has been updated to align with the latest CSS Working Group decisions. Previously, named random values like random(--size, 100px, 200px) were scoped per element, meaning each element got its own independent random number. Now, named values produce a global result—all elements using the same named variable share that random value. To regain per-element behavior, Safari 26.5 introduces the element-scoped keyword: random(element-scoped --size, 100px, 200px). This ensures each element gets its own unique random number. For instance, without naming, div { width: random(100px, 200px); } gives each div a different width. With a named variable, all divs get the same width unless you add element-scoped. This provides fine-grained control over randomness in CSS.

3. What does the color-interpolation property do for SVG gradients?

Safari 26.5 adds support for the color-interpolation property in SVG gradients, allowing developers to specify the color space used for gradient transitions. By default, gradients interpolate colors in the sRGB color space, but setting color-interpolation: linearRGB switches to a linear RGB color space, which can produce more accurate and perceptually uniform color blends. This is especially useful for gradients that span a wide range of hues or where color accuracy is critical, such as in data visualizations or brand-specific designs. The property can be applied directly to an SVG <linearGradient> or <radialGradient> element. For example: <linearGradient color-interpolation="linearRGB" ...>. This enhancement makes Safari more competitive for advanced SVG rendering.

4. What is the ToggleEvent.source property and how does it improve popovers?

The ToggleEvent interface, used with the toggle event for popovers and details elements, now includes a source property. This property returns a reference to the element that triggered the toggle—such as a button that invoked popover.show() or a <details> element expanded by user click. This is particularly valuable for complex popover interactions where you need to know exactly which control caused the toggle. For example, if multiple buttons open the same popover, event.source tells you which button was clicked. It also works with showPopover() and hidePopover() methods. Developers can use this to customize behaviors, like styling the triggering button differently when the popover is open, or tracking analytics per source. This property is part of the broader Popover API enhancements.

5. What is the Origin API and how does it work?

The Origin API is a new addition that provides a standardized way to retrieve the origin of the current document or a given script. It exposes an origin property on the global self object (e.g., self.origin), returning a string like "https://example.com". This is similar to window.location.origin but is more reliable in workers (service workers, web workers) where location may not be available. The API also includes a static method Origin.relative() for constructing relative origins. This simplifies security checks and origin-based logic in applications, such as validating that a script runs on the expected domain or sharing data between different parts of a web app. Safari 26.5 implements the API as part of ongoing standardization efforts, making it easier for developers to write cross-origin-aware code without relying on string parsing.

6. How many bug fixes does Safari 26.5 include and what areas do they cover?

This release marks the largest May update of WebKit, with 63 bug fixes in total. The improvements span multiple areas: SVG rendering, WebRTC stability, networking performance, editing behaviors, and more. Specifically, scroll-driven animations and anchor positioning received multiple fixes to ensure smoother, more reliable behavior. Rendering at different zoom levels (including non-100% zoom) now works more accurately, addressing visual artifacts and layout shifts. Additionally, improvements were made to handle cases where a block-level element is nested inside an inline element—a tricky scenario that previously caused incorrect layout. These fixes collectively enhance the robustness of WebKit, making Safari 26.5 a more reliable platform for web developers and users alike.

7. What other enhancements can developers expect in Safari 26.5?

Beyond the headline features, Safari 26.5 includes ongoing improvements across CSS, rendering, and APIs. The :open pseudo-class and updated random() function are part of a broader effort to modernize CSS. Support for color-interpolation in SVG gradients enhances visual quality. The ToggleEvent.source property and Origin API enrich JavaScript capabilities. For developers working with forms, the :open pseudo-class also applies to <input> pickers, offering new styling opportunities. Furthermore, continuous fixes to scroll-driven animations, anchor positioning, and zoom-level rendering ensure a more polished user experience. This release demonstrates WebKit's commitment to web standards and performance, making it a significant upgrade for both developers and users.