Upgrading to Safari Technology Preview 242: A Developer's Guide to New Features and Bug Fixes

By ✦ min read

Overview

Safari Technology Preview 242 is now available for download on macOS Tahoe and macOS Sequoia. This release brings a host of improvements across accessibility, CSS, forms, HTML, and images. Whether you're a web developer, designer, or tester, understanding these changes helps you prepare your sites for future Safari updates. This guide walks you through updating, highlights key additions, and explains how to test them in your projects.

Prerequisites

• A Mac running macOS Tahoe or macOS Sequoia.
• An existing installation of Safari Technology Preview (optional for update)
• Basic familiarity with web development and Safari's Web Inspector.

Step-by-Step Update Instructions

Fresh Installation

1. Go to the Safari Technology Preview download page.
2. Download the version for your macOS.
3. Open the downloaded .dmg file and drag the Safari Technology Preview app to your Applications folder.
4. Launch the browser.

Updating an Existing Installation

1. Open System Settings (from Apple Menu).
2. Navigate to General > Software Update.
3. Click Update Now if Safari Technology Preview 242 appears in the list.
4. Restart the browser after installation.

New Features and Resolved Issues

This build includes WebKit changes from revision 310187 to 310599. Below we break down each category.

Accessibility

Resolved Issues:

• VoiceOver no longer reads decorative images: Previously, VoiceOver announced images with role="presentation". The fix ensures these are skipped as intended. (310483)
• Customizable select elements: macOS accessibility now works correctly with <select> elements styled with appearance: base-select. (310441)

CSS

New Features:

• CSS attr() function from CSS Values Level 5: You can now use attr() in CSS properties beyond content. For example, width: attr(data-width px, 100px);. (310246)
• Support for oblique-only in font-synthesis-style: This allows better control over font style synthesis, following CSS Fonts Level 4. (310409)

Resolved Issues:

• Dark mode in iframes: @media (prefers-color-scheme: dark) now works inside iframes whose color-scheme is set to dark. (310465)
• Logical axis values in position-try-order: The property now uses the containing block's writing mode for logical axis (e.g., block-start) instead of the element's own mode. (310277)
• Percent-height replaced elements: No longer compute stale preferred widths in shrink-to-fit containers. (310194)
• Table cell nowrap quirk restricted to quirks mode: The minimum width calculation quirk no longer applies outside quirks mode. (310195)
• Checkbox outline alignment: Outlines for checkboxes now appear correctly aligned. (310323)
• Anchor-positioned elements inside sticky containers: Elements anchored to children of sticky boxes now stick properly. (310255)
• Pseudo-element sorting by tree order: Sorting anchor elements by tree order now works correctly with pseudo-elements. (310407)
• Ligatures with font-size: 0: Ligatures no longer cause non-zero layout width. (310394)
• :in-range and :out-of-range updates: These pseudo-classes now correctly respond to changes in the readonly attribute. (310484)
• view-timeline-inset serialization: Identical values are now coalesced correctly. (310590)

Forms

Resolved Issues:

• <select multiple> event: The onchange event now fires when the mouse button is released far outside the element. (310482)

HTML

New Features:

• closedby attribute on <dialog>: Dialogs can now be closed by clicking outside when closedby="any" is set. Learn more in the MDN docs. (310487)

Resolved Issues:

• HTML parser fast path: Fixed three issues: escaped attribute values longer than one character are now processed correctly; nested <li> elements are detected; and MathML/SVG integration point checks use the adjusted current node. (310209, 310492, 310593)

Images

Resolved Issues:

• Images with srcset: An issue where inserting an image with a srcset attribute caused errors has been fixed. (Details in the original commit 310598)

Common Mistakes

• Assuming the attr() function works everywhere: While CSS Values Level 5 expands its usage, it's currently limited to certain properties. Always test in Safari Technology Preview before relying on it.
• Forgetting to set color-scheme on iframe: The dark mode fix requires the iframe's own color-scheme to be dark. Simply adding the media query won't work.
• Misinterpreting position-try-order fix: Ensure your CSS uses logical properties correctly; the fix changes which writing mode is used, which may affect layouts in mixed writing mode contexts.
• Not updating test pages: After updating Safari Technology Preview, clear caches and test all affected features—especially CSS and form behaviors.

Summary

Safari Technology Preview 242 introduces powerful CSS features like the attr() function and oblique-only, fixes critical bugs in forms, HTML parsing, and images, and improves accessibility for VoiceOver and custom selects. By updating and testing these changes early, you can ensure your websites remain compatible and take advantage of the latest web standards. For the complete list of changes, refer to the official WebKit blog.