Exploring the Latest CSS and WebKit Updates in Safari 26.5

Safari 26.5 arrives with a series of enhancements that refine both CSS capabilities and overall WebKit performance. This release brings the :open pseudo-class, an updated random() function with element-scoped support, and key fixes for scroll-driven animations, anchor positioning, and SVG gradients. With 63 bug fixes in total, this is the most polished May update yet, addressing areas like SVG, WebRTC, networking, and editing. Below, we dive into the most notable features and improvements.

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

The :open pseudo-class provides a unified way to target the open state of interactive elements like <details>, <dialog>, <select>, and <input>. Previously, developers had to rely on the [open] attribute selector for <details> and <dialog>, but that approach didn't work for <select> or <input> — and using an attribute selector for a stateful condition was never ideal. With :open, you can style all these elements consistently. For a <dialog>, it matches whether opened via showModal() or show(). For <input>, it applies when a picker like a date or color chooser is displayed. For <select>, it triggers when the dropdown expands. Example: select:open { border: 1px solid skyblue; }. This is a straightforward progressive enhancement — unsupporting browsers simply ignore the rule, and the element continues to function normally.

Exploring the Latest CSS and WebKit Updates in Safari 26.5 — Source: webkit.org

How has the CSS random() function evolved with element-scoped values?

Safari led the way by shipping the random() CSS function in version 26.2. Since then, the CSS Working Group refined how named random values behave. In Safari 26.5, using a named value like random(--size, 100px, 200px) produces a global random result — shared across all elements using that name. But for cases where you need each element to have its own independent random value, a new element-scoped keyword is now available. For example, without a name, random(100px, 200px) generates a new number per property per element, giving eight boxes all different sizes. To make all boxes the same size, you set random(--w, 100px, 200px) which picks one random width for all. The element-scoped variant lets you combine both needs: a random value that is unique per element but consistently reused across properties within that element.

What improvements have been made to scroll-driven animations and anchor positioning?

This release addresses multiple bugs in both scroll-driven animations and anchor positioning, making them more reliable. Scroll-driven animations, which tie CSS animations to scroll progress, now handle edge cases better, such as when the timeline is attached to a scroller that changes size or is removed from the DOM. Anchor positioning, used for placing elements relative to designated anchors, has also received fixes. These include improved behavior when the anchor element moves or when the positioned element is inside a containing block with transforms. While these are incremental fixes, they are critical for developers building rich, scroll-linked experiences and complex overlay menus. The work reflects WebKit's ongoing commitment to polishing these advanced features for production use.

What is the Origin API and how does it benefit developers?

The Origin API provides a standardized way to access the origin of a resource — that is, the scheme, host, and port combination — from within JavaScript. Previously, developers often parsed the location.origin or used string manipulation on URLs, which could be error-prone, especially in workers or cross-origin contexts. The new API exposes origin consistently across Window, Worker, and other global scopes. It returns a string like "https://example.com:443" or the special value "null" for opaque origins. This simplifies code that needs to compare origins for security checks, CORS handling, or dynamic content loading. Safari 26.5 implements the specification as part of a broader effort to align with other browsers and reduce the need for polyfills.

How does Safari 26.5 improve SVG gradients with color-interpolation?

SVG gradients now support the color-interpolation attribute, allowing developers to specify the color space used for smoother gradient transitions. By setting color-interpolation="sRGB" or linearRGB on a gradient element, you can control how colors are mixed. For example, linearRGB often produces more perceptually uniform transitions between colors, reducing banding in gradients that span wide color ranges. This feature is particularly useful for data visualizations, icons, and any SVG graphic requiring high-quality rendering. The implementation aligns with the SVG 2 specification and modern CSS gradient behavior, giving Web designers more precise control over SVG styling directly via markup or CSS.

What are the key bug fixes and quality improvements in this release?

Safari 26.5 includes 63 bug fixes, making it the largest May update for WebKit. The fixes span multiple areas: SVG rendering, WebRTC stability, networking reliability, and editing behaviors. Notable improvements include better handling of layouts when a block-level element is nested inside an inline element, and correctness improvements for zoom-level rendering. Scroll-driven animations and anchor positioning each received multiple fixes. Additionally, WebRTC saw patches for ICE candidate gathering and media stream handling. These enhancements collectively reduce crashes, improve performance, and ensure that web applications behave consistently. While not always visible to end-users, they are crucial for developers building complex, interactive sites. The release underscores WebKit's dedication to ongoing quality refinement.

Tags: