Safari Technology Preview 242: Major CSS and HTML Enhancements

By • min read

<h2>Introduction</h2> <p>Safari Technology Preview <strong>Release 242</strong> is now available for download on both macOS Tahoe and macOS Sequoia. This latest version brings a host of improvements and bug fixes, focusing on <em>accessibility</em>, <em>CSS</em>, <em>forms</em>, and <em>HTML</em>. If you already have Safari Technology Preview installed, you can update it via <strong>System Settings > General > Software Update</strong>. This release includes WebKit changes between revisions 310187@main and 310599@main.</p><figure style="margin:20px 0"><img src="https://webkit.org/wp-content/themes/webkit/images/preview-card.jpg" alt="Safari Technology Preview 242: Major CSS and HTML Enhancements" 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> <h2 id="accessibility">Accessibility Improvements</h2> <h3>VoiceOver and Interactive Elements</h3> <p>Developers will appreciate the fix for <strong>VoiceOver</strong> where it previously read text within images that had <code>role="presentation"</code>. This issue has been resolved (<a href="#bug-159304061">bug 159304061</a>). Additionally, macOS accessibility support for customizable <code>&lt;select&gt;</code> elements using the <code>appearance: base-select</code> property has been fixed (<a href="#bug-173696010">bug 173696010</a>).</p> <h2 id="css">CSS Enhancements and Bug Fixes</h2> <h3>New CSS Features</h3> <p>Two new <strong>CSS</strong> features have been added:</p> <ul> <li><strong><code>attr()</code> function</strong> – Support for the <code>attr()</code> function from CSS Values Level 5 is now included (<a href="#bug-173700363">bug 173700363</a>).</li> <li><strong><code>oblique-only</code> value</strong> – The <code>font-synthesis-style</code> property now supports the <code>oblique-only</code> value as defined in CSS Fonts Level 4 (<a href="#bug-173730766">bug 173730766</a>).</li> </ul> <h3>Resolved CSS Issues</h3> <p>Several CSS bugs have been addressed, improving layout and rendering reliability:</p> <ul> <li><strong>Dark mode in iframes</strong>: <code>@media (prefers-color-scheme: dark)</code> inside an iframe now correctly matches when the iframe’s <code>color-scheme</code> is set to dark (<a href="#bug-142072593">bug 142072593</a>).</li> <li><strong>Logical axis for <code>position-try-order</code></strong>: The property now interprets logical axis values using the containing block’s writing mode instead of the element’s own writing mode (<a href="#bug-169501069">bug 169501069</a>).</li> <li><strong>Percent-height replaced elements</strong>: Fixed an issue where such elements computed stale preferred widths in shrink-to-fit containers (<a href="#bug-171184282">bug 171184282</a>).</li> <li><strong>Table cell minimum width</strong>: The <code>nowrap</code> minimum width calculation quirk is no longer applied outside of quirks mode (<a href="#bug-171410252">bug 171410252</a>).</li> <li><strong>Checkbox outlines</strong>: Misaligned checkbox outlines have been corrected (<a href="#bug-172742551">bug 172742551</a>).</li> <li><strong>Anchor-positioned elements</strong>: Elements anchored to children of sticky-positioned boxes now stick correctly (<a href="#bug-172884148">bug 172884148</a>).</li> <li><strong>Pseudo-element sorting</strong>: Pseudo-elements are now sorted correctly when sorting anchor elements by tree order (<a href="#bug-173032203">bug 173032203</a>).</li> <li><strong>Ligatures and zero font-size</strong>: Ligatures no longer cause non-zero layout width for text with <code>font-size: 0</code> (<a href="#bug-173840866">bug 173840866</a>).</li> <li><strong><code>:in-range</code> and <code>:out-of-range</code> pseudo-classes</strong>: These updates correctly fire when the <code>readonly</code> attribute changes (<a href="#bug-173978657">bug 173978657</a>).</li> <li><strong><code>view-timeline-inset</code> serialization</strong>: Fixed an issue where identical values were not coalesced during serialization (<a href="#bug-174096313">bug 174096313</a>).</li> </ul> <h2 id="forms">Form Handling Updates</h2> <h3>Select Multiple Interaction</h3> <p>A bug in <code>&lt;select multiple&gt;</code> has been resolved. Previously, the <code>onchange</code> event did not always fire when the mouse button was released far outside the element. This now works reliably (<a href="#bug-173882861">bug 173882861</a>).</p> <h2 id="html">HTML Changes and New Features</h2> <h3>New <code>closedby</code> Attribute for Dialog</h3> <p>The <code>&lt;dialog&gt;</code> element now supports the <code>closedby</code> attribute, giving developers more control over dialog dismissal behavior (<a href="#bug-173974767">bug 173974767</a>).</p> <h3>HTML Parser Fast Path Fixes</h3> <p>Three important fixes have been made to the HTML parser’s fast path:</p> <ul> <li>Correct processing of <strong>escaped attribute values</strong> longer than one character (<a href="#bug-173673581">bug 173673581</a>).</li> <li>Accurate detection of <strong>nested <code>&lt;li&gt;</code> elements</strong> (<a href="#bug-173983892">bug 173983892</a>).</li> <li>The fast path now uses the <strong>adjusted current node</strong> for MathML and SVG integration point checks (<a href="#bug-174096305">bug 174096305</a>).</li> </ul> <h2 id="images">Image Handling</h2> <h3>Srcset Attribute Fix</h3> <p>An issue where inserting an image with a <code>srcset</code> attribute into a document could cause unexpected behavior has been fixed (details available in WebKit bug tracker). This ensures responsive images work more reliably in dynamic content scenarios.</p> <h2>Conclusion</h2> <p>Safari Technology Preview 242 continues the tradition of pushing web standards forward. With significant CSS and HTML enhancements, along with critical accessibility and form fixes, this release helps developers build more robust and inclusive web experiences. Update your copy today via System Settings to take advantage of these improvements.</p>