Is Safari 26.5 available on macOS Sonoma?

Yes. Safari 26.5 is available for iOS 26.5, iPadOS 26.5, visionOS 26.5, macOS 26.5, macOS Sequoia, and macOS Sonoma. It was released on May 11, 2026. WebKit features for Safari 26.5 were detailed by Jen Simmons on the WebKit blog.

Safari 26.5 New CSS and Web Features: Complete Developer Guide

Q: What is the :open pseudo-class in CSS?

The :open pseudo-class provides a unified way to style the open state of interactive elements like <details>, <dialog>, <select>, and <input>. It replaces the [open] attribute selector which only worked on <details> and <dialog> but not on <select> or <input> elements.

Q: What changed in CSS random() in Safari 26.5?

Named random values like random(--size, 100px, 200px) now create a global result instead of being scoped to individual elements. Safari 26.5 also added the element-scoped keyword for when you need per-element behavior, and removed the deprecated element-shared keyword.

Q: Does Safari 26.5 support color-interpolation for SVG gradients?

Yes. Safari 26.5 adds support for the color-interpolation property in SVG gradient contexts, including the linearRGB value. This allows developers to control how colors are interpolated along SVG gradients for more accurate color transitions.

Q: How many bug fixes does Safari 26.5 include?

Safari 26.5 includes 63 bug fixes, making it the biggest May release of WebKit yet. Notable fixes include improvements to scroll-driven animations, Anchor Positioning across multiple chained elements, CSS Grid subgrid sizing, SVG rendering, WebRTC stability, and zoom-level rendering accuracy.

What's New in Safari 26.5

On May 11, 2026, Apple released Safari 26.5, the latest version of its flagship browser. While not a revolutionary release, Safari 26.5 brings meaningful improvements to CSS authoring, web APIs, and overall browser quality that every web developer should know about.

The headline features include the :open pseudo-class for styling interactive element states, CSS random() enhancements with global named values and a new element-scoped keyword, color-interpolation support for SVG gradients, the ToggleEvent.source property for the Popover API, and the new Origin API for structured origin comparisons. But the real story is the sheer volume of fixes — 63 bug fixes make this the most quality-focused May release in WebKit's history.

Let's dive into each feature with practical code examples and real-world context.

CSS

:open Pseudo-Class

Unified styling for open <details>, <dialog>, <select>, and <input> elements. Replaces the limited [open] attribute selector.

CSS

random() Improvements

Global named values by default, new element-scoped keyword for per-element randomness. Removed deprecated element-shared.

CSS

SVG color-interpolation

New property for controlling color interpolation in SVG gradients, including linearRGB color space support.

JS / API

ToggleEvent.source

Identifies which element triggered popover toggling. Simplifies complex popover interactions and event handling.

JS / API

Origin API

Structured API for origin-based operations — scheme, host, and port access without manual URL parsing.

Quality

63 Bug Fixes

Scroll-driven animations, Anchor Positioning, CSS Grid, SVG, WebRTC, zoom rendering, and more receive significant fixes.

1. The :open Pseudo-Class — A Unified Way to Style Open States

The :open pseudo-class is the most immediately useful CSS feature in Safari 26.5. It provides a single, consistent way to style the open state of several interactive elements that previously had inconsistent styling support.

Before :open — The [open] Attribute Selector Approach

Previously, the only way to style an open <details> or <dialog> was the [open] attribute selector. This worked for those two elements, but had no effect on <select> dropdowns or <input> pickers (date pickers, color pickers, etc.).

/* Old approach — attribute selector, limited scope */
details[open] {
  border: 2px solid #0071e3;
}
dialog[open] {
  border: 2px solid #0071e3;
}
/* Could NOT style open select or input pickers */
    

After :open — The Modern Approach

With :open, you write one selector that works across all four element types:

/* New approach — consistent across all element types */
:open {
  border-color: #0071e3;
}

/* Specific element types */
details:open {
  background: #f0f5ff;
}
details:open summary {
  font-weight: 600;
  color: #0071e3;
}
dialog:open {
  box-shadow: 0 8px 40px rgba(0, 113, 227, 0.15);
}
select:open {
  border: 1px solid skyblue;
}
    

For <dialog>, :open matches whether the dialog was opened with showModal() or show(). For <input>, it applies when an associated picker is displayed — date pickers, color pickers, and similar native controls.

This is a clean progressive enhancement: browsers that don't support :open simply ignore the rules, and the elements function normally. No polyfill required.

2. CSS random() Improvements — Global Named Values and element-scoped

Safari was the first browser to ship CSS random() in version 26.2 (December 2025). Since then, the CSS Working Group refined the specification, and Safari 26.5 implements the changes including the new element-scoped keyword.

Unnamed random() — Per-Instance Results

Without a named value, random() generates a fresh number every time it's evaluated. This gives each element a unique value:

/* Each .box gets its own random width and height */
.box {
  width: random(100px, 200px);
  height: random(100px, 200px);
  background: random(var(--blue), var(--green), var(--red));
}
    

Named random() — Global Results (New Default in 26.5)

Using a custom property identifier as the first argument creates a named random value. In Safari 26.5, these names are globally scoped — all instances of the same name share one random result across the entire document.

/* All .box elements share the same random width and height */
.box {
  width: random(--box-w, 100px, 200px);
  height: random(--box-h, 100px, 200px);
}
/* Every box with --box-w gets the same value across the page */
    

The change from Safari 26.2 (where named values were per-element) to Safari 26.5 (global by default) means that previously authored CSS using named random() will behave differently. This is a spec-level change, and Safari 26.5 aligns with the updated specification.

element-scoped — When You Need Per-Element Randomness

The new element-scoped keyword restores per-element behavior when you need it. The deprecated element-shared keyword has been removed.

/* Each element gets its own unique random value */
.box {
  width: random(element-scoped, 100px, 200px);
  height: random(element-scoped, 100px, 200px);
}
    

As a practical showcase, imagine generating a colorful set of cards where each card gets a random background, but you want the title text and border to match consistently:

/* Card with matching random colors */
.card {
  background: random(--card-bg, #f0f5ff, #fff3cd, #d1fae5);
  border-color: random(--card-border, #0071e3, #ffc107, #059669);
}
.card h3 {
  color: random(--card-border, #0071e3, #ffc107, #059669);
}
/* Using --card-border ensures h3 color matches the card's border ✨ */
    

3. color-interpolation for SVG Gradients

Safari 26.5 adds support for the color-interpolation property in SVG gradient contexts. This property controls how colors are interpolated between gradient stops, supporting both auto (default) and linearRGB values.

The linearRGB value uses a linear RGB color space, which produces more perceptually uniform color transitions compared to the default sRGB interpolation. This is particularly noticeable in blue-to-purple gradients and other transitions where sRGB interpolation can produce muddy midpoints.

<!-- SVG gradient with linearRGB color interpolation -->
<linearGradient id="smoothGradient"
    x1="0%" y1="0%"
    x2="100%" y2="0%"
    color-interpolation="linearRGB">
  <stop offset="0%" stop-color="#0066ff"/>
  <stop offset="50%" stop-color="#00ccff"/>
  <stop offset="100%" stop-color="#33ff99"/>
</linearGradient>
    

This is especially useful for data visualizations, icon sets, and any SVG-heavy UI where gradient quality matters. Combined with SVG animations, linearRGB interpolation produces significantly smoother color transitions.

4. ToggleEvent.source Property — Better Popover Handling

The Popover API has been a game-changer for building overlays, tooltips, and menus without JavaScript libraries. Safari 26.5 adds the ToggleEvent.source property, which identifies which element triggered the toggling of a popover target.

Previously, if you had multiple buttons that could open the same popover, you had to manually track which button was clicked. Now ToggleEvent.source gives you this information directly:

// Multiple triggers for one popover
const popover = document.getElementById("my-popover");

popover.addEventListener("toggle", (event) => {
  // event.source tells you which element triggered the toggle
  if (event.newState === "open") {
    console.log("Opened by:", event.source?.id || event.source);
    // Update UI based on which button was clicked
    const button = event.source;
    button?.classList.add("active-source");
  } else if (event.newState === "closed") {
    console.log("Closed by:", event.source?.id || event.source);
  }
});
    

This is a small API addition, but it significantly simplifies building complex popover interactions — like context menus, action sheets, and multi-trigger tooltip systems — without resorting to data attributes or closure-based tracking.

5. The Origin API — Structured Origin Operations

Safari 26.5 introduces the Origin API, a new JavaScript interface for origin-based operations. While the full API surface is still evolving, it provides programmatic access to origin components — scheme, host, and port — without manual URL parsing.

// The new Origin API
const origin = new URL("https://example.com:8080/path?q=1").origin;

// Instead of manual URL parsing:
const url = new URL("https://example.com:8080/path");
console.log(url.origin);  // "https://example.com:8080"
console.log(url.protocol); // "https:"
console.log(url.host);     // "example.com:8080"
console.log(url.hostname); // "example.com"
console.log(url.port);     // "8080"
    

This API is useful for:

Security checks — validating that third-party scripts are loaded from expected origins
Service Worker scoping — verifying which origins a SW controls
Cross-origin request validation — building CORS-related tooling
Origin-based configuration — loading environment-specific settings based on the origin

6. 63 Bug Fixes — The Biggest May Release Yet

The quantity and quality of bug fixes in Safari 26.5 is remarkable. Jen Simmons at WebKit described it as "the biggest May release of WebKit yet," with improvements spanning nearly every subsystem:

Scroll-Driven Animations

Fixed scroll animation timeline range names, pause-on-dynamic-state, view timeline near-boundary progress values, and back-forward cache restoration.

Anchor Positioning

Fixed chains of 3+ anchor-positioned elements, anchor() fallback with unitless zero, display:contents anchor scope, and sticky-children anchoring.

CSS Grid & Layout

Subgrid inside grid-lanes sizing, collapsed border table rowspan, absolutely positioned elements in block-in-inline containers, and column-count:1 text display.

Zoom & Units

Fixed lh/rlh double-zoom with number line-height, aspect-ratio on zoomed pages, and evaluation-time zoom for unzoomed properties.

Font & Text

Fixed @font-face fallback with different styles, hanging-punctuation handling of U+0027/U+0022, and ideographic space hanging.

SVG & WebRTC

Significant SVG rendering improvements and WebRTC stability fixes across multiple scenarios.

Notable individual fixes include: :has(:empty) invalidation when child content changes, display: contents anchor scope establishment, and chained anchor-positioned element resolution. The lh and rlh unit fixes are especially important for anyone using line-height-based CSS sizing.

FAQ

What is the :open pseudo-class in CSS?

The :open pseudo-class provides a unified way to style the open state of interactive elements like <details>, <dialog>, <select>, and <input>. It replaces the [open] attribute selector which only worked on <details> and <dialog> but not on <select> or <input> elements. It's available in Safari 26.5 and beyond, and is designed as progressive enhancement — browsers without support simply ignore the rules.

What changed in CSS random() in Safari 26.5?

Named random values like random(--size, 100px, 200px) now create a global result instead of being scoped to individual elements. This aligns with the updated CSS specification. Safari 26.5 also added the element-scoped keyword for when you need per-element behavior, and removed the deprecated element-shared keyword. Previously-authored CSS using named random() in Safari 26.2 may produce different results in 26.5 due to this spec change.

Does Safari 26.5 support color-interpolation for SVG gradients?

Yes. Safari 26.5 adds support for the color-interpolation property in SVG gradient contexts, including the linearRGB value. This allows developers to control how colors are interpolated along SVG gradients for more accurate and perceptually uniform color transitions, especially in blue-to-purple gradients where sRGB interpolation can produce muddy midpoints.

What is ToggleEvent.source in Safari 26.5?

ToggleEvent.source is a new property on the ToggleEvent interface that identifies which element triggered the toggling of a popover target. When you have multiple buttons that can open the same popover, event.source tells you which one was clicked, eliminating the need for data attributes or closure-based tracking. This simplifies building complex popover interactions like context menus, action sheets, and multi-trigger tooltips.

What is the new Origin API in Safari 26.5?

The Origin API provides a structured way to perform origin-based operations in JavaScript. It gives developers access to origin components (scheme, host, port) through standard URL parsing. It's useful for security checks (validating third-party script origins), Service Worker scoping, cross-origin request validation, and origin-based configuration loading.

How many bug fixes does Safari 26.5 include?

Safari 26.5 includes 63 bug fixes, making it the biggest May release of WebKit yet. Notable areas include: scroll-driven animations (5 fixes), Anchor Positioning (5+ fixes), CSS Grid and layout (4 fixes), zoom-level rendering and CSS units (4 fixes), font and text (3 fixes), editing, SVG, WebRTC, networking, and accessibility. Key individual fixes include :has(:empty) invalidation, chained anchor-positioned element resolution, and lh/rlh unit double-zoom correction.

Is Safari 26.5 available on older macOS versions?

Yes. Safari 26.5 is available for iOS 26.5, iPadOS 26.5, visionOS 26.5, macOS 26.5, macOS Sequoia 15, and macOS Sonoma 14. It was released on May 11, 2026. The WebKit Features post by Jen Simmons provides the authoritative details on all new features and changes. For the complete list of resolved issues, see the Safari 26.5 Release Notes on Apple Developer.

Should You Upgrade?

Safari 26.5 is a free update available through macOS Software Update, iOS/iPadOS Settings, and visionOS. For most users and developers, there's no reason not to upgrade — the new features are backward-compatible, and the 63 bug fixes make everyday browsing and development smoother.

The :open pseudo-class and CSS random() improvements are the standouts for frontend developers. The ToggleEvent.source property and color-interpolation support are more niche but valuable for popover-heavy interfaces and SVG-heavy designs respectively.

Bottom line: Safari 26.5 demonstrates Apple's renewed commitment to WebKit quality. It may not have the headline-grabbing features of a major annual release, but the cumulative effect of 63 fixes across scroll animations, anchor positioning, layout, and zoom makes the web platform noticeably more robust. For developers supporting Safari users, testing against 26.5 is well worth the effort.

Need Help With Cross-Browser Development?

Keeping up with browser updates across Safari, Chrome, and Firefox is a full-time job. If you're building a web application and need it to work reliably across all modern browsers — including the latest Safari features — I can help.

I'm a full-stack developer with 20+ years of experience building for the web, with deep expertise in cross-browser compatibility, modern CSS, and JavaScript APIs. Based in Minsk and working worldwide, let's discuss your project.

Safari 26.5 New CSS and Web Features:Complete Developer Guide