10 Key Updates in Safari Technology Preview 242 You Should Know About

Apple has just released Safari Technology Preview 242, bringing a host of improvements to web developers and users. This update, available for macOS Tahoe and macOS Sequoia, focuses on refining accessibility, enhancing CSS capabilities, fixing HTML parser bugs, and more. Whether you're a developer testing cutting-edge features or a user seeking a smoother browsing experience, these changes matter. Below, we break down the ten most important updates you need to know about. Each item includes a detailed explanation to help you understand what's new and why it's useful.

1. VoiceOver No Longer Reads Decorative Images

VoiceOver, Apple's screen reader, previously announced text found inside images with role="presentation". This was counterproductive, as such images are meant to be purely decorative and should be ignored by assistive technologies. With this fix, VoiceOver now correctly skips these images, making navigation less cluttered and more intuitive for visually impaired users. The change aligns with accessibility best practices and ensures that only meaningful content is conveyed. Developers who use role="presentation" on images can now trust that their intent is respected.

2. Customizable Select Elements Now Fully Accessible on macOS

Custom dropdown menus built with <select> and styled via appearance: base-select previously had accessibility gaps on macOS. This release resolves those issues, ensuring that these elements are properly recognized by assistive technologies like VoiceOver. Users navigating via keyboard or screen reader will now experience consistent behavior—focus management, announcements, and interaction follow expected patterns. This is a significant step for developers who want to maintain a native look while customizing form controls without sacrificing accessibility.

3. CSS attr() Function Gets an Upgrade

The attr() function from CSS Values Level 5 is now supported. This allows stylesheets to use attribute values of HTML elements directly in CSS properties, opening up new possibilities for dynamic styling without JavaScript. For example, you can set a tooltip's content based on a data-* attribute or adjust dimensions based on a custom attribute. This feature enhances the power of CSS and reduces the need for inline styles or scripting. Developers working on component libraries will find this particularly useful for creating flexible, data-driven designs.

4. font-synthesis-style Now Supports 'oblique-only'

CSS Fonts Level 4 introduces the oblique-only value for font-synthesis-style. This tells the browser to only synthesize an oblique (slanted) style—never an italic style—when the font family doesn't have a real italic variant. It's a granular control that helps prevent unwanted faux italic rendering. Designers who rely on oblique fonts or want consistent slanting across fallback fonts will benefit from this. The feature ensures that the synthesized style matches the designer's intent, avoiding mismatches between synthetic and actual font styles.

5. Dark Mode Inside iframes Now Works Correctly

A common bug caused @media (prefers-color-scheme: dark) to fail inside an iframe when the iframe's own color-scheme was set to dark. This has been fixed, so embedded content can now reliably detect the user's system-wide preference and apply dark mode styles accordingly. This is crucial for widgets or third-party content that must adapt to the host page's theme. Developers embedding media or interactive elements can now trust that their dark mode queries behave consistently across all scenarios.

6. position-try-order Now Uses the Containing Block's Writing Mode

When using CSS anchor positioning, the position-try-order property determines the order in which fallback positions are attempted. Previously, logical axis values (like start/end) were interpreted using the element's own writing mode, which could lead to unexpected behavior. Now, the containing block's writing mode is used, aligning with the broader layout context. This fix makes anchor positioning more predictable, especially in multi-language or vertical writing-mode scenarios. Developers building tooltips, popovers, or dropdowns with anchor positioning will see more reliable placement.

7. checkbox Outlines No Longer Misaligned

Checkbox elements in some cases had misaligned focus outlines, particularly when custom styling was applied. The issue has been resolved, ensuring that the outline perfectly surrounds the checkbox, not shifted or offset. This improves both visual appearance and keyboard navigation indicators. Users tabbing through forms will see consistent focus rings, and developers can style checkboxes without worrying about broken outlines. It's a small but important polish that enhances usability across the board.

8. <select multiple> Now Fires onchange Even When Clicked Far Outside

A frustrating bug in <select multiple> prevented the onchange event from firing if the mouse button was released far outside the element after selection. This has been fixed, so that any selection change, regardless of where the mouse is released, triggers the event. This is critical for multi-select lists used in forms. Developers relying on real-time updates from onchange can now trust that their event handling is consistent. Users will also experience more predictable behavior when clicking and dragging.

9. HTML Parser Fast Path Now Handles Escaped Attributes and Nested <li> Correctly

Several improvements have been made to the HTML parser's fast path. First, escaped attribute values longer than one character are now properly processed, which fixes issues with certain HTML encoding patterns. Second, nested <li> elements (like inside other lists) are correctly detected without causing parsing errors. These fixes ensure that pages load faster and render as intended, especially for complex markup or HTML that uses entity references. The changes align with the specification and reduce edge-case rendering discrepancies.

10. closedby Attribute Now Supported on <dialog> Elements

The closedby attribute on <dialog> elements is now supported, allowing developers to specify how a dialog can be closed. Options include any (click outside, Escape key), closerequest (only via close request), or none. This provides fine-grained control over modal and non-modal dialog behavior. Designers can now implement consistent dismissal patterns across browsers. This feature is part of the emerging dialog specification and helps create interactive overlays that feel native and accessible.

These ten updates represent the most impactful changes in Safari Technology Preview 242. From accessibility refinements to advanced CSS and HTML features, each fix and addition contributes to a more robust web platform. Developers should test their sites against these changes to ensure compatibility and leverage the new capabilities. As always, Apple encourages feedback through the Safari feedback channels. Stay tuned for the next release and keep building better web experiences.