Vizualizați orice foaie de stil CSS cu statistici CSS

V-ați întrebat vreodată câte reguli CSS există într-o foaie de stil? Sau ați vrut vreodată să vedeți a reprezentare vizuala de toate culorile utilizate într-un fișier CSS? Cu Statistici CSS, puteți conecta orice site și trageți o grămadă de date CSS brute pentru a vă satisface curiozitatea.

Și această aplicație web merge mult mai adânc decât arătând toate culorile pentru o foaie de stil. Puteți vizualiza toate valorile z-index, toate dimensiunile de font, toate interogările media și chiar vezi a graficul de specificitate vizuală.

Această aplicație acoperă atât de mult încât este practic imposibil să consume totul într-o singură ședință. Acesta vă va oferi o imagine de ansamblu extraordinară a oricărui site doar de prezentând ce este în foaia de stil.

Pentru a începe, vizitați site-ul web CSS Statistici și conectați orice adresă URL ai vrea tu. De asemenea, ați putea alege dintr-un număr de site-uri sugerate, cum ar fi Facebook, Apple și Pinterest (printre altele).

În pagina cu rezultate, veți vedea dimensiunea totală a fișierului CSS în kilobyte, împreună cu o listă cu cele mai frecvent utilizate proprietăți și declarații. Toate acestea apar ca o listă lungă de numere, astfel încât poate fi confuz să le citești la început.

Dar cu cât utilizați mai mult această aplicație, cu atât este mai distractiv! Iată a lista cu totul veți găsi pe pagina cu statistici:

Numărul total de proprietăţi, selectoare, și norme
Toate culorile fontului cu exemple și coduri hex
Toate culorile de fundal cu exemple și coduri hex
Toate dimensiunile fontului cu exemple
Lista de familii de fonturi
Lista tuturor valorile z-index
O diagramă de bare declarații CSS totale / unice
Graficul de specificitate
Total setul de reguli
Toate solicitări media
codul brut CSS impreuna cu Linkuri URL la fișiere CSS individuale

CSS Statistici este suficient de inteligent pentru a trage toate fișierele CSS și îmbinarea acestor date împreună. Dezvoltatorii au făcut mult efort în acest lucru pentru a face să funcționeze corect.

Și partea extra extraordinară este reparația completă GitHub cu cod sursă pentru întregul proiect. Deci, puteți descărca acest lucru și re-gazdă pe propriul server (local sau în alt mod) pentru a juca în jurul valorii de dacă doriți să sapi în cod.

Aveți opțiunea trăgând orice fișier CSS individual sau parsarea tuturor foilor de stil pe un singur domeniu. Există atât de multe lucruri pe care le puteți învăța de la studierea acestui instrument și vă oferă o perspectivă mai profundă pentru dezvoltatorii care se coboară în detaliile ciudate.

Pentru a vă testa singur, vizitați statisticile CSS și conectați-vă la un site Web. Veți fi uimit cât de multe date sunt disponibile și cât de mult puteți învăța dintr-un astfel de instrument simplist.