Visualizza qualsiasi foglio di stile CSS con le statistiche CSS
Vi siete mai chiesti quante regole CSS ci sono in un foglio di stile? O hai mai desiderato vedere un rappresentazione visiva di tutti i colori usato in un file CSS? Con Statistiche CSS, puoi collegare qualsiasi sito web e tira un mucchio di dati CSS grezzi per soddisfare la tua curiosità.
E questa app Web è molto più profonda del semplice mostrare tutti i colori per un foglio di stile. Puoi visualizzare tutti i valori di z-index, tutte le dimensioni dei caratteri, tutte le query multimediali e persino vedere a grafico di specificità visiva.
Questa app copre così tanto che è praticamente impossibile consumare tutto in un'unica seduta. Ti darà una straordinaria panoramica di qualsiasi sito web solo da mostra cosa c'è nel loro foglio di stile.
Per iniziare, visitare il sito Web CSS Stats e collegare qualsiasi URL desideri. Puoi anche scegliere tra una serie di siti suggeriti come Facebook, Apple e Pinterest (tra gli altri).
Nella pagina dei risultati, vedrai il dimensione totale del file CSS in kilobyte, insieme a un elenco di proprietà e dichiarazioni più comunemente utilizzate. Tutto questo appare come una lunga lista di numeri, quindi può essere fonte di confusione da leggere all'inizio.
Ma più usi questa app più diventa divertente! Ecco un elenco di tutto lo troverai nella pagina delle statistiche:
- Totale di proprietà, selettori, e regole
- Tutti colori dei caratteri con esempi e codici esadecimali
- Tutti colori di sfondo con esempi e codici esadecimali
- Tutti dimensioni dei caratteri con esempi
- Lista di famiglie di caratteri
- Elenco di tutti valori z-index
- Un grafico a barre di dichiarazioni CSS totali / uniche
- Grafico di specificità
- Totale dimensione del set di regole
- Tutti media query
- Il codice CSS grezzo insieme a Collegamenti URL al singoli file CSS
Le statistiche CSS sono abbastanza intelligenti da estrarre tutti i file CSS e unisci questi dati insieme. Gli sviluppatori si impegnano molto in questa cosa per farlo funzionare nel modo giusto.
E, la parte extra impressionante è il completo repo GitHub con codice sorgente per l'intero progetto. Quindi, puoi scaricare questo e re-ospitarlo sul tuo server (localmente o meno) per giocare se vuoi scavare nel codice.
Hai la possibilità di tirando qualsiasi singolo file CSS o analizzando tutti i fogli di stile su un singolo dominio. C'è così tanto che puoi imparare dallo studio di questo strumento e offre una visione più approfondita per gli sviluppatori che riescono a entrare nei dettagli nitidi.
Per testare da soli, basta visitare CSS Statistiche e collegare un sito Web. Sarai stupito di quanti dati sono disponibili e di quanto puoi imparare da uno strumento così semplicistico.
