Visualizzare le proprietà CSS dei vari elementi presenti all’interno della pagina è sicuramente molto utile e interessante.

Le potenzialità offerte dagli strumenti per sviluppatori però non si fermano qui ma vanno ben oltre. E’ infatti possibile interagire direttamente con ogni singola proprietà visualizzando in tempo reale quello che sarà il risultato ottenuto nel momento in cui le stesse variazioni dovessero essere poi apportate ai file sorgente del sito.

Operando in maniera molto semplice ed intuitiva potremo, pertanto, aggiungere, eliminare o modificare ogni singola regola CSS visualizzata all’interno del pannello Styles.

In realtà nel pannello Styles possiamo trovare anche alcune sezioni, come ad esempio quella in cui vengono raccolte le regole ereditate dal foglio di stile del browser, colorate in grigio. Con queste sezioni è possibile interagire in alcun modo. Non è quindi possibile aggiungere, eliminare o modificare le singole proprietà CSS presenti all’interno di queste sezioni.

Vediamo ora più nel dettaglio come operare per modificare, aggiungere, eliminare o annullare una delle regole CSS con cui possiamo effettivamente interagire

MODIFICA DI UNA PROPRIETA’ CSS

E’ possibile modificare sia il nome che il valore delle proprietà CSS presenti all’interno del pannello Styles.

Per effettuare questo tipo di operazione è sufficiente cliccare con il tasto sinistro del mouse sul tipo di elemento (nome o valore della proprietà CSS) che si intente modificare. Così facendo l’elemento selezionato verrà evidenziato in azzurro e sarà liberamente editabile dall’utente.

Una volta abilitata la modalità di editing sarà poi possibile spostarsi da un elemento all’altro utilizzando semplicemente il tasto TAB e mantenendo sempre attiva la modalità di Editing.

Nel caso in cui si stia modificando una proprietà CSS numerica (es. width) è anche possibile incrementare o diminuire il valore di questa proprietà (dopo aver ovviamente abilitato la modalità di editing) utilizzando i tasti freccia o altri appositi shortcuts.

AGGIUNGERE UNA NUOVO PROPRIETA’

Per aggiungere una nuova proprietà CSS ad una regola già esistente è sufficiente cliccare con il pulsante sinistro del mouse in un qualsiasi spazio bianco presente all’interno della regola che si intende modificare in maniera tale da abilitare la modalità di editing.

Una volta attivata la modalità di editing della regola CSS sarà poi possibile inserire il nome della proprietà CSS che si vuole aggiungere ed il relativo valore.

In questo senso i developer tool ci vengono in aiuto con diversi strumenti come ad esempio l’auto-completamento della proprietà e/o del valore che si desidera inserire. Nel momento in cui iniziamo a digitare il nome della nuova proprietà infatti Chrome visualizza immediatamente un elenco di possibili suggerimenti relativi a ciò che stiamo digitando.

Utilizzando i tasti freccia ed il tasto TAB è possibile selezionare e inserire immediatamente la proprietà desiderata tra quelle forniteci dal browser stesso sfruttando dunque le sue funzioni di auto-completamento.

Ovviamente l’auto-completamento funziona non solo per il nome della proprietà ma anche per i possibili valori da associare alla proprietà stessa.

Un altro strumento molto utile è rappresentato dal color picker che viene richiamato in automatico dagli strumenti per sviluppatori ogni qual volta si va ad editare una proprietà che ha a che fare con i colori.

Per inserire un colore è quindi possibile selezionarlo direttamente all’interno della tavolozza e Chrome penserà a tradurlo nel codice colore corretto.

AGGIUNGERE UNA NUOVA REGOLA CSS

Oltre a poter aggiungere una nuova proprietà ad una regola CSS già esistente è anche possibile creare ed aggiungere una nuova regola CSS.

Per fare questo è sufficiente cliccare sull’icona raffigurante un segno “+” (New Style Rule) presente nella parte alta della sezione element.style

In questo modo Chrome si preoccuperà di inserire in maniera completamente automatica il selector corretto in relazione a quello che è l’elemento attualmente selezionato nel DOM della pagina e per il quale si vuole dunque aggiungere la nuova regola CSS.

Una volta creata la nuova regola CSS sarà poi possibile inserire al suo interno le nuove proprietà come precedentemente descritto

STILIZZARE ELEMENTI DINAMICI

All’interno di una pagina web possono essere presenti alcuni elementi (es. voci di menu, immagini ecc…) che modificano il loro aspetto grafico, e di conseguenza le loro proprietà CSS, in maniera dinamica ad esempio nel momento in cui l’utente passa con il mouse sopra questi stessi elementi o nel momento in cui decide di selezionarli.

A livello di CSS queste proprietà, che vengono applicate ed eliminate in maniera dinamica, sono gestite con le cosiddette pseudo classi. Gli strumenti per sviluppatori ci permettono di gestire le seguenti pseudo classi CSS ( e di conseguenza i relativi stati):

• :active – pseudo classe che consente di gestire lo stato “Attivo” che si genera nel momento in cui l’utente decide di selezionare l’ elemento HTML in oggetto
• :hover – pseudo classe che consente di gestire lo stato “Mouse over” che si genera nel momento in cui l’utente passa con il mouse sopra l’elemento HTML in oggetto
• :focus – pseudo classe che consente di gestire quel particolare stato che si genera nel momento in cui viene passato il focus all’elemento HTML in oggetto (es. quando il cursore lampeggia all’interno di un campo di input)
• :visited – pseudo classe che consente di gestire quel particolare stato dei link che si genera per tutti i collegamenti che sono già stati visitati dall’utente

Per gestire e modificare le proprietà CSS di questi stati è necessario:

• Cliccare sul pulsante “Toggle element state” presente in alto a destra della sezione element.style

• Cliccare con il tasto destro del mouse sull’elemento desiderato nel DOM della pagina, selezionare dal relativo menu contestuale la voce “Force element state” e selezionare infine lo stato o gli stati per i quali si desidera gestire le proprietà CSS

Gli stati selezionati all’interno di questo menù verranno poi riportati anche all’interno del pannello Styles e sarà quindi possibile gestire per essi le relative proprietà CSS.