Re: Var for scrollbar size

On 23 May 2016 at 19:48, Tab Atkins Jr. <> wrote:
> On Thu, May 19, 2016 at 11:56 PM, Sebastian Zartner
> <> wrote:
> > On 20 May 2016 at 01:02, Tab Atkins Jr. <> wrote:
> >>
> >> On Wed, Apr 27, 2016 at 9:16 AM, Daniel Buchner <> wrote:
> >> > Hey Dub Stylers!
> >> >
> >> > Not sure why I never thought of this all the times I have needed it, but
> >> > after running into it again today I started wondering why there isn't a var
> >> > in CSS that represents scrollbar size?
> >> >
> >> > I would love to have a var like currentColor that stands for the scrollbar
> >> > size; it would really help in layouts where you want to prevent snap from
> >> > scrollbar appearance, accounting for fixed element overlap of non-viewport
> >> > scrollable elements, etc.
> >> >
> >> > So how 'bout it, anyone up for scrollbarSize? :)
> >> >
> >> > Let me know what you think,
> >>
> >> Yup, we've discussed this internally, and it came up at the last f2f.
> >> I recommend adding it as a new unit, like "1scrollbar"; that lets the
> >> value work in calc() without depending on us finally fixing the "allow
> >> keywords in calc()" issue. ^_^
> >
> > Having this as unit sounds like a rather hacky solution. There is
> > probably no need for 3scrollbar or 0.5scrollbar.
> > So, I vote for pushing on fixing the "allow keywords in calc()" issue
> > instead or find another solution to consider the scrollbar sizes in
> > dimensions.
> Sure there is. For example, animating from 1scrollbar to 0 needs the
> intermediate values.

Ok, animation could be a use case. Though is there actually a use case
for using the scrollbar size in animations?

> Or wanting to pad the area out a little bigger
> than the scrollbar width, so 1.2scrollbar or something.

As the scrollbar size is something out of control of the author, they
probably would rather use a calc() expression in that case like e.g.
calc(scrollbar + 5px).

> Both of these can be achieved with keyword-calc, of course - calc(1.2
> * scrollbar) - but it's slightly less convenient.

Yes, slightly less convenient, though regarding the assumed default
usage above with a mix of 'scrollbar' and a <length> or <percentage>
value you'd have to use calc() anyway.

> Also, this would be the first universal <length> keyword; all others
> are specific to the property. This has the possibility of introducing
> ambiguity that's not currently there, if there are any places in CSS
> that expect a <custom-ident> *or* a <length>.  These issues are
> avoided with a new unit, because <dimension>s are unambiguous
> everywhere.

If I'm not mistaken, there is no property at the moment taking
<custom-ident> or <length> at the same time. And if there is a syntax
allowing this, it would need to be checked if 'scrollbar' is used
anywhere as <custom-ident> in that case.
If there's no such case, it could simply be disallowed in that combination.

Different approach:
Explicitly add 'scrollbar' as keyword to property syntaxes where
needed. Reason is that for many properties its usage doesn't make much
sense, like the border-*-radius properties, for example.


Received on Monday, 23 May 2016 19:39:45 UTC