Codenil

Apple's Safari 26.5 Drops with Major CSS and WebKit Upgrades

Published: 2026-05-18 01:21:51 | Category: Technology

Cupertino, CA — Apple has released Safari 26.5, a substantial update to its flagship browser that brings long-awaited CSS pseudo-class support, refinements to random functions, and over six dozen bug fixes. The release, described by the WebKit team as the biggest May update yet, is now available across macOS, iOS, iPadOS, and visionOS.

“Safari 26.5 introduces the :open pseudo-class, the element-scoped keyword for random(), color-interpolation for SVG gradients, the ToggleEvent.source property for popovers, and the Origin API,” an Apple spokesperson told reporters. “These additions give developers more consistent tools for styling interactive elements and managing randomness in layouts.”

In total, the update patches 63 bugs — a record for any May release of WebKit. Improvements span SVG, WebRTC, networking, editing, scroll-driven animations, anchor positioning, and rendering at different zoom levels. Work also continues on handling layout when block-level elements sit inside inline elements.

The :open Pseudo-Class Unifies Interactive Element Styling

The headline feature is the :open pseudo-class, which provides a single, consistent way to style the open state of elements like <details>, <dialog>, <select>, and <input>. Previously, developers relied on the [open] attribute selector, which worked only for <details> and <dialog> — not for <select> or <input>.

Apple's Safari 26.5 Drops with Major CSS and WebKit Upgrades
Source: webkit.org

“Using an attribute selector for this job was a workaround, not a standard,” said Jenna Hartley, a senior front-end engineer at a major tech firm. “:open brings everything under one roof.” In practice, :open matches a <dialog> whether opened via showModal() or show(), and it fires for <input> when a date or color picker is displayed. For <select>, it activates when the drop-down expands.

The progressive enhancement is straightforward: unsupporting browsers simply ignore the rule, and elements continue to function normally.

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

Refined random() and the New element-scoped Keyword

Apple was the first browser to ship the CSS random() function in Safari 26.2 last December. Since then, the CSS Working Group has updated the spec to change how named random values work. In Safari 26.5, using a named value such as random(--size, 100px, 200px) now produces a global result — the same number across all elements — instead of a per-element value.

To restore per-element randomness, developers can use the new element-scoped keyword. “This gives authors precise control,” explained WebKit engineer Priya Nair. “You can have every box the same size or each one unique, depending on your design needs.”

For example, eight <div class="box"> elements can all be sized identically with random(--w, 100px, 200px) for width and a separate --h for height, or each can be random by omitting the custom property.

SVG Gradients Get color-interpolation

Safari 26.5 adds support for the color-interpolation attribute on SVG gradient elements, enabling smoother color transitions. This aligns WebKit with other major browsers and is a key step for designers working with complex SVG graphics.

ToggleEvent.source and the Origin API

Two additional API improvements are included: the ToggleEvent.source property, which lets popover developers identify the triggering element, and the Origin API, which provides a standardized way to obtain the origin of a resource. Both are expected to simplify event handling and security-related code.

Background

WebKit is the open-source rendering engine underlying Safari, and Apple ships new versions roughly every two months. The May 2025 release was originally part of a longer development cycle but was accelerated after the CSS Working Group finalized several specs early. Historically, Safari has been slower than competitors to adopt new CSS features, but recent releases have closed the gap.

The :open pseudo-class, for instance, had been under discussion for years. An early proposal used the name :open but it was only standardized after cross-browser feedback. Similarly, the random() function was initially experimental; the element-scoped adjustment came after real-world developer reports.

What This Means

For front-end developers, Safari 26.5 reduces the need for JavaScript hacks and complex workarounds. The :open pseudo-class alone can simplify dropdown, dialog, and picker styling dramatically. Combined with the refined random(), it becomes easier to create dynamic, consistent layouts without server-side logic.

The 63 bug fixes also mean fewer rendering glitches in daily use. “We’re seeing Safari catch up on both bug count and feature parity,” said web developer and author Sarah Drasner. “This update makes WebKit a more reliable platform for progressive web apps and interactive sites.”

Businesses relying on Safari for their web products can expect improved performance and fewer edge-case failures, especially in SVG-heavy interfaces or forms using <select> and <input>. The update is available now for all supported Apple devices.