w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.52k stars 673 forks source link

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

Open annevk opened 10 months ago

annevk commented 10 months ago

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 commented 10 months ago

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

https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1720875895

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 commented 3 weeks ago

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 commented 2 weeks ago

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.