[css-scrollbars-1] scrollbar-width should be inherited

[joshuaptfan]

scrollbar-color is inherited, yet scrollbar-width is not. (These are currently the only two properties in the scrollbars spec.) Is there any reason why these two related properties differ in inheritance?

The lack of inheritance is inconvenient for web devs wishing to ensure consistency in appearance site-wide, necessitating either excessive specific CSS selectors or the dreaded *.

[tabatkins]

Yeah, those two should absolutely inherit the same way, either both or neither inheriting.

[upsuper]

It is intentional.

The basic idea is that scrollbar-color is more a style that you may want to apply to a subtree as a whole, while scrollbar-width is more related to specific case of each element, e.g. when there's a list too narrow to accommodate a normal-width scrollbar or you're installing a custom scrollbar on an element thus want to hide its native scrollbar.

I'm not totally sure whether that assumption still makes sense, but it was intentionally done that way.

[tabatkins]

Hm. I understand the argument for not inheriting the scrollbar-width property; it's a layout property, and we don't usually inherit those, for precisely this reason.

But on the other hand, as the OP points out, inheriting makes it easier to have a consistent scrollbar design across a site, the same justification used for having scrollbar-color inherit.

And the more general issue of two properties under the same prefix not having the same inheritance behavior still makes me very uncomfortable. I feel like we have one example of that in all of CSS and it's for a very special case (I forgot what, but I think it's related to text).

[upsuper]

And the more general issue of two properties under the same prefix not having the same inheritance behavior still makes me very uncomfortable. I feel like we have one example of that in all of CSS and it's for a very special case (I forgot what, but I think it's related to text).

I thought there are several but I think you're probably right that it's rare. So far I found text-overflow is non-inherited while most other text-* are inherited, except that text-decoration-* are not (but text-underline-position is).

[jonjohnjohnson]

See also:

• Pull Request #3671 - Make scrollbar-width inheritable
• Issue #2879 - Shorthand for scrollbar colors (maybe also colors + width)

And previous words by @upsuper...

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.

If we want the scrollbar shorthand we can open a new [issue] I guess.

Keeping in mind things like the border shorthand resetting border-image to it's initial value.

[frivoal]

But on the other hand, as the OP points out, inheriting makes it easier to have a consistent scrollbar design across a site, the same justification used for having scrollbar-color inherit.

I kind of see this as a downside.

Overall, scrollbars are a matter of UI, which I think should be more of a user / UA / OS choice, than an author choice.

To me, this properties is most strongly justified when allowing authors to say something like "this particular component is a small chat-box in the corner, it doesn't have much room, and narrow(er) scrollbars would be appropriate". I think it is less justified if it's about letting authors say "I think thin scrollbars are prettier".

Ultimately, both will be possible anyway, and there's a big gray zone in the middle, but it seems to me that a non inherited property biases (slightly) towards the per component UX consideration, while an inherited one biases (slightly) towards overall esthetics, and so I'd rather keep it non inherited.

[frivoal]

Agenda+ to propose resolving as WONTFIX, for the reason stated in #4799 (comment)

(Also, Firefox has been shipping it already, making changes less welcome)

[css-meeting-bot]

The CSS Working Group just discussed scrollbar-width inheritance, and agreed to the following:

• RESOLVED: Close WONTFIX; scrollbar-width remains non-inherited

The full IRC log of that discussion

<fantasai> Topic: scrollbar-width inheritance
<fantasai> github: https://github.com//issues/4799#issuecomment-877482191
<fantasai> florian: Suggestion to switch scrollbar-width to inherited
<fantasai> florian: for consistency with scrollbar-color and to make easier to style the whole page
<fantasai> florian: and I think we should not do that or exactly that reason
<TabAtkins> florian's argument in the thread makes sense to me, i'm fine with WONTFIX'ing this
<fantasai> florian: Primary use case for global scrollbar width is author preference, not author preference
<tantek> +1. disagreewith making scrollbar-width to inherited
<fantasai> florian: but author might know about certain widgeths or whatever that need a thinner scrollbar
<bmathwig> +1 on this Florian
<fantasai> florian: and that would be a reason for author control
<emilio> +1
<fantasai> florian: so I think should stay not inherited
<fantasai> +1
<tantek> also I disagree with the methodology of equating reasoning of -color with -width
<fantasai> RESOLVED: Close WONTFIX; scrollbar-width remains non-inherited
<TabAtkins> ScribeNick: TabAtkins