Exploring the Enhancements in Safari Technology Preview 242
Welcome to the Safari Technology Preview 242 release! This update brings a host of enhancements and bug fixes across accessibility, CSS, forms, HTML, and more. Below, we break down the most important changes in a question-and-answer format. Jump to accessibility improvements, CSS features, or bug fixes.
1. What improvements have been made to Accessibility in Safari Technology Preview 242?
Two key accessibility issues have been resolved. First, VoiceOver no longer reads text within images that have role="presentation". This ensures that decorative images are ignored by screen readers, improving the browsing experience for users relying on assistive technology. Second, macOS accessibility support has been fixed for customizable <select> elements that use appearance: base-select. This means users can now interact with these style-enhanced dropdown menus more effectively when using VoiceOver or other accessibility tools. These fixes align with Web Content Accessibility Guidelines (WCAG) and demonstrate Apple's commitment to inclusive design.
2. What new CSS features does this release introduce?
Safari Technology Preview 242 adds support for two notable CSS features. The attr() function from CSS Values Level 5 is now available, allowing developers to use attribute values directly in CSS properties beyond the content property. For example, you could style an element based on a custom data-* attribute without JavaScript. Additionally, the oblique-only value has been added for font-synthesis-style, as defined in CSS Fonts Level 4. This gives designers finer control over font style synthesis, ensuring that only oblique (slanted) styles are synthesized when an italic variant is missing. Both additions expand the creative possibilities for web typography and dynamic styling.
3. What are the key CSS bug fixes in this update?
This release addresses over ten CSS-related issues. Notable fixes include: @media (prefers-color-scheme: dark) now correctly matches inside iframes when the iframe’s color-scheme is set to dark; position-try-order now interprets logical axis values using the containing block’s writing mode; and replaced elements with percent heights no longer compute stale preferred widths in shrink-to-fit containers. Other resolved issues include misaligned checkbox outlines, anchor-positioned elements that didn’t stick when anchored to children of sticky boxes, incorrect pseudo-element sorting, ligatures causing non-zero layout width for zero font-size text, and view-timeline-inset serialization now correctly coalesces identical values. These fixes improve layout reliability and visual consistency across web pages.
4. How has form handling been improved?
One important form fix addresses the <select multiple> element. Previously, when using a multi-select dropdown, the onchange event would not always fire if the mouse button was released far outside the element. This could cause missed user selections, especially in complex forms. With this update, the event now triggers correctly regardless of where the mouse is released after selecting an option. This improvement enhances the user experience for forms that rely on multi-select functionality, such as filtering or bulk actions.
5. What HTML enhancements are included?
HTML gets a notable new feature: the closedby attribute on <dialog> elements. This attribute allows developers to specify whether a dialog can be closed by the user (e.g., by pressing Escape or clicking outside), making modal behavior more configurable. Additionally, several HTML parser bugs have been fixed: the fast path now correctly processes escaped attribute values longer than one character, properly detects nested <li> elements, and uses the adjusted current node for MathML and SVG integration point checks. These parser improvements ensure more accurate DOM construction, especially for complex documents containing MathML or SVG.
6. Are there any notable fixes for images?
Yes, the release includes a fix for an issue where inserting an image with a srcset attribute could cause unexpected behavior. Unfortunately, the specific details were not fully documented in the original release notes, but this fix aims to ensure that responsive images load correctly when their srcset sources are dynamically added or changed. Developers working with responsive image sets should find this update improves reliability in scenarios where images are inserted after page load.