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:
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:
::-webkit-scrollbar {
width: 13px;
height: 13px;
}
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:
::-webkit-scrollbar ::-webkit-scrollbar-button ::-webkit-scrollbar-track ::-webkit-scrollbar-track-piece ::-webkit-scrollbar-thumb ::-webkit-scrollbar-corner ::-webkit-resizer
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?
![Google testa nova interface de buscas, muito mais colorida [atualizado]](http://macmagazine.uol.com.br/wp-content/themes/arthemia-premium/scripts/timthumb.php?src=http://macmagazine.uol.com.br/wp-content/uploads/2009/11/25-google_visual01-550x358.png&w=80&h=80&zc=1&q=100)
Pessoalmente acho que uma das vantagens de usar Safari é justamente AUSÊNCIA dessas barrinhas enjoadas.
É um recurso do CSS padronizado do W3C. Pra um browser que enaltece estar conforme com os padrões, a ausência do recurso pegava mal. Ainda mais que o IE aceita isso desde a versão 6 (e falam que ele não atendia todos os padrões).
Uma coisa que não entendo até hoje com várias atualizações do Safari é pq ele gasta tanto recurso de memória, e quanto mais tempo fica navegando, mais recurso ele vai consumindo. Não dá pra entender pq não resolveram isso ainda.
Também não gosto dessa barras coloridas e modificadas… deveria haver um concenso quanto a isso ;B Mas enfim, vejamos se elas não vão perecer como as do IExplorer…
Pelo menos foi lançado numa época em que webstandards é levado a sério, mesmo assim já podemos esperar sites com barras de rolagem invisíveis ou grotescas, igual como já acontece em sites feitos totalmente em Flash. Sinceramente, é um recurso inútil e se fosse para personalizar as peças do OS, deveriam também oferecer suporte para os ítens que compõem todo o formulário. Eu vou continuar a não utilizar este recurso.
Corrigindo, "webstandards é levado a sério pela maioria, exceto a Microsoft claro"
FAIL pro webkit ao implementar um recurso proprietário
Eu pessoalmente acho que certos elementos de interface, como barra de rolagem e alertas, devem estar de acordo com o Sistema Operacional! Isso traz uniformidade de uso, facilitando a vida do usuário. Quando vejo um site usando barras de rolagem em Flash ou similares, não me sinto nem um pouco confortável.
O problema disso é que cada sistema os elementos têm um tamanho e posição diferente. Daí o que fica bonito em um SO aparece todo distorcido em outro, eliminando a característica de independência de plataforma, um dos pilares da Web.
Interessante.