Editorial review: scroll-state scrolled descriptor

[chrisdavidmills]

Description

Chrome 144 adds support for the @container at-rule scroll-state scrolled descriptor; see https://chromestatus.com/feature/5083137520173056.

This PR adds documentation for this new descriptor.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs (2 pages)

• /en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries
• /en-US/docs/Web/CSS/Reference/At-rules/@container

Flaws (13)

Note! 1 document with no flaws that don't need to be listed. 🎉

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Reference/At-rules/@container
Title: @container
Flaw count: 13

• broken_links:
  • Link /en-US/docs/Web/CSS/block-contents doesn't resolve
  • Link /en-US/docs/Web/CSS/custom-ident is a redirect
  • Link /en-US/docs/Web/CSS/size-feature doesn't resolve
  • Link /en-US/docs/Web/CSS/scroll-state-feature doesn't resolve
  • Link /en-US/docs/Web/CSS/function-token doesn't resolve
  • and 8 more flaws omitted

(comment last updated: 2026-03-10 15:50:09)

[estelle]

grammar nits and a bit of source re-ordering. Nothing major, unless you want to fix the @container page (and create descriptor pages).

[estelle]

Let's put the "no support" hidden CSS after all other CSS for the all the examples using it so if the reader hits "play", this less relevant CSS is at the bottom of the CSS tab.

It also makes sense to put all hidden CSS after the shown CSS for the same reason. If there's ever a concern over cascade/specificity, put all the hidden CSS in a layer; anything not in a layer will always take precedence (unless !important is used, which it won't be)

[chrisdavidmills]

OK, I've moved the @supports block to the end of the articles, and in the future, I'm going to bear what you've said about this in mind. That said, I'm not going to spend considerable time restructuring all the rest of the CSS source of this article. It is fairly complicated, there are quite a few shared bits, and I don't think the benefit to MDN Playground users outweighs the effort required, and the issue that it'll probably make it harder to edit for future editors.

[estelle]

Suggested change

	Scroll-state [`scrolled`](/en-US/docs/Web/CSS/Reference/At-rules/@container#scrolled) queries, written as `scroll-state(scrolled: value)`, test whether a container's scrolling ancestor was most recently scrolled in the given direction. If not, the query returns false.
	The `value` indicates the direction you are testing for, for example:
	Scroll-state [`scrolled`](/en-US/docs/Web/CSS/Reference/At-rules/@container#scrolled) queries, written as `scroll-state(scrolled: <keyword>)`, test whether a container's scrolling ancestor was most recently scrolled in the given direction. If not, the query returns false.
	The keyword value indicates the direction you are testing for, for example:

[chrisdavidmills]

I agree with this change, but I've kept this as a reminder rather than committing it, as there are four instances to update in the article. I've made those changes in my next commit.

[estelle]

Suggested change

	- `y`: Tests whether the container was most recently scrolled in either direction along its y axis.
	- `y`: Tests whether the container was most recently scrolled in either direction along its vertical y-axis.

or

Suggested change

	- `y`: Tests whether the container was most recently scrolled in either direction along its y axis.
	- `y`: Tests whether the container was most recently scrolled up or down along the y-axis.

[chrisdavidmills]

updated in my next commit. Again, I kept it as a reminder rather than committing it, as I thought there'd be multiple instances, but there was only one in the end.

[estelle]

Looks good. a few minor suggestions. approving. Can't wait to use this!