Vizualizujte všechny styly CSS se statistikami CSS
Přemýšleli jste, kolik CSS pravidel je ve stylu? Nebo jste někdy chtěli vidět vizuální reprezentace z všechny barvy používá se v jednom souboru CSS? S Statistiky CSS, můžete připojit jakékoli webové stránky a vytáhněte spoustu surových dat CSS uspokojit vaši zvědavost.
A tato webová aplikace jde mnohem hlouběji, než jen zobrazování všech barev pro styl. Můžete si představit všechny hodnoty z-indexu, všech velikostí písma, všechny mediální dotazy a dokonce i graf vizuální specificity.
Tato aplikace pokrývá tolik, že je prakticky nemožné konzumovat všechno v jednom sezení. To vám dá obrovský přehled o všech webových stránkách jen o představení toho, co je v jejich stylu.
Chcete-li začít, navštivte webovou stránku CSS Stats a připojte libovolnou adresu URL si přeješ. Můžete si také vybrat z řady navrhovaných stránek, jako je Facebook, Apple a Pinterest (mimo jiné).
Na stránce výsledků se zobrazí stránka celková velikost souboru CSS v kilobajtech, spolu se seznamem nejčastěji používané vlastnosti a deklarace. To vše se jeví jako jeden dlouhý seznam čísel, takže to může být matoucí, když si nejdříve přečtěte.
Ale čím více budete používat tuto aplikaci více zábavy dostane! Tady je seznam všeho najdete na stránce statistiky:
- Celkem # z vlastnosti, voliče, a pravidla
- Všechno barvy písma s příklady a hexadecimálními kódy
- Všechno barvy pozadí s příklady a hexadecimálními kódy
- Všechno velikosti písma s příklady
- Seznam rodiny fontů
- Seznam všech hodnoty indexu z
- Sloupcový graf celkem / jedinečná prohlášení CSS
- Graf specifičnosti
- Celkový velikost sady pravidel
- Všechno mediální dotazy
- raw kód CSS spolu s Odkazy URL na jednotlivých CSS souborů
CSS Stats je dost chytrý, aby vytáhl všechny CSS soubory a sloučit tato data dohromady. Vývojáři dali hodně úsilí do této věci, aby to fungovalo správně.
A navíc úžasná část je plná GitHub repo s zdrojový kód pro celý projekt. Takže si můžete stáhnout toto a re-hostovat na vašem vlastním serveru (lokálně nebo jinak) hrát, pokud chcete kopat do kódu.
Máte možnost tažení jakéhokoli jednotlivého souboru CSS nebo analyzovat všechny styly na jedné doméně. Je toho tolik, co se můžete naučit od studia tohoto nástroje a nabízí hlubší vhled pro vývojáře, kteří se dostanou do detailů drobných drobností.
Chcete-li otestovat sami, navštivte stránky CSS Stats a připojte webové stránky. Budete se divit, kolik dat je k dispozici a kolik se můžete z takového zjednodušujícího nástroje naučit.
