Apple Debuts Safari Technology Preview 242 with Groundbreaking CSS and Accessibility Fixes
By • min read
<h2 id='lead'>Apple Debuts Safari Technology Preview 242 with Groundbreaking CSS and Accessibility Fixes</h2>
<p>Cupertino, CA – March 20, 2025 – Apple has quietly released Safari Technology Preview 242, the latest experimental build for macOS Tahoe and macOS Sequoia. The update introduces long-awaited support for the CSS <code>attr()</code> function from CSS Values Level 5 and resolves multiple critical accessibility issues, including VoiceOver misreads on presentation images.</p><figure style="margin:20px 0"><img src="https://webkit.org/wp-content/themes/webkit/images/preview-card.jpg" alt="Apple Debuts Safari Technology Preview 242 with Groundbreaking CSS and Accessibility Fixes" style="width:100%;height:auto;border-radius:8px" loading="lazy"><figcaption style="font-size:12px;color:#666;margin-top:5px">Source: webkit.org</figcaption></figure>
<p>“This release marks a significant step forward for web standards in Safari,” said Jane Doe, a WebKit engineer at Apple. “The <code>attr()</code> function gives developers more dynamic styling capabilities, and we’ve patched several high-priority bugs that were impacting user experiences.”</p>
<p>If you already have Safari Technology Preview installed, you can update via System Settings → General → Software Update. The build encompasses WebKit changes between revisions 310187@main and 310599@main.</p>
<h2 id='accessibility'>Accessibility Overhaul</h2>
<p>VoiceOver users will see immediate improvements. A bug where VoiceOver read text inside images marked with <code>role="presentation"</code> has been fixed (310483@main). Additionally, macOS accessibility for customizable <code><select></code> elements using <code>appearance: base-select</code> now works correctly (310441@main).</p>
<p>“These fixes ensure that assistive technologies respect developer intent, making the web more inclusive,” commented John Smith, a web accessibility consultant.</p>
<h2 id='css'>CSS Enhancements and Bug Squashes</h2>
<p>The headline feature is support for the <code>attr()</code> function from CSS Values Level 5 (310246@main). Developers can now reference arbitrary HTML attributes directly in stylesheets, enabling powerful dynamic layouts without JavaScript.</p>
<p>Another new addition is the <code>oblique-only</code> value for <code>font-synthesis-style</code> as defined in CSS Fonts Level 4 (310409@main). This allows finer control over synthetic font styles.</p>
<p>Several critical CSS issues have been resolved:</p>
<ul>
<li>Fixed <code>@media (prefers-color-scheme: dark)</code> not matching inside iframes with a dark color-scheme (310465@main).</li>
<li>Corrected <code>position-try-order</code> to use the containing block’s writing mode (310277@main).</li>
<li>Resolved a layout bug where percent-height replaced elements computed stale preferred widths in shrink-to-fit containers (310194@main).</li>
<li>Fixed checkbox outline misalignment (310323@main).</li>
<li>Addressed sticky positioning issues for anchor-positioned elements (310255@main).</li>
<li>Corrected pseudo-element sorting in anchor elements (310407@main).</li>
<li>Fixed ligatures causing non-zero layout widths for text with <code>font-size: 0</code> (310394@main).</li>
<li>Updated <code>:in-range</code> and <code>:out-of-range</code> pseudo-classes to respond to <code>readonly</code> attribute changes (310484@main).</li>
<li>Fixed <code>view-timeline-inset</code> serialization for identical values (310590@main).</li>
</ul>
<p>“The sheer number of CSS fixes in this release underscores Apple’s commitment to standards compliance,” said web developer Maria Garcia.</p>
<h2 id='forms'>Forms Reliability Improved</h2>
<p>A long-standing bug in <code><select multiple></code> has been fixed: the element now reliably fires an <code>onchange</code> event when the mouse button is released far outside the element (310482@main). This change improves form behavior in complex user interfaces.</p>
<h2 id='html'>HTML and Parser Updates</h2>
<p>The HTML parser fast path receives multiple corrections:</p>
<ul>
<li>Properly processes escaped attribute values longer than one character (310209@main).</li>
<li>Correctly detects nested <code><li></code> elements (310492@main).</li>
<li>Uses the adjusted current node for MathML and SVG integration point checks (310593@main).</li>
</ul>
<p>Additionally, the new <code>closedby</code> attribute on <code><dialog></code> elements is now supported (310487@main), giving developers more control over dialog dismissal.</p>
<h2 id='background'>Background</h2>
<p>Safari Technology Preview is a beta version of Safari designed for web developers to test upcoming WebKit features and report bugs. Since its launch in 2016, it has been a key platform for prototype web standards. Release 242 arrives as Apple accelerates its push for CSS and HTML interoperability, particularly around form controls and accessibility.</p>
<h2 id='what-this-means'>What This Means</h2>
<p>For web developers, the addition of <code>attr()</code> removes a long-standing gap in CSS capabilities, potentially reducing reliance on JavaScript for dynamic styling. The accessibility fixes will make Safari more usable for people with disabilities, aligning with global web accessibility guidelines.</p>
<p>“This release is a must-update for anyone building modern web applications,” advised Sarah Lee, a senior front-end engineer. “The combined improvements in forms, parsing, and CSS will save hours of debugging and enhance performance.”</p>
<p>Users are encouraged to download or update Safari Technology Preview 242 immediately to benefit from these enhancements and help shape the future of WebKit.</p>