Skip to content

[css-conditional-5] Match scroll-state(scrollable) for root element on viewport #11542

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
lilles opened this issue Jan 20, 2025 · 4 comments
Open

[css-conditional-5] Match scroll-state(scrollable) for root element on viewport #11542

lilles opened this issue Jan 20, 2025 · 4 comments
Labels
Agenda+ css-conditional-5 Current Work

Comments

@lilles
Copy link
Member

lilles commented Jan 20, 2025 •
edited
Loading

For the following:

<!DOCTYPE html>
<style>
  @container scroll-state(scrollable: bottom) {
    #target { color: green; }
  }
  :root {
    container-type: scroll-state;
  }
  #target {
    height: 10000px;
  }
</style>
<div id="target">This text should be green</div>

The query will not match unless we match the state of the viewport instead of the root element, since the root element never gets scrollbars.

We should add to the spec that queries that query features of a scroll container should consider the viewport for the root element.
@astearns astearns moved this to FTF agenda items in CSSWG January 2025 meeting Jan 22, 2025
@astearns astearns moved this from FTF agenda items to Regular agenda items in CSSWG January 2025 meeting Jan 22, 2025
@astearns astearns moved this to Regular agenda in CSSWG April 2025 meeting agenda Mar 27, 2025
@mirisuzanne
Copy link
Contributor

mirisuzanne commented Apr 29, 2025 •
edited
Loading

Is this an instance where the viewport should act as a default scroll-state container? Or do we only want it to be allowed as one, by propagating?

@tabatkins
Copy link
Member

I feel like we should avoid propagation if possible here (that's our general policy, after all), and just say that if nothing else catches the scroll-state() query, it's answered by the viewport.

So this would mean that Rune's code wouldn't work as intended (as the root element is capturing the scroll-state query), but if you removed the :root { container-type: scroll-state; } rule then it would Just Work by default. That seems like a good behavior to me.

@mirisuzanne
Copy link
Contributor

I agree I like that better than propagation.

@lilles
Copy link
Member Author

lilles commented Apr 30, 2025

I feel like we should avoid propagation if possible here (that's our general policy, after all), and just say that if nothing else catches the scroll-state() query, it's answered by the viewport.

Maybe propagate is not the right term, but we do apply scroll-snap-type from root to viewport: https://drafts.csswg.org/css-scroll-snap/#scroll-snap-type

In that case we don't have an alternative way, I guess.

So this would mean that Rune's code wouldn't work as intended (as the root element is capturing the scroll-state query), but if you removed the :root { container-type: scroll-state; } rule then it would Just Work by default. That seems like a good behavior to me.

Isn't that a bit of a trap for authors? That setting scroll-state on the root element stops scroll-state() queries on the viewport from working?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Agenda+ css-conditional-5 Current Work
Projects
CSSWG April 2025 meeting agenda
Status: Regular agenda
CSSWG January 2025 meeting
Status: Regular agenda items
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mirisuzanne @tabatkins @lilles