Safari 26.5: Key Q&A on New WebKit Features
Welcome to our Q&A on Safari 26.5, a major update that introduces several powerful new features and significant bug fixes. This release brings the :open pseudo-class, an enhanced random() function, the ToggleEvent.source property for popovers, the Origin API, and 63 bug fixes across areas like SVG, WebRTC, networking, and editing. Scroll-driven animations and Anchor Positioning also receive crucial improvements. Below, we answer the most important questions about these updates.
What is the new :open pseudo-class in Safari 26.5?
The :open pseudo-class provides a consistent way to style elements that can be in an open or closed state, such as <details>, <dialog>, <select>, and <input>. Previously, developers relied on the [open] attribute selector, but that only worked for <details> and <dialog>—not <select> or <input>. The new pseudo-class unifies styling across all these elements. For <dialog>, it matches when shown via showModal() or show(). For <input>, it applies when a picker (like a date or color picker) is displayed. For <select>, it triggers when the dropdown expands. Example: select:open { border: 1px solid skyblue; }. This is a progressive enhancement—browsers without support simply ignore the rule, and the element functions normally.
How does the element-scoped keyword enhance CSS random()?
In Safari 26.2, the CSS random() function was introduced. It allowed generating random values for properties, but each use created an independent value. For instance, .box { width: random(100px, 200px); height: random(100px, 200px); } on eight boxes gave eight different sizes. However, the CSS Working Group later changed how named random values work. Using a name like random(--size, 100px, 200px) originally produced a per-element result, but now it creates a globally shared value across all elements using the same name. To restore per-element behavior, Safari 26.5 introduces the element-scoped keyword. Writing random(element-scoped --size, 100px, 200px) ensures each element gets its own unique random value named --size, while omitting the keyword keeps the value consistent across all instances. This gives developers fine-grained control over randomness in layouts.
What is the ToggleEvent.source property for popovers?
The ToggleEvent.source property is part of the Popover API, which allows developers to create interactive overlays like tooltips or menus. When a popover is toggled (shown or hidden), a ToggleEvent is fired. The source property of this event references the element that triggered the toggle, such as a button clicked by the user. This is useful for customizing behavior based on the requesting element. For example, if multiple buttons open different popovers, you can identify which button was pressed and adjust the popover's content or position accordingly. This feature enhances the interactivity and control developers have over popover components, making it easier to build accessible, dynamic UIs without complex JavaScript.
What is the Origin API and how does it work?
The Origin API is a new web platform feature that provides a programmatic way to access the origin of the current document or a request. An origin is defined by the scheme (protocol), hostname, and port number (e.g., https://example.com:443). This API exposes a simple JavaScript method — globalThis.origin or similar — to retrieve the origin string. It simplifies tasks like checking whether a resource is same-origin, or building URLs that need to be relative to the current origin. Previously, developers had to manually parse window.location to extract this information. The Origin API streamlines security checks and URL construction, especially in Service Workers or when dealing with cross-origin requests. In Safari 26.5, this feature is fully supported, making it easier to write robust, security-conscious code.
How many bug fixes are in Safari 26.5 and what areas do they cover?
Safari 26.5 includes a total of 63 bug fixes, making it the largest May release of WebKit to date. These fixes span a wide range of areas: SVG rendering, WebRTC, networking, editing, and layout. Scroll-driven animations and Anchor Positioning, both of which are relatively new features, received multiple targeted fixes. Rendering at different zoom levels has been improved to be more accurate and consistent. Additionally, work continues on handling layouts where a block-level element is nested inside an inline element — a historically tricky area. This comprehensive set of fixes shows Apple's commitment to polishing the browser engine and ensuring developer feedback leads to tangible improvements.
What improvements were made to scroll-driven animations and anchor positioning?
Scroll-driven animations and Anchor Positioning are two relatively new CSS features that saw multiple bug fixes in Safari 26.5. For scroll-driven animations, which allow elements to animate based on scroll position, the fixes address timing accuracy, scoping, and performance issues. Anchor Positioning, which lets you position elements relative to other elements (like tooltips near buttons), had bugs related to calculation of anchor positions and interaction with scrolling contexts. These improvements make both features more reliable for production use. Developers can now build scroll-linked animations and precisely placed overlays with greater confidence, knowing that edge cases like nested scrollers or dynamic content changes are handled correctly.
How does Safari 26.5 improve handling of block elements inside inline elements?
A longstanding challenge in CSS is what happens when a block-level element (like a <div> or <h1>) is placed inside an inline element (like a <span> or <a>). According to the HTML spec, this creates an anonymous block box, which can cause unexpected layout and style issues. Safari 26.5 continues ongoing work to improve how WebKit handles this scenario. The fixes ensure that margins, padding, and widths are computed correctly, and that inline elements containing block children render more predictably. This is part of a broader effort to align with the CSS specification and improve consistency across browsers. Web developers dealing with complex nested structures will see fewer layout surprises, leading to more robust and maintainable stylesheets.