WebKit learned to stylize scrollbars

The news a week ago passed unnoticed that the latest builds of WebKit added the ability to override the appearance of the scrollbars in all elements where they can be found:

• overflow style containers
• drop-down lists
• multi-lists (<select multiple>)
• text input fields (<textarea>)

Innovation has not yet been implemented in other engines (which may reduce its prevalence to zero), but nevertheless, I am sure it will work for the common good, setting a good example to follow and helping developers not to sit still. Below is a translation of the original publication .


A sign that defines the styling of scroll bars is the pseudo-class scrollbar. If specified, WebKit, instead of standard controls, will use the information specified in CSS.
')
:: - webkit-scrollbar {
width: 13px;
height: 13px;
}

The width and height properties specify, respectively, the width of the vertical and the height of the horizontal scrollbar. Values ​​can also be set in percent, then pixel values ​​will be calculated, as usual, based on the size of the parent element.

Scrollbar consists of a bar and scroll buttons. The strip, in turn, consists of a floating button and two empty areas around it. In addition to styling the scrollbars themselves, you can also set styles for an empty “corner” in the place where the vertical and horizontal scrollbars are closed. Moreover, it is possible to stylize the “resizer” in TEXTAREA. Here is the complete list of new pseudo-elements:

• -webkit-scrollbar
• -webkit-scrollbar-button
• -webkit-scrollbar-track
• -webkit-scrollbar-track-piece
• -webkit-scrollbar-thumb
• -webkit-scrollbar-corner
• -webkit-resizer

Each of these objects can be styled to define borders, shadows, background images, and so on, thus creating fully custom scrollbars. At the same time, they will preserve the behavior in accordance with the OS settings (such as the position of the scroll buttons and the response to clicks). The following pseudo-classes can be applied to pseudo-elements:

• : horizontal - specifies whether the scrollbar is horizontal
• : vertical - the same for vertical scrollbars
• : decrement - applies to scroll buttons and empty scrollbar areas. He specifies whether these elements are "scrolling back" the contents of the control (that is, scrolling to the left in the case of a horizontal scroll bar, or up in the case of a vertical bar).
• : increment - the same, but for elements "scrolling forward"
• : start - applies to scroll buttons and empty scrollbar areas. Determines if the object is located before the scroll slider
• : end - the same, but after the scroll bar
• : double-button - specifies whether the scroll buttons are “paired” from the same edge of the scrollbar, as in MacOS. if this selector is applied to empty elements of a scroll bar, it means that they are adjacent to the “double button”
• : single-button - the same thing, but for “separated” scroll buttons, as well as empty scroll bar elements adjacent to such buttons
• : no-button — applies to empty elements of the scroll bar, indicating whether the element is adjacent directly to the end of the scroll bar, that is, if there are any scroll buttons. In essence, this selector selects a second, remaining empty piece of the scroll bar that does not fit into the selector: double-button
• : corner-present - applies to any elements of the scrollbar and indicates the presence of an empty "corner" at the junction of the scrollbars
• : window-inactive - applies to any scrollbar elements and indicates whether the window containing the stylized control is active. In recent WebKit assemblies, this selector can also be applied to the :: selection pseudo-element. The authors are working on the implementation of this selector in all other places, and want to promote it as a standard.

In addition to all of the above, the selectors also work with the scrollbar elements: enabled,: disabled,: hover and: active. To hide some elements, they can set the display property: none

Scrollbars can also set margins, including negative ones. Thus, for example, overlapping scroll buttons is implemented.

If you are using a fresh build of WebKit, then in this example you can see fancy scrollbars that implement both MacOS X features (dual buttons, inactivity, button overlapping, etc.) and Windows Vista (pointing effect, appearance when you click on the bar scrolling, etc.).