HTML <blink> e <marquee> (2020)

• Nos anos 1990, páginas pessoais frequentemente usavam texto piscando e rolando para destacar “atualizações mais recentes”, e as duas tags se tornaram vestígios de uma cultura da web que hoje quase não se vê
• <blink> foi uma tag incluída no Netscape Navigator 2.0 em 1995; Lou Montulli é frequentemente citado como a origem da ideia, mas afirmou que não escreveu o código da implementação em si
• No mesmo ano, o Microsoft Internet Explorer 2.0 introduziu <marquee>, oferecendo efeitos baseados em atributos para controlar direção da rolagem, velocidade, repetição e movimento de vai e vem
• Ao aninhar as duas tags, no Netscape aparecia o efeito de piscar e no IE aparecia a rolagem; mesmo em navegadores sem suporte, o texto em si ainda podia ser lido
• <blink> praticamente desapareceu e <marquee> ainda sobrevive em alguns navegadores modernos, mas em sites reais está mais para nostalgia digital que prejudica acessibilidade e usabilidade

---

A disputa por efeitos visuais criada pelos navegadores dos anos 1990

• <blink> e <marquee> eram elementos clássicos do design web dos anos 1990 para chamar atenção em páginas pessoais
• Até o Macromedia Dreamweaver aparentemente tratava a prática de envolver <blink> com <marquee> quase como um antipadrão

• <blink>: de piada a tag amplamente usada

  • A invenção de <blink> geralmente é atribuída a Lou Montulli, mas ele declarou que não escreveu pessoalmente o código final da implementação
  • Montulli é a pessoa que criou o navegador somente de texto Lynx antes de entrar na Netscape em 1994
  • Há o relato de que, ao comentar que os efeitos visuais propostos pelos engenheiros da Netscape não funcionariam no Lynx, ele brincou dizendo que o efeito mais chamativo possível em ambos os navegadores seria ligar e desligar o texto
  • Depois disso, outro engenheiro cujo nome não foi divulgado adicionou <blink> em uma sessão de trabalho até tarde da noite
  • O Netscape Navigator 2.0 adicionou suporte a <blink> em 1995 e, na mesma época, também incluía GIFs animados e uma forma inicial de JavaScript
  • O uso era uma estrutura simples, sem atributos, como <BLINK>This is my blinking text!</BLINK>
  • Quando a recomendação HTML4 saiu, dois anos depois, <blink> chegou a ser documentada em tom de brincadeira, mas foi bastante usada na web do fim dos anos 1990
  • Era usada em títulos como “latest updates” de páginas pessoais ou envolvendo blocos inteiros, e o clima dessa época pode ser experimentado em Cameron’s World

• <marquee>: o texto rolante do Internet Explorer

  • A Microsoft lançou o Internet Explorer 2.0 no mesmo ano do Netscape Navigator 2.0
  • Na época, o Internet Explorer ainda estava correndo atrás dos recursos implementados pela Netscape, mas introduziu <marquee> no lugar de <blink>
  • <marquee> permitia controlar, com vários atributos, a direção da rolagem, a velocidade, a repetição e o movimento de quicar de um lado para o outro
  • Um exemplo é <MARQUEE>Oh my god this still works in most modern browsers!</MARQUEE>, e ele ainda pode funcionar em alguns navegadores modernos

O que acontecia quando as duas tags eram combinadas

• No fim dos anos 1990, também era relativamente comum envolver conteúdos que se queria destacar com <blink> e <marquee> ao mesmo tempo
  • Um exemplo é <MARQUEE><BLINK>This is my really important message!</BLINK></MARQUEE>
  • Usuários do Netscape viam texto piscando, e usuários do IE viam texto rolando ou indo e voltando
• Isso combinava com a característica da web de ignorar elementos desconhecidos e continuar renderizando
  • De acordo com a Lei de Postel, o navegador deve oferecer a melhor renderização possível ao usuário mesmo quando recebe entradas que não entende
  • O motivo de o elemento <video> moderno não ser uma tag autossuficiente, e sim em bloco, também é permitir que navegadores antigos que não conhecem <video> consigam ler o código alternativo dentro dele
• Mesmo em navegadores que não conheciam nenhuma das duas tags, o texto do conteúdo continuava legível
  • Nesse sentido, a ideia ficava próxima de um aprimoramento progressivo: adicionar efeitos chamativos apenas nos navegadores compatíveis e manter texto básico nos demais ambientes
  • JavaScript e CSS também podem ser aplicados com a mesma lógica, o que ajuda na manutenção e na acessibilidade

Hoje isso é mais um vestígio histórico

• O Netscape 7 foi, em 2002, um dos raros navegadores a oferecer suporte tanto a <blink> quanto a <marquee>
  • Havia detalhes complicados na ordem de suporte e nos elementos aninhados, mas em algumas páginas pessoais era possível ver rolagem e piscada ao mesmo tempo
• <blink> é hoje uma tag praticamente morta, e, se for realmente necessário, é possível criar um efeito parecido com CSS
• <marquee> ainda está viva
  • Ainda existe não só polyfill, mas também suporte nativo em alguns navegadores
  • Mesmo assim, deve-se evitar usar <marquee> em sites reais
• É algo interessante como material para curtir nostalgia digital, mas não há motivo para impor texto piscando e rolando a outros usuários

[GN⁺]

Opiniões no Hacker News

• https://web.archive.org/web/20201111125145/https://danq.me/2...

• Parece coisa de 3.000 anos atrás
  Lembro da época em que se discutia se usar navegação dentro de frames era uma má prática. Não iframe, frames mesmo. Antes do AJAX, a gente usava HTTP 204 para mandar mensagens ao servidor sem recarregar a página e, no começo dos anos 2000, passava dias desenhando as divisas dos estados sobre um mapa do país no Dreamweaver para criar um mapa de imagem clicável
  Quando uma atualização de template do Dreamweaver apagava as mudanças, não havia controle de versão para recuperar nada, e o backend também processava a posição do clique na imagem. Fazíamos streaming de atualizações da página com Motion JPEG e, para consertar o alpha blending de PNG no IE, passávamos por várias etapas até acabar dependendo de uma abordagem com ActiveX
  Criávamos navegação de site com Java, Flash e Silverlight, e lembro de como GIFs espaçadores, comentários condicionais e o Firebug pareciam uma salvação. Não sei quando fiquei velho; um dia simplesmente aconteceu

  1. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
  • Criei software web com frames e achava que não havia problema nenhum. Até hoje não entendo bem o problema real dos frames; às vezes mencionam acessibilidade para leitores de tela, mas ainda não sei concretamente qual é o problema
  • Fiz trabalho para cliente em que precisava dar suporte ao IE6, e, em meio a todos os bugs e limitações, eu me desesperava toda vez que o designer entregava um layout do Photoshop com cantos arredondados
    Também precisava ser responsivo, mas na época isso era principalmente adaptação para diferentes tamanhos de desktop, e normalmente era preciso recortar os cantos e colocá-los em células de tabela. Fazer esse tipo de coisa à mão cria uma resistência estranha em você como desenvolvedor
  • Lembro de usar a ferramenta slice do Photoshop para cortar GIFs com extrema precisão e posicioná-los exatamente em tabelas HTML
    Eram designs que ficavam melhores em 800x600, e todos esses momentos se perderam no tempo, como lágrimas na chuva
  • Ainda hoje visito, várias vezes por semana, sites que usam frames. Parece que ninguém avisou ao pessoal do Open Group/POSIX que hoje em dia não se deve usar frames
  • Fiz um webchat com frames. A parte de cima era uma área onde o texto carregava infinitamente, e a parte de baixo era uma caixa de entrada que recebia uma resposta 204 para não recarregar quando você enviava uma mensagem
    Na época do IE4+, acho que essa era a forma mais elegante

• É algo que fiz há muito tempo, e toda vez que mostro as pessoas se surpreendem por não haver JavaScript nenhum. Todas as animações são feitas apenas com a tag marquee: https://udel.edu/~ianozi/

  • Acho que não vejo a tag marquee há uns 20 anos, então posso ter esquecido, mas eu não sabia que dava para fazer rolagem vertical com o parâmetro direction
  • https://no-js.abhij.it/

• Minha técnica favorita com marquee era aninhá-las em direções diferentes
  Se a marquee interna se movesse na direção oposta à externa, na mesma velocidade, dava para fazer o conteúdo parecer rolar e depois parar; alternando velocidades em mais camadas, também dava para criar um efeito de quicar aleatoriamente. Acho que, para isso funcionar, era preciso dar uma largura máxima à marquee interna

• Há um motivo pelo qual marquee é muito útil: injeção de HTML
  A marquee se move e é uma tag que quase ninguém usa intencionalmente, então, ao testar uma vulnerabilidade de injeção de HTML, fica fácil identificar se o ataque funcionou. Mesmo para pessoas não técnicas, a explicação “isso não deveria estar se mexendo, mas está” funciona muito melhor do que “este texto não deveria estar em negrito, mas está”

  • Quando faço sanitização de HTML, como easter egg, coloco apenas marquee na allowlist e quase nada mais
  • Eu vejo o Hacker News por um agregador personalizado e, graças a este artigo, descobri que meu agregador é vulnerável a injeção de HTML. Na tela, o (2020) estava passando como uma marquee
  • Sempre usei a tag <plaintext>. Como é um elemento que não pode ser fechado, ela transforma o restante do documento em HTML bruto, então fica muito evidente
    https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

• A tag blink obviamente já era muito odiada antigamente, e certa vez, por experiência, peguei o binário de um navegador que eu usava, provavelmente o Netscape, procurei por "blink" e troquei por "blonk". Voilà, não piscava mais

  • Editar binários era, e ainda é, bem divertido. Lembro de trocar "__gnu_warning" por "__gnu_whining" para calar aquela reclamação inútil em torno de gets()
    Claro que pode haver estouro de buffer, mas, se você está usando um programa descartável, é só não passar do buffer
  • Também mexi assim no cliente do Slack. Se há uma vantagem em apps Electron, é que isso é realmente simples, e você pode remover recursos de que não gosta
    Por exemplo, escondi notificações e desliguei o recurso que envia o sinal de que estou digitando uma mensagem

• “A besta surgirá cercada por uma nuvem rodopiante de vingança. A casa dos descrentes será arrasada, e eles serão queimados até o chão. Suas tags piscarão até o dia do juízo.”
  É uma passagem de The Book of Mozilla, 12:10, em about:mozilla, e agora a Mozilla está queimando até o chão. Fim

  • Ainda assim, ainda uso o Firefox como navegador principal

• Um amigo sempre usava a técnica de envolver o próprio nome do meio em uma tag para verificar rapidamente escapes ausentes e possíveis XSS. Antigamente, isso encontrava problemas com uma eficácia surpreendente

• Este comentário está em construção. Volte com frequência para ver as atualizações

  • Onde estão o contador de visitantes e o livro de visitas?
  • Esta página é otimizada para qual navegador?
  • Não se esqueça do [NEW]

• Um dos motivos pelos quais as pessoas odeiam esses elementos é que eles foram abusados
  Mas, graças a esse abuso, muita gente tentou mexer com HTML por conta própria. Para alguém usando HTML pela primeira vez, experimentar blink ou marquee era bem gratificante, quase uma droga de entrada para o mundo do HTML
  Quem usava esses elementos provavelmente acabou aprendendo que não deveria usá-los, ou talvez continuasse usando porque era uma página do mySpace. É fácil zombar de blink e marquee, algo parecido com designers gráficos desprezando quem usa Comic Sans, mas esses tabus foram muito úteis para dar às pessoas a confiança de “vamos tentar”