Tag HTML <Blink>
Il tag <blink> è un elemento HTML deprecato che faceva lampeggiare il testo. Scopri perché è stato rimosso e come usare CSS o JavaScript.
Il tag <blink> era un elemento HTML non standard usato per far lampeggiare il testo che racchiudeva. Fu introdotto da Netscape Navigator negli anni '90, ma non è mai stato aggiunto ad alcuna specifica HTML ufficiale. I browser moderni non lo supportano più, quindi non ha alcun effetto sul web odierno.
Questa pagina spiega l'origine del tag, il motivo per cui tutti i browser lo hanno rimosso e come creare un effetto lampeggio nel modo corretto usando CSS o JavaScript, rispettando comunque le preferenze di accessibilità degli utenti.
Perché il Tag <blink> È Stato Rimosso
L'elemento <blink> è stato eliminato per due motivi principali:
- Non è mai stato standardizzato. Poiché era un'estensione proprietaria di Netscape e non ha mai fatto parte della specifica HTML del W3C, i produttori di browser non avevano l'obbligo di mantenerlo. Mozilla ha rimosso il supporto a
<blink>da Firefox nel 2013, e gli altri browser hanno seguito. - Danneggia l'accessibilità. I contenuti che lampeggiano o si muovono autonomamente costituiscono un noto problema di usabilità e accessibilità. Distraggono i lettori, rendono il testo difficile da leggere e possono causare serie difficoltà alle persone con disabilità cognitive, disturbi dell'attenzione o condizioni vestibolari. Il movimento incontrollato può anche provocare disagio o, nei casi estremi, convulsioni.
Per questo motivo, i contenuti lampeggianti sono soggetti a restrizioni nelle Linee guida per l'accessibilità dei contenuti web (WCAG). Il Criterio di successo 2.2.2 "Pausa, Stop, Nascondi" richiede che qualsiasi contenuto in movimento, lampeggiante o ad aggiornamento automatico della durata superiore a cinque secondi possa essere messo in pausa, fermato o nascosto dall'utente. Il vecchio tag <blink> non offriva agli utenti alcun modo per farlo, il che è uno dei motivi per cui è considerato un anti-pattern.
Se desideri comunque un effetto lampeggio, usa CSS o JavaScript (come mostrato di seguito) e fornisci sempre un modo per rispettare gli utenti che preferiscono il moto ridotto.
Il tag <blink> è un tag HTML deprecato. Sebbene alcuni browser possano ancora supportare <blink>, è in fase di eliminazione. Non utilizzare questo elemento, altrimenti le tue pagine potrebbero non funzionare correttamente. Puoi usare CSS e JavaScript per creare un effetto lampeggio.
Esempio di codice HTML con <blink>:
Esempio del tag HTML <blink>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blink {
color: #1c87c9;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>The <blink> Element </h1>
<blink>The <blink> element is deprecated. To attain blinking effect you should use CSS or JavaScript. See examples in the next section.</blink>
</body>
</html>Effetto Lampeggio con CSS
Il modo consigliato e basato sugli standard per creare un effetto lampeggio è l'animazione CSS con la regola @keyframes. Questo ti dà il pieno controllo sui tempi e, cosa importante, ti consente di disattivare l'animazione per gli utenti che hanno chiesto al proprio sistema di ridurre il movimento.
Abbina sempre l'animazione a un blocco @media (prefers-reduced-motion: reduce). Questa media feature rileva l'impostazione del sistema operativo che alcune persone attivano per evitare movimenti che possono causare disagio, ed è il modo per soddisfare il requisito di accessibilità descritto sopra.
Esempio di effetto lampeggio con animazione CSS3:
Esempio di effetto lampeggio con animazione CSS
<!DOCTYPE html>
<html>
<head>
<style>
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
/* Turn the animation off for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.blink {
animation: none;
}
}
</style>
</head>
<body>
<h1 class="blink">Blinking Text Example</h1>
</body>
</html>Il Valore Storico text-decoration: blink (Non Usare)
Potresti ancora imbatterti in vecchio codice che utilizza la parola chiave blink della proprietà CSS text-decoration. Viene mostrato qui solo per permetterti di riconoscerlo nelle pagine legacy. Non utilizzarlo in nuovi progetti.
La parola chiave blink della proprietà text-decoration non fa parte della specifica CSS e non è supportata dai browser moderni. Ha un carattere puramente storico e non ha alcun effetto oggi.
Esempio di effetto lampeggio con la proprietà CSS text-decoration (legacy):
Esempio di effetto lampeggio creato con text-decoration
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blink {
text-decoration: blink;
color: #1c87c9;
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
}
</style>
</head>
<body>
<p class="blink">This text may blink depending on the browser you use.</p>
</body>
</html>Effetto Lampeggio con JavaScript
Puoi anche usare gli script per far lampeggiare un elemento.
Esempio di effetto lampeggio con JavaScript:
Esempio di lampeggio con JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blink {
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
color: #1c87c9;
transition: 0.4s;
}
</style>
</head>
<body>
<p id="blink">Blinking Effect with JavaScript</p>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const blink = document.getElementById('blink');
let visible = true;
setInterval(function() {
visible = !visible;
blink.style.opacity = visible === true ? 1 : 0;
}, 1000);
});
</script>
</body>
</html>Argomenti Correlati
- Tag HTML deprecati — l'elenco completo degli elementi da evitare, incluso
<blink>. - Tag HTML marquee — un altro elemento deprecato basato sul movimento con gli stessi problemi di accessibilità.
- Elementi semantici in HTML5 — scrivi markup significativo e accessibile invece di trucchi presentazionali.
- CSS @keyframes e animazione CSS — il modo moderno per animare.