Bármely CSS-stíluslap megjelenítése CSS statisztikával
Mindig azon tűnődtem, hogy hány CSS szabály van a stíluslapon? Vagy valaha is akartál látni a vizuális megjelenítés nak,-nek minden szín egy CSS-fájlban használatos? Val vel CSS statisztika, bármilyen webhelyre és húz egy csomó nyers CSS adatot kíváncsiságát kielégíteni.
És ez a webes alkalmazás annyira mélyebb, mint a stíluslap összes színének megjelenítése. Megjelenítheti minden z-index érték, minden betűméret, minden média lekérdezés és még a vizuális specifitás gráf.
Ez az alkalmazás olyannyira kiterjed, hogy gyakorlatilag lehetetlen mindent elfogyasztani egy ülésen. Ez egy hatalmas áttekintést ad Önnek minden honlapról bemutatja, mi a stíluslapjuk.
Az induláshoz látogasson el a CSS Statisztika webhelyére és csatlakoztasson bármilyen URL-t Csak szeretnéd. Számos javasolt webhely közül választhat, mint például a Facebook, az Apple és a Pinterest (többek között).
Az eredményoldalon megjelenik a teljes CSS fájlméret kilobájtban, a listával együtt leggyakrabban használt tulajdonságok és nyilatkozatok. Ez mindegyike egy hosszú számlistaként jelenik meg, így zavaró lehet az első olvasás.
De minél többet használja ezt az alkalmazást, annál szórakoztatóbb lesz! Itt van egy mindent felsorol a stats oldalon találja:
- Összesen tulajdonságok, szelektor, és szabályok
- Minden betűtípus színek példákkal és hex kódokkal
- Minden háttérszínek példákkal és hex kódokkal
- Minden betűméretek példákkal
- Listája betűtípuscsaládok
- Az összes lista z-index értékek
- Egy oszlopdiagram teljes / egyedi CSS-nyilatkozatok
- Specifitás grafikon
- Teljes szabályméret
- Minden média lekérdezések
- A nyers CSS kód együtt URL-hivatkozások hoz egyedi CSS-fájlok
A CSS statisztika elég okos ahhoz, hogy az összes CSS fájlt és összevonják az adatokat. A fejlesztők rengeteg erőfeszítést tettek ebbe a dologba, hogy pontosan működjön.
És az extra félelmetes rész a teljes GitHub repo forráskód a teljes projekthez. Így letöltheti ezt és újra befogadja a saját kiszolgálón (helyben vagy egyébként), hogy játszhasson, ha a kódba akarsz ásni.
Lehetősége van húzza az egyes CSS-fájlokat vagy összes stíluslap elemzése egyetlen tartományban. Olyan sok mindent megtudhatsz, hogy tanulmányozod ezt az eszközt, és mélyebb betekintést nyújt a fejlesztőknek, akik bejutnak a mindennapos részletekbe.
A teszteléshez látogasson el a CSS Statisztikára és csatlakoztassa a webhelyet. Lenyűgözve lesz, hogy mennyi adat áll rendelkezésre, és mennyit tanulhat az ilyen egyszerű eszközből.
