Does this integrate with scroll timelines and animations at all? On Wednesday, November 13, 2024 at 1:38:36 AM UTC-8 Rune Lillesveen wrote:
> Four issues are opened against the spec: > > https://github.com/w3c/csswg-drafts/issues/11181 > https://github.com/w3c/csswg-drafts/issues/11182 > https://github.com/w3c/csswg-drafts/issues/11183 > https://github.com/w3c/csswg-drafts/issues/11127 > > The one that's blocking shipping is the potential renaming from > 'overflowing' to 'scrollable': > https://github.com/w3c/csswg-drafts/issues/11182 > > Two of the others are convenience keyword additions, and the last one is a > non-behavioral editorial change to the spec. > > On Tue, Nov 12, 2024 at 2:12 PM Rune Lillesveen <futh...@chromium.org> > wrote: > >> 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 >> >> Specification >> https://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 >> >> > > -- > 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/2a83d73a-4e16-4be3-8666-8870c8ffe070n%40chromium.org.
