Exploring Safari Technology Preview 242: Key Updates and Improvements

Safari Technology Preview 242 is now available for download on macOS Tahoe and macOS Sequoia. This latest release brings a mix of new features and important bug fixes across accessibility, CSS, forms, HTML, and image handling. Existing users can update easily through System Settings > General > Software Update. Below, we break down the most significant changes in a Q&A format.

What is the most notable CSS addition in this release?

This version introduces support for the CSS attr() function as defined in CSS Values Level 5. Previously limited to content property, attr() can now be used in any CSS property to retrieve the value of an HTML attribute. For example, you could set a background-color based on a custom data-* attribute. This enhancement gives developers more dynamic styling options without relying on JavaScript. The implementation addresses WebKit change #310246, making Safari more competitive with other modern browsers.

How does the dialog element improve?

HTML now supports the closedby attribute on <dialog> elements. This attribute allows developers to control how a dialog is dismissed—for example, by clicking outside the dialog or pressing the Escape key. The new feature (WebKit change #310487) reduces the need for custom JavaScript to handle closing behavior, making modals more accessible and consistent across the web. Additional HTML parser fixes ensure that escaped attribute values longer than one character and nested <li> elements are processed correctly.

What accessibility issues were resolved?

Two key accessibility fixes stand out. First, VoiceOver no longer reads text inside images with role="presentation", preventing redundant or confusing announcements. Second, macOS accessibility now works properly with customizable <select> elements using appearance: base-select. This fix ensures screen readers can interact with styled select dropdowns as expected. Both corrections (WebKit changes #310483 and #310441) improve Safari's usability for people relying on assistive technologies.

Are there any fixes for media queries and iframes?

Yes, a notable bug was fixed where @media (prefers-color-scheme: dark) inside an iframe did not match when the iframe’s own color-scheme was set to dark. This caused inconsistent dark mode behavior in embedded content. The fix (WebKit change #310465) ensures that the media query respects the iframe’s color-scheme property, aligning with user expectations. Other CSS improvements include fixing position-try-order to use the containing block's writing mode and correcting percent-height replaced element width calculations.

What other CSS bugs were addressed?

Several CSS edge-case issues were resolved. Checkbox outlines are no longer misaligned (WebKit change #310323). Anchor-positioned elements anchored to children of sticky elements now stick correctly (WebKit change #310255). Pseudo-elements are sorted properly when anchoring by tree order. Ligatures no longer produce non-zero layout widths under font-size: 0 (WebKit change #310394). The :in-range and :out-of-range pseudo-classes now update when the readonly attribute changes. Additionally, view-timeline-inset serialization correctly coalesces identical values. These fixes collectively make CSS rendering more reliable.

Did forms get any attention?

One form bug was fixed: a <select multiple> element did not always fire the onchange event when the mouse button was released far outside the element. This could cause users to miss selection changes in multi-select lists. The correction (WebKit change #310482) ensures that the event triggers correctly regardless of where the mouse is released, enhancing form usability.

What about image handling?

The release notes mention a fix for inserting an image with a srcset attribute. While details are brief, this likely resolves a parsing or rendering issue where srcset images might not load or display correctly in certain scenarios. Such fixes contribute to better responsive image support and performance on Safari.