Visualiser ethvert CSS-formatark med CSS-statistikker
Har du nogensinde spekuleret på, hvor mange CSS-regler der findes i et stylesheet? Eller har du nogensinde ønsket at se en visuel repræsentation af alle farverne bruges i en CSS-fil? Med CSS Stats, Du kan tilslutte enhver hjemmeside og Træk en masse rå CSS data at tilfredsstille din nysgerrighed.
Og denne webapp går så meget dybere end blot at vise alle farverne til et stylesheet. Du kan visualisere alle z-indeksværdier, alle skriftstørrelser, alle medier forespørgsler og endda se a visuel specificitetsgraf.
Denne app dækker så meget, at det er praktisk taget umuligt at forbruge alt i et møde. Det vil give dig et enormt overblik over enhver hjemmeside lige ved viser hvad der er i deres stylesheet.
For at komme i gang skal du besøge CSS Stats hjemmeside og Indsæt en hvilken som helst webadresse du ønsker. Du kan også vælge fra en række foreslåede websteder som Facebook, Apple og Pinterest (blandt andre).
På resultatsiden vil du se samlet CSS filstørrelse i kilobytes, sammen med en liste over mest anvendte egenskaber og erklæringer. Det hele ser ud som en lang liste med tal, så det kan være forvirrende at læse i starten.
Men jo mere du bruger denne app, jo mere sjovt bliver det! Her er en liste over alt du finder på statistik siden:
- Samlet # af ejendomme, selektorer, og regler
- Alle skrifttype farver med eksempler og hex koder
- Alle baggrundsfarver med eksempler og hex koder
- Alle skrifttypestørrelser med eksempler
- Liste af skrifttype familier
- Liste over alle z-indeksværdier
- Et søjlediagram af samlede / unikke CSS-erklæringer
- Specificitetsgraf
- i alt regelsæt størrelse
- Alle medieforespørgsler
- Det rå CSS kode sammen med URL-links til individuelle CSS-filer
CSS-statistikker er klog nok til at trække alle CSS-filer og fusionere disse data sammen. Udviklerne lægger stor vægt på denne ting for at få det til at fungere helt korrekt.
Og den ekstra fantastiske del er den fulde GitHub repo med kildekode for hele projektet. Så kan du downloade dette og re-host det på din egen server (lokalt eller ellers) for at spille rundt, hvis du vil grave i koden.
Du har mulighed for trækker enhver individuel CSS-fil eller parsering af alle stylesheets på et enkelt domæne. Der er så meget, du kan lære af at studere dette værktøj, og det giver dybere indsigt for udviklere, der kommer ned i nitty-gritty detaljer.
For at teste for dig selv, skal du bare besøge CSS Stats og tilslutte en hjemmeside. Du vil blive forbløffet over, hvor meget data der er til rådighed, og hvor meget du kan lære af et sådant forenklet værktøj.
