Abbiamo appena visto, al termine della lezione precedente, come si risolve un primo "conflitto" tra regole discordanti: abbiamo visto, infatti, che le proprietà assegnate specificamente prevalgono su quelle ereditate. In un certo senso il meccanismo di risoluzione dei conflitti si comporta in modo analogo anche in altre situazioni in quanto CSS tende a far prevalere la regola più specifica su quella più generica. In linea di assoluta approssimazione possiamo dire che l’ordine di priorità è questo:
- stile definito per l’ID
- stile definito per la classe
- stile definito per il tipo di tag
- stile ereditato
Per prima cosa, quindi, il browser cercheà un stile per l’ID e, se disponibile, lo applicherà facendolo prevalere in caso di conflitto con altri stili; non trovandolo cercherà lo stile per la classe, in subordine quello per il tipo di tag e solo alla fine applicherà, in mancanza di altro, lo stile ereditato.
Il discorso si fa pù complesso quando ad un elemento, ad esempio, sono applicate due classi, ad esempio:
<p class="class1 class2">...</p>In questo caso all’elemento si applicano le definizioni di stile presenti in entramble le classi, ma in caso di conflitti? si supponga ad esempio che la prima classe assegni un colore rosso al testo e la seconda un colore nero. Di che colore sarà il testo?
In questo caso CSS applica la regola dello "stile più vicino" quindi prevarrà la classe che è stata definita, all’interno del medesimo foglio di stile, per seconda. Ma se ci sono più fogli di stile?
Gli stili in linea prevalgono sui fogli di stile incorporati che, a loro volta, prevalgono su quelli esterni. Qualora vi siano stili dello stesso tipo prevarranno, ancora una volta, quelli "più vicini" all’elemento. Quindi, per fare un esempio, tra due stili esterni discordati prevarrà quello che, nel codice della pagina, è stato linkato per secondo.
Definire l’importanza: la clausola !important
Una keyword molto importante, e che ogni web designer dovrebbe conoscere, è !important. Mediante questa dichiarazione, infatti, lo sviluppatore dice al browser che una specifica dichiarazione è importante e quindi deve prevalere sulle altre eventualmente discordinati a prescindere da tutti i meccanismi di risoluzione dei conflitti visti sopra. Vediamo un esempio:
p { color: #FF0000 !important; }Da un punto di vista sintattico !important deve essere apposta all’interno di una specifica proprietà (nel nostro esempio "color") subito dopo il valore lasciando uno spazio vuoto dopo di questo.
Per meglio capire il funzionamento di !important vediamo un esempio completo. Si supponga di avere, nello stesso foglio di stile, queste due regole:
p { color: #FF0000; }
p { color: #000000; }In questo caso abbiamo un conflitto: sulla base dei meccanismi visti sopra la seconda regola prevale sulla prima quindi il nostro testo avra colore nero e non rosso.
Proviamo ora ad aggiungere la keyword !important alla prima regola in questo modo:
p { color: #FF0000 !important; }
p { color: #000000; }Così facendo la regola generale viene bypassata ed a prevalere sarà la prima e non la seconda.
E’ evidente che, qualora entrambe avessero la dichiarazione !important tornerebbero ad operare le regole di risoluzione dei conflitti illustrate in precedenza in quanto il livello di importanza delle regole discordanti sarebbe il medesimo.
