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

Names of <input type=range> / <input type=checkbox switch> pseudo-elements #9830

Open
annevk opened this issue Jan 22, 2024 · 3 comments
Open

Comments

@annevk
Copy link
Member

annevk commented Jan 22, 2024

I decided to split this from #4410 as that discussion is already quite long.

In WebKit we accidentally implemented the new pseudo-elements as ::thumb and ::track. They are not shipped and can be renamed, but when discussing it internally none of us really liked the longer prefixed names. Also, when it was revealed we implemented these pseudo-elements, nobody noticed they had the wrong names. @nt1m discovered it while auditing pseudo-elements in general.

Selectors are typically short words, without thematic grouping. E.g., it's :playing, not :media-playing. They get context from usage. E.g., input::thumb.

And for a switch it's also not at all a "slider" thumb. It's just the thumb. It slides while animating, but it's not like you can hold it in any position that's not on or off.

If there's ever a need for another thumb/track-like pseudo-element that can have a longer name.

@yisibl
Copy link
Contributor

yisibl commented Jan 22, 2024

RESOLVED: Add ::slider-thumb, ::slider-track
RESOLVED: Define these two pseudos as siblings of each other
RESOLVED: Apply them to <input type=range>, switch, <progress>, and <meter>
RESOLVED: Add ::slider-fill when relevant
RESOLVED: track, fill, thumb are in the same tree order as their usual painting order

#4410 (comment)

I found a problem with the name of the WebKit implementation, but I thought the CSSWG had discussed it elsewhere and removed the slider- prefix from the name.😂

Overall, I like the shorter names.

@tabatkins
Copy link
Member

Selectors are typically short words, without thematic grouping. E.g., it's :playing, not :media-playing. They get context from usage. E.g., input::thumb.

This is true for pseudo-elements, because their only effect is to match something; they don't affect anything else. But pseudo-elements do have larger effects, namely what properties are allowed on them. So having a slightly uniquified name, if we think there might be other pseudos with the same "basic" name that could have different contexts, could be useful.

(I suspect that's not really the case here, fwiw - all the thumb/track/etc pseudos will act the same in this regard.)

So, sure, shorter names works for me.

@fantasai
Copy link
Collaborator

My concern with the shorter names is that some of them are very generic, e.g. ::track especially and even ::thumb. Imho grouping them together makes it clearer what they're referring to.

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

5 participants