Visualisieren Sie jedes CSS-Stylesheet mit CSS-Statistiken
Haben Sie sich jemals gefragt, wie viele CSS-Regeln in einem Stylesheet enthalten sind? Oder wollten Sie schon immer mal eine sehen? visuelle Darstellung von alle farben in einer CSS-Datei verwendet? Mit CSS Stats, Sie können jede Website einstecken und ziehen Sie ein paar rohe CSS-Daten um Ihre Neugier zu befriedigen.
Und diese Web-App geht viel tiefer als nur alle Farben eines Stylesheets anzuzeigen. Sie können visualisieren Alle Z-Indexwerte, alle Schriftgrößen, alle medienanfragen und sogar ein sehen Grafik zur visuellen Spezifität.
Diese App umfasst so viel, dass es praktisch unmöglich ist, alles auf einmal zu konsumieren. Sie erhalten einen enormen Überblick über jede Website was in ihrem Stylesheet gezeigt wird.
Besuchen Sie zunächst die CSS Stats-Website und Stecken Sie eine beliebige URL du wünschst. Sie können auch aus einer Reihe vorgeschlagener Websites wie Facebook, Apple und Pinterest (ua) auswählen..
Auf der Ergebnisseite sehen Sie die Gesamtgröße der CSS-Datei in Kilobytes zusammen mit einer Liste der am häufigsten verwendete Eigenschaften und Deklarationen. Dies alles erscheint als eine lange Liste von Zahlen, so dass das Lesen zunächst verwirrend sein kann.
Aber je mehr Sie diese App verwenden, desto mehr Spaß macht es! Hier ist ein Liste von allem Sie finden auf der Statistikseite:
- Insgesamt Eigenschaften, Selektoren, und Regeln
- Alles Schriftfarben mit Beispielen & Hex-Codes
- Alles Hintergrundfarben mit Beispielen & Hex-Codes
- Alles Schriftgrößen mit Beispielen
- Liste von Schriftfamilien
- Liste aller Z-Index-Werte
- Ein Balkendiagramm von total / unique CSS-Deklarationen
- Spezifitätsdiagramm
- Gesamt Regelsatzgröße
- Alles Medien-Anfragen
- Das roher CSS-Code zusammen mit URL-Links zum einzelne CSS-Dateien
CSS Stats ist intelligent genug, um alle CSS-Dateien abzurufen diese Daten zusammenführen. Die Entwickler haben sich viel Mühe gegeben, damit alles richtig funktioniert.
Und der besonders tolle Teil ist das komplette GitHub-Repo Quellcode für das gesamte Projekt. So können Sie das herunterladen und hosten Sie es erneut auf Ihrem eigenen Server (lokal oder anderweitig), um herumzuspielen, wenn Sie in den Code einsteigen möchten.
Sie haben die Wahl Ziehen Sie eine einzelne CSS-Datei oder Parsen aller Stylesheets auf einer einzigen Domain. Sie können durch das Lernen dieses Tools so viel lernen, und es bietet tiefere Einblicke für Entwickler, die in die Details eintauchen.
Um sich selbst zu testen, besuchen Sie einfach CSS Stats und fügen Sie eine Website hinzu. Sie werden staunen, wie viele Daten zur Verfügung stehen und wie viel Sie von einem derart simplen Werkzeug lernen können.
