Il principio che c’è alla base della formattazione grafica dei componenti Passweb all’interno del back end dell’applicazione, è esattamente lo stesso che regola la gestione delle proprietà CSS all’interno del pannello Elements degli Strumenti per sviluppatori.

Nello Style Editor di Passweb, così come nella sezione Styles del pannello Elements degli strumenti per sviluppatori, sono infatti riportate, per ogni componente, le principali proprietà CSS che possono essere applicate al componente stesso.

Modificando il valore di una proprietà all’interno dello Style Editor sarà possibile visualizzare in tempo reale all’interno dell’ambiente di sviluppo gli effetti che tale modifica andrebbe a determinare sulla pagina web. Tali modifiche diventeranno poi permanenti e verranno quindi riportate sui relativi file sorgente solo ed esclusivamente nel momento in cui si deciderà di salvarle.

In definitiva dunque il processo di modifica di una proprietà CSS all’interno dello style editor di passweb è fondamentalmente lo stesso che ci porta alla modifica di una proprietà CSS nel pannello Styles degli strumenti per sviluppatori. Si tratta di verificare prima l’effetto che tale modifica andrebbe ad apportare alla pagina web e, solo nel caso in cui tale effetto ci soddisfi, renderlo poi permanente applicando la modifica ai file sorgente del sito. All’interno di Passweb quest’ultimo passaggio si traduce in un semplice salvataggio dei valori impostati all’interno dello style editor.

Verrebbe allora da chiedersi perché utilizzare, in questo senso, gli strumenti per sviluppatori di Chrome piuttosto che direttamente lo style editor di Passweb.

La risposta a questa domanda è che lo style editor di Passweb non contiene tutte le proprietà CSS1, CSS2, e CSS3 che possono essere effettivamente applicate ad un elemento HTML per ottenere un determinato effetto grafico. Ciò non significa che le proprietà assenti dallo style editor non possano comunque essere applicate ai vari elementi.

In questo senso Passweb mette infatti a disposizione dell’utente, in attesa che tali proprietà vengano gestite direttamente all’interno dello Style Editor, altri strumenti, come ad esempio il componente HTML o la gestione dei Layout da associare alle varie pagine web, per poter definire una qualsiasi proprietà /e/o una qualsiasi regola CSS da applicare agli elementi presenti all’interno della propria pagina web.

Ovviamente la gestione di questi strumenti è un po’ meno semplice rispetto alla gestione tramite Style Editor e richiede una certa conoscenza a livello di programmazione CSS o Javascript.

Ecco allora che in questo senso gli strumenti per sviluppatori messi a disposizione da Chrome ci tornano particolarmente utili perché con la loro funzione di auto-completamento ci guidano nella scrittura corretta di una proprietà CSS e/o nell’individuazione del selector corretto da utilizzare per fare in modo che la nostra modifica grafica venga effettivamente applicata alla pagina.

Possiamo quindi utilizzare questo strumento per aiutarci a scrivere correttamente la regola CSS che vogliamo applicare e per verificarne l’effetto in tempo reale prima di andare a modificare, con gli strumenti messi a disposizione da Passweb, il codice sorgente della pagina.

Un classico esempio, in questo senso potrebbe essere rappresentato dalla necessità di impostare una precisa dimensione per l’immagine di sfondo utilizzato per un certo componente.

Passweb ci consente infatti di inserire l’immagine di sfondo (corrispondente alla proprietà “background-image”) direttamente da Style Editor ma non ci da ancora la possibilità di gestirne in maniera specifica la dimensione

Per gestire questa dimensione, attualmente, dovremo quindi andare a scrivere per l’elemento desiderato la corrispondente proprietà CSS.

Sarà quindi sufficiente analizzare all’interno della pagina web l’elemento desiderato con gli strumenti per sviluppatori (vedi “Ispezione di un elemento”). Nel sezione Styles del pannello Elements troveremo il selector da utilizzare per applicare la regola CSS all’elemento corretto (vedi “Gestione e Modifica delle proprietà CSS dal pannello Styles”).

Iniziando a digitare il nome della proprietà, e nello specifico scrivendo semplicemente “background” ci verranno proposte tutte le proprietà CSS che hanno a che vedere con l’immagine di sfondo e tra queste troveremo immediatamente quella che ci serve ossia background-size.

Confermando l’inserimento di questa proprietà ci verranno poi proposti anche tutti i possibili valori che possono essere ad essa associati.

Potremo quindi testarne l’effetto in tempo reale sulla pagina web e solo dopo aver raggiunto l’effetto desiderato potremo, ad esempio, copiare l’intera regola presente che ha prodotto l’effetto desiderato dal pannello Styles al layout applicato in Passweb alla pagina in oggetto in maniera tale da apportare questa stessa modifica ai file sorgente del sito.