Visualisera alla CSS-stilark med CSS-statistik
Har du någonsin undrat hur många CSS-regler som finns i ett stilark? Eller har du någonsin velat se en visuell representation av alla färgerna används i en CSS-fil? Med CSS-statistik, du kan plugga in någon webbplats och dra en massa råa CSS-data för att tillfredsställa din nyfikenhet.
Och den här webappen går så djupare än att bara visa alla färger för ett stilark. Du kan visualisera alla z-indexvärden, alla teckensnittstorlekar, alla mediafrågor och även se a visuell specificitetsgraf.
Denna app täcker så mycket att det är praktiskt taget omöjligt att konsumera allt i ett sittande. Det ger dig en enorm översikt över vilken webbplats som helst visar vad som finns i deras stilark.
För att komma igång, besök webbplatsen CSS Stats och Anslut alla webbadresser du önskar. Du kan också välja från ett antal förslag till webbplatser som Facebook, Apple och Pinterest (bland annat).
På resultatsidan ser du total CSS-filstorlek i kilobytes, tillsammans med en lista över mest använda egenskaper och deklarationer. Allt här ser ut som en lång lista med siffror, så det kan vara förvirrande att läsa först.
Men ju mer du använder den här appen, desto roligare blir det! Här är en lista över allt hittar du på statistiksidan:
- Totalt egenskaper, selektorer, och regler
- Allt typsnitt färger med exempel och hex koder
- Allt bakgrundsfärger med exempel och hex koder
- Allt typsnittstorlekar med exempel
- Lista av fontfamiljer
- Lista över alla z-indexvärden
- Ett stapeldiagram över Totala / unika CSS-deklarationer
- Specificitetsgraf
- Total regelsettstorlek
- Allt mediefrågor
- De rå CSS-kod tillsammans med URL-länkar till enskilda CSS-filer
CSS-statistik är tillräckligt smart för att dra alla CSS-filer och slå samman dessa data tillsammans. Utvecklarna lägger mycket ansträngning i denna sak för att få det att fungera precis.
Och den extra fantastiska delen är hela GitHub repo med källkod för hela projektet. Så kan du ladda ner det här och återanvända den på din egen server (lokalt eller annars) att leka om du vill gräva in i koden.
Du har möjlighet att dra en enskild CSS-fil eller analysera alla stylesheets på en enda domän. Det finns så mycket du kan lära dig av att studera det här verktyget och det ger djupare insikt för utvecklare som kommer ner i nitty-gritty detaljerna.
För att testa för dig själv, besök bara CSS-statistik och sätt in en webbplats. Du kommer att bli förvånad över hur mycket data som finns och hur mycket du kan lära av ett så enkelt verktyg.
