10 Key Updates in Safari Technology Preview 242: What Developers Need to Know
Apple has just released Safari Technology Preview 242, bringing a fresh batch of enhancements and fixes for web developers. Available for macOS Tahoe and Sequoia, this update—spanning WebKit changes from 310187@main to 310599@main—polishes accessibility, CSS, HTML, forms, and images. Whether you’re tweaking responsive layouts or refining user interactions, these ten highlights will help you stay current. Let’s dive in.
1. VoiceOver No Longer Reads Decorative Images
An important accessibility fix resolves a nagging issue: VoiceOver used to read text embedded within images that carried role="presentation". Now, Safari correctly ignores such decorative content, preventing screen readers from announcing meaningless text. This ensures that assistive technology focuses on meaningful information, improving the browsing experience for users who rely on voice navigation.
2. Customizable Select Elements Gain Better Accessibility
macOS accessibility support for customizable <select> elements using appearance: base-select has been fixed. Previously, these styled dropdowns might have been inaccessible to keyboard and voice users. Now they properly integrate with system accessibility features, making custom selects as usable as native ones. This is a win for developers building inclusive forms.
3. CSS attr() Function Gets a Boost
Safari now supports the CSS attr() function as defined in CSS Values Level 5. This allows you to retrieve attribute values from HTML elements and use them directly in stylesheets—without JavaScript. For example, you can dynamically style elements based on data-* attributes. While previously limited to content, this expanded support opens up creative styling possibilities.
4. New font-synthesis-style Value for Italic Styles
The oblique-only value for font-synthesis-style (from CSS Fonts Level 4) is now available. This tells the browser to only synthesize an oblique (slanted) variant when a true italic is missing, rather than defaulting to a fake italic. This gives designers more control over how fonts render, especially when combining custom fonts with system fallbacks.
5. Dark Mode in iframes Now Works Correctly
A tricky bug has been fixed: @media (prefers-color-scheme: dark) inside an iframe failed to match when the iframe’s color-scheme was set to dark. Now, the media query correctly reflects the iframe’s color scheme rather than the parent document’s. This is crucial for embedded widgets (like comment sections) that need to adapt to their own theme settings.
6. Anchor-Positioned Elements Stick as Expected
Two anchor positioning issues were corrected. First, elements anchored to children of sticky-positioned boxes now stick correctly instead of detaching. Second, pseudo-elements used as anchors are now sorted properly by tree order. These fixes make CSS anchor() positioning more reliable for advanced layouts like tooltips and menus.
7. Dialog Elements Gain a closedby Attribute
HTML <dialog> elements now support the closedby attribute, which controls how the dialog can be dismissed (e.g., by pressing Escape or clicking outside). This aligns with the latest HTML spec and gives developers more flexible control over modal behavior without extra JavaScript.
8. HTML Parser Fast Path Fixes for Performance
Several improvements target the HTML parser’s fast path. It now correctly processes escaped attribute values longer than one character, detects nested <li> elements, and uses the adjusted current node for MathML and SVG integration checks. These changes boost parsing speed while ensuring accurate DOM construction, especially for complex markup.
9. Image srcset Insertion Bug Squashed
An issue where inserting an image with a srcset attribute could cause a crash or incorrect rendering has been fixed. While the specific scenario wasn’t detailed, the resolution ensures that responsive images behave reliably when dynamically added to the page—a common pattern in modern web apps.
10. Multiple Select Onchange Events Fire Reliably
For <select multiple> elements, the onchange event now fires properly when the mouse button is released far outside the element. Previously, if a user dragged beyond the select's bounds before releasing, the change might be lost. This fix ensures consistent form behavior across all interaction patterns.
Safari Technology Preview 242 continues to refine WebKit with a focus on developer convenience and user experience. Whether you’re fixing a dark mode layout or customizing dialogs, this release has something for everyone. Update via System Settings under General → Software Update, or download fresh from the WebKit site. Happy testing!