Visualize qualquer folha de estilo CSS com CSS Stats
Já imaginou quantas regras CSS estão em uma folha de estilo? Ou você já quis ver um representação visual do todas as cores usado em um arquivo CSS? Com Estatísticas CSS, você pode conectar qualquer site e Puxe um monte de dados CSS brutos para satisfazer sua curiosidade.
E este aplicativo da Web é muito mais profundo do que apenas mostrar todas as cores de uma folha de estilo. Você pode visualizar todos os valores do índice z, todos os tamanhos de fonte, todas as consultas de mídia e até ver um gráfico de especificidade visual.
Este aplicativo cobre tanto que é praticamente impossível consumir tudo de uma só vez. Ele lhe dará uma visão geral tremenda de qualquer site apenas por mostrando o que está na folha de estilo.
Para começar, visite o site CSS Stats e conecte qualquer URL você deseja. Você também pode escolher entre vários sites sugeridos, como Facebook, Apple e Pinterest (entre outros).
Na página de resultados, você verá o tamanho total do arquivo CSS em kilobytes, juntamente com uma lista dos propriedades e declarações mais usadas. Isso tudo aparece como uma longa lista de números, então pode ser confuso ler primeiro.
Mas quanto mais você usar este aplicativo, mais divertido fica! Aqui está um lista de tudo você encontrará na página de estatísticas:
- Total de propriedades, seletores, e regras
- Todos cores da fonte com exemplos e códigos hexadecimais
- Todos cores de fundo com exemplos e códigos hexadecimais
- Todos tamanhos de fonte com exemplos
- Lista de famílias de fontes
- Lista de todos valores do índice z
- Um gráfico de barras de declarações CSS totais / exclusivas
- Gráfico de especificidade
- Total tamanho do conjunto de regras
- Todos consultas de mídia
- o código CSS não processado junto com Links de URL ao arquivos CSS individuais
CSS Stats é inteligente o suficiente para puxar todos os arquivos CSS e mesclar esses dados juntos. Os desenvolvedores fizeram um grande esforço para que isso funcionasse corretamente.
E a parte incrível é o repo completo do GitHub com código-fonte para todo o projeto. Então, você pode baixar isso e voltar a hospedá-lo no seu próprio servidor (localmente ou não) para brincar, se você quer mergulhar no código.
Você tem a opção de puxando qualquer arquivo CSS individual ou analisando todas as folhas de estilo em um único domínio. Há muito que você pode aprender com o estudo dessa ferramenta e oferece uma visão mais profunda para os desenvolvedores que entram nos detalhes básicos..
Para testar você mesmo, basta visitar CSS Stats e conectar um website. Você ficará surpreso com a quantidade de dados disponíveis e com o quanto você pode aprender com uma ferramenta tão simplista.
