O melhor pedaço da Maçã.
MM News

Receba os nossos principais artigos diariamente, por email.

WebKit ganha suporte a customização de barras de rolagem; novidade é compatível com o Safari 4

Venhamos e convenhamos: isso é um recurso que vários navegadores já suportam — até o horrível Internet Explorer 6  –, mas apenas na semana passada começou a chegar aos navegadores baseados no WebKit. O time de desenvolvimento da tecnologia presente no núcleo do Safari apenas anunciou a novidade neste mês, porém usuários do Safari 4 Public Beta — lançado no final de fevereiro — já podem conferir exemplos de páginas com barras de rolagem customizadas:

Publicidade

Barras de rolagem customizáveis no WebKit

Se você o possui instalado em seu Mac ou PC — ou usa o nightly build mais recente do WebKit –, pode conferir o visual e o comportamento delas nesta página de exemplo. No momento, desenvolvedores web podem aplicar esse tipo de customização em áreas de texto, menus suspensos, sessões flutuantes e listas com caixinhas. Basta um pouco de CSS e, é claro, a sua criatividade.

Para implantar a novidade em um determinado objeto suportado no seu site, é necessário especificar o elemento ::-webkit-scrollbar { em seu código. Uma vez que ele esteja presente, o WebKit — seja no Safari ou em qualquer outro navegador baseado nele — desativará o seu render de barras de rolagem para que elas não apareçam no seu visual. A partir daí, ele utilizará parâmetros especificados em CSS para gerá-las da forma especificada pelo desenvolvedor. Dois exemplos disso são a sua altura e largura:

Publicidade
[code=’CSS’]::-webkit-scrollbar {
width: 13px;
height: 13px;
}[/code]

Uma barra de rolagem parece ser apenas um elemento na interface de um aplicativo, mas não é. Ela é composta de dois botões e uma trajetória de rolagem, que por sua vez é dividida em duas partes e um slider, controlado pelo mouse. Além deles, existe ainda um outro objeto opcional por parte do desenvolvedor, que é botão de redimensionar uma área limitada por duas barras de rolagem, uma horizontal e outra vertical. Todos esses objetos são customizáveis usando parâmetros semelhantes ao descrito acima, sendo que a lista completa deles está disponível a seguir:

[code=’CSS’]::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer[/code]

Com eles, é possível especificar bordas, sombras, cores e até imagens de fundo, para que assumam um visual original, fiel ao esquema de cores do seu site e que sejam totalmente fiéis ao comportamento de qualquer sistema operacional. É possível até aplicar o layout das barras de rolagem do Mac OS X a qualquer sistema operacional: no exemplo acima, um usuário de Windows rodando o Safari 4 poderá ver a diferença das barras de rolagem do sistema da Apple (onde os dois botões ficam na área inferior em barras verticais) em relação ao da Microsoft (que conta com um botão em cada extremidade dela).

Vendo esse recurso funcionando tão bem no WebKit, fico pensando se ele não apareceu na hora errada… Como não trabalho como web designer atualmente, fica a pergunta: alguém aí ainda customiza barras de rolagem?

Ver comentários do post

Carregando os comentários…
Artigo Anterior

Atualizações recentes do iMovie '09 e iPhoto '09 trazem novidades não-documentadas pela Apple

Próximo Artigo

a2YOU está chegando a Curitiba; mas cadê o seu portal?

Posts Relacionados