Safari Technology Preview 242: Enhanced CSS Support and Accessibility Fixes

CSS

New Features

• CSS attr() function (CSS Values Level 5): The attr() function now fully supported, allowing authors to retrieve attribute values from elements and use them in CSS property values. This expands dynamic styling possibilities (310246@main).
• oblique-only for font-synthesis-style: Added support for the oblique-only value as defined in CSS Fonts Level 4. This lets developers control font synthesis for oblique (slanted) styles more precisely, ensuring only oblique variations are generated when the font lacks them (310409@main).

Resolved Issues

• Dark mode in iframes: The @media (prefers-color-scheme: dark) query inside an iframe now correctly matches when the iframe’s own color-scheme property is set to dark. Previously the media query failed to apply, causing inconsistencies in embedded content (310465@main).
• position-try-order and writing modes: Fixed interpretation of logical axis values for the position-try-order property. It now uses the containing block’s writing mode instead of the element’s own writing mode, aligning with the specification (310277@main).
• Stale widths in shrink-to-fit containers: Percent-height replaced elements (like images) no longer compute stale preferred widths when placed in shrink-to-fit containers. This resolves layout jitter and incorrect sizing (310194@main).
• Table cell minimum width quirk: The quirk that applies a nowrap-style minimum width calculation for table cells is now restricted to quirks mode only; it no longer leaks into standards mode, improving cross‑browser compatibility (310195@main).
• Checkbox outline alignment: Checkboxes now display their focus outlines correctly aligned with the control, rather than being offset (310323@main).
• Anchor positioning and sticky containers: Elements positioned via CSS anchor positioning that are anchored to children of sticky‑positioned boxes now stick properly. Previously they could detach during scrolling (310255@main).
• Pseudo‑element sorting in anchor elements: When sorting anchor elements by tree order, pseudo‑elements (e.g., ::before, ::after) are now placed correctly, respecting their associated element (310407@main).
• Ligatures and zero font-size: Text with font-size: 0 no longer contributes a non‑zero layout width due to ligature substitution. This corrects spacing for hidden or zero‑sized text (310394@main).
• :in-range and :out-of-range updates: The pseudo‑classes now correctly reflect changes when the readonly attribute is toggled on an input element, ensuring form validation states are accurate (310484@main).
• view-timeline-inset serialization: Fixed an issue where serialization of the view-timeline-inset property failed to combine identical values, which could break CSS animation timelines in some scenarios (310590@main).

Forms

Resolved Issues

• <select multiple> onchange event: A bug where the onchange event wasn’t consistently fired when a user released the mouse button far outside a multiple‑selection <select> element has been resolved. The event now triggers as expected regardless of mouse position (310482@main).

HTML

New Features

• closedby attribute on <dialog>: Support added for the closedby attribute, which specifies how a dialog can be dismissed (e.g., by pressing Escape or clicking the backdrop). This allows more flexible dialog control (310487@main).

Resolved Issues

• HTML parser fast path for escaped attributes: The fast path parser now correctly processes escaped attribute values that are longer than one character, preventing parsing errors in certain edge cases (310209@main).
• Nested <li> detection: The fast path parser now accurately detects nested <li> elements, ensuring proper list structure even when list items are placed inside other list items (310492@main).
• MathML and SVG integration point checks: The fast path parser uses the adjusted current node when checking MathML and SVG integration points, aligning with specification for foreign content parsing (310593@main).

Images

Resolved Issues

An issue where inserting an image with a srcset attribute into the DOM could cause incorrect resource selection (310528@main) has been fixed. This ensures responsive images load the most appropriate source based on viewport and device conditions.

Conclusion

Safari Technology Preview 242 continues Apple’s commitment to advancing web standards and refining the browsing experience. With enhanced CSS capabilities, improved accessibility, and numerous bug fixes across forms, HTML parsing, and images, developers have a solid environment to test upcoming features. To install or update, navigate to System Settings > General > Software Update on macOS Tahoe or Sequoia. We encourage developers to experiment with the new attr() function and closedby attribute, and to report any further issues via the WebKit bug tracker.