Exploring the New Features in Safari 26.5: A Q&A Guide
Welcome to our detailed breakdown of Safari 26.5, the latest WebKit release that brings a host of exciting new features and improvements. This version introduces the :open pseudo-class, an element-scoped keyword for the random() function, color-interpolation for SVG gradients, the ToggleEvent.source property for popovers, and the Origin API. Alongside these, you'll find 63 bug fixes spanning SVG, WebRTC, networking, editing, and more. In this Q&A format, we'll answer the most common questions about these updates, helping you understand how to leverage them in your projects.
What is the new :open pseudo-class in Safari 26.5 and how does it simplify styling?
The :open pseudo-class provides a unified way to style the open state of interactive 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>. With :open, you can apply consistent styles across all these elements. For instance, use select:open { border: 1px solid skyblue; } to highlight an expanded dropdown. For <dialog>, it matches whether opened via showModal() or show(). For <input>, it applies when a picker (e.g., date picker) is displayed. This pseudo-class is a practical improvement for everyday CSS, offering progressive enhancement—browsers without support simply ignore the rules, and elements remain functional.
How does the random() function change in Safari 26.5 with the element-scoped keyword?
Safari 26.2 was the first to ship the CSS random() function. The CSS Working Group later updated how named random values are scoped. In Safari 26.5, using a named value like random(--size, 100px, 200px) now produces a global result—same random number for all elements—instead of per-element. To get per-element behavior, you can use the new element-scoped keyword. For example, random(100px, 200px) without a name generates a unique number each time it's applied, making eight <div> boxes all different sizes. If you want all boxes to share the same randomly generated width and height, use named values: width: random(--w, 100px, 200px); height: random(--h, 100px, 200px);. This selects one random number for --w and another for --h, then reuses them across all elements. This update gives developers more control over randomness in layouts.
What is color-interpolation for SVG gradients in Safari 26.5?
Color-interpolation has been added to SVG gradients, allowing you to specify how colors transition between stops. The property color-interpolation works on SVG gradient elements like <linearGradient> and <radialGradient>. You can set it to auto, sRGB, linearRGB, or other values, controlling the color space used for interpolation. For example, using linearRGB can produce smoother and more perceptually uniform gradients, especially in scientific or data visualization contexts. This feature enhances the quality and predictability of SVG gradient rendering, aligning WebKit with other modern browsers. It's a valuable tool for designers and developers working with complex SVG graphics, ensuring consistent color blending across different devices.
How does the ToggleEvent.source property improve popover handling?
The ToggleEvent.source property is a new addition to the Popover API in Safari 26.5. When a popover is toggled (shown or hidden), the toggle event fires, and the source property now indicates which element triggered the toggle. This is crucial for interactive components like tooltips or menus where you need to know the invoking button or link. Previously, developers had to track this manually via event handlers or data attributes. Now, with ToggleEvent.source, you can directly access the source element, simplifying code and improving reliability. For instance, in a dropdown menu, you can style the source button differently when the popover is open. This property works seamlessly with popover and popovertarget attributes, making it easier to build accessible and responsive UI patterns.
What is the Origin API in Safari 26.5 and what does it offer?
The Origin API is a new addition to Safari 26.5 that provides a standardized way to access information about the origin of a document or worker. It exposes an Origin interface, which can be obtained via self.origin or document.origin. This object contains properties like scheme, host, and port, making it easier to parse and compare origins without manual string manipulation. For example, you can check if a request comes from the same origin by comparing origin.host and origin.scheme. The API is designed for security-sensitive contexts, such as validating cross-origin requests or managing permissions. It aligns with the Web's ongoing focus on privacy and security, giving developers a reliable tool to enforce same-origin policies efficiently.
What major bug fixes and improvements come with Safari 26.5?
Safari 26.5 is the largest May release of WebKit yet, with 63 bug fixes addressing multiple areas. Notable fixes include improvements to scroll-driven animations and Anchor Positioning, both of which received multiple corrections for smoother behavior. Rendering at different zoom levels now works better, ensuring that layouts remain consistent when users zoom in or out. Work continues on handling layouts when block-level elements appear inside inline elements, a tricky area of CSS that now has better support. Other fixes span SVG rendering, WebRTC performance, networking reliability, and editing features. These enhancements collectively improve the stability, speed, and compatibility of Safari, making it a more robust platform for web development.
Related Articles
- docs.rs Default Build Targets: A Shift Toward Fewer, Faster Documentation Builds
- Apple’s Swift 6.3 Goes Live: New @c Attribute, Android SDK, and Cross-Platform Tooling Revolutionize Development
- Ubuntu 26.04 LTS: Your Upgrade Questions Answered
- Major Scientific Revelations: PCOS Renamed, Neanderthal Dentistry, and Trinity Test 'Alien' Crystal
- How to Get the Latest Safari Technology Preview and Explore Its New Features
- How to Avoid Project Delays: Applying Brooks' Law and Conceptual Integrity
- Microsoft Azure Accelerates European Cloud and AI Expansion Amid Surging Customer Demand
- Bringing Medieval Nubian Murals to Life: A Step-by-Step Guide to Recreating Historical Fashion