On Wed, Nov 20, 2024 at 5:24 PM Alex Russell <slightly...@chromium.org> wrote:
> Does this integrate with scroll timelines and animations at all? > Scroll positions are intentionally snapshotted at the same time for scroll-timeline and scroll-state() queries: https://drafts.csswg.org/cssom-view/#post-layout-snapshot Otherwise there is no particular interaction between scroll-state() queries and scroll-timelines different from other CSS features. 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 >> >> -- 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/CACuPfeQORO8ZQs%2Bd5aBaB1tj26FLscnoZpMy%3D_yrOxvTbmVdFQ%40mail.gmail.com.
