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

    Пример
    Незамеченной прошла новость недельной давности о том, что в последних сборках 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 (эффект наведения, внешний вид при нажатии на полосу прокрутки и т.д.).

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 20

      +1
      Главное, чтобы этим не пользовались не по назначению всякие там. Возможность перекрасить (только перекрасить) скроллбары есть уже давно, и я ещё ни разу не видел, чтобы это было задействовано хорошо.
        –3
        пока это не реализовали в MSIE, можно не бояться))
          +3
          Так в ie это было давным давно :)
          Но как видно пошёл новый виток.
            0
            В IE очень примитивная кастомизация скролла есть. А в новом WebKit можно задавать вид скролла намного свободнее.
      • НЛО прилетело и опубликовало эту надпись здесь
          +2
          У меня 2.0.160.0
          Все работает.
          0
          Скажите, а есть-ли возможность подобным образом изменить вид остальных элементов формы?
            –1
            о такой возможности не слышал. может, её и готовят, но в любом случае, она пока недоступна
            –2
            Приятно узнавать о новостях WebKit, заходить на страницы примеров и видеть, что всё работает :)

            И приятно, что наконец-то сделали такую возможность. Теперь не нужно огород городить. Всё-таки, веб-страница зачастую создаётся дизайнерами и формы должны поддаваться «разукрашиваниям». Надеюсь, с формами они позже поступят точно так же.
              0
              Извиняюсь, суть не написал — приятно заходить в Хроме
              +2
              Нет бы задать стандарт для этого, а то опять, у IE — своё, у WebKit — своё…
                0
                А зачем?
                  +1
                  Хех, я помню IE в свое время только ленивый не пнул за возможность менять внешний вид скроллов, мол «очередная нестандартая богомерзкая фича».
                    0
                    Не люблю браузеры на WebKit только за одну вещь: нестандартный внешний вид, отличающийся от остальных приложений системы. Теперь это только усугубилось.
                      0
                      Кастомизация полезна на авторских дизайнерских сайтах, когда всё до последнего пикселя следует духу и идее создателя. В этом случае считаю оправданным менять оформление элементов управления. Но само собой, как и везде, тут нужно чувство меры. Разработчики дали нам инструмент, а будем мы им «гвозди забивать» или использовать по назначению и в меру — только от нас зависит.

                      И насчет кастомизации — вспомните хотя бы извращения по смене стандартных элементов.
                        0
                        эх, удалился тег в посте выше: [input type=«file»]
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            Всегда должна быть возможность выбора.
                            • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                Для сложных анимаций и нестандартных ГУЕв конечно. Все эти нововведения для тех, кто следует девизу «а мы и без этих ваших флешей кое-что можем» :) Плюс не стоит забывать о сегменте мобильных устройств всех видов, а также о людях с ограниченными возможностями. Флеш в таких случаях не поможет.

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое