CSS Peeper: CSS viewer per Web designer

CSS Peeper è un'estensione per il browser Web Google Chrome dedicata all'ispezione degli stili CSS, si tratta in sostanza di uno strumento utilizzabile da sviluppatori e Web designer che consente di analizzare elementi, o sezioni, di una pagina Internet, in modo da recuperare informazioni e caratteristiche da utilizzare per definire gli style sheet dei propri progetti.

Una volta installato come un qualsiasi altro add-on, CSS Peeper diventa accessibile tramite un'icona posizionata di fianco alla barra degli indirizzi di Chrome e, dopo che l'estensione è stata avviata, viene visualizzata una nuova finestra destinata a mostrare i dati relativi agli oggetti che si desidera ispezionare. Le prime informazioni fornite sono quelle che riguardano le caratteristiche di base del foglio di stile utilizzato, come per esempio il suo peso misurato in Kb, l'intervallo di tempo necessario per il suo caricamento e gli stili associati al body.

Ancora più interessante la possibilità di ispezionare singole componenti selezionabili tramite cursore. L'analisi rappresentata dall'immagine seguente è per esempio il risultato della selezione di un paragrafo, di quest'ultimo vengono offerte le informazioni relative al tag HTML formattato (nello specifico p), alla dimensione dell'elemento stesso e degli elementi che lo contengono e lo circondano, al typeface e alle relative proprietà (font-family, font-size, line-height, spaziatura, allineamento..) nonché ai colori utilizzati per i caratteri e lo sfondo.

CSS Peeper integra anche uno strumento appositamente pensato per l'ispezione dei colori, che vengono mostrati tramite anteprime associate al relativo valore esadecimale, nonché un tool per l'estrazione degli asset contenuti in un pagina (come per esempio le immagini utilizzate nel layout). Questi ultimi possono essere esportati singolarmente o tutti insieme anche sotto forma di archivio compresso in formato Zip.

L'estensione è stata pensata per l'utilizzo associato ad altri strumenti per lo creatività, come per esempio Sketch per il graphic design e Adobe Photoshop

Via CSS Peeper