Uso do CSS
Veja o tamanho e a proporção de CSS usado na verificação, por página e folha de estilo. Estilos não utilizados podem ser necessários após uma interação ou em outra página.
Auditoria de CSS online
Saiba quanto CSS a página carrega, quais estilos foram usados na verificação e onde as regras se repetem. Veja cores, fontes, camadas e erros em um relatório.
Formato do resultado
O relatório mostra fontes de CSS, métricas e sinais
Examine o tamanho e o uso do CSS e depois revise cores, fontes, camadas e erros de validação.
Dados ilustrativos para explicar o relatório. Os resultados da página aparecem após a análise.
Mapa de fontes das folhas de estilo
Compare as folhas externas com os estilos incorporados à página. Cada fonte mostra seu tamanho e a quantidade de código usado ou não utilizado na verificação.
| Fonte | Tipo | Uso | Não utilizado |
|---|---|---|---|
| app.css | externos | 48 KiB / 72 KiB | 72 KiB · 60% |
| components.css | externos | 32 KiB / 8 KiB | 8 KiB · 20% |
| estilos inline | inline | 6 KiB / 2 KiB | 2 KiB · 25% |
- Fonte
- app.css
- Tipo
- externos
- Uso
- 48 KiB / 72 KiB
- Não utilizado
- 72 KiB · 60%
- Fonte
- components.css
- Tipo
- externos
- Uso
- 32 KiB / 8 KiB
- Não utilizado
- 8 KiB · 20%
- Fonte
- estilos inline
- Tipo
- inline
- Uso
- 6 KiB / 2 KiB
- Não utilizado
- 2 KiB · 25%
Comece pela origem da folha de estilos e por uma declaração repetida. Verifique se as repetições pertencem ao mesmo componente e estado. Edite o código-fonte e compare um novo relatório.
O que verificamos
Um inventário completo de CSS em vez de conselhos genéricos
O relatório reúne fontes e tamanhos de estilos, uso do código, prioridade de seletores, declarações repetidas, valores de estilo e erros de validação.
Tamanho e fontes
Coletamos o tamanho total do CSS, o número de fontes de folhas de estilo e contagens separadas para folhas de estilo inline e externas.
Especificidade dos seletores
Compare a especificidade mínima, média e máxima dos seletores, que ajuda a determinar a prioridade das regras. Os seletores mais complexos aparecem separadamente.
Declarações repetidas e !important
Veja a quantidade de regras, seletores e declarações, os pares propriedade-valor repetidos e os exemplos com !important.
Media queries e prefixos
Mostramos as media queries mais frequentes e contamos propriedades CSS com prefixos de fornecedor: -webkit-, -moz-, -ms- e -o-.
Cores, fontes, z-index e erros
O relatório exibe valores de cor únicos, valores de font-family detectados, valores numéricos de z-index e exemplos de erros de validação de CSS.
Como funciona
De URL a um resumo completo de CSS da página
Insira a URL da página. O Milten a abre no navegador, coleta as folhas de estilo e prepara o relatório. Não é preciso integrar a ferramenta à compilação.
Carregar a página e coletar o CSS
O relatório mostra a URL verificada, a data e as fontes dos estilos. Separa os estilos incorporados à página das folhas de estilo externas.
Medimos o uso de CSS e a prioridade dos seletores
Veja quanto CSS foi usado, quantas regras e declarações foram encontradas e quais seletores têm maior especificidade.
Montar tabelas para revisão de CSS
Revise declarações repetidas, !important, consultas de mídia, prefixos de navegador, cores, fontes, camadas e erros de CSS.
Perguntas frequentes
Perguntas frequentes sobre auditoria de CSS
Respostas sobre uso de CSS, prioridade de seletores, !important, conteúdo do relatório e duração da verificação.
Como o CSS não usado afeta a velocidade?
O navegador baixa, processa e aplica o CSS antes de renderizar a página. Quanto mais regras desnecessárias existirem, maior o risco de atrasos na primeira renderização e mais difícil fica manter a interface.
Por que revisar a especificidade dos seletores?
A especificidade ajuda a determinar a prioridade de um seletor quando há conflito entre regras CSS. Seletores muito específicos dificultam alterações porque exigem regras mais fortes para sobrescrevê-los.
É preciso remover todas as declarações !important?
Não. !important altera a prioridade de uma declaração e pode ser intencional. O relatório mostra onde investigar. Revise a cascata e os estados do componente antes de substituí-lo.
Quais dados estarão no relatório?
O relatório inclui URL e data, fontes e tamanhos de estilos, uso do código, seletores e especificidade, declarações repetidas, !important, consultas de mídia, prefixos de navegador, cores, fontes, camadas e erros de CSS.
Quanto tempo leva a verificação de uma página?
A verificação de uma única página geralmente leva menos de um minuto. A duração depende da quantidade de recursos, das condições de rede e do tempo que a página leva para se estabilizar após o carregamento.
Serviços relacionados
O que verificar em seguida neste serviço
Verificação de JavaScript
Verifique arquivos JavaScript, erros de carregamento e código não utilizado durante o carregamento. Encontre scripts que precisam de uma análise mais detalhada.
AbrirVerificação de HTML
Encontre erros de HTML e estruturas de página complexas demais. O relatório identifica os elementos afetados.
AbrirValores de design
Colete cores, fontes, tamanhos e espaçamentos da página. Receba uma lista de valores para trabalhar no design.
AbrirAcessibilidade
Encontre problemas de acessibilidade com uma verificação automática. Receba recomendações; uma avaliação completa também exige verificações manuais.
Abrir