26 March 2009

WebKit научился стилизовать скроллбары

Lumber room
Пример
Незамеченной прошла новость недельной давности о том, что в последних сборках 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 (эффект наведения, внешний вид при нажатии на полосу прокрутки и т.д.).
Tags:webkitsafaricsscss3scrollbarscroll
Hubs: Lumber room
+14
1.6k 16
Comments 20
Popular right now
Top of the last 24 hours