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.

Cattura

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.

ass-col

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

CommentaDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *