Intent to Prototype: CSS Sticky State Container Queries

662 views
Skip to first unread message

Rune Lillesveen

unread,
Aug 23, 2023, 8:18:05 AM8/23/23
to blink-dev

Contact emails

fut...@chromium.org

Explainer

https://lilles.github.io/explainers/state_container_queries.html

Specification

None

Summary

Use container queries to style descendants of sticky positioned containers based on whether the sticky positioned element is stuck to one of the edges of the scroll box. For instance: #sticky { position: sticky; container-type: sticky; } @container state(stuck: top) { #sticky-child { font-size: 75% } }



Blink component

Blink>CSS

Motivation

See explainer



Initial public proposal

https://github.com/w3c/csswg-drafts/issues/6402

TAG review

https://github.com/w3ctag/design-reviews/issues/885

TAG review status

Pending

Risks



Interoperability and Compatibility

None



Gecko: No signal

WebKit: No signal

Web developers: No signals

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



Is this feature fully tested by web-platform-tests?

No

Flag name on chrome://flags

None

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Estimated milestones

No milestones specified



Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5072263730167808

This intent message was generated by Chrome Platform Status.

--
Rune Lillesveen

Woody

unread,
Oct 7, 2024, 2:09:44 PM (7 days ago) Oct 7
to blink-dev, Rune Lillesveen
Reply all
Reply to author
Forward
0 new messages