Safari Technology Preview 242: 10 Key Updates You Need to Know About
Apple has released Safari Technology Preview 242, bringing a slew of performance improvements, bug fixes, and new web standards support. This latest build (available for macOS Tahoe and Sequoia) refines accessibility, CSS, HTML parsing, and form handling. Below, we break down the ten most impactful changes that developers should know about.
- 1. VoiceOver No Longer Reads Decorative Images
- 2. CSS attr() Function Gets a Boost
- 3. Dark Mode iframes Finally Match Parent
- 4. Anchor Positioning Sticks to Sticky Containers
- 5. Ligatures No Longer Break Zero-Size Text
- 6. Custom Select Elements Gain Full Accessibility
- 7. Dialog Elements Accept closedby Attribute
- 8. HTML Parser Fast Path Fixes Escaped Attributes
- 9. Checkbox Outlines Now Properly Aligned
- 10. Multiple Select Triggers onChange Correctly
1. VoiceOver No Longer Reads Decorative Images
A notable accessibility fix resolves an issue where VoiceOver read text within images that have role="presentation". Previously, assistive technology would incorrectly expose content meant to be decorative, cluttering the user experience. With this update, images marked as presentational are skipped, ensuring screen reader output matches the intended semantics. This change improves compliance with ARIA guidelines and makes browsing smoother for visually impaired users.
2. CSS attr() Function Gets a Boost
WebKit now supports the CSS attr() function from CSS Values Level 5. This allows developers to retrieve attribute values from elements and use them directly in CSS, enabling dynamic styling without JavaScript. For example, you can set content based on a data-* attribute or control widths using attr(data-size px). This feature simplifies code and enhances performance by reducing scripting overhead.
3. Dark Mode iframes Finally Match Parent
A long-standing bug where @media (prefers-color-scheme: dark) inside an iframe did not match when the iframe’s color-scheme was set to dark has been fixed. This caused inconsistent dark mode rendering in embedded content. Now, iframes respect the parent’s color scheme, ensuring visual harmony across the page. Developers embedding third‑party content can rely on consistent dark mode behavior.
4. Anchor Positioning Sticks to Sticky Containers
Anchor‑positioned elements anchored to children of sticky‑positioned boxes previously failed to stick correctly. The fix ensures that elements using position-anchor and position-try-options behave as intended, even when the anchor is inside a sticky container. This is crucial for tooltips, popovers, and other UI overlays that need precise positioning relative to scrolling content.
5. Ligatures No Longer Break Zero-Size Text
An obscure but important fix addresses ligatures causing a non‑zero layout width for text with font-size: 0. When hidden or invisible text is used (e.g., for screen‑reader‑only content), ligatures could unexpectedly occupy space, breaking layouts. This patch ensures that zero‑sized text truly has no width, preserving designed spacing.
6. Custom Select Elements Gain Full Accessibility
macOS accessibility support for customizable <select> elements using appearance: base-select has been resolved. Previously, such custom selects were not properly exposed to assistive technologies. Now, VoiceOver and other screen readers can correctly navigate and announce options, making custom dropdowns fully accessible without sacrificing design flexibility.
7. Dialog Elements Accept closedby Attribute
HTML <dialog> elements now support the closedby attribute, allowing developers to control how a dialog can be dismissed (e.g., by pressing Escape or clicking outside). This brings the feature closer to the HTML specification, giving web apps a standard way to implement modal dismiss behavior without extra JavaScript.
8. HTML Parser Fast Path Fixes Escaped Attributes
The HTML parser fast path has been fixed to correctly process escaped attribute values longer than one character. Previously, multi‑character escapes like < might be mishandled, leading to incorrect parsing. This fix improves compatibility with complex attribute values and ensures that markup with character references is interpreted accurately, reducing rendering quirks.
9. Checkbox Outlines Now Properly Aligned
Checkbox outlines appeared misaligned in previous builds, especially when custom styling was applied. The underlying layout issue has been corrected, so focus outlines now align perfectly with the checkbox element. This subtle fix improves visual consistency and aids keyboard navigation by clearly indicating which element is focused.
10. Multiple Select Triggers onChange Correctly
A form bug where <select multiple> did not always fire an onchange event when the mouse button was released far outside the element has been resolved. This ensures that changes to multiple‑select lists are reliably registered, preventing silent data loss in forms. Developers handling multi‑select inputs can now rely on consistent event firing.
These ten updates represent the most significant changes in Safari Technology Preview 242. Developers are encouraged to download the latest build and test their projects against these fixes and features. As always, staying current with preview releases helps ensure your web applications run smoothly on Apple platforms and leverage the newest web standards.