[csswg-drafts] [css-scrollbars-1] New "better" proposition for scrollbars

Nadya678 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scrollbars-1] New "better" proposition for scrollbars ==
Due to [this preposition](https://github.com/w3c/csswg-drafts/issues/2007) and fact that the ::pseudoelements cannot have :pseudoclasses described in spec of selectors 
`button::after:disabled` is equivalent of `button:disabled::after` I have new proposition for scrollbars.

These pseudoelements are applicable only for elements with set overflow:auto or overflow:scroll ans are not inherited. The property overflow cannot be used for these **pseudo**lelements due to recurency problem. 

`::vert-scroll` - describes height, position, background color and other properties of Vertical Scrollbar
`::horz-scroll` - describes width, position, background color and other properties of Vertical Scrollbar

`::horz-scroll-thumb` - the thumb of horizontal scrollbar,
`::vert-scroll-thumb` - the thumb of vertical scrollbar

`::scroll-grip` - the gripper (if present) mainly for textareas

`::scroll-up-active` - the active button that scrolls top in vertical scrollbar,
`::scroll-up-inactive` - the inactive button with bottom arrow in vertical scrollbar,
`::scroll-up-pressed` - the active button that scrolls top in vertical scrollbar in pressed state.,

Additionally in the same manner:
`::scroll-down-active 
::scroll-down-inactive
::scroll-down-pressed

::scroll-left-active 
::scroll-left-inactive
::scroll-left-pressed

::scroll-right-active 
::scroll-right-inactive
::scroll-right-pressed`

The `::vert-scroll` and `::horz-scroll` shall have possible to set at least background, width/height, opacity, borders, visibility. the default position shall be position:relative. The default overflow shall be overflow:visible.

The buttons shall have possibility to set width and height, colors, background, borders, position including left, top, right, bottom, The detault positioning is position:absolute (relative to ::vert-scroll/::horz-scroll) 

The thumb shall have possibility to set min-width/min-height, colors, backgrounds. borders (including border-radius). 

additionally for all these pseudoelemts shall be possible to set display:none and visibility:hidden. 

This model meets reality od scrollbar construction and meets CSS3 requirements for pseudocalsses and pseudoelements. There is possible to describe standard PC browser scrollbars and standard mobile browser scrollbars.  If it is needed I can describe scrollbars with standard styles and there elements for you.  


Btw: To think about: 
`::horz-scroll-thumb-pressed` - the thumb of horizontal scrollbar if mouse down or touched,
`::vert-scroll-thumb-pressed` - the thumb of vertical scrollbar  if mouse down or touched

::vert-scroll-thumb-inactive - has no adoption - the thumb is not present in the case. Thus without active/inactive suffix. 

How do you think about it?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2153 using your GitHub account

Received on Sunday, 31 December 2017 12:22:12 UTC