Intent to Ship: CSS Anchored Fallback Container Queries

80 views
Skip to first unread message

Rune Lillesveen

unread,
Oct 2, 2025, 6:14:37 AM (3 days ago) Oct 2
to blink-dev
Contact emails
[email protected]

Explainer
https://github.com/w3c/csswg-drafts/blob/main/css-anchor-position-1/anchored_container_query.md

Specification
https://drafts.csswg.org/css-anchor-position-2/#anchored-container-queries

Summary
Introduce @container anchored(fallback) to style descendants of anchor positioned elements based on which of position-try-fallbacks is applied.

Such queries can be used to e.g. style an anchored element's tether, its animations, etc. based on how the anchor and the anchored element are positioned relative to each other.

Example:

  #anchored {
    position-try-options: flip-block;
    container-type: anchored;
  }
  @container anchored(fallback: flip-block) {
    #anchored { --arrow-rotation: 180deg; }
  }

TAG review
https://github.com/w3ctag/design-reviews/issues/1103

TAG review status
Issues addressed

Risks


Interoperability and Compatibility
None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1236)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/501)

Web developers: Positive https://bsky.app/profile/jpzwarte.bsky.social/post/3luslfusjps2o https://bsky.app/profile/ishadeed.com/post/3lw43wolylc2w Responses to this post: https://bsky.app/profile/una.im/post/3lu3qkwadps22

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None


Debuggability
None

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
Yes

Is this feature fully tested by web-platform-tests?
Yeshttps://wpt.fyi/css/css-anchor-position/container-queries/

Flag name on about://flags
enable-experimental-web-platform-features

Finch feature name
CSSFallbackContainerQueries

Rollout plan
Will ship enabled for all users

Requires code in //chrome?
False

Tracking bug
https://crbug.com/417621241

Sample links

https://codepen.io/una/pen/ZYbzrLg

Estimated milestones
Shipping on desktop143
DevTrial on desktop138
Shipping on Android143
DevTrial on Android138
Shipping on WebView143


Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/5177580990496768?gate=5193321844310016

Links to previous Intent discussions
Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeQa%2BJo1gU5uX4V4ukRLgNsLA7BfiTzX3Dyg2gUJOBG0yA%40mail.gmail.com


This intent message was generated by Chrome Platform Status.

--
Rune Lillesveen

Emilio Cobos Álvarez

unread,
Oct 2, 2025, 11:44:58 AM (3 days ago) Oct 2
to Rune Lillesveen, blink-dev
Is the example right? It seems like that shouldn't work? #anchored is not a descendant of #anchored, is it? :)

 -- Emilio
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

Rune Lillesveen

unread,
Oct 2, 2025, 1:38:10 PM (3 days ago) Oct 2
to Emilio Cobos Álvarez, blink-dev
On Thu, Oct 2, 2025 at 5:44 PM Emilio Cobos Álvarez <[email protected]> wrote:
Is the example right? It seems like that shouldn't work? #anchored is not a descendant of #anchored, is it? :)

Oops. Thanks for spotting that mistake. Edited the chromestatus entry where this came from:

#anchored {
  position-try-options: flip-block;
  container-type: anchored;
}
@container anchored(fallback: flip-block) {
  #anchored > .arrow { --arrow-rotation: 180deg; }
}


--
Rune Lillesveen

Reply all
Reply to author
Forward
0 new messages