Safari Technology Preview 237: 10 Key Fixes and Features You Should Know
By
<p>Apple has just released Safari Technology Preview 237, bringing a host of refinements to the browsing experience. This update focuses heavily on accessibility, CSS enhancements, and rendering improvements, ensuring that web developers and users alike benefit from a more polished and inclusive web. In this article, we break down the ten most significant changes you need to know about, from <strong>aria-labelledby</strong> fixes to new CSS pseudo-classes. Each item includes internal links for easy navigation. Let's dive in.</p>
<h2 id="item1">1. Smarter Accessible Names with aria-labelledby</h2>
<p>The <code>aria-labelledby</code> attribute gets several critical fixes. Now, <strong>slot elements</strong> referenced by this attribute correctly use their assigned slotted content for accessible names while ignoring hidden slotted nodes. This ensures that dynamic component libraries (like those using Web Components) provide accurate labels for assistive technologies. Additionally, <code><meter></code> elements now have consistent labels between <code>aria-label</code> and <code>title</code> attributes, preventing confusion. If a checkbox name comes from an associated <code><label></code> element, <code>aria-labelledby</code> now uses that name instead of the checkbox's value. These changes significantly improve screen reader reliability.</p><figure style="margin:20px 0"><img src="https://webkit.org/wp-content/themes/webkit/images/preview-card.jpg" alt="Safari Technology Preview 237: 10 Key Fixes and Features You Should Know" 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="item2">2. New CSS :heading Pseudo-Class and Other Selector Fixes</h2>
<p>CSS enthusiasts will welcome the <strong>new <code>:heading</code> pseudo-class</strong> (tracked under bug 158759228), which matches any heading element (<code>h1</code> through <code>h6</code>). This simplifies styling headings without listing them individually. Also fixed: CSS rules within <code>@scope</code> now apply correctly to <code><input></code> and <code><textarea></code> elements, resolving a common frustration for scoped style sheets. <strong>Dynamic flow-tolerance changes</strong> now trigger relayout for <code>display: grid-lanes</code>, ensuring grid layouts adapt properly.</p>
<h2 id="item3">3. DOM Coordinate Fix for SVG Elements</h2>
<p>Developers working with SVG will appreciate the correction to <code>offsetX</code> and <code>offsetY</code> properties. Previously, these coordinates for SVG elements were miscalculated if the element was nested inside multiple <code><svg></code> containers. Now, they use the <strong>outermost SVG</strong> as the base for coordinate calculation, matching standard behavior. This fix (bug 168548585) makes mouse event handling more predictable for complex SVG graphics.</p>
<h2 id="item4">4. HTML ToggleEvent Gains a source Attribute</h2>
<p>The <code>ToggleEvent</code> interface now supports a <strong><code>source</code> attribute</strong>, as specified for the HTML Living Standard. This attribute provides additional context for toggle actions (e.g., details/summary elements), enabling developers to know which element triggered the event. This addition (bug 152580641) enhances interactivity in custom components and improves the semantics of toggle-based patterns.</p>
<h2 id="item5">5. Networking: Tighter Security and Range Request Fix</h2>
<p>Two networking improvements bolster security and reliability. First, <strong>X-Frame-Options</strong> header parsing now only strips tab or space characters, not vertical tabs. This prevents certain types of header injection attacks. Second, with <strong>HTTP 416 (Requested Range Not Satisfiable)</strong> responses, Safari now properly validates range requests, avoiding broken streams or infinite loading for video and large file downloads. These changes (bugs 126915315 and 168487440) are vital for secure content delivery.</p>
<h2 id="item6">6. Table Rendering: Borders, Marquees, and Visibility</h2>
<p>Table rendering receives multiple fixes. <strong>Rowspanned cells</strong> now correctly display the bottom border color, fixing a visual inconsistency. The archaic <code><marquee></code> element no longer causes incorrect table width calculations, improving layout stability on older pages. Additionally, <code>visibility: collapse</code> on columns works as expected, hiding column content without breaking the table's overall structure. These updates (bugs 94163960, 99826593, 168556786) ensure consistent table display across browsers.</p>
<h2 id="item7">7. Intrinsic Sizing, Padding, and Height Distribution</h2>
<p>Rendering logic is refined in several areas:</p>
<ul>
<li><strong>Absolutely positioned replaced elements</strong> now compute intrinsic sizing correctly, preventing overflow or misalignment.</li>
<li><strong>Percentage padding in table cells</strong> resolves against column widths, matching the CSS spec and improving responsive table design.</li>
<li><strong>Table height distribution</strong> now applies to all <code><tbody></code> sections, not just the first one. This ensures multi-section tables divide space evenly.</li>
</ul>
<p>These changes (bugs 168815514, 168940907, 169154677) make Safari more predictable for complex layouts.</p>
<h2 id="item8">8. SVG Gains color-interpolation for Gradients</h2>
<p>SVG gradients now honor the <strong><code>color-interpolation</code></strong> attribute, which controls the color space used for gradient transitions. This feature (bug 3059... referenced internally) allows developers to choose between <code>sRGB</code> and <code>linearRGB</code> for smoother or more precise color blends. While listed as a new feature, it's part of ongoing SVG standard compliance efforts.</p>
<h2 id="item9">9. VoiceOver Improvements in Shadow DOM and Hidden Elements</h2>
<p>Accessibility enhancements extend to shadow DOM interactions: <strong>elements with <code>display: contents</code> and content inside a shadow root</strong> are now properly read when referenced by <code>aria-labelledby</code>. Also, <strong>grid elements with child rows in a shadow root</strong> now work correctly with VoiceOver, fixing a major barrier for complex web applications. Furthermore, elements that have <code>aria-controls</code> or <code>aria-expanded</code> along with the <code>hidden</code> attribute no longer appear in VoiceOver's Form Control menu, reducing clutter for users.</p>
<h2 id="item10">10. ::first-letter Now Exposed in Accessibility Tree</h2>
<p>A subtle but important fix: when <code>::first-letter</code> is the only text content in an element (e.g., a decorative initial letter), that text was previously hidden from the accessibility tree. Now it is exposed, ensuring screen readers can announce the first letter. This change (bug 168458291) improves accessibility for drop caps and other stylized text patterns.</p>
<p><em>Conclusion:</em> Safari Technology Preview 237 packs numerous improvements that enhance web standards compliance, accessibility, and rendering fidelity. Whether you're a web developer testing future features or a user seeking a smoother experience, these updates bring meaningful progress. Download the preview from Apple's developer portal and give them a try.</p>