Una delle funzionalità più apprezzate (da programmatori e non) degli Strumenti per Sviluppatori è sicuramente quella che consente di modificare le proprietà CSS dei vari elementi HTML presenti all’interno della pagina web potendo osservare in tempo reale l’effetto prodotto da queste variazioni di stile senza la necessità di dover agire ogni volta dai vari file sorgente.

Ora prima di passare ad analizzare nel dettaglio il pannello Styles presente nella parte destra degli Strumenti per Sviluppatori è bene però chiarire un paio di concetti di fondamentale importanza relativamente all’utilizzo del fogli di stile e all’applicazione delle regole CSS.

• La realizzazione delle moderne pagine web è determinata da una netta separazione tra i contenuti della pagina, definiti dal linguaggio HTML (che viene quindi considerato come un linguaggio strutturale) e la formattazione grafica di questi stessi contenuti, definita invece dal linguaggio CSS (che viene quindi considerato come un linguaggio di presentazione)
• L’acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata) e definisce un linguaggio di stile per i documenti web. I CSS in sostanza istruiscono un browser su come il documento debba essere presentato all’utente, definendone, ad esempio, i font, i colori, le immagini di sfondo, il posizionamento ecc…
• I CSS fanno uso di alcuni concetti cruciali per determinare in maniera corretta in che modo le varie proprietà interagiscono tra loro nel contesto di un foglio di stile e all’interno di una pagina web.

Il primo di questi concetti è quello dell’ Ereditarietà secondo il quale le impostazioni di stile applicate ad un elemento vengono ereditate anche dai suoi discendenti, almeno fino a quando, per un elemento discendente, non si imposti esplicitamente un valore diverso per quella stessa proprietà.

Altro concetto fondamentale per una regola CSS è quello del suo peso che determina la maggiore o minore importanza da assegnare a questa stessa regola. Un primo criterio di importanza è dato dall’origine del foglio di stile. Quando visualizziamo una pagina HTML possono entrare in gioco, nel modificare lo stile degli elementi, diversi fogli di stile, ad esempio:

• Il foglio dell’autore;
• Il foglio dell’utente;
• Il foglio di stile predefinito del browser;

In generale in ordine di importanza verranno valutati: foglio di stile dell’autore, foglio di stile dell’utente, foglio di stile predefinito del browser.

Riportando questi concetti all’interno di un sito realizzato con Passweb l’ordine di importanza secondo cui verranno valutate ed applicate le regole CSS è il seguente:

• Per prima cosa verranno valutate ed applicate eventuali proprietà CSS impostate direttamente tramite le proprietà di configurazione dei singoli componenti (es. dimensioni delle voci di menu, stili applicati direttamente all’interno del componente HTML ecc…);
• Verranno poi valutate ed applicate le proprietà CSS definite all’interno di eventuali layout applicati alla pagina che si sta considerando;
• Verranno infine valutate e applicate (e saranno quindi quelle con un peso minore) le proprietà CSS impostate tramite la configurazione grafica (Style Editor) del singolo componente;

La specificità descrive, invece, il peso relativo delle varie regole all’interno di un foglio di stile. Esistono regole ben precise per calcolarla che sono poi quelle stesse regole che applica un browser quando si trova davanti ad un CSS.

In questo senso possiamo dire che gli id pesano più delle classi che pesano più dei singoli elementi. Supponendo, per capirci meglio, di applicare una regola CSS ad un elemento selezionato tramite una sua classe e di applicare poi per la stessa regola una valore diverso selezionando però lo stesso elemento mediante il suo id, quest’ultimo valore avrà la precedenza rispetto al precedente.

I concetti appena analizzati sono di fondamentale importanza per comprendere come vengano effettivamente applicate, anche attraverso il pannello Styles degli strumenti per sviluppatori, le varie regole CSS e come queste regole interagiscano creando o meno conflitti tra loro.

Questi concetti, sebbene fondamentali per comprendere come si debba lavorare con gli stili, non sono comunque oggetto di questa guida. Per i dettagli in merito rimandiamo quindi ad un corso che tratti in maniera specifica la gestione dei CSS.

Un ultimo concetto fondamentale da tenere in considerazione è poi che, al pari di quanto visto relativamente alla modifica del DOM della pagina, anche le modifiche apportate mediante gli Strumenti per Sviluppatori alle varie proprietà CSS, NON SONO MODIFICHE PERMANENTI e non agiscono in nessun modo sul relativi file sorgente. Anche in questo caso quindi ricaricando la pagina tutte le modifiche apportate verranno completamente eliminate.