Chrome 133 supports scroll-state container queries #25941
Merged
+138
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
data:css
caugner
reviewed
Feb 18, 2025
caugner
changed the title
Merged
ddbeck
added a commit
to ddbeck/web-features
that referenced
this pull request
Feb 21, 2025
BCD added more detail to this feature. mdn/browser-compat-data#25941
Elchi3
pushed a commit
to web-platform-dx/web-features
that referenced
this pull request
Feb 27, 2025
BCD added more detail to this feature. mdn/browser-compat-data#25941
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Chrome 133 supports scroll-state container queries. See https://chromestatus.com/feature/5072263730167808.
A data point for the
container-typepropertyscroll-statevalue has already been added previously.This PR adds data for
@containerat-rule support for scroll-state queries. I've added a separate sub-data point for thescrollable,snapped, andstuckfeatures. Even though they are all implemented in Chrome at the same time, I think it is a good reminder of the available subfeatures, and other browsers could easily implement them at different rates.Test results and supporting details
I used the following demos to test the different types of scroll-state container query:
scrollable: https://scroll-state-scrollable-container-query.glitch.me/ (when the document is scrolled downwards (so it able to be scrolled upwards), a back-to-top link should appear)snapped: https://scroll-state-snapped-container-query.glitch.me/ (when a child element snaps to its scroll snap container parent, it should have different styling applied)stuck: https://scroll-state-stuck-container-query.glitch.me/ (when aposition: stickyheading sticks to the top of the screen, it should have different styling applied)Related issues