A tag blink do HTML e o substituto em CSS

Substituto da tag blink do HTML

Tag blink do HTML: por que sumiu e o substituto em CSS | We.Inc

O elemento blink é obsoleto e os navegadores modernos não o fazem piscar. Crie um efeito de piscar acessível em CSS com botão de pausa, limite de ciclos e suporte a movimento reduzido.

O elemento blink é obsoleto: o padrão HTML o lista como não conforme e diz para usar CSS no lugar, e os navegadores atuais mostram o texto dele como texto simples e parado. Para fazer algo piscar hoje, escreva uma animação CSS com keyframes, pare-a depois de alguns ciclos ou dê às pessoas um controle de pausa, e desligue-a sob prefers-reduced-motion.

Marcação blink antiga e o que usar agora

Jeito antigo
Status
Use no lugar

<blink>text</blink>
Obsoleto, não conforme
Uma animação CSS em um span

text-decoration: blink
Descontinuado; os navegadores podem não piscar
@keyframes mudando a opacity

<marquee>
Obsoleto, não conforme
Transições ou animações CSS

Piscar sem fim
Reprova na WCAG 2.2.2 depois de cinco segundos sem pausa
Um limite de ciclos ou um botão de pausa

A tag blink é um pedaço da história da web que ainda é muito buscado, geralmente por alguém que quer fazer piscar um ponto de status, um cursor ou um selo de promoção. O construtor abaixo faz esse efeito do jeito moderno e o mantém dentro das regras de acessibilidade, então o movimento é curto, pode ser parado e respeita as configurações do visitante.

Defina o período da piscada e escolha um fade suave ou um liga e desliga seco.
Escolha quantos ciclos rodar, ou escolha sem fim e mantenha o botão de pausa.
Fique de olho no tempo total: acima de cinco segundos você precisa de uma forma de pausar.
Copie o CSS e o HTML. A regra de movimento reduzido vem incluída por padrão.

Faça piscar uma coisa pequena, como um ponto ou um cursor, nunca um parágrafo que as pessoas precisam ler.
Mantenha cada ciclo bem mais lento que três piscadas por segundo para ficar longe do limite de convulsão da WCAG 2.3.1.
Um animation-iteration-count finito é o jeito mais simples de ficar abaixo de cinco segundos sem adicionar um controle.
Quando o movimento reduzido estiver ativado, mostre o elemento parado em vez de escondê-lo, para que a informação continue ali.

Perguntas frequentes

A tag blink ainda funciona?

Nenhum navegador atual a faz piscar. O padrão HTML trata o blink como um elemento obsoleto e não conforme, então o conteúdo dele aparece como texto inline comum. Os validadores o apontam como erro.

E o text-decoration: blink?

O valor blink de text-decoration-line é descontinuado, e a especificação permite que os navegadores simplesmente não façam o texto piscar. Uma animação com keyframes é o substituto confiável.

Texto piscando é permitido pela WCAG?

A WCAG 2.2.2 Pausar, Parar, Ocultar é uma regra de Nível A: uma piscada que começa sozinha, dura mais de cinco segundos e fica ao lado de outro conteúdo precisa de uma forma de pausar, parar ou ocultar. À parte, a 2.3.1 limita os flashes a três em qualquer segundo.

Como faço um cursor piscando em CSS?

Anime uma borda fina ou um caractere de barra vertical com steps(1) para que alterne entre visível e escondido, em cerca de um ciclo por segundo. Um cursor em uma demonstração de digitação é decorativo, então dê a ele aria-hidden="true".

Como respeito o movimento reduzido?

Envolva uma regra de sobrescrita em @media (prefers-reduced-motion: reduce) e defina animation: none no elemento que pisca. Esse recurso de mídia tem amplo suporte e segue a configuração de movimento do sistema operacional do visitante.

Por que o blink foi removido

Texto piscando tira a atenção de todo o resto da página e é difícil de ler, já que fica invisível metade do tempo. Para pessoas com condições de atenção ou vestibulares, ele pode tornar uma página inutilizável, e é por isso que os padrões tiraram o piscar do HTML e o levaram para o CSS, onde ele pode ser controlado.
O efeito em si não é proibido. O que importa é quanto tempo ele dura, quão rápido pisca e se as pessoas conseguem pará-lo.

Uma piscada segura em três regras

Primeiro, keyframes que mudam a opacity, o que renderiza de forma suave. Segundo, um número finito de repetições ou um controle de pausa visível. Terceiro, uma sobrescrita para movimento reduzido que deixa o elemento parado.
A propriedade animation-play-state deixa o botão de pausa simples: alterne uma classe que a define como paused, e o elemento congela onde está.

Efeitos de piscar que você pode editar

Um ponto de status ao vivo que faz fade três vezes

Três ciclos de um segundo terminam bem antes de cinco segundos, então não é preciso controle de pausa. Recarregue o quadro editando o código.

Cursor de digitação com liga e desliga seco

O steps(1, end) alterna na hora em vez de fazer fade. O cursor é decorativo, então fica escondido dos leitores de tela.

O que a tag antiga faz hoje

Os navegadores desenham o conteúdo de um elemento blink obsoleto como texto comum. Nada pisca.

Um botão de pausa para piscar sem fim

Se a piscada precisar rodar por mais de cinco segundos, dê a ela um botão de verdade que a pare.

Alternar uma classe paused a partir de um botão

O aria-pressed informa à tecnologia assistiva se a animação está pausada no momento.

Construtor de piscar acessível

Novo

O cardápio de primavera chegou

Um ciclo: {n} ms

Fade suave

Liga e desliga seco

Ciclos

Sem fim

Desligar com movimento reduzido

Pausar

Retomar

Repetir

Tempo total: {n} segundos

Roda até ser pausado

Menos de cinco segundos, então não é preciso controle de pausa.

Mais de cinco segundos: mantenha um botão de pausa visível ao lado (WCAG 2.2.2).