Intent to Ship: CSS Anchored Fallback Container Queries

[Rune Lillesveen]

Contact emails

fut...@chromium.org

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; }

  }

Blink component

Blink>CSS

Web Feature ID

https://github.com/web-platform-dx/web-features/issues/3403

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 desktop	143
DevTrial on desktop	138
Shipping on Android	143
DevTrial on Android	138
Shipping on WebView	143

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