What's New in Safari Technology Preview 242: CSS, Forms, and More

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’s color-scheme was set to dark. This now works correctly, enabling proper dark-mode detection in embedded content.
• Position-try-order logical axes: The position-try-order property now interprets logical axis values (like inline-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 with font-size: 0 no longer has a non-zero layout width due to ligatures, ensuring zero-sized text truly takes no space.
• :in-range and :out-of-range updates: These pseudo-classes now correctly update when the readonly attribute changes, improving form validation styling.
• View-timeline-inset serialization: The view-timeline-inset property 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:

1. Escaped attribute values: The parser now correctly processes escaped attribute values longer than one character, such as > or &.
2. Nested <li> detection: The fast path can now correctly detect nested <li> elements, preventing misparsing of complex list structures.
3. 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.