Scrollbar no Firefox

Uma das coisas que eu mais odeio no Firefox é o fato de a barra de rolagem (scrollbar) vertical não aparece por default mesmo quando não há conteúdo para dar rolagem, como é no Internet Explorer. Ou seja, quando não há conteúdo para rolagem vertical, o Firefox não exibe e não ocupa o espaço que será utilizado quando o conteúdo for suficiente para dar rolagem. Isso causa um efeito de realinhar o conteúdo horizontalmente toda vez que você vai pra uma página em que dá a rolagem vertical. Isso acontece por que o Firefox coloca essa scrollbar no mesmo espaço reservado para o site. O resultado é um site dançante que se realinha (principalmente sites centralizados) toda vez que a barra de rolagem vertical aparece ou desaparece.

Para evitar isto, existe uma forma de dizer ao Firefox por CSS, que mesmo quando o conteúdo vertical não é suficiente para dar rolagem, a barra deveria existir assim mesmo, só que esmaecida. Para isso basta colocar a seguinte regra no início da sua folha de estilos:


  html {
     overflow: -moz-scrollbars-vertical;
  }

Se você for experto já percebeu que isso é um código proprietário do Mozilla Firefox e que não funciona (e nem faz sentido) pra nenhum outro browser. Eu encontrei isso navegando nas documentações do Firefox . Sim, sua folha de estilos não vai passar no validador da W3C. Não, eu sinceramente não me importo em não ter minha folha de estilos validada. O único validador que eu utilizo é o Tidy e somente quando eu suspeito que tem algo de errado no meu CSS. Daí ele me ajuda a encontrar.

Este assunto de validar a folha de estilos fica pra um próximo post. De qualquer maneira esta regrinha funciona perfeitamente no Firefox impedindo com que seu site se realinhe toda vez que o conteúdo der rolagem vertical.