Introduction
Apple has released Safari Technology Preview 242, the latest update to its experimental web browser designed for developers. Available for macOS Tahoe and macOS Sequoia, this build introduces several new features, resolves a range of bugs, and improves overall web compatibility. If you already have Safari Technology Preview installed, you can update via System Settings → General → Software Update. This release includes WebKit changes from 310187@main…310599@main. Below, we dive into the most notable enhancements and fixes across accessibility, CSS, forms, HTML, and images.
Accessibility Improvements
VoiceOver Now Ignores Decorative Images Correctly
One key fix addresses how VoiceOver handled images with role="presentation". Previously, the screen reader would incorrectly read text embedded within such images, violating accessibility best practices. With this update, VoiceOver properly skips those elements, ensuring a more seamless experience for users relying on assistive technology. Back to top
Customizable Select Elements on macOS
Developers using appearance: base-select to create customizable <select> elements will now find full macOS accessibility support. The fix ensures that these custom dropdowns remain usable with VoiceOver and other assistive tools, bringing them in line with native controls. Back to top
CSS Enhancements and Fixes
Support for the attr() Function (CSS Values Level 5)
Safari Technology Preview 242 adds support for the attr() function as defined in the CSS Values Level 5 specification. This allows developers to retrieve the value of an HTML attribute and use it directly in CSS, enabling more dynamic styling without JavaScript. For example, you could use content: attr(data-label) to display a data-label attribute inside a pseudo-element. Back to top
New oblique-only Value for font-synthesis-style
Following the CSS Fonts Level 4 spec, the browser now supports the oblique-only value for font-synthesis-style. This lets developers specify that only oblique (synthetic italic) styles should be synthesized, not standard italic. This provides finer control over font rendering, especially when working with variable fonts or limited typefaces. Back to top
Resolved CSS Issues
Several important CSS bugs have been squashed in this release:
- Dark mode iframes: Previously,
@media (prefers-color-scheme: dark)inside an iframe would not match if the iframe’scolor-schemewas set todark. This now works correctly, enabling proper dark-mode detection in embedded content. - Position-try-order logical axes: The
position-try-orderproperty now interprets logical axis values (likeinline-start) relative to the containing block’s writing mode, not the element’s own writing mode. This aligns with the specification and fixes anchoring behavior in mixed-writing-mode documents. - Replaced elements & shrink-to-fit: A bug where percent-height replaced elements (such as images) computed stale preferred widths in shrink-to-fit containers has been fixed. This leads to more accurate sizing in flex and grid layouts.
- Table cell nowrap quirk: The browser no longer applies the non-standard table cell nowrap minimum width calculation outside of quirks mode, improving standards compliance.
- Checkbox outline alignment: Checkbox outlines that appeared misaligned are now correctly positioned, improving visual consistency.
- Anchor positioning with sticky parents: Elements anchored to children of sticky-positioned boxes now stick correctly, preventing layout jumps.
- Pseudo-element sorting: Pseudo-elements are now sorted properly when sorting anchor elements by tree order, fixing unexpected ordering in some cases.
- Ligatures at
font-size: 0: Text withfont-size: 0no longer has a non-zero layout width due to ligatures, ensuring zero-sized text truly takes no space. :in-rangeand:out-of-rangeupdates: These pseudo-classes now correctly update when thereadonlyattribute changes, improving form validation styling.- View-timeline-inset serialization: The
view-timeline-insetproperty serialization now correctly coalesces identical values, fixing potential parsing errors.
Forms Bug Fix
<select multiple> onchange Event Reliability
A bug affecting <select multiple> elements has been resolved. Previously, if a user released the mouse button far outside the element after selecting or deselecting an option, the onchange event would sometimes not fire. Now the change event triggers reliably regardless of mouse position, ensuring consistent form behavior. Back to top
HTML Updates
Support for closedby Attribute on <dialog>
The <dialog> element now supports the closedby attribute, which allows developers to define which user actions (e.g., pressing Escape or clicking outside the dialog) will close it. This simplifies modal dialog behavior and reduces the need for custom JavaScript to handle dismiss gestures. Back to top
HTML Parser Fast Path Corrections
Three improvements to the HTML parser’s fast path help speed up page rendering and increase standards compliance:
- Escaped attribute values: The parser now correctly processes escaped attribute values longer than one character, such as
>or&. - Nested
<li>detection: The fast path can now correctly detect nested<li>elements, preventing misparsing of complex list structures. - MathML/SVG integration point: The parser uses the adjusted current node for MathML and SVG integration point checks, aligning with the HTML specification.
Images
Fix for srcset Image Insertion
An issue where inserting an image with a srcset attribute into the DOM could cause unexpected behavior has been fixed. (Note: The original release notes were cut short, but the fix ensures proper handling of responsive images when dynamically added.) Back to top
Conclusion
Safari Technology Preview 242 continues Apple’s commitment to improving web standards and developer experience. With new CSS capabilities, enhanced form and accessibility support, and critical parser fixes, this release helps ensure that Safari remains a robust platform for modern web development. Update today and test your sites against these changes.