Safari Technology Preview 246 widens color, images and attr()

I opened the STP 246 notes between meetings and ended up writing four little test stylesheets before I closed the tab, which is usually how a release earns its keep. The short version: this preview pushes on the CSS color and image surfaces, gives attr() a longer reach, and quietly turns on two typography knobs in preview. Per the source, this is Safari Technology Preview 246 — a preview build, not a stable Safari release, so treat everything here as engine-specific behaviour you can experiment with today rather than something to ship broadly tomorrow.

What landed in color and images

Two of the additions slot directly into the <image> value type. The first lets you put images on both sides of a theme switch:

background: light-dark(<image>, <image>);

Before this, light-dark() was the easy way to swap a color between light and dark; per the release notes, STP 246 lifts that same convenience to image values, so a background, a border-image source, a mask-image — any place that takes an <image> — can now flip across the theme without writing a separate @media (prefers-color-scheme) block.

The second new piece of the <image> value type is image(<color>). The release notes call out support for image(<color>), meaning a flat color can now be used wherever an image is expected. That removes one of the older awkward moments in CSS, where you wanted a placeholder swatch and ended up reaching for a 1×1 data URI or a zero-stop linear gradient instead.

On the color-function side, two more additions: alpha() as a relative color function, and color-mix() accepting more than two colors. The notes don't go further than naming them in this entry, so the place to read the exact syntax of either is the spec text the release links to — but the headline is that both of these were on the wish list for a while and are now in the engine to try.

attr() reaches into pseudo-elements

The other CSS change worth highlighting: per the release, attr() now works on pseudo-elements with non-trivial originating elements. The earlier attr() story was simple — read a value from the element the rule targets. The lift in STP 246 is that the originating element of a ::before or ::after (or other pseudo-elements built on top of more complex content) can be the source of that lookup, so a content: attr(data-label) rule has a fuller idea of where to look.

It's the kind of change that doesn't get a marquee line in a release note but does quietly unlock patterns where a generated pseudo needs to pull data from the right ancestor instead of being passed it through a custom property.

Typography in preview

Two values flip on in preview rather than in full ship: font-variant-emoji and word-break: auto-phrase. Per the release, both are enabled in this preview build only. font-variant-emoji is the property that lets a stylesheet declare whether an ambiguous codepoint renders as text or as an emoji presentation; word-break: auto-phrase is the value that asks the engine to break lines on phrase boundaries rather than character or word ones. The note here is the "preview" tag — they're available to try in STP 246, not promised behaviour for a stable release.

Accessibility fixes worth a line

The release also lists two accessibility fixes in the pile. VoiceOver now follows focus() calls for newly added elements, so a programmatic focus move on a node that just entered the DOM should actually shift the assistive-tech cursor. And the role computation for elements with prefixes was corrected. If you maintain a component library that injects nodes dynamically and calls .focus() on the new one, this is the kind of fix that quietly improves how the result reads in VoiceOver from one preview build to the next.

Where this leaves you

STP 246 is a single-engine preview. The notes don't claim any of this is Baseline, and neither do I. If you ship to a broad audience, the right move with light-dark(<image>, <image>), image(<color>), alpha(), the expanded color-mix(), or attr() on pseudo-elements is @supports at most — read what the other engines have, then decide.

The one I'm watching next is the preview-tagged pair. font-variant-emoji and word-break: auto-phrase are the kind of properties that you only feel once they're on by default in a stable build across engines — until then, they're a fun toy in the right preview window and not much else.