de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Visualisieren Sie CSS Stylesheets mit CSS Stats

Haben Sie sich jemals gefragt, wie viele CSS-Regeln in einem Stylesheet enthalten sind? Oder wollten Sie jemals eine visuelle Darstellung aller in einer CSS-Datei verwendeten Farben sehen ? Mit CSS Stats können Sie jede beliebige Website anschließen und eine Reihe roher CSS-Daten abrufen, um Ihre Neugier zu befriedigen.

Und diese Web-App geht viel tiefer, als nur alle Farben für ein Stylesheet anzuzeigen. Sie können alle Z-Index-Werte, alle Schriftgrößen, alle Medienabfragen und sogar ein visuelles Spezifitätsdiagramm visualisieren.

Diese App deckt so viel, dass es praktisch unmöglich ist, alles in einer Sitzung zu konsumieren. Es wird Ihnen einen großartigen Überblick über jede Webseite geben, indem Sie einfach zeigen, was in ihrem Stylesheet steht .

Um zu beginnen, besuchen Sie die CSS Stats Website und schließen Sie eine beliebige URL an . Sie können auch aus einer Reihe von vorgeschlagenen Websites wie Facebook, Apple und Pinterest (unter anderem) auswählen.

Auf der Ergebnisseite sehen Sie die Gesamtgröße der CSS-Datei in Kilobytes zusammen mit einer Liste der am häufigsten verwendeten Eigenschaften und Deklarationen . Dies alles erscheint als eine lange Liste von Zahlen, so dass es zunächst verwirrend sein kann, sie zu lesen.

Aber je mehr Sie diese App verwenden, desto mehr Spaß macht es! Hier finden Sie eine Liste mit allem, was Sie auf der Statistikseite finden:

  • Gesamtzahl der Eigenschaften, Selektoren und Regeln
  • Alle Schriftfarben mit Beispielen und Hex-Codes
  • Alle Hintergrundfarben mit Beispielen und Hex-Codes
  • Alle Schriftgrößen mit Beispielen
  • Liste der Schriftfamilien
  • Liste aller Z-Index-Werte
  • Ein Balkendiagramm der gesamten / eindeutigen CSS-Deklarationen
  • Spezifitätsdiagramm
  • Gesamte Regelsatzgröße
  • Alle Medienabfragen
  • Der rohe CSS-Code zusammen mit URL-Links zu den einzelnen CSS-Dateien

CSS Stats ist intelligent genug, um alle CSS-Dateien zu ziehen und diese Daten zusammenzuführen . Die Entwickler haben sich viel Mühe gegeben, damit es richtig funktioniert.

Und der zusätzliche tolle Teil ist das vollständige GitHub Repo mit Quellcode für das gesamte Projekt . Also, Sie können dies herunterladen und es auf Ihrem eigenen Server (lokal oder anders) neu hosten, um herumzuspielen, wenn Sie in den Code eintauchen möchten.

Sie haben die Möglichkeit , eine beliebige CSS-Datei zu ziehen oder alle Stylesheets in einer einzigen Domäne zu analysieren . Es gibt so viel, was man aus dem Studium dieses Tools lernen kann, und es bietet einen tieferen Einblick für Entwickler, die sich mit den wesentlichen Details beschäftigen.

Um selbst zu testen, besuchen Sie einfach CSS Stats und schließen Sie eine Website an. Sie werden erstaunt sein, wie viele Daten verfügbar sind und wie viel Sie von einem so einfachen Werkzeug lernen können.

40 Dinge, die du nicht kennst, haben Namen

40 Dinge, die du nicht kennst, haben Namen

Wussten Sie, dass das Symbol "Schlafen 8", das Sie als Unendlichkeitssymbol kennen, eine Lemniskate ist? Es ist keine wichtige Information, aber für mich ist es interessant zu wissen, dass Mathematiker sich bemühen, diesen Symbolen einen Namen zu geben.Und warum sollten sie nicht? Namen sind wichtig - sie sparen uns viel Zeit.I

(Tech- und Design-Tipps)

30 schöne Kalligraphie GIFs Sie können nicht aufhören zu beobachten

30 schöne Kalligraphie GIFs Sie können nicht aufhören zu beobachten

Es ist heutzutage sehr selten, nette Handschriften zu finden. Es ist noch seltener jemanden zu finden, der in der Kunst der Kalligraphie versiert ist. Vorbei sind die Zeiten, in denen Notizbücher weniger wie ein paar Seiten aussahen, die in Morse-Code geschrieben waren, und mehr wie Augenschmaus. Das ist in gewisser Weise verständlich; Wie weit die Technik gekommen ist, das Tippen macht es möglich , Gedanken und wichtige Notizen schneller zu tippen, als wenn man sie aufschreiben würde . Ha

(Tech- und Design-Tipps)