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 una rappresentazione visiva di tutti i colori usati in un file CSS? Con CSS Stats, puoi collegare qualsiasi sito web e ottenere 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. È possibile visualizzare tutti i valori di z-index, tutte le dimensioni dei caratteri, tutte le query multimediali e persino visualizzare un 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 semplicemente mostrando cosa c'è nel loro foglio di stile .

Per iniziare, visita il sito Web CSS Stats e inserisci l'URL che desideri. Puoi anche scegliere tra numerosi siti suggeriti come Facebook, Apple e Pinterest (tra gli altri).

Nella pagina dei risultati, vedrai la dimensione totale del file CSS in kilobyte, insieme a un elenco delle proprietà e delle 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 ciò che troverai nella pagina delle statistiche:

• N. totale di proprietà, selettori e regole
• Tutti i colori dei caratteri con esempi e codici esadecimali
• Tutti i colori di sfondo con esempi e codici esadecimali
• Tutte le dimensioni dei caratteri con esempi
• Elenco delle famiglie di caratteri
• Elenco di tutti i valori di z-index
• Un grafico a barre di dichiarazioni CSS totali / uniche
• Grafico di specificità
• Dimensione totale del set di regole
• Tutte le query multimediali
• Il codice CSS grezzo insieme ai collegamenti URL ai singoli file CSS

Le statistiche CSS sono abbastanza intelligenti da estrarre tutti i file CSS e unire insieme i dati . Gli sviluppatori si impegnano molto in questa cosa per farlo funzionare nel modo giusto.

Inoltre, la parte più interessante è il repository completo di GitHub con codice sorgente per l'intero progetto . Quindi, puoi scaricare questo e re-hostarlo sul tuo server (localmente o in altro modo) per giocare se vuoi scavare nel codice.

Hai la possibilità di estrarre qualsiasi singolo file CSS o di analizzare 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 più nitidi.

Per testare da solo, basta visitare CSS Statistiche e collegare un sito Web. Sarai sorpreso di quanti dati sono disponibili e di quanto puoi imparare da uno strumento così semplicistico.