Safari Technology Preview 253 lets container queries branch on sibling-index() and frees style-originated scroll timelines

I opened the notes this morning, and the first item made me stop scrolling. sibling-index() and sibling-count() inside a @container condition. That's a small change on paper and a real shift in what container queries can answer.

Safari Technology Preview 253 is out for macOS Golden Gate and macOS Tahoe, and covers WebKit changes 320113@main through 321067@main. Preview channel, one engine. The release does not claim Baseline for anything below, and I won't extrapolate one.

The change that reframes container queries

Per the release, @container conditions can now use sibling-index() and sibling-count() — change 320493@main. Container queries have always answered "how wide is my container", "how tall is my container". They now answer a different kind of question: "where am I in the list I belong to, and how long is that list".

That's a category shift. Position among peers used to be an :nth-child job on the child selector side of the cascade, or a script that walked the DOM and set data attributes. Neither approach fed a container query. Now the condition itself can carry that fact, and the rule body can respond to it.

The release lists the change and the WebKit revision. It does not print a full example. I am not going to invent one — if you are trying it in STP tonight, the shape you want to try is a @container block whose condition tests one of the two functions, and let the parser tell you what it accepts.

The scroll-timeline scope, opened up

Style-originated scroll timelines now match globally, per change 320183@main. Read that carefully: they can be defined outside the target's ancestor hierarchy, or outside an element that carries a timeline-scope property. Before this change, a timeline had to sit somewhere the animated element could see through the tree. That constraint was the reason authors were reaching for timeline-scope in the first place, to hoist visibility up to a common ancestor.

The release frames the change as "match globally". If you had a scroll-driven animation working only because you had rearranged the DOM to put the timeline in the right ancestor, that plumbing can start coming out.

The rest of the CSS and OM surface

Two smaller items round out the release:

• CSSContainerRule.conditions is now supported (change 320762@main). The condition text of a @container rule is readable off the CSSOM, so tooling that inspects stylesheets can ask a rule for its own condition instead of parsing selectors by hand.
• The ViewTimeline constructor now correctly requires a subject parameter (change 320969@main). If your script was constructing a ViewTimeline without one and getting away with it, that call will need to change. A tightening of the JavaScript API to match the specification, not a new capability.

An accessibility fix worth reading twice

Change 320424@main is a VoiceOver correction. When aria-keyshortcuts values contain Meta or Alt, VoiceOver was announcing those tokens literally, instead of the macOS terminology Command and Option. Users heard "Meta" for the key labelled Command on the keyboard in front of them.

That's the kind of quiet correctness fix that only surfaces when you sit with a screen reader and listen. If you author custom shortcuts on interactive components, this is one to re-run through VoiceOver once the fix reaches a channel you can test against.

What I'm watching next

Two things. First, whether other engines pick up sibling-index() and sibling-count() in @container conditions — cross-engine parity is what turns a preview curiosity into something you can lean on in a design system. Second, what authors actually do with style-originated timelines now that they escape the ancestor hierarchy: the interesting demos will be the ones that would have needed timeline-scope gymnastics before, and now do not.

Nothing here has a Baseline claim. STP is what STP has always been: try the syntax, keep the fallback path intact, watch the other engines.