[css-scrollbars] Shorthand for scrollbar colors (maybe also colors + width)?

[upsuper]

Authors would generally want to set both scrollbar colors together, so it may make sense to have a shorthand for them. Maybe something like scrollbar-color with two colors?

cc @tantek

[tantek]

This seems reasonable to me. Now that we also have 'scrollbar-width', do we also want a 'scrollbar' shorthand to do both colors and the width?

Can we rename this issue to something like:
Shorthands for scrollbar colors, and colors + width?

Let’s use this issue to discuss scrollbar shorthands in general.

(Originally published at: http://tantek.com/2018/185/t3/)

[jonjohnjohnson]

How about scrollbar-style over just scrollbar for the catch-all shorthand?

[fantasai]

A scrollbar shorthand would be a nice way to reset everything back to auto, regardless of what scrollbar controls we might have in the future, so maybe that's helpful.

Definitely in favor of a scrollbar-color shorthand.

[upsuper]

There was concern raised in our Intent to Implement that, what should happen when one of the color is specified, while the other is not. It's probably a reasonable concern, and the UA would probably be required to either derive the other color to ensure contrast, or avoid showing custom scrollbar in that case.

I'm now thinking about using a single scrollbar-color longhand property to replace the current two properties. It would accept value auto | <color>{2}, so that giving a single value is invalid, and it would either have two colors, for face and track respectively, or just auto.

What do you think about this?

[upsuper]

So in #3065, the two scrollbar color properties are merged into one, so if we are adding a shorthand, that would be one consisting of scrollbar-color and scrollbar-width.

For such shorthand, it seems the only usecase would be to reset everything to auto, maybe we can give this shorthand a single value auto, and when it's set, scrollbar properties get auto? I don't think allowing it to set the two properties to other values really makes much sense, especially given that the two properties are serving different use cases independently.

[upsuper]

So I don't think a shorthand consisting of scrollbar-color and scrollbar-width should block FPWD. We may consider this later, but I tend not to add it in general.

@tantek brought to me that a scrollbar shorthand may be a parallel to other shorthands like border and outline, but I'll argue that it's not the case.

The difference is that, all subproperties of border / outline are serving the single use case to style border / outline of the given element, and thus they are all non-inherited.

While scrollbar-color and scrollbar-width seem to be for styling scrollbars, they are actually serving different use cases: scrollbar-color is for theme consistency, usually set for the whole page, while scrollbar-width is for hiding scrollbar or making it thinner for specific element where normal scrollbar doesn't fit. Because of that, the former is inherited while the latter is not.

Because of that, I don't think a general scrollbar shorthand is really desirable, and I don't think it need to block FPWD.

[fantasai]

@upsuper I think the resolution to #2993 supersedes this one, so should close the issue? (You're the original commenter, so...)

[upsuper]

OK, let's close it. If we want the scrollbar shorthand we can open a new one I guess.