Il tag <blink> di HTML

Il tag blink serve ad impostare un effetto lampeggiante a parole ed elementi di testo in generale. E’ importante ricordare che l’utilizzo del tag blink è deprecato (in quanto non conforme agli standard di accessibilità delle pagine web) e pertanto il suo utilizzo è sconsigliato seppur alcuni browser lo supportino ancora.

A titolo puramente didattico se ne riporta un esempio sintattico:

Benvenuti su <blink>Mr. Webmaster</blink>

La parola compresa nella coppia di tag di apertura (<blink>) e di chiusura (</blink>) comparirà e sparirà ritmicamente creando, appunto, un effetto testo lampeggiante.

Simulare blink coi CSS

Nonostante il tag <blink> sia deprecato, sono ancora molti gli utenti che cercano soluzioni di questo genere per dare risalto a determinate parole all’interno di un testo. Per ottenere un risultato analogo a quello del tag blink è possibile ricorrere all’utilizzo dei CSS. Si riporta, di seguito, un esempio di testo lampeggiante con CSS3:

Per prima cosa vediamo lo stile:

.blink {
  animation:1s blinker linear infinite;
  -webkit-animation:1s blinker linear infinite;
  -moz-animation:1s blinker linear infinite;
  color: red;
}
@-moz-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

Questo il markup da inserire all’interno del codice HTML:

<p>Benvenuti su <span class="blink">Mr. Webmaster</span></p>

Prova il codice

Simulare blink con Javascript

Anche attraverso Javascript è possibile simulare perfettamente l’effetto del deprecato tag <blink>. Ecco il codcie pronto all’uso:

<p>Benvenuti su <span id="blink">Mr. Webmaster</span></p>
<script>
var velocita = 1000; // 1000 = 1 secondo
var blink = setInterval(function () {
  var ele = document.getElementById('blink');
  ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, velocita);
</script>

Prova il codice

Creare l’effetto blink con jQuery

Vediamo una semplice funzione per creare un effetto di testo lampeggiante (blink text) utilizzando jQuery:

function blink(selector){
  $(selector).fadeOut('slow', function(){
    $(this).fadeIn('slow', function(){
      blink(this);
    });
  });
}

Esempio di utilizzo:

<script>
$(document).ready(function(){
  blink('.testo-lampeggiante');  
});
</script>

<span class="testo-lampeggiante">Mr.Webmaster</span>

Conclusioni

Le soluzioni riportate sono tutte conformi ai moderni standard del web, tuttavia vi consiglio di utilizzarle con estrema prudenza in quanto l’effetto lampeggiante potrebbe risultare fastidioso per l’utente. L’effetto testo lampeggiamte, infatti, potrebbe comportare alcuni problemi per la pagina web, in particolare potrebbe avere un impatto negativo su:

• Accessibilità: L’effetto blink può rappresentare un problema per le persone con disturbi dell’attenzione o che sofftono di fotosensibilità, poiché le rapide variazioni di luce e colore potrebbero causare loro dei problemi.
• Usabilità: L’effetto blink può rendere difficile per l’utente interagire con la pagina e trovare il contenuto che sta cercando. Ad esempio, se l’effetto blink viene utilizzato su un pulsante o un link, l’utente potrebbe avere difficoltà a interagire con esso.
• Esperienza utente: L’effetto blink può anche influire negativamente sull’esperienza utente complessiva. Se l’effetto è troppo invadente l’utente potrebbe risultarne infastidito.

In generale, l’effetto blink dovrebbe essere utilizzato con parisomina in quanto, se utilizzato in modo improprio, potrebbe avere un impatto negativo sull’esperienza dell’utente e sull’accessibilità e sull’usabilità della pagina web.