Незамеченной прошла новость недельной давности о том, что в последних сборках WebKit добавлена возможность переопределять внешний вид скроллбаров во всех элементах, где они могут встречаться:
- контейнерах со стилями overflow
- выпадающих списках
- мульти-списках (<select multiple>)
- текcтовых полях ввода (<textarea>)
Нововведение пока не реализовано в других движках (что может свести его распространённость к нулю), но тем не менее, уверен, оно будет работать на общее благо, показывая хороший пример для подражания и помогая разработчикам не сидеть на месте. Ниже — перевод оригинальной публикации.
Признаком, определяющим стилизацию полос прокрутки, является псевдокласс scrollbar. Если он указан, WebKit, вместо стандартных контролов, будет использовать информацию, заданную в CSS.
::-webkit-scrollbar {
width: 13px;
height: 13px;
}
Свойства width и height задают, соответственно, ширину вертикального и высоту горизонтального скроллбара. Значения также можно задавать и в процентах, тогда пиксельные значения будут вычислены, как обычно, исходя из размеров родительского элемента.
Скроллбар состоит из полосы и кнопок прокрутки. Полоса, в свою очередь, состоит из эдакой плавающей «кнопочки» и двух пустых областей вокруг неё. Помимо стилизации самих скроллбаров, можно также задать стили для пустующего «уголка» в том месте, где смыкаются вертикальный и горизонтальный скроллбары. Мало того, стилизовать можно и «ресайзер» в TEXTAREA. Вот полный список новых псевдо-элементов:
- -webkit-scrollbar
- -webkit-scrollbar-button
- -webkit-scrollbar-track
- -webkit-scrollbar-track-piece
- -webkit-scrollbar-thumb
- -webkit-scrollbar-corner
- -webkit-resizer
Каждому из этих объектов можно задать стили, определяющие бордюры, тени, фоновые изображения и так далее, создав, таким образом, полностью кастомные скроллбары. При этом они сохранят поведение в соответствии с настройками ОС (такие, как положение кнопок прокрутки и реакцию на клики). К псевдоэлементам можно применять следующие псевдоклассы:
- :horizontal — уточняет, является ли скроллбар горизонтальным
- :vertical — то же самое для вертикальных скроллбаров
- :decrement — применяется к кнопкам прокрутки и пустым областям скроллбара. Он уточняет, являются ли эти элементы «скроллирующими назад» содержимое контрола (то есть, пролистывают влево в случае горизонтального скроллбара, или вверх — в случае вертикального).
- :increment — то же самое, но для элементов, «скроллирующих вперёд»
- :start — применяется к кнопкам прокрутки и пустым областям скроллбара. Уточняет, находится ли объект ДО бегунка прокрутки
- :end — то же самое, но ПОСЛЕ бегунка прокрутки
- :double-button — уточняет, являются ли кноки прокрутки «спаренными» c одного и того же края скроллбара, как в MacOS. если этот селектор применяется к пустым элементам полосы прокрутки, он обозначает их примыкание к «сдвоенной кнопке»
- :single-button — то же самое, но для «разделённых» кнопок прокрутки, а также пустых элементов полосы прокрутки, примыкающих к таким кнопкам
- :no-button — применяется к пустым элементам полосы прокрутки, обозначая, примыкает ли элемент прямо к концу скроллбара, то есть, нет ли там кнопки прокрутки. По сути, этот селектор выбирает второй, оставшийся пустой кусок полосы прокрутки, не попавший в селектор :double-button
- :corner-present — применяется к любым элементам скроллбара и обозначает наличие пустого «уголка» на стыке скроллбаров
- :window-inactive — применяется к любым элементам скроллбара и обозначает, активно ли окно, содержащее стилизованный контрол. В последних сборках WebKit этот селектор также может применяться к псевдо-элементу ::selection. Авторы работают над внедрением этого селектора во все остальные места, и хотят продвигать его в качестве стандарта.
Помимо всего вышеперечисленного, с элементами скроллбаров также работают селекторы :enabled, :disabled, :hover и :active. Чтобы скрыть некоторые элементы, им можно установить свойство display:none
Полосам прокрутки также можно задавать отступы (margin), в том числе, отрицательные. Таким образом реализуется, например, перекрывание кнопок прокрутки.
Если вы используете свежую сборку WebKit, то в этом примере можно посмотреть навороченные скроллбары, реализующие как фичи MacOS X (сдвоенные кнопки, неактивность, перекрывание кнопок и т.д.), так и Windows Vista (эффект наведения, внешний вид при нажатии на полосу прокрутки и т.д.).
