Safari Technology Preview 237: 10 Key Fixes and Features You Should Know

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 aria-labelledby fixes to new CSS pseudo-classes. Each item includes internal links for easy navigation. Let's dive in.

1. Smarter Accessible Names with aria-labelledby

The aria-labelledby attribute gets several critical fixes. Now, slot elements 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, <meter> elements now have consistent labels between aria-label and title attributes, preventing confusion. If a checkbox name comes from an associated <label> element, aria-labelledby now uses that name instead of the checkbox's value. These changes significantly improve screen reader reliability.

2. New CSS :heading Pseudo-Class and Other Selector Fixes

CSS enthusiasts will welcome the new :heading pseudo-class (tracked under bug 158759228), which matches any heading element (h1 through h6). This simplifies styling headings without listing them individually. Also fixed: CSS rules within @scope now apply correctly to <input> and <textarea> elements, resolving a common frustration for scoped style sheets. Dynamic flow-tolerance changes now trigger relayout for display: grid-lanes, ensuring grid layouts adapt properly.

3. DOM Coordinate Fix for SVG Elements

Developers working with SVG will appreciate the correction to offsetX and offsetY properties. Previously, these coordinates for SVG elements were miscalculated if the element was nested inside multiple <svg> containers. Now, they use the outermost SVG as the base for coordinate calculation, matching standard behavior. This fix (bug 168548585) makes mouse event handling more predictable for complex SVG graphics.

4. HTML ToggleEvent Gains a source Attribute

The ToggleEvent interface now supports a source attribute, 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.

5. Networking: Tighter Security and Range Request Fix

Two networking improvements bolster security and reliability. First, X-Frame-Options header parsing now only strips tab or space characters, not vertical tabs. This prevents certain types of header injection attacks. Second, with HTTP 416 (Requested Range Not Satisfiable) 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.

6. Table Rendering: Borders, Marquees, and Visibility

Table rendering receives multiple fixes. Rowspanned cells now correctly display the bottom border color, fixing a visual inconsistency. The archaic <marquee> element no longer causes incorrect table width calculations, improving layout stability on older pages. Additionally, visibility: collapse 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.

7. Intrinsic Sizing, Padding, and Height Distribution

Rendering logic is refined in several areas:

• Absolutely positioned replaced elements now compute intrinsic sizing correctly, preventing overflow or misalignment.
• Percentage padding in table cells resolves against column widths, matching the CSS spec and improving responsive table design.
• Table height distribution now applies to all <tbody> sections, not just the first one. This ensures multi-section tables divide space evenly.

These changes (bugs 168815514, 168940907, 169154677) make Safari more predictable for complex layouts.

8. SVG Gains color-interpolation for Gradients

SVG gradients now honor the color-interpolation attribute, which controls the color space used for gradient transitions. This feature (bug 3059... referenced internally) allows developers to choose between sRGB and linearRGB for smoother or more precise color blends. While listed as a new feature, it's part of ongoing SVG standard compliance efforts.

9. VoiceOver Improvements in Shadow DOM and Hidden Elements

Accessibility enhancements extend to shadow DOM interactions: elements with display: contents and content inside a shadow root are now properly read when referenced by aria-labelledby. Also, grid elements with child rows in a shadow root now work correctly with VoiceOver, fixing a major barrier for complex web applications. Furthermore, elements that have aria-controls or aria-expanded along with the hidden attribute no longer appear in VoiceOver's Form Control menu, reducing clutter for users.

10. ::first-letter Now Exposed in Accessibility Tree

A subtle but important fix: when ::first-letter 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.

Conclusion: 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.