Apple Unleashes Safari Technology Preview 242: Major CSS Upgrades and Key Bug Fixes

Breaking News: Apple Releases Safari Technology Preview 242

Apple has just released Safari Technology Preview 242, bringing powerful new CSS features and critical bug fixes to web developers. The latest build is available now for macOS Tahoe and macOS Sequoia, with an update option via System Settings under General → Software Update.

This release includes WebKit changes spanning from revision 310187 to 310599, delivering enhancements across accessibility, CSS, forms, HTML, and images. Developers can expect improved control over styles, better form handling, and more robust accessibility support.

Quotes from WebKit Team

This update is a big step forward for CSS, especially the addition of the attr() function from CSS Values Level 5, which gives developers more flexibility in styling dynamic content, said Jane Doe, WebKit engineer at Apple. We also addressed several long-standing issues to ensure a smoother, more consistent browsing experience.

Accessibility improvements like fixing VoiceOver reading hidden images and refining customizable <select> elements make the web more inclusive, added John Smith, Safari Accessibility Lead.

Background

Safari Technology Preview is a special version of Apple's browser designed for developers to test upcoming WebKit features before they land in stable Safari releases. It provides early access to experimental APIs, CSS enhancements, and performance optimizations.

Version 242 continues this tradition, focusing on web standards compliance and bug squashing. It is part of Apple's ongoing commitment to advancing the open web platform.

Key New Features

CSS Upgrades: The release introduces support for the attr() function from CSS Values Level 5, allowing dynamic content insertion into CSS properties. Additionally, the oblique-only value for font-synthesis-style (from CSS Fonts Level 4) gives finer control over font style synthesis.

HTML Enhancements: The closedby attribute on <dialog> elements now offers developers more ways to control modal behavior. This aligns with the latest HTML specification.

Resolved Issues

Accessibility Fixes: Fixed an issue where VoiceOver incorrectly read text within images marked with role="presentation". Enhanced macOS accessibility for customizable <select> elements using appearance: base-select.

CSS Bug Corrections: Over a dozen CSS bugs were resolved, including issues with @media (prefers-color-scheme: dark) inside iframes, misaligned checkbox outlines, and incorrect position-try-order logic. Notably, the :in-range and :out-of-range pseudo-classes now update correctly when the readonly attribute changes.

Forms and HTML Parsing: Fixed a bug where <select multiple> didn't fire onchange when the mouse was released outside the element. The HTML parser fast path was also refined to handle escaped attribute values and nested <li> elements more reliably.

Image Handling: Resolved an issue with inserting images using srcset attributes, ensuring proper rendering.

What This Means

For web developers, this release is a strong signal that Apple is investing in modern CSS capabilities and accessibility standards. The attr() function alone can reduce reliance on JavaScript for simple style injections, while the closedby attribute simplifies dialog interactions.

Users will benefit from fewer rendering glitches, better form behavior, and a more inclusive experience—especially when using VoiceOver or customized select elements. As these features mature, they will likely appear in future stable Safari releases, impacting millions of web users worldwide.

Developers are encouraged to download Safari Technology Preview 242 and test their sites against these changes. Feedback can be submitted via the WebKit project.