Safari 26.5: Key Features and Enhancements

Safari 26.5 introduces several notable improvements to WebKit, delivering new CSS capabilities, enhanced SVG gradients, and better popover handling. This release includes the :open pseudo-class for styling open states, updates to the CSS random() function, color-interpolation for SVG gradients, the ToggleEvent.source property for popovers, and the Origin API. Alongside these features, 63 bug fixes—the most for any May release—improve performance across SVG, WebRTC, networking, and editing. Scroll-driven animations and Anchor Positioning receive multiple fixes, zoom-level rendering is more robust, and layout handling for block elements inside inline elements continues to improve.

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

The :open pseudo-class offers a consistent way 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>, but that method didn't work for <select> or <input> and treated styling as an attribute rather than a state. With :open, all these elements share a single pseudo-class. For a <dialog> opened via showModal() or show(), the pseudo-class applies. For <input>, it matches when a date or color picker is displayed. For <select>, it triggers when the drop-down expands. A practical example: select:open { border: 1px solid skyblue; } highlights an open select. This approach simplifies progressive enhancement—browsers without support simply ignore the rule, and the elements remain functional.

How has CSS random() been updated in Safari 26.5?

The random() CSS function, first shipped in Safari 26.2, now includes important changes. Initially, named random values like random(--size, 100px, 200px) were scoped to individual elements, but the CSS Working Group revised them to be global across elements. Safari 26.5 adopts this change and introduces the element-scoped keyword for per-element behavior. For example, applying width: random(100px, 200px); height: random(100px, 200px); to multiple boxes generates different sizes per element without a named value. To make all boxes the same random size, use named values: width: random(--w, 100px, 200px); height: random(--h, 100px, 200px);—this selects a single width and height for all. The element-scoped keyword, used like random(element-scoped --size, ...), restores the earlier per-element behavior for scenarios needing unique values per element. This flexibility is useful for dynamic layouts or generative designs.

What is color-interpolation for SVG gradients?

Safari 26.5 adds support for the color-interpolation property in SVG gradients. This feature controls how colors are blended along a gradient. By default, gradients use sRGB color space for interpolation, which can produce dull or washed-out transitions. With color-interpolation, developers can specify alternative color spaces like linearRGB for more vibrant and perceptually uniform gradient transitions. This is particularly valuable for complex SVG illustrations or data visualizations where precise color blending is crucial. The property is applied directly to SVG <linearGradient> or <radialGradient> elements. For example, adding color-interpolation="linearRGB" to a gradient ensures smoother and more natural color changes across the range. This update brings Safari in line with modern SVG standards and improves the visual quality of gradient-based graphics.

What is the ToggleEvent.source property for popovers?

The ToggleEvent.source property is a new addition for the Popover API in Safari 26.5. When a popover is shown or hidden, a toggle event fires. Previously, developers lacked direct access to the element that triggered the popover. With ToggleEvent.source, the event object now includes a source property that references the triggering element—typically the button that toggled the popover. This allows easier tracking and context management. For instance, you can check if the source is a specific button or determine its type to adjust behavior. The property is read-only and available on both beforetoggle and toggle events. This enhancement simplifies logic for complex popover interactions, such as tooltip-like behaviors or multi-button menus.

What is the Origin API?

The Origin API is a new feature in Safari 26.5 that provides a structured way to access an origin's components—scheme, host, and port—without parsing URLs manually. It introduces a parseOrigin() method on the Origin object, which returns an Origin instance with properties like .scheme, .host, and .port. This is useful for security checks, content scripts, or any application that needs to validate or compare origins consistently. The API is designed to be lightweight and efficient, reducing the need for string manipulation. It builds on existing origin-handling concepts in the web platform, offering a more ergonomic interface. For example, const origin = Origin.parseOrigin("https://example.com:443"); console.log(origin.host); outputs "example.com". Safari 26.5 is among the first browsers to implement this API, aligning with the upcoming specification.

What other improvements and bug fixes are in Safari 26.5?

Beyond the headline features, Safari 26.5 includes 63 bug fixes, making it the biggest May release of WebKit. Key areas of improvement include scroll-driven animations and Anchor Positioning, both receiving multiple fixes for reliability. Rendering at different zoom levels works more consistently, reducing visual glitches. Layout handling when a block-level element sits inside an inline element has been refined, addressing edge cases that previously caused misalignment. Additional fixes span SVG, WebRTC, networking, editing, and more. Developers will appreciate the attention to detail, especially in complex interactive scenarios. These stability enhancements ensure that new features like :open and the Origin API can be used in production with confidence, backed by a robust underlying engine.