Contact emailsfuth...@chromium.org Explainer https://drafts.csswg.org/css-conditional-5/scroll_state_explainer.html https://drafts.csswg.org/css-conditional-5/scroll_state_explainer.md
Specificationhttps://www.w3.org/TR/css-conditional-5/#scroll-state-container Summary Use container queries to style descendants of containers based on their scroll state. The query container is either a scroll container, or an element affected by the scroll position of a scroll container. The following states can be queried: - Whether a sticky positioned container is stuck to one of the edges of the scroll box (stuck) - Whether a scroll snap aligned container is currently snapped horizontally or vertically (snapped) - Whether a scroll container can be scrolled in a queried direction (overflowing) A new container-type:scroll-state is introduced to allow such containers to be queried. For instance: #sticky { position: sticky; container-type: scroll-state; } @container scroll-state(stuck: top) { #sticky-child { font-size: 75% } } Blink componentBlink>CSS <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS> TAG reviewhttps://github.com/w3ctag/design-reviews/issues/885 TAG review statusIssues addressed Risks Interoperability and Compatibility Risk: none of the other vendors have committed to implement yet. *Gecko*: No signal ( https://github.com/mozilla/standards-positions/issues/896) *WebKit*: No signal ( https://github.com/WebKit/standards-positions/issues/261) *Web developers*: Positive ( https://utilitybend.com/blog/is-the-sticky-thing-stuck-is-the-snappy-item-snapped-a-look-at-state-queries-in-css) Also, https://ishadeed.com/article/css-state-queries/ *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 - Elements are marked with a "container" badge for scroll-state as for size containers - @container rules in matching styles have a link back to the container element as for size containers - No further support as of now. Future improvements could be - Having an indication of container type in the element badge - Some indication along with the query which feature is matched with which value 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 <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> ?Yes https://wpt.fyi/results/css/css-conditional/container-queries/scroll-state Flag name on about://flags#enable-experimental-web-platform-features Finch feature nameCSSStickyContainerQueries, CSSSnapContainerQueries, CSSOverflowContainerQueries Requires code in //chrome?False Tracking bughttps://crbug.com/40268059 Sample links https://codepen.io/argyleink/pen/JjqVzxq https://codepen.io/argyleink/pen/rNgbbOP https://codepen.io/argyleink/pen/wvbZZWP https://codepen.io/argyleink/pen/zYbEdGm https://codepen.io/argyleink/pen/vYPzdGp https://codepen.io/argyleink/pen/PoMJvXN Estimated milestones Shipping on desktop 133 DevTrial on desktop 116 Shipping on Android 133 DevTrial on Android 116 Shipping on WebView 133 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/5072263730167808?gate=5092937152593920 Links to previous Intent discussionsIntent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeQyse1btL_jhkEQJT9WCsR2sndRo8i%3DyHmzgPu6sDpDOw%40mail.gmail.com This intent message was generated by Chrome Platform Status <https://chromestatus.com/>. -- Rune Lillesveen -- 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 blink-dev+unsubscr...@chromium.org. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeTD96%2BtbBdt3OFkOL5Z0NmjevKsjCBH2PB7JH7BkYbNvA%40mail.gmail.com.
