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-scrollbars] Define what scrollbar "track" and "face" are #2898

Closed
a2sheppy opened this issue Jul 9, 2018 · 11 comments

Comments

Projects
None yet
6 participants
@a2sheppy
Copy link

commented Jul 9, 2018

In section 2, the terms "scrollbar-track" and "scrollbar-face" are used without defining what these are. The terms used to describe the components of a scrollbar vary from platform to platform, so the ones chosen here must be defined to ensure that all readers are on the same page.

Presumably the track is the main bar background area; the "face" is the more confusing term. Is that the draggable widget (which I have called an "elevator" since sometime in the mid-1980s despite various other terms floating past me over the years)? Does the face include the arrows at the end(s) of the scroll bar? If so, is it the background of the arrow's box, the foreground? Or is it the scrollbar's bounding box? Or something else entirely? Or is it intended to be up to the client to decide what to do with these values?

@upsuper

This comment has been minimized.

Copy link
Member

commented Jul 10, 2018

The dragging area is the "face" and the area serving as a track of the dragging area is "track". And everything else intends to be platform-dependent, like whether arrows should take "face" color or "track" color or neither (e.g. no arrows at all, or use some color derived from either or both specified colors).

@SelenIT

This comment has been minimized.

Copy link
Collaborator

commented Jul 10, 2018

Some of the documented examples (e.g. TweetDeck. mentioned in the rationale that pseudo-elements are not needed, but apparently under-examined back then) also display intent to control the shape (rounded corners) and minimum size of the dragging area. Are there any chances that the spec will take these aspects into account?

@a2sheppy

This comment has been minimized.

Copy link
Author

commented Jul 10, 2018

@upsuper That's about what I thought. It would be wise, IMO, to have that information laid out explicitly in the spec.

@fantasai

This comment has been minimized.

Copy link
Collaborator

commented Jul 30, 2018

Wikipedia lists some various terms for the thumb: https://en.wikipedia.org/wiki/Scrollbar
I think “grip” seems the most self-evident out of all of them, maybe it's worth considering s/scrollbar-face-color/scrollbar-grip-color/g. Agreed that the spec should describe the parts of the scrollbar it's talking about, though.

@smfr

This comment has been minimized.

Copy link
Contributor

commented Aug 1, 2018

"Face" is a weird name for the draggable bit. On macOS we call it the "knob" or "thumb". I support "track" for the other part.

@tabatkins

This comment has been minimized.

Copy link
Member

commented Aug 1, 2018

Agree; "knob" and "track" seem like a good pair of words.

(I do hear "thumb" quite a bit, but only for scrollbars; it seems like maybe a weird artifact of some historical naming scheme? Weird anyway.)

@SelenIT

This comment has been minimized.

Copy link
Collaborator

commented Aug 2, 2018

FWIW, the word "thumb" is also used in browser-specific pseudo-elements name for the quite similar part of the value slider (<input type="range">). Interestingly, all engines that have such styling option use that name.

@a2sheppy

This comment has been minimized.

Copy link
Author

commented Aug 4, 2018

I definitely agree with "track" for what it's worth; I would use "thumb" for the draggable widget for two reasons: first, because as @SelenIT points out, there is precedent, and second, because the word "knob" does have an unfortunate slang meaning that could wind up the target of some "humor."

@upsuper

This comment has been minimized.

Copy link
Member

commented Aug 30, 2018

I tried to add some explanation of this in #3065.

@upsuper

This comment has been minimized.

Copy link
Member

commented Sep 15, 2018

@a2sheppy @fantasai @tabatkins @smfr @SelenIT do you think the description I added in #3065 is sufficient? If so, maybe we can close this issue?

@SelenIT

This comment has been minimized.

Copy link
Collaborator

commented Sep 16, 2018

IMO the description is OK (though I'm still a bit skeptical about the coloring-only approach in general, honestly).

@upsuper upsuper closed this Sep 19, 2018

@upsuper upsuper removed the Needs Edits label Sep 19, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.