Il tag HTML blink e il suo sostituto in CSS

Sostituto del tag HTML blink

Tag HTML blink: perché non esiste più e il sostituto in CSS | We.Inc

L'elemento blink è obsoleto e i browser moderni non lo fanno lampeggiare. Crea un effetto blink accessibile in CSS con un pulsante di pausa, un limite di cicli e il supporto per reduced motion.

L'elemento blink è obsoleto: lo standard HTML lo elenca come non conforme e dice di usare il CSS al suo posto, e i browser attuali mostrano il suo testo come testo normale e fermo. Per far lampeggiare qualcosa oggi, scrivi un'animazione CSS con keyframes, fermala dopo pochi cicli o dai alle persone un controllo di pausa, e disattivala con prefers-reduced-motion.

Il vecchio markup blink e cosa usare oggi

Vecchio metodo
Stato
Usa invece

<blink>text</blink>
Obsoleto, non conforme
Un'animazione CSS su uno span

text-decoration: blink
Deprecato; i browser possono non farlo lampeggiare
@keyframes che cambiano l'opacity

<marquee>
Obsoleto, non conforme
Transizioni o animazioni CSS

Lampeggio infinito
Non rispetta WCAG 2.2.2 dopo cinque secondi senza pausa
Un limite di cicli o un pulsante di pausa

Il tag blink è un pezzo di storia del web che viene ancora cercato, di solito da chi vuole far lampeggiare un indicatore di stato, un cursore o un badge di saldi. Il builder qui sotto crea questo effetto nel modo moderno e lo mantiene entro le regole di accessibilità, così il movimento è breve, si può fermare e rispetta le impostazioni del visitatore.

Imposta il periodo del lampeggio e scegli una dissolvenza morbida o un'accensione e spegnimento netti.
Scegli quanti cicli eseguire, oppure scegli infinito e mantieni il pulsante di pausa.
Tieni d'occhio la durata totale: oltre i cinque secondi ti serve un modo per mettere in pausa.
Copia il CSS e l'HTML. La regola per reduced motion è inclusa per impostazione predefinita.

Fai lampeggiare una sola cosa piccola, come un punto o un cursore, mai un paragrafo che le persone devono leggere.
Mantieni ogni ciclo di lampeggio ben più lento di tre lampi al secondo per restare lontano dalla soglia di rischio di crisi indicata in WCAG 2.3.1.
Un animation-iteration-count finito è il modo più semplice per restare sotto i cinque secondi senza aggiungere un controllo.
Quando reduced motion è attivo, mostra l'elemento fisso invece di nasconderlo, così l'informazione resta visibile.

Domande frequenti

Il tag blink funziona ancora?

Nessun browser attuale lo fa lampeggiare. Lo standard HTML considera blink un elemento obsoleto e non conforme, quindi il suo contenuto viene mostrato come normale testo inline. I validatori lo segnalano come errore.

E text-decoration: blink?

Il valore blink di text-decoration-line è deprecato, e la specifica consente ai browser di non far lampeggiare affatto il testo. Un'animazione con keyframes è il sostituto affidabile.

Il testo lampeggiante è consentito dalle WCAG?

WCAG 2.2.2 Pausa, stop, nascondi è una regola di livello A: un lampeggio che parte da solo, dura più di cinque secondi e sta accanto ad altri contenuti richiede un modo per metterlo in pausa, fermarlo o nasconderlo. A parte questo, 2.3.1 limita i lampi a tre in un qualsiasi secondo.

Come creo un cursore lampeggiante in CSS?

Anima un bordo sottile o un carattere pipe con steps(1) così passa da visibile a nascosto, a circa un ciclo al secondo. Un cursore in una demo di digitazione è decorativo, quindi dagli aria-hidden="true".

Come rispetto reduced motion?

Racchiudi una sovrascrittura in @media (prefers-reduced-motion: reduce) e imposta animation: none sull'elemento lampeggiante. La media feature è ampiamente supportata e segue l'impostazione di movimento del sistema operativo del visitatore.

Perché blink è stato rimosso

Il testo lampeggiante distoglie l'attenzione da tutto il resto della pagina ed è difficile da leggere mentre è invisibile metà del tempo. Per le persone con disturbi dell'attenzione o vestibolari può rendere una pagina inutilizzabile, ed è per questo che gli standard hanno spostato il lampeggio dall'HTML al CSS, dove si può controllare.
L'effetto in sé non è vietato. Contano la durata, la velocità del lampeggio e la possibilità per le persone di fermarlo.

Un blink sicuro in tre regole

Primo, keyframes che cambiano l'opacity, che viene renderizzata in modo fluido. Secondo, un numero di iterazioni finito o un controllo di pausa visibile. Terzo, una sovrascrittura per reduced motion che lascia l'elemento fermo.
La proprietà animation-play-state rende semplice un pulsante di pausa: attiva o disattiva una classe che la imposta su paused, e l'elemento si blocca dov'è.

Effetti blink che puoi modificare

Un indicatore di stato live che sfuma tre volte

Tre cicli da un secondo finiscono ben entro i cinque secondi, quindi non serve un controllo di pausa. Ricarica il riquadro modificando il codice.

Cursore di digitazione con un passaggio netto tra acceso e spento

steps(1, end) cambia all'istante invece di sfumare. Il cursore è decorativo, quindi è nascosto agli screen reader.

Cosa fa oggi il vecchio tag

I browser disegnano il contenuto di un elemento blink obsoleto come testo normale. Non lampeggia nulla.

Un pulsante di pausa per il lampeggio infinito

Se il lampeggio deve durare più di cinque secondi, dagli un vero pulsante che lo ferma.

Attivare una classe paused da un pulsante

aria-pressed indica alle tecnologie assistive se l'animazione è attualmente in pausa.

Builder di blink accessibile

Novità

È uscito il menu di primavera

Un ciclo: {n} ms

Dissolvenza morbida

Acceso e spento netti

Cicli

Infinito

Disattiva con reduced motion

Pausa

Riprendi

Riproduci di nuovo

Durata totale: {n} secondi

Continua finché non viene messo in pausa

Sotto i cinque secondi, quindi non serve un controllo di pausa.

Oltre i cinque secondi: tieni un pulsante di pausa visibile accanto (WCAG 2.2.2).