Especificação completa do userChrome.css no Firefox

3

Já havia toneladas de perguntas sobre o arquivo userChrome.css do Firefox. A maioria deles vem do fato de que, aparentemente, não há uma especificação completa para esse arquivo da Mozilla, uma lista completa de tags css que afetam o navegador e quais são esses efeitos. Em vez disso, as pessoas confiam em tentativa e erro e também alguns truques que funcionam com uma versão rapidamente se tornam obsoletos com uma versão mais recente.

Eu queria saber se tal especificação é de fato não disponível e se é razoável para o Mozilla não liberá-lo (se não houver tal especificação) e não mantê-lo atualizado.

Qual seria o caminho para encontrar a lista completa de tags css que podem ser ajustadas via userChrome.css?

    
por DanielFetchinson 03.06.2017 / 13:10

1 resposta

4

Não há garantias, e qualquer coisa que você mudar poderá ser quebrada pela próxima versão. A vantagem é que você obtém muito mais granularidade e flexibilidade do que se apenas especificasse algumas APIs limitadas.

No entanto, existem duas maneiras de descobrir quais elementos podem ser reestilizados na versão atual.

Em primeiro lugar, o que você geralmente tenta alterar com userChrome.css é conhecido como o cromo do navegador , as partes do navegador fora do conteúdo da página da web. Isso inclui a barra de guias, a barra de endereços, etc. O que você deseja fazer é abrir isso em um inspetor DOM para que você possa descobrir quais O seletor de CSS segmentará o elemento que você deseja alterar.

A maneira mais fácil de abrir um inspetor na página é navegar para chrome://browser/content/browser.xul , que abrirá o cromo do navegador dentro da área de conteúdo de uma guia e fornecerá uma janela dupla de aparência engraçada:

Apartirdaqui,vocêdesejaabriraferramenta Inspetor de páginas . Há algumas maneiras de abri-lo , mas eu pessoalmente gosto do F12 atalho de teclado. Você pode usá-lo para selecionar um elemento e visualizar as regras CSS existentes .

Você pode clicar com o botão direito do mouse em um elemento na árvore e usar o menu de contexto para "Copiar - > Seletor de CSS" para obter um seletor rápido para usar em userChrome.css , mas é melhor se você tiver alguma compreensão dos princípios básicos dos seletores de CSS para que você possa descobrir o melhor .

Lembre-se de que o inspetor de páginas inspeciona o conteúdo da página, não o cromo do navegador. Só funciona neste caso porque lançamos uma cópia do chrome dentro de uma página, como o conteúdo.

A outra maneira de inspecionar o Chrome do navegador é usar a Caixa de ferramentas do navegador , que será permitem que você inspecione uma janela ao vivo normal. É menos hacky do que abrir o chrome como conteúdo, mas também é um pouco mais complexo para começar e não oferece muitos benefícios para simples restyling.

    
por 03.06.2017 / 13:24

Tags