Visualiseer elke CSS-stylesheet met CSS-statistieken
Heeft u zich ooit afgevraagd hoeveel CSS-regels er in een stylesheet zitten? Of heb je ooit een a willen zien? visuele representatie van alle kleuren gebruikt in één CSS-bestand? Met CSS-statistieken, u kunt elke website aansluiten en haal een stapel ruwe CSS-gegevens tevoorschijn om je nieuwsgierigheid te bevredigen.
En deze web-app gaat zoveel dieper dan alleen alle kleuren weergeven voor een stylesheet. Je kunt visualiseren alle z-indexwaarden, alle lettergrootten, alle mediaquery's en zie zelfs een visuele specificiteit grafiek.
Deze app behandelt zoveel dat het praktisch onmogelijk is om alles in één keer te consumeren. Het geeft je een geweldig overzicht van welke website dan ook presentatie van wat er in hun stylesheet staat.
Ga om aan de slag te gaan naar de CSS Stats-website en plug in elke URL jij wenst. Je kunt ook kiezen uit een aantal voorgestelde sites zoals Facebook, Apple en Pinterest (onder andere).
Op de resultatenpagina ziet u de totale CSS-bestandsgrootte in kilobytes, samen met een lijst van de meest gebruikte eigenschappen en verklaringen. Dit verschijnt allemaal als een lange lijst met getallen, dus het kan in het begin verwarrend zijn om te lezen.
Maar hoe meer u deze app gebruikt, hoe leuker het wordt! Hier is een lijst van alles je vindt het op de stats-pagina:
- Totaal van eigenschappen, selectors, en reglement
- Allemaal lettertype kleuren met voorbeelden & hex-codes
- Allemaal achtergrondkleuren met voorbeelden & hex-codes
- Allemaal lettergroottes met voorbeelden
- Lijst van lettertype families
- Lijst van allemaal z-indexwaarden
- Een staafdiagram van totale / unieke CSS-verklaringen
- Specificiteitsgrafiek
- Totaal regelset grootte
- Allemaal mediaquery's
- De onbewerkte CSS-code samen met URL-koppelingen naar de individuele CSS-bestanden
CSS-statistieken is slim genoeg om alle CSS-bestanden en voeg die gegevens samen. De ontwikkelaars doen er alles aan om het goed te laten werken.
En, het extra geweldige deel is de volledige GitHub repo met broncode voor het hele project. Je kunt dit en dus downloaden hosten het opnieuw op je eigen server (lokaal of anderszins) om rond te spelen als je de code wilt onderzoeken.
U hebt de mogelijkheid om trekken van elk individueel CSS-bestand of alle stylesheets parseren op een enkel domein. Er is zoveel dat je kunt leren van het bestuderen van deze tool en het biedt een dieper inzicht voor ontwikkelaars die in de nitty-gritty details duiken.
Om zelf te testen, ga je naar CSS Stats en sluit je een website aan. Je zult versteld staan hoeveel gegevens beschikbaar zijn en hoeveel je kunt leren van zo'n simplistische tool.
