Tag HTML <Blink>
A tag <blink> é um elemento HTML obsoleto que fazia o texto piscar. Saiba por que foi removida e como criar o efeito com CSS ou JavaScript.
A tag <blink> era um elemento HTML não-padrão usado para fazer o texto contido nela piscar repetidamente. Foi introduzida pelo Netscape Navigator na década de 1990, mas nunca foi adicionada a nenhuma especificação oficial de HTML. Os navegadores modernos não oferecem mais suporte a ela, portanto não tem nenhum efeito na web atual.
Esta página explica a origem da tag, por que todos os navegadores a removeram e como criar um efeito de piscamento da forma correta usando CSS ou JavaScript, respeitando as preferências de acessibilidade dos usuários.
Por Que a Tag <blink> Foi Removida
O elemento <blink> foi descontinuado por dois motivos principais:
- Nunca foi padronizado. Por ser uma extensão proprietária do Netscape e nunca ter feito parte da especificação HTML do W3C, os fabricantes de navegadores não tinham nenhuma obrigação de mantê-lo. O Mozilla removeu o suporte ao
<blink>do Firefox em 2013, e outros navegadores seguiram o mesmo caminho. - Prejudica a acessibilidade. Conteúdo que pisca ou se move por conta própria é um problema conhecido de usabilidade e acessibilidade. Distrai os leitores, dificulta a leitura do texto e pode causar dificuldades reais para pessoas com deficiências cognitivas, transtornos de atenção ou condições vestibulares. O movimento incontrolável também pode provocar desconforto ou, em casos extremos, convulsões.
Por causa disso, conteúdo piscante é restrito pelas Diretrizes de Acessibilidade para Conteúdo Web (WCAG). O Critério de Sucesso 2.2.2 "Pausar, Parar, Ocultar" exige que qualquer conteúdo em movimento, piscante ou com atualização automática com duração superior a cinco segundos possa ser pausado, parado ou ocultado pelo usuário. A antiga tag <blink> não oferecia nenhuma forma de fazer isso, o que é um dos motivos pelos quais é considerada um antipadrão.
Se você ainda quiser um efeito de piscamento, use CSS ou JavaScript (conforme mostrado abaixo) e sempre forneça uma maneira de respeitar os usuários que preferem movimento reduzido.
A tag <blink> é uma tag HTML obsoleta. Embora alguns navegadores ainda possam ter suporte ao <blink>, ele está em processo de ser removido. Não use este elemento, pois suas páginas podem ser quebradas. Você pode usar CSS e JavaScript para criar um efeito de piscamento.
Exemplo de código HTML com <blink>:
Exemplo da 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>Efeito de Piscamento com CSS
A maneira recomendada e baseada em padrões de criar um efeito de piscamento é usar a animação CSS com a regra @keyframes. Isso oferece controle total sobre o tempo e, o que é mais importante, permite desativar a animação para usuários que solicitaram ao sistema que reduza o movimento.
Sempre combine a animação com um bloco @media (prefers-reduced-motion: reduce). Esse recurso de media detecta a configuração do sistema operacional que algumas pessoas ativam para evitar movimentos que podem causar desconforto, e é assim que você atende ao requisito de acessibilidade descrito acima.
Exemplo de efeito de piscamento com animação CSS3:
Exemplo de Efeito de Piscamento com animação 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>O Valor Histórico text-decoration: blink (Não Use)
Você ainda pode encontrar código antigo que usa a palavra-chave blink da propriedade CSS text-decoration. Isso é mostrado aqui apenas para que você possa reconhecê-la em páginas legadas. Não use isso em trabalhos novos.
A palavra-chave blink da propriedade text-decoration não faz parte da especificação CSS e não é suportada pelos navegadores modernos. É puramente histórica e não tem nenhum efeito atualmente.
Exemplo de efeito de piscamento com a propriedade CSS text-decoration (legado):
Exemplo de Efeito de Piscamento criado com 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>Efeito de Piscamento com JavaScript
Você também pode usar scripts para fazer o elemento piscar.
Exemplo de efeito de piscamento com JavaScript:
Exemplo de piscamento com 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>Tópicos Relacionados
- Tags HTML obsoletas — a lista completa de elementos que você deve evitar, incluindo
<blink>. - Tag HTML marquee — outro elemento obsoleto baseado em movimento com os mesmos problemas de acessibilidade.
- Elementos semânticos no HTML5 — escreva marcação significativa e acessível em vez de truques de apresentação.
- CSS @keyframes e animação CSS — a forma moderna de animar.