vinicius.biz/blog

Recentemente um fórum que eu freqüento passou por uma atualização de software e o tema que eu costumava usar foi removido. Os novos temas não me agradaram muito, então resolvi procurar uma maneira de sobrescrever o CSS do fórum através do Firefox, formatando as páginas de modo a imitar o tema que eu usava antes da atualização.

Inicialmente eu pensei que seria necessário instalar uma extensão para fazer isso, mas acabei descobrindo que existe uma solução bem simples: escrever o CSS dentro da diretiva @-moz-document no arquivo userContent.css (localizado na pasta do seu profile do Firefox).

A diretiva @-moz-document funciona como um seletor de CSS que ao invés de selecionar um elemento da página, seleciona um domínio (ou parte dele). Assim, o Firefox aplica os estilos somente nas páginas especificadas pela diretiva.

Se quisermos, por exemplo, exibir todos os links das páginas do Google em vermelho, basta adicionar o código abaixo no arquivo userContent.css:


@-moz-document domain('google.com') {
a {
color: #F00 !important;
}
}

Note a presença do “!important”, que faz com que o estilo sobrescreva o original.

Esse recurso não é novo, mas acho que poucos usuários do Firefox o conhecem (eu não conhecia). Seguem alguns links com mais informações:

Página na documentação do Mozilla
Especificação da diretiva