Visualisez n'importe quelle feuille de style CSS avec les statistiques CSS

Vous êtes-vous déjà demandé combien de règles CSS sont dans une feuille de style? Ou avez-vous déjà voulu voir un représentation visuelle de toutes les couleurs utilisé dans un fichier CSS? Avec Stats CSS, vous pouvez connecter n'importe quel site web et tirer un tas de données CSS brutes pour satisfaire votre curiosité.

Et cette application Web va bien plus loin que simplement montrer toutes les couleurs d'une feuille de style. Vous pouvez visualiser toutes les valeurs z-index, toutes les tailles de police, toutes les requêtes des médias et même voir un graphique de spécificité visuelle.

Cette application couvre tellement qu'il est pratiquement impossible de tout consommer en une seule séance. Il vous donnera un formidable aperçu de n'importe quel site Web, rien qu'en mettant en vedette ce qui est dans leur feuille de style.

Pour commencer, visitez le site Web CSS Stats et branchez n'importe quelle URL tu souhaites. Vous pouvez également choisir parmi un certain nombre de sites suggérés, tels que Facebook, Apple et Pinterest (entre autres)..

Sur la page de résultats, vous verrez le taille totale du fichier CSS en kilo-octets, avec une liste des propriétés et déclarations les plus couramment utilisées. Tout cela apparaît comme une longue liste de chiffres, il est donc difficile de lire au début.

Mais plus vous utilisez cette application, plus elle devient amusante! Voici un liste de tout vous trouverez sur la page de statistiques:

Total de Propriétés, sélecteurs, et règles
Tout couleurs de police avec exemples et codes hexadécimaux
Tout couleurs de fond avec exemples et codes hexadécimaux
Tout tailles de police avec des exemples
Liste de familles de polices
Liste de tous valeurs d'indice z
Un diagramme à barres de déclarations CSS totales / uniques
Graphique de spécificité
Total taille du jeu de règles
Tout questions des médias
le code CSS brut de même que Liens URL au fichiers CSS individuels

CSS Stats est assez intelligent pour extraire tous les fichiers CSS et fusionner ces données ensemble. Les développeurs ont déployé beaucoup d’efforts pour que tout fonctionne parfaitement.

Et la partie la plus géniale est le rapport complet de GitHub avec code source pour l'ensemble du projet. Donc, vous pouvez télécharger ceci et le ré-héberger sur votre propre serveur (local ou autre) pour jouer si vous voulez creuser dans le code.

Vous avez la possibilité de tirer un fichier CSS individuel ou analyser toutes les feuilles de style sur un seul domaine. En étudiant cet outil, vous en apprendrez beaucoup, et il offre une perspective plus profonde aux développeurs qui approfondissent leurs connaissances.

Pour tester vous-même, il suffit de visiter CSS Stats et de brancher un site Web. Vous serez étonné de la quantité de données disponibles et de ce que vous pouvez apprendre d'un outil aussi simple..