Safari Technology Preview 242: Key WebKit Enhancements and Bug Fixes

Introduction

Safari Technology Preview 242 is now available for download on macOS Tahoe and macOS Sequoia. This latest release brings a host of improvements to WebKit, the engine that powers Safari, focusing on accessibility, CSS, HTML, forms, and images. If you already have Safari Technology Preview installed, you can update it easily via System Settings under General → Software Update. This release includes changes from WebKit revisions 310187@main to 310599@main.

Accessibility Improvements

VoiceOver and Images

One notable fix addresses an issue where VoiceOver incorrectly read text within images that had role="presentation". This update ensures that screen readers respect the presentation role, improving the browsing experience for users who rely on assistive technologies.

Customizable <select> Elements

macOS accessibility support has been enhanced for customizable <select> elements using the appearance: base-select property. This fix ensures that these elements are properly announced and navigable by VoiceOver, making form interactions more inclusive.

CSS Enhancements

New CSS Features

This release introduces support for the CSS attr() function as defined in CSS Values Level 5. This function allows you to retrieve the value of an attribute on an element and use it within a CSS property, opening up new possibilities for dynamic styling without JavaScript.

Additionally, the font-synthesis-style property now supports the oblique-only value, as specified in CSS Fonts Level 4. This allows developers to control whether oblique font styles are synthesized, giving finer control over typography.

Resolved CSS Issues

Several bugs were fixed to improve rendering reliability:

• Dark mode in iframes: The @media (prefers-color-scheme: dark) query now correctly matches when an iframe sets color-scheme: dark, ensuring consistent dark mode styling across nested documents.
• Position try ordering: The position-try-order property now interprets logical axis values using the containing block’s writing mode, rather than the element’s own writing mode, aligning with the CSS specification.
• Percent-height replaced elements: An issue where replaced elements with percentage heights computed stale preferred widths in shrink-to-fit containers has been fixed, improving layout accuracy.
• Table cell minimum width quirk: The nowrap minimum width calculation for table cells is no longer applied outside of quirks mode, ensuring standards-compliant behavior.
• Checkbox outline alignment: Checkbox outlines now appear correctly aligned, enhancing visual consistency in forms.
• Anchor positioning with sticky boxes: Anchor-positioned elements anchored to children of sticky-positioned boxes now stick correctly, resolving a positioning bug.
• Pseudo-element sorting: Pseudo-elements are now sorted correctly when sorting anchor elements by tree order, improving DOM traversal consistency.
• Ligatures with zero font-size: An issue where ligatures caused non-zero layout width for text with font-size: 0 has been fixed, preventing unexpected spacing.
• Input validation pseudo-classes: The :in-range and :out-of-range pseudo-classes now correctly update when the readonly attribute changes, ensuring form validation states are accurate.
• View timeline inset serialization: The serialization of view-timeline-inset now correctly coalesces identical values, preventing redundant output.

Forms Improvements

Multiple Select Change Event

An issue with <select multiple> elements has been resolved. Previously, the onchange event didn’t always fire when the mouse button was released far outside the element. This fix ensures that change events are triggered reliably, making multi-select interactions more predictable.

HTML Enhancements

New closedby Attribute for Dialogs

Support has been added for the closedby attribute on <dialog> elements. This attribute specifies how the dialog can be closed by the user, offering developers more control over modal interactions.

HTML Parser Fast Path Fixes

Several improvements were made to the HTML parser’s fast path to enhance performance and correctness:

• Escaped attribute values: The fast path now correctly processes escaped attribute values longer than one character, ensuring attributes are parsed accurately.
• Nested <li> detection: The parser correctly detects nested <li> elements, preventing incorrect DOM tree construction.
• MathML and SVG integration: The fast path now uses the adjusted current node for MathML and SVG integration point checks, aligning with the HTML specification.

Images Updates

Image Insertion with srcset

An issue where inserting an image with a srcset attribute could cause unexpected behavior has been addressed. While details are limited in the release notes, this fix improves the reliability of responsive image handling in Safari Technology Preview.

Conclusion

Safari Technology Preview 242 brings a wealth of fixes and features that enhance the web development experience, particularly in accessibility, CSS layout, and HTML parsing. Developers are encouraged to download the update and test their projects with this preview to ensure compatibility and take advantage of the latest WebKit improvements.