Nella precedente lezione ci siamo occupati di come calcolare la specificità delle regole nel CSS. Approfondiamo ora la clausola !important vista al termine della lezione.
Tale dichiarazione assegna un valore di precedenza alla regola che prevale su tutte le specificità viste in precedenza. Il suo utilizzo è utile quando si ha a che fare con fogli di stile CSS molto complessi e lavorare con le specificità classiche richiede troppo impegno.
Vediamo alcuni semplici esempi per capirne il funzionamento.
p { color: red !important; }
p { color: green; }Nel precedente esempio la prima regola non verrà sovrascritta poiché utilizza la dichiarazione CSS !important e quindi il colore del testo sarà di colore rosso.
Bisogna stare attenti però a non abusare della clausola perché si potrebbero ottenere effetti indesiderati. Se due proprietà riferite allo stesso elemento hanno priorità !important, verrà assegnata l’ultima inserita nel classico ordine a cascata.
p { color: red !important; }
p { color: green !important; }Le due regole, come appena detto, hanno specificità identica quindi verrà assegnato il colore verde considerando che, nell'ordine a cascata, è l'ultimo inserito.
!important e Internet Explorer
La dichiarazione !important è spesso utilizzata anche per risolvere problemi di compatibilità dei layout con Internet Explorer 6 e inferiori.
Tali tecniche verranno approfondite in alcune delle prossime lezioni. Il “trucchetto” utilizzato in esse è basato sull’errata interpretazione della clausola sulle versioni di IE inferiori o uguali alla 6. In queste versioni, infatti, !important viene sovrascritto se si utilizza la stessa proprietà all’interno della regola.
Vediamo un esempio per capire. La seguente regola:
p {
color: red !important; }
color: green;
}verrà interpretata correttamente da tutti i browser visualizzando il testo di colore rosso. Nelle versioni sopra citate di Internet Explorer, invece, il testo verrà visualizzato di colore verde ignorando del tutto la definizione !important.
È possibile vedere all’opera il precedente esempio al seguente indirizzo.