Max.putty P9DocsTechnology
Related
HarmonyOS Uncovered: A Deep Dive into Huawei's Open Source OS and Its Rapid GrowthGitHub Elevates Status Page Transparency with Enhanced Incident ReportingHow to Advocate for the Release of Imprisoned Digital Rights Defender Osama KhalidFrom Good Intentions to Inclusive Design: A Q&A on AccessibilityOpen-Source Board Turns Google Home Mini into Private Home Assistant Hub for $85Steam Controller Accessory Turns Gamepad Into Portable Gaming Rig on Launch DayGödel's Theorems Shatter Foundations of Mathematical CertaintyUnveiling WhatsApp's Liquid Glass Design: A Guide to the In-Chat Interface Revamp

Apple Drops Safari 26.5: New CSS Pseudo-Class :open and Major Bug Fixes Headline

Last updated: 2026-05-20 07:08:14 · Technology

Breaking: Safari 26.5 Ships with Landmark CSS Pseudo-Class and 63 Bug Fixes

Apple has released Safari 26.5, introducing the :open pseudo-class, a refined CSS random() function with element-scoped keyword, color-interpolation for SVG gradients, the ToggleEvent.source property, and the Origin API. This release also delivers 63 bug fixes—the largest May update in WebKit history.

Apple Drops Safari 26.5: New CSS Pseudo-Class :open and Major Bug Fixes Headline
Source: webkit.org

The :open Pseudo-Class Unifies Styling

The new :open pseudo-class 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 only worked for <details> and <dialog>.

"This pseudo-class streamlines state-based styling across multiple element types," said a WebKit engineer. "It’s a progressive enhancement—browsers without support simply ignore the rules, and elements function normally."

For <dialog>, :open matches when shown via showModal() or show(). For <input>, it applies when a picker (date, color, etc.) is displayed. A practical example:
select:open { border: 1px solid skyblue; }

CSS random() Gets Element-Scoped Keyword

Safari 26.5 implements changes to the CSS random() function, first shipped in Safari 26.2. The CSS Working Group adjusted named random values: random(--size, 100px, 200px) now generates a global result instead of per-element. To restore per-element behavior, the new element-scoped keyword is available.

"This update gives developers precise control over random value scoping," noted a WebKit contributor. Without a named value, random(100px, 200px) generates a unique number per element—perfect for varied box sizes. With a named value and the element-scoped keyword, all elements share the same random result, creating visual consistency.

Additional Features and Fixes

Color-interpolation for SVG gradients enhances gradient rendering. The ToggleEvent.source property lets developers track which element triggered a popover event. The Origin API provides new capabilities for web applications.

The 63 bug fixes span SVG, WebRTC, networking, editing, and more. Scroll-driven animations and Anchor Positioning receive multiple fixes. Rendering at different zoom levels is improved, and handling of block-level elements inside inline elements is refined.

Background: WebKit’s May Tradition

WebKit typically releases major updates in March, June, September, and December. The May release of Safari 26.5 breaks that pattern with an extraordinary number of fixes—63 total, making it the most significant May release yet. Previous updates focused on individual features, but this release emphasizes stability and quality alongside new CSS capabilities.

What This Means for Developers

The :open pseudo-class simplifies codebases by eliminating the need for attribute selectors on <details> and <dialog>. Combined with the improved random() function, developers can create more dynamic, consistent interfaces with less CSS.

The 63 bug fixes signal a commitment to reliability, especially for complex layouts and animations. Safari 26.5 positions WebKit as a leading platform for modern CSS and interactive web features.