De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.

Navegando no Firefox com folha de estilo personalizada

Colaboração: Maurício (Maujor) Samy Silva

Data de Publicação: 24 de Novembro de 2007

As CSS - folhas de estilo em cascata, além de ser um poderoso mecanismo para controlar a apresentação de um site, podem ainda ser usadas para navegação personalizada.

Ao usuário é facultado criar uma folha de estilo própria e "dizer" ao navegador para aplicá-la sempre que visitar um site. Esta é uma funcionalidade disponível em todos os navegadores modernos e que visa a contemplar a acessibilidade, principalmente (mas não exclusivamente) para usuários com diferentes tipos de restrições visuais.

Para exemplificar a aplicação desta técnica vamos tomar como base o navegador Firefox.

No seu editor de texto (Bloco de notas, TextEdit ou similar) copie e cole a folha de estilo a seguir:

  * {
  background: #000 !important; /* regra css que determina fundo preto */
  color: #0f0 !important; /* regra css que determina letras verdes */ 
  }

Salve o arquivo da folha de estilo com o nome userContent.css no diretório chrome do perfil Firefox.

Para localizar o diretório chrome faça uma busca no seu HD pelo arquivo userContent-example (uma folha de estilo exemplo) que vem instalada por padrão naquele diretório.

Apenas como orientação; em geral o diretório está em:

• Ambiente Linux: ~/.mozilla/firefox/xxx.default/chrome
• Ambiente Mac OS X: ~/ Library / Application Support / Firefox / Profiles/ xxx.default / chrome
• Ambiente Windows: C: \ Documents and Settings \ Administrador \ Dados de aplicativos \ Mozilla \ Firefox \ Profiles \ xxx.default \ chrome

Feche todas as instâncias do Firefox e abra novamente. O fundo da janela do navegador muda da cor branca para a preta. Entre em alguns sites e navegue, para ver o efeito desta mínima personalização de navegação. Todos os sites que você navegar terão a cor de fundo preta e letras na cor verde.

Para desfazer ou alterar as cores e outras propriedades CSS de navegação personalizada, altere a folha de estilo userContent.css de acordo com suas preferências.

Para voltar ao padrão retire a folha de estilo do diretório chrome.

Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).

No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.

Saiba mais: Facebook , Twitter.