sovrascrivere uno stile inline

Prima di imparare a sovrascrivere uno stile inline, facciamo un piccolo ripasso sul 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.

Come sovrascrivere uno stile inline

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. Puoi 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 puoi 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 ci ha appunto permesso di sovrascrivere uno 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

Share: