Existe uma maneira de verificar quais estilos CSS estão sendo usados ou não em uma página da web?

121

Deseja saber quais estilos CSS estão sendo usados atualmente em uma página da web.

css

— SOCORRO
fonte

2

Use um navegador que tenha um inspetor de CSS. O Safari e o Chrome (também conhecido como Webkit) fornecem isso como parte das ferramentas do desenvolvedor. No Firefox, isso é fornecido pelo plugin Firebug. O Internet Explorer não tem nada parecido que eu saiba. O inspetor permitirá que você selecione um elemento, clique com o botão direito do mouse e escolha "Inspecionar elemento" - em seguida, ele mostrará quais seletores e quais regras individuais são aplicadas ao elemento que você selecionou.

— Lee

A barra de ferramentas do desenvolvedor @Lee ie8 se comporta da mesma maneira que o firebug nos seletores de css, você pode selecionar e ver os estilos aplicados no lado direito.

— quer

possível duplicata de Extrair apenas o css usado em uma página específica

— cweiske

58

Instale o complemento CSS Usage para Firebug e execute-o nessa página. Ele informará quais estilos estão sendo usados e não usados por essa página.

— kobe
fonte

@Harry, uma vez que você instalar este plugin será na guia como parte de firebug onde você tem net e todos //// deixe-me saber se você precisar de qualquer outra coisa

— kobe

33

Existe algo assim no Chrome?

— Pedro Luz

3

Isso parece não estar mais funcionando e, infelizmente, não é mais suportado.

— Nostromo 26/08/13

1

Cuidado que o Firebug não é mais mantido. Acho que esse complemento não funciona com o DevTools embutido no Firefox.

— Andrew

Você pode usar a opção de auditoria no chrome durante a inspeção. Isso mostrará apenas o css não usado nessa página em particular.

— Sarath Hari

81

O Google Chrome tem duas maneiras de verificar se há CSS não utilizado .

1. Guia Auditoria: > Clique com o botão direito do mouse + Inspecionar elemento na página, localize a guia "Auditoria" e execute a auditoria, verificando se "Desempenho da página da Web" está marcado.

Lista todas as tags CSS não utilizadas - veja a imagem abaixo.

Atualização: - - - - - - - - - - - - - - OU - - - - - - - - - - - - - -

2. Guia Cobertura: > Clique com o botão direito do mouse + Inspecionar elemento na página, encontre os três pontos à direita (circulados na imagem) e abra a gaveta do console (ou pressione Esc) e, por fim, clique nos três pontos à esquerda da gaveta (circulados na imagem) para abrir a ferramenta Cobertura.

O Chrome lançou uma ferramenta para visualizar CSS e JS não utilizados - Atualização do Chrome 59 Permite iniciar e parar uma gravação (quadrado vermelho na imagem) para permitir uma melhor cobertura da experiência do usuário na página.

Mostra todos os CSS / JS usados e não utilizados nos arquivos - veja a imagem abaixo.

— Cordell
fonte

3

Seria incrível ver quais são usados também ... mas isso é ótimo, obrigado.

— Serj Sagan

Tanto quanto eu posso dizer, se você quer saber o que é usado a sua melhor aposta é instalar um plugin para o Chrome - sorry

— Cordell

A nova atualização Chrome 59 permite que você veja o usado / CSS não utilizado e JS

— Cordell

Qual biblioteca o Chrome usa para fazer isso?

— Alexey Shevelyov 03/12/19

1

@UMAR multi-page website coverage == (single-page coverage) * n onde n = cada página em um site . Categorizar a ferramenta / esta resposta como "inútil" não beneficia ninguém.

— Shai Cohen

40

Apenas pela integridade e porque foi solicitado nos comentários - também há a ferramenta de auditoria CSS no Chrome agora com o mesmo objetivo. Alguns detalhes aqui:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— Jan Petzold
fonte

3

Não sei se a "ferramenta de auditoria CSS" à qual esta resposta está se referindo é a mesma da guia Auditorias nas Ferramentas para desenvolvedores do Chrome, mas isso informará quais regras CSS não são usadas (por exemplo, "Some.css: 42% não é usado pela página atual. ").

— precisa saber é o seguinte

11

Dê uma olhada no UnCSS . Ajuda na criação de um arquivo CSS de CSS usado.

— Robert Brisita
fonte

1

Esse é um ótimo programa. Obrigado! Rob

— r0berts

1

Boa ferramenta web para um offs. ty

— billynoah

1

Esta é aweso - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- Nevermind .......

— Brian Powell

@ brian-powell sim, a saída dos modelos teria que ser gerada primeiro. De que outra forma o UnCSS sabe o que é necessário?

— Robert Brisita

8

Estou usando CSS Dig . É feito para o Chrome, mas acho que é uma ótima ferramenta!

— cs.matyi
fonte

Eu apenas tentei isso - ele faz tudo ligando para o site cssdig.com, por isso é incapaz de ver ou analisar qualquer coisa hospedada localmente.

— Brilliand

0

Tente usar esta ferramenta, que é apenas um script js simples https://github.com/shashwatsahai/CSSExtractor/ Essa ferramenta ajuda a obter o CSS de uma página específica, listando todas as fontes de estilos ativos e salvá-lo em um JSON chave e regras como valor. Carrega todo o CSS dos links href e informa todos os estilos aplicados a partir deles. Você pode modificar o código para salvar todos os css em um arquivo .css. Assim, combinando todos os seus css.

— Shashwat Sahai
fonte

0

Sem ferramentas de terceiros e aplicativos, você pode encontrar CSS e javascript não utilizados usando as ferramentas de desenvolvimento do Chrome na guia Cobertura. leia o post abaixo dos desenvolvedores do Google. guia de cobertura do chrome

— Mahdi Safari
fonte

Existe uma maneira de verificar quais estilos CSS estão sendo usados ​​ou não em uma página da web?

Existe uma maneira de verificar quais estilos CSS estão sendo usados ou não em uma página da web?