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.
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.
@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.
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.
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) * nonde 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:
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.
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.
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
Respostas:
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.
fonte
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.
fonte
multi-page website coverage == (single-page coverage) * nonde n = cada página em um site . Categorizar a ferramenta / esta resposta como "inútil" não beneficia ninguém.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
fonte
Dê uma olhada no UnCSS . Ajuda na criação de um arquivo CSS de CSS usado.
fonte
UnCSS cannot be run on non-HTML pages, such as templates or PHP files- Nevermind .......Estou usando CSS Dig . É feito para o Chrome, mas acho que é uma ótima ferramenta!
fonte
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.
fonte
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
fonte