Blog

Alternativa XHTML e CSS al tag strike

Esempio di sintassi XHTML equivalente all'attributo HTML strike, per validare il proprio sito in ambito W3C.

Alternativa XHTML e CSS al tag strike

Capita spesso di avere la necessità di barrare un testo o una parola, per metterne in risalto la cancellazione, senza doverlo per forza rimuovere dalla pagina.
Il codice HTML prevedeva questa possibilità, tramite i tag <s> e <strike>, che tuttavia sono stati deprecati in HTML 4.01 e non vengono supportati in XHTML 1.0 Strict DTD.

Per ottenere l'effetto del testo barrato, pur rimanendo compatibili con gli standard W3C, è quindi possibile scegliere tra due soluzioni: il tag <del> ed l'utilizzo dei CSS.

Il tag <del>

Il tag <del> è l'equivalente XHTML all'attributo <strike> ormai deprecato e, come quest'ultimo, serve per creare un testo barrato.
Può essere utilizzato insieme al tag <ins> per evidenziare gli aggiornamenti e le relative modifiche in un documento.

Esempio di utilizzo <del> e <ins>

<html>
<head></head>
<body>
   <p><del>Questo testo è barrato</del> <ins>e questo lo rimpiazza</ins>.</p>
</body>
</html>


Per avere l'assoluta certezza che l'attributo <del> sia pienamente compatibile con tutti i browsers, potete aggiungere il seguente codice al vostro foglio di stile (CSS).

del {
	text-decoration: line-through;
}

Sintassi CSS equivalente

La seconda soluzione invece fa uso esclusivamente delle specifiche CSS che, grazie al loro attributo text-decoration, permettono di ovviare al problema di compatibilità W3C.
Passiamo subito ad un esempio pratico:

.strike {
	text-decoration: line-through;
}


Per quanto riguarda il codice html, è sufficiente fare in modo che ogni oggetto che si desidera cancellare, sia di classe strike.

<html>
<head>
<style>
.strike {
	text-decoration: line-through;
}
</style>
</head>
<body>
 <p>Sono sufficienti <span class="strike">2</span> 3 righe di codice CSS.</p>
</body>
</html>


Solo gli utenti registrati possono lasciare commenti.

© Copyright ©2008-2019. Tutti i diritti riservati.