Safari Technology Preview 242: 10 Key Updates You Need to Know

Apple has released Safari Technology Preview 242, available for download on macOS Tahoe and macOS Sequoia. If you already have the preview installed, you can update via System Settings > General > Software Update. This build incorporates WebKit changes from revision 310187 to 310599, bringing a host of refinements across accessibility, CSS, forms, HTML, and images. In this article, we break down the ten most impactful updates—from new CSS functions to critical bug fixes—to help you stay ahead of the curve. Jump to a specific section using the links below: Accessibility, CSS attr(), Font & Dark Mode, Layout & Positioning, Anchor Positioning, Ligature Fix, Form Events, Dialog closedby, HTML Parser, Images.

1. Accessibility Improvements

This release addresses two notable accessibility issues. First, VoiceOver will no longer read text within images that have role="presentation", ensuring that decorative images remain silent for screen reader users. Second, macOS accessibility now fully supports customizable <select> elements using the appearance: base-select property, making custom select widgets interact correctly with assistive technologies. These fixes enhance the browsing experience for users with disabilities, aligning Safari with modern web standards and improving platform inclusivity.

2. CSS attr() Function Support (CSS Values Level 5)

Safari now supports the attr() function as defined in CSS Values Level 5. This powerful addition allows developers to retrieve attribute values from HTML elements and use them directly in CSS—for example, setting content or dimensions based on a data attribute. While the Level 4 specification limited attr() to the content property, Level 5 expands its use to any CSS property, enabling more dynamic and data-driven styling without JavaScript. This is a significant step forward for declarative theming and responsive layouts.

3. Font Synthesis and Dark Mode Fixes

Two important CSS improvements: font-synthesis-style now accepts the oblique-only value, giving developers finer control over when the browser synthesizes oblique (slanted) fonts, as per CSS Fonts Level 4. Additionally, a bug where @media (prefers-color-scheme: dark) inside an iframe failed to match when the iframe’s own color-scheme was set to dark has been resolved. This ensures consistent dark mode behavior across nested browsing contexts, making site theming more reliable for embedded content.

4. Layout and Positioning Fixes

Several layout bugs were squashed: position-try-order now correctly interprets logical axis values based on the containing block’s writing mode rather than the element’s own writing mode, fixing anchor positioning in mixed writing-mode contexts. Percent-height replaced elements (like images) no longer compute stale preferred widths in shrink-to-fit containers, preventing misalignment. Checkbox outlines are now properly aligned, and the table cell nowrap minimum width calculation quirk no longer incorrectly triggers outside quirks mode. These fixes improve rendering accuracy across diverse page designs.

5. Anchor Positioning Enhancements

Anchor positioning—a key feature for tooltips, popovers, and menus—receives two important fixes. First, elements anchored to children of sticky-positioned boxes now correctly stick to their anchor as the page scrolls, rather than detaching. Second, pseudo-elements like ::before and ::after are now sorted correctly when ordering anchor elements by tree order, ensuring proper layering. Additionally, view-timeline-inset serialization now coalesces identical values, reducing verbosity in scroll-driven animations.

6. Ligature and Font Size Zero Fix

A subtle but important rendering bug has been fixed: ligatures (such as “fi” or “fl”) no longer cause a non-zero layout width when the element has font-size: 0. Previously, text with zero font size could still occupy space due to ligature glyph metrics, leading to unexpected gaps. This fix ensures that zero‑font‑size elements truly collapse, which is particularly useful for icon fonts or screen‑reader‑only text where visual space must be avoided.

7. Form Event Fix: Select Multiple onchange

A bug in <select multiple> elements where the onchange event did not fire when the mouse button was released far outside the element has been resolved. This issue could cause users to miss selection changes, especially in complex forms or multi‑select lists. The fix ensures that mouse‑up events are correctly detected regardless of pointer position, improving form reliability and user experience.

8. Dialog closedby Attribute (New HTML Feature)

Safari now supports the closedby attribute on <dialog> elements. This attribute lets developers specify which user interactions (e.g., pressing Escape, clicking outside the dialog) should close the dialog. Currently, <dialog> behavior varies across browsers; the closedby attribute standardizes dismissal triggers. With this addition, Safari aligns with the HTML spec, enabling more predictable and accessible modal dialogs.

9. HTML Parser Fast Path Fixes

The HTML parser’s fast path—which handles common tags without full algorithm overhead—received three corrections: Escaped attribute values longer than one character are now correctly processed; nested <li> elements are properly detected; and the fast path now uses the adjusted current node for MathML and SVG integration point checks. These fixes reduce parsing errors and improve performance when handling complex documents, especially those containing mathematical or vector graphics markup.

10. Image srcset Insertion Fix

An issue where inserting an image with a srcset attribute into the DOM could cause rendering glitches has been fixed. This ensures that responsive images using the srcset and sizes attributes load correctly when dynamically added via JavaScript or DOM manipulation. While the exact symptoms are not detailed, the fix eliminates potential broken layouts or missing images, reinforcing Safari’s support for modern responsive design patterns.

Conclusion

Safari Technology Preview 242 delivers a solid set of improvements that polish existing features and lay groundwork for future web standards. Whether you’re a web developer testing edge‑case CSS or an accessibility advocate ensuring inclusive design, this release offers meaningful enhancements. As always, the Technology Preview provides an early look at what’s coming to stable Safari—so install it, test your sites, and give feedback to help shape the final product. Check the official release notes for a full list of changes, or dive deeper into each topic via the links above.