Skip to content
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.

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

[css-overflow-5] Making ::scroll-marker existence unconditional? #11600

Open
tabatkins opened this issue Jan 29, 2025 · 1 comment
Open

[css-overflow-5] Making ::scroll-marker existence unconditional? #11600

tabatkins opened this issue Jan 29, 2025 · 1 comment

Comments

@tabatkins
Copy link
Member

Currently, the existence of ::scroll-marker-group is dependent on the scroll container having a non-none value for scroll-marker-group. <https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-pseudo> Then ::scroll-markerexistence is dependent on its corresponding::scroll-marker-group` existence (+ markup information defining the element as being a "scroll marker").

This prevents us from making ::scroll-marker a ":has-allowed pseudo-element", since its existence is determined by style, and using :has(::scroll-marker) would allow cyclic styling loops. This, unfortunately, means it seems hard to define examples like this:

Image

Note that the scroll-markers before the :target-current one are solid white; the current and subsequent ones are partially transparent. @argyleink tried to achieve this with:

.carousel li:has(~ li::scroll-marker:target-current)::scroll-marker {
  opacity: 1;
}

But it doesn't work because ::scroll-marker isn't marked as being valid in :has().


So, question: can we make the existence of ::scroll-marker (and perhaps ::scroll-marker-group) unconditional, based just on the markup information? We'd change the wording so the box generation is dependent on styling as currently specified, but the pseudo-element would be treated as existing regardless, so we could make ::scroll-marker a ":has-allowed pseudo-element", and Adam's code would work.

@argyleink
Copy link
Contributor

Another use case?
on hover if you want to show the relevant scroll element that a marker was created for:

.carousel li:has(::scroll-marker:hover) {
  outline: 1px solid LinkText;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants