CSS: come sovrascrivere uno stile inline

CSS: come sovrascrivere uno stile inline

Chi mastica un po’ di CSS saprà bene che esiste un preciso ordine d’importanza relativo ai vari stili, ordine che decide quale prendere in considerazione nel caso in cui sia specificato più di uno stile per un determinato elemento HTML. Ve lo riporto qui di seguito.

  1. Stile inline
  2. Stile interno ed esterno
  3. Browser

Appare quindi chiaro che lo stile ad avere la priorità assoluta è quello inline. Ciò si traduce con il fatto che quest’ultimo sovrascriverà qualunque altro stile definito per l’elemento in questione, che sia dunque specificato nella pagina HTML all’interno del tag <head> (stile interno), in un foglio di stile a parte (stile esterno), oppure tramite il valore di default del browser.

La dichiarazione !important

A volte però potremmo ritrovarci in una situazione in cui uno stile inline è praticamente impossibile da rimuovere dal markup, ad esempio perchè quel codice è stato inserito nella pagina da uno JavaScript esterno, o ancora perchè generato da un CMS che non siamo in grado di gestire facilmente. Noi però abbiamo la necessità impellente di sovrascriverlo. È possibile ribaltare l’ordine citato in precedenza assegnando la priorità ad uno stile interno oppure esterno? Fortunatamente si, ed il bello consiste proprio nella facilità e immediatezza di questo utilissimo “trucchetto”. Vediamo subito un esempio pratico.

Poniamo il caso che l’elemento HTML da modificare sia un paragrafo, e che volessimo cambiarne il colore dal rosso al blu. Potete utilizzare uno di questi editors online per fare delle prove.

<p style="color:red">Paragrafo colorato.</p>

 
Se provassimo ad effettuare la modifica utilizzando ad esempio un foglio di stile esterno, vedremmo che il risultato sarebbe nullo, questo sempre in base alla regola del cascading order descritta a inizio articolo.

p {
  color: blue;
}

 
Ora proviamo invece a scrivere lo stesso codice, ma questa volta con un’aggiunta fondamentale.

p {
  color: blue !important;
}

 
Come potete notare adesso la modifica è andata a buon fine, e tutto per merito della clausola !important

Tale dichiarazione infatti fa in modo che una regola CSS prevalga rispetto ad un’altra, e nel nostro caso ha appunto sovrascritto lo stile inline assegnando a quello esterno una priorità maggiore. Ci basterà inserirla alla fine della dichiarazione, subito dopo il valore assegnato alla proprietà e prima del punto e virgola, facile no?

Occhio agli abusi

L’uso della parola chiave !important è sconsigliato dalla maggior parte dei programmatori e web designers poichè un suo abuso renderebbe il codice di difficile lettura e poco gestibile. Uno dei rari casi in cui invece il suo utilizzo può essere approvato è proprio la situazione descritta nell’articolo, ovvero la sovrascrizione di uno stile inline qualora non avessimo altre alternative.

Crediti

Background nell’immagine in evidenza by Tirachard – Freepik.com

Arrows brushes nell’immagine in evidenza by myukiori

Potrebbero interessarti anche...