Introduzione
Da quando sui browser web è stato introdotta la funzionalità di “Ispeziona elemento“, la vita per gli sviluppatori web si è semplificata molto. Se prima, per debug o per analisi, occorreva visualizzare il codice sorgente di tutta la pagina html, con questa funzionalità si può visualizzare direttamente il il codice HTML e CSS dell’elemento desiderato. Inoltre, questo strumento permette anche di apportare modifiche e simularle live all’interno delle pagina, senza dover prima doverla scaricare, modificare e quindi uploadare sul server via ftp. Sarà sufficiente editare il codice sul browser per vedere in tempo reale che effetto abbiano le modifiche apportate.
Descrizione
E se vi dicessi che esiste una estensione che rende ancora più facile la vita dello sviluppatore? Questa estensione compatibile per Chrome, Firefox, Safari ed Edge si chiama CSS Scan 3.0 e permette di scoprire lo stile dei tuoi siti Web preferiti analizzando i CSS al volo, senza dover far uso direttamente della funzionalità di “Ispeziona elemento” del Browser. Funziona su qualsiasi sito Web, qualsiasi tema e anche offline. La cosa che più mi colpisce di CSS Scan è che è in grado di controllare il CSS di qualsiasi elemento su cui passi il mouse, istantaneamente, e permette di copiare le sue intere regole con un solo clic.
Per chi sviluppa sa che quando si deve copiare lo stile css di un elemento di un sito, occorre avere premura di verificare gli stili duplicati o sovrascritti. Con questa estensione si possono ottenere tutti gli stili attivi al volo, copiando tutti gli elementi figlio, le query multimediali, le pseudo-classi e gli pseudo-elementi CSS (come :hover, :before, :after, :focus.) senza perdere tempo a cercare infinite regole CSS sugli strumenti di sviluppo dei browser.
Se l’elemento su cui stai passando il mouse non è quello giusto che desideri copiare, puoi navigare nell’albero DOM premendo i tasti freccia su e giù per ispezionare genitori, fratelli ed elementi figlio.
Funzionamento
Con il tuo browser visita qualsiasi qualsiasi sito Web e fai clic sull’icona dell’estensione sulla barra degli strumenti del browser per aprirla.
Passa il mouse su qualsiasi elemento e otterrai immediatamente il loro codice CSS. Da qui potrai leggere, analizzare e modificare al volo lo stile editare per vedere in tempo reale che effetto abbiano le modifiche apportate.
Per copiare il codice è sufficiente fare un semplice clic
mentre per aggiungere e modificare il codice è necessario premere la barra spaziatrice per fissare la finestra flottante e permettere l’editing.
Supporto a Codepen
La cosa interessante è che è possibile anche esportare e salvare frammenti di codice sul sito Codepen, la nota comunità online per testare e mostrare frammenti di codice HTML, CSS e JavaScript creati dagli utenti. Su Chrome esisteva già una estensione che faceva qualcosa di simile, ma con CSS Scan è veramente semplice creare snippet senza andare a finire nei meandri di sotto finestre del browser.
Per poter esportare un elemento, occorre prima bloccare la finestra CSS premendo la barra spaziatrice. Quindi, una volta estratto come componenti interi l’HTML e il CSS degli elementi e di tutti i suoi elementi figlio, è sufficiente cliccare sulla icona di condivisione in alto a destra
per poter salvare questi frammenti sul cloud di Codepen e iniziare così la tua raccolta di splendidi elementi che puoi utilizzare nei tuoi progetti.
Come potete vedere automaticamente ogni codici viene inseriti nei loro rispettivi riquadri HTML e CSS.
Pensate che lo sviluppatore, usando questa estensione, ha creato delle splendide raccolte di elementi html con particolari stili css, come Checkbox CSS, Box-shadow, Button e CSS Shapes.
Ma oltre alla sua praticità e al suo accattivante aspetto grafico, l’estensione CSS Scan ha anche una nutrita serie di Opzioni da configurare per ottenere sempre il massimo dal proprio lavoro:
Dove trovarla
L’estensione CSS Scan 3.0 è compatibile per Chrome, Firefox, Edge e Safari (su macOS 10.12 o superiori) ed è completamente localizzata in Italiano (al momento, però, solo per le versioni di Firefox e Chrome). E’ disponibile per l’acquisto direttamente solo dal sito del produttore a questo link. Al momento è in sconto a 89$ (invece che 120$) e la licenza che acquisterete è a vita ed è limitata a 3 attivazioni simultanee, che puoi gestire in qualsiasi momento dal sito MyCssScan.com. Considerate che le attivazioni sono calcolate per browser, e non per dispositivo, in quanto è difficile identificare in modo univoco i dispositivi tramite un’estensione (soprattutto cross-browser). Quindi, ad esempio, se utilizzate solo 1 browser, potreste usarlo anche su 3 dispositivi contemporaneamente.
Conclusioni
Devo dire che l’estensione, creata nel 2020, nonostante sia di un singolo sviluppatore indipendente (Guilherme Rizzo), è aggiornata abbastanza di frequente come potete vedere dal changelog. Sarà per questo motivo, unito al fatto che è compatibile con tutti i principali browser sul mercato e che è davvero ben realizzata, che ha trovato un ottimo riscontro tra gli sviluppatori web.
Se, quindi, il web è il vostro pane quotidiano vi consiglio di dare una chance a questa estensione (provando, magari, questa demo online) che potrebbe davvero dare un boost al vostro lavoro.
Commenti Recenti