Introduction
If you're a web developer or a Safari enthusiast, keeping up with the latest Safari Technology Preview is a smart move. Release 242 brings a fresh set of enhancements and bug fixes—especially in accessibility, CSS, forms, and HTML parsing. This step-by-step guide will walk you through updating to the latest version, verifying the new features, and testing the improvements in your own projects. Whether you're troubleshooting a layout issue or curious about the new CSS attr() function, you'll find everything you need below.
What You Need
- A Mac running macOS Tahoe or macOS Sequoia.
- An existing installation of Safari Technology Preview (or download it from Apple’s developer website).
- Stable internet connection for the update.
- Basic familiarity with Web Inspector and developer tools.
Step-by-Step Instructions
Step 1: Update Safari Technology Preview to Release 242
Open System Settings on your Mac. Navigate to General > Software Update. If you have Safari Technology Preview installed, you’ll see the update available. Click Update Now to install Release 242. The update includes WebKit changes between commits 310187@main and 310599@main. Alternatively, you can download the full installer from the Safari Technology Preview page if you haven't installed it yet.
Step 2: Verify the Installation
After updating, launch Safari Technology Preview. Go to Safari Technology Preview > About Safari Technology Preview to confirm the version is 242. Then open a test page to ensure the browser runs smoothly. For a deeper check, enable the Develop menu (Preferences > Advanced) and look for any new WebKit features in the experimental settings.
Step 3: Test Accessibility Fixes
VoiceOver users will appreciate two resolved issues. First, test images with role="presentation" – they should no longer be read by VoiceOver. Use a simple HTML document like <img src="decorative.svg" role="presentation" alt=""> and run VoiceOver to confirm silence. Second, customizable <select> elements with appearance: base-select now have proper macOS accessibility support. Create a styled select dropdown and check that VoiceOver announces it correctly.
Step 4: Explore New CSS Features
Release 242 adds two CSS features. First, the attr() function (from CSS Values Level 5) now works in all contexts. Try it: content: attr(data-tooltip); on a pseudo-element. Second, font-synthesis-style now supports the value oblique-only. This means you can force oblique synthesis even when italic is available. Test it in a stylesheet and inspect the computed styles.
Step 5: Check Fixed CSS Issues
Several CSS bugs have been squashed. Here's what to test:
- prefers-color-scheme in iframes: Place a dark-themed iframe with
color-scheme: darkinside a light page; the media query should now match correctly. - position-try-order logical axis values: Now respect the containing block’s writing mode, not the element’s own.
- Percent-height replaced elements in shrink-to-fit containers: No more stale preferred width calculations.
- Table cell nowrap minimum width: The quirk is no longer applied outside quirks mode.
- Checkbox outlines: No longer misaligned.
- Anchor-positioned elements inside sticky children now stick correctly.
- Pseudo-element sorting when using anchor names is fixed.
- Ligatures with font-size: 0 no longer cause non-zero layout width.
- :in-range and :out-of-range pseudo-classes update when the
readonlyattribute changes. - view-timeline-inset serialization now coalesces identical values.
Create test cases for each issue to confirm they’re resolved in your environment.
Step 6: Verify Forms and HTML Improvements
A forms fix: <select multiple> now fires onchange when you release the mouse far outside the element. Test by clicking and dragging away—your event handler should fire. For HTML, the parser fast path has been improved: escaped attribute values longer than one character (e.g., ), nested <li> elements, and MathML/SVG integration point checks all work correctly now. Feed some malformed HTML to the parser and see if errors are reduced.
Step 7: Try the New Dialog Closedby Attribute
The closedby attribute on <dialog> elements is now supported. This attribute controls which user actions close the dialog (e.g., closedby="any" closes on Escape or click outside). Add it to a modal and test interactions.
Step 8: Check Image srcset Behavior
An issue with inserting images using srcset has been fixed. If you dynamically set srcset on an <img> element, the browser should now correctly load the appropriate source. Test with a responsive image scenario.
Tips for a Smooth Experience
- Backup your profile: Before updating, export your bookmarks and settings, just in case.
- Use separate testing profiles: Keep your regular Safari and Safari Technology Preview separate to avoid conflicts.
- Report bugs: If you find a regression, file a bug report via Feedback Assistant or WebKit Bugzilla.
- Combine with Web Inspector: Use the Elements panel to inspect new CSS features in real time.
- Join the WebKit community: Follow WebKit blog and release notes for upcoming previews.
By following these steps, you’ll be up‑to‑date with Safari Technology Preview 242 and ready to leverage its improvements in your web projects. Happy testing!