Visualiser et hvilket som helst CSS-stilark med CSS-statistikk
Noen gang lurt på hvor mange CSS-regler er i et stilark? Eller har du noen gang ønsket å se en visuell representasjon av alle fargene brukes i en CSS-fil? Med CSS Stats, Du kan plugge inn et hvilket som helst nettsted og trekk en haug med rå CSS-data for å tilfredsstille din nysgjerrighet.
Og denne webappen går så mye dypere enn bare å vise alle fargene for et stilark. Du kan visualisere alle z-indeksverdier, alle skriftstørrelser, alle media spørringer og til og med se en visuell spesifisitetsgraf.
Denne appen dekker så mye at det er praktisk talt umulig å konsumere alt i en sittende. Det vil gi deg en enorm oversikt over et nettsted bare ved viser hva som er i stilarket.
For å komme i gang, besøk CSS Stats nettside og plugg inn en hvilken som helst nettadresse du ønsker. Du kan også velge fra en rekke foreslåtte nettsteder som Facebook, Apple og Pinterest (blant andre).
På resultatsiden ser du total CSS filstørrelse i kilobytes, sammen med en liste over mest brukte eiendommer og erklæringer. Alt ser ut som en lang liste med tall, slik at det kan være forvirrende å lese først.
Men jo mer du bruker denne app, jo mer gøy blir det! Her er en liste over alt finner du på statistikksiden:
- Totalt antall eiendommer, velgere, og regler
- Alle skriftfarger med eksempler og heksekoder
- Alle bakgrunnsfarger med eksempler og heksekoder
- Alle skriftstørrelser med eksempler
- Liste over fontfamilier
- Liste over alle z-indeksverdier
- Et strekkdiagram av totalt / unikt CSS-erklæringer
- Spesifisitetsgraf
- Total regelsettstørrelse
- Alle media spørringer
- De rå CSS-kode sammen med URL-linker til individuelle CSS-filer
CSS-statistikk er smart nok til å trekke alle CSS-filer og slå sammen disse dataene sammen. Utviklerne legger mye arbeid i denne tingen for å få det til å fungere akkurat.
Og den ekstra fantastiske delen er den fulle GitHub repo med kildekode for hele prosjektet. Så, du kan laste ned dette og re-host den på din egen server (lokalt eller ellers) for å leke deg om du vil grave deg inn i koden.
Du har muligheten til trekker noen enkelt CSS-fil eller parsing alle stilarkene på et enkelt domene. Det er så mye du kan lære av å studere dette verktøyet, og det gir dypere innsikt for utviklere som kommer ned i nitty-gritty detaljer.
For å teste for deg selv, bare besøk CSS Stats og koble til et nettsted. Du vil bli overrasket over hvor mye data er tilgjengelig og hvor mye du kan lære av et så enkelt verktøy.
