Corsi on-line

Snapshot CSS con Critical Style Snapshot

Critical Style Snapshot è un’utile applicazione per gli sviluppatori che consente di realizzare snapshot, letteralmente delle “istantanee”, delle regole CSS utilizzate in una determinata pagina Web; questa soluzione è stata concepita per essere compatibile con la maggior parte delle pagine Web presenti su Internet, si presenta in sostanza come un’estensione per Google Chrome in grado di catturare circa il 99% delle media query CSS attive.

promotionalCritical Style Snapshot funziona i modo estremamente semplice permettendo di:

  • catturare il CSS di una pagina Web “above the fold” (cioè nella posizione migliore possibile rispetto agli altri elementi) con un solo click;
  • copiare il CSS catturato con un click addizionale;
  • mostrare un’anteprima del codice CSS del quale è stata realizzata l’istantanea.

L’estensione non richiede alcuna procedura di configurazione e potrà essere scaricata ed installata direttamente dal Chrome Webstore, fatto questo l’utilizzatore dovrà ridimensionare la finestra del browser fino alla larghezza desiderata (ad esempio quella di uno specifico device) per poi clickare sull’icona per la cattura (icon) presente nella barra delle estensioni di Chrome.

Esistono alcuni limiti, per esempio certi selettori come per esempio gli pseudo-elementi non verranno catturati, tale funzionalità potrebbe essere però introdotta in futuro attraverso successivi aggiornamenti del progetto. Vi sono poi alcuni casi (fortunatamente rari) in cui per poter generare gli Snapshot CSS desiderati saranno necessari degli aggiustamenti a livello di “inquadratura” (in sostanza a carico della finestra del browser).

Per quanto riguarda le @media query, va inoltre sottolineato che Critical Style Snapshot  può catturare soltanto CSS correntemente attivo, quindi non sarà per esempio possibile fotografare l’istantanea di uno stile specifico per browser Desktop se la finestra di cattura e stata ridimensionata per corrispondere all’area di visualizzazione di uno smartphone.

In pratica per catturare diverse ampiezze di schermo saranno necessari altrettanti snapshot.

Via Snapshot

Post correlati
I più letti del mese
Tematiche