Everything New in Safari Technology Preview 242: Q&A

Welcome to our Q&A breakdown of Safari Technology Preview 242, the latest experimental release from Apple. This version, available for macOS Tahoe and macOS Sequoia, introduces notable improvements in accessibility, CSS, forms, HTML parsing, and image handling. Whether you're a web developer or a tech enthusiast, these updates refine performance and standards compliance. Below, we answer seven key questions about the most important changes. Use the links to jump to specific topics: Overall Release, Accessibility Fixes, New CSS Features, CSS Bug Fixes, Forms Improvement, HTML Enhancements, Image Handling Fix.

What is Safari Technology Preview 242 and how do I get it?

Safari Technology Preview 242 is a new experimental build of Apple's browser, designed for developers to test upcoming WebKit features. It is available for download on macOS Tahoe and macOS Sequoia. If you already have a previous Technology Preview installed, you can update it through System Settings under General → Software Update. This release incorporates WebKit changes between revisions 310187@main and 310599@main, covering a wide range of bug fixes and feature additions. The build aims to improve rendering, accessibility, and standards support, making it a valuable tool for testing web compatibility before these changes land in the stable Safari release.

Everything New in Safari Technology Preview 242: Q&A — Source: webkit.org

What accessibility issues were resolved in this update?

Two important accessibility fixes were included. First, a problem where VoiceOver incorrectly read text within images that had role="presentation" has been resolved. This ensures that assistive technologies no longer announce decorative images, improving the browsing experience for users relying on screen readers. Second, macOS accessibility support was fixed for customizable <select> elements using the appearance: base-select CSS property. Previously, these custom dropdowns might not have been fully accessible on macOS, but now they work correctly with VoiceOver and other assistive tools. These fixes highlight WebKit's commitment to making the web more inclusive.

What new CSS features does Safari Technology Preview 242 support?

Two CSS enhancements join the lineup. The attr() function from the CSS Values and Units Module Level 5 specification is now supported. This allows authors to retrieve the value of an attribute from the selected HTML element and use it directly in CSS, enabling more dynamic styling without JavaScript. Additionally, the oblique-only value for the font-synthesis-style property, as defined in CSS Fonts Level 4, has been added. This gives developers finer control over font synthesis, allowing them to specify that only oblique (slanted) styles should be synthesized, not italic ones. These additions expand creative possibilities while aligning with modern CSS standards.

What are the key CSS bug fixes in this release?

Several CSS issues were corrected. Notably, the @media (prefers-color-scheme: dark) query inside an iframe now works correctly 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 mode. A problem where percent-height replaced elements computed stale preferred widths in shrink-to-fit containers was fixed. The table cell nowrap minimum width calculation quirk is now only applied in quirks mode as intended. Checkbox outlines no longer appear misaligned. Anchor-positioned elements anchored to children of sticky boxes now stick properly. Pseudo-elements now sort correctly 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. Finally, view-timeline-inset serialization now coalesces identical values as expected.

What forms issue was fixed in this build?

A specific problem with <select multiple> elements was resolved. In previous versions, if you clicked on an option and then released the mouse button far outside the element, the onchange event might not fire. This has been fixed so that the change event triggers reliably regardless of where the mouse is released, as long as the selection changed. This improvement ensures consistent behavior for multi-select dropdowns, especially in scenarios where users click and drag. Web developers can now expect more predictable form behavior, which is crucial for applications that depend on change events for validation or dynamic updates.

What HTML enhancements and fixes are included?

A noteworthy new feature: the closedby attribute is now supported on <dialog> elements. This attribute lets developers specify how a dialog can be closed—by clicking outside, pressing Escape, or other triggers—offering more control over user interaction. On the fix side, the HTML parser fast path received three improvements: it now correctly processes escaped attribute values longer than one character, detects nested <li> elements properly, and uses the adjusted current node for MathML and SVG integration point checks. These parser fixes enhance compatibility with complex HTML structures and improve rendering accuracy for mathematical and vector content.

What image handling issue was resolved?

An issue was fixed where inserting an image with a srcset attribute into the DOM could cause unexpected behavior. The exact nature of the problem (the original notes cut off) likely involved improper rendering or selection of the incorrect source from the srcset list. This fix ensures that responsive images defined with srcset load and display correctly, following the intended resolution or viewport-based selection. For web developers using responsive image techniques, this improvement means more reliable visual output across different devices and screen sizes, reducing the chance of broken or mismatched images in their layouts.