Safari Technology Preview 242: Key Updates in Q&A Format

Welcome to the latest Safari Technology Preview release, version 242, now available for macOS Tahoe and macOS Sequoia. This update brings a host of improvements spanning accessibility, CSS, forms, HTML, and image handling. Below, we break down the most notable changes in a convenient question-and-answer format.

What are the main highlights of Safari Technology Preview 242?

Safari Technology Preview 242 focuses on refining accessibility, expanding CSS capabilities, and fixing several rendering and parser bugs. Key additions include support for the CSS attr() function from CSS Values Level 5 and the oblique-only value for font-synthesis-style as defined in CSS Fonts Level 4. On the HTML side, the closedby attribute for <dialog> elements is now supported. The browser also resolves issues with VoiceOver reading decorative images, misaligned checkbox outlines, and improper handling of @media (prefers-color-scheme: dark) inside iframes. For developers, this release continues to polish the WebKit engine, making it a valuable tool for testing next-generation web features.

How does this release improve accessibility?

Accessibility receives two notable fixes. First, VoiceOver will no longer read text found within images that have role="presentation". This ensures that decorative or presentational images aren't announced to screen reader users, aligning with ARIA best practices. Second, macOS accessibility support has been improved for customizable <select> elements that use appearance: base-select. This makes custom-styled dropdowns more navigable via VoiceOver and other assistive technologies. These changes help create a more inclusive browsing experience, particularly for users relying on screen readers.

What new CSS features are included in this update?

Two notable CSS features debut in this release. The attr() function from CSS Values Level 5 is now supported, allowing authors to retrieve attribute values from HTML elements directly in CSS—useful for dynamic styling without JavaScript. Additionally, the oblique-only value for the font-synthesis-style property is added, as defined in CSS Fonts Level 4. This gives developers finer control over font synthesis, enabling them to specify that only oblique (slanted) styles should be synthesized rather than italic ones. Both features expand the expressive power of CSS and reduce reliance on workarounds.

Which CSS rendering bugs have been fixed?

Several critical CSS rendering bugs are addressed. The @media (prefers-color-scheme: dark) query now works correctly inside iframes when the iframe's color-scheme is set to dark. The position-try-order property now interprets logical axis values using the containing block's writing mode instead of the element's own writing mode. Percent-height replaced elements no longer compute stale preferred widths in shrink-to-fit containers. The table cell nowrap minimum width calculation quirk is no longer applied outside quirks mode. Checkbox outlines appear properly aligned. Anchor-positioned elements anchored to children of sticky boxes now stick correctly. Pseudo-elements are sorted properly when sorting anchor elements by tree order. Ligatures no longer cause non-zero layout width for text with font-size: 0. The :in-range and :out-of-range pseudo-classes update correctly when the readonly attribute changes. Lastly, view-timeline-inset serialization now coalesces identical values.

What changes were made to forms and HTML parsing?

In forms, a fix ensures that <select multiple> properly fires the onchange event when the mouse button is released far outside the element. This improves consistency for multi-select dropdowns. For HTML, the closedby attribute on <dialog> elements is now supported, letting developers control how dialogs can be dismissed (e.g., by pressing Escape or clicking outside). Additionally, the HTML parser's fast path has been fixed to correctly process escaped attribute values longer than one character, detect nested <li> elements, and use the adjusted current node for MathML and SVG integration point checks. These parser improvements enhance reliability when parsing complex documents.

What image-related issue was resolved?

The release fixes a problem where inserting an image with a srcset attribute into the DOM could cause rendering issues. Although the release notes do not specify the exact symptoms, this fix ensures that responsive images defined via srcset are handled correctly when dynamically added to the page. This is particularly important for web applications that load images asynchronously or manipulate the DOM after initial page load.