`<Blink>` e `<Marquee>` (2020)

• As tags <blink> e <marquee>, que surgiram no início da web nos anos 90, eram elementos simbólicos do web design da época
• A tag <blink> foi introduzida no Netscape Navigator 2.0 e, apesar de seu propósito brincalhão e da pouca elegância estética, foi amplamente usada
• Em resposta, a Microsoft introduziu a tag <marquee> no Internet Explorer, permitindo controlar animações de texto de forma ainda mais variada
• Ao usar as duas tags aninhadas, era possível oferecer efeitos de animação diferentes conforme o navegador, sendo isso citado como um exemplo do princípio de progressive enhancement
• Hoje, <blink> desapareceu e <marquee> também não é recomendada, mas ambas ainda são lembradas como exemplos representativos da história da web e da nostalgia online

---

Introdução: relembrando as tags <blink> e <marquee>

• Recentemente, durante uma conversa com um colega desenvolvedor web, fiz uma piada sobre as tags HTML <blink> e <marquee> e descobri que ele nem conhecia essas duas tags
• Hoje elas são pouco familiares para desenvolvedores mais jovens, mas já foram elementos icônicos do web design dos anos 90

Como surgiu a tag <blink> e sua história

• O criador da tag <blink> costuma ser apontado como Lou Montulli, criador do navegador Lynx, mas ele próprio afirmou que não escreveu o código diretamente
• Segundo seu relato, durante uma conversa em um bar com engenheiros da Netscape, surgiu como piada a ideia de um “efeito de texto piscando” que também pudesse ser usado em navegadores de texto como o Lynx, e com base nisso outro engenheiro implementou a ideia durante a noite
• Em 1995, a tag <blink> foi oficialmente introduzida no Netscape Navigator 2.0 e, junto com GIFs animados e o JavaScript inicial, ajudou a definir a experiência dos sites pessoais
• A tag <blink> era usada sem atributos e, embora no HTML4 tenha sido registrada oficialmente como uma tag de brincadeira, acabou sendo amplamente abusada no fim dos anos 90
• Foi muito usada para chamar atenção para vários tipos de mensagem, como “últimas atualizações”

A tag <marquee> e a competição entre navegadores

• No mesmo ano, o Internet Explorer 2.0, lançado pela Microsoft, introduziu a tag <marquee> em vez de adotar a <blink> da Netscape
• A tag <marquee> permitia ajustar a animação com diversos atributos, como direção de rolagem, velocidade e repetição
• Se a <blink> tinha um tom de piada e podia prejudicar a legibilidade visual, a <marquee> enfatizava o efeito de propósito
• No fim dos anos 90, tornou-se popular usar as duas juntas — <marquee> dentro de <blink> — como forma de oferecer efeitos diferentes dependendo do navegador (IE ou Netscape)

Progressive Enhancement e compatibilidade na web

• O uso aninhado de <blink> e <marquee> está relacionado à Postel’s Law (princípio da tolerância), segundo a qual navegadores ignoram tags não suportadas e ainda assim renderizam o conteúdo interno
• Novos elementos HTML (como <video>) também costumam usar tags com abertura e fechamento explícitos por esse motivo, ajudando a garantir compatibilidade
• Ao usar tags como <blink>/<marquee>, navegadores que não conheciam essas tags ainda conseguiam exibir o conteúdo informativo
• A web se baseia no conceito de progressive enhancement: fornecer informação a todos os usuários, enquanto apenas alguns navegadores aproveitam efeitos adicionais

Mudanças e suporte em diferentes navegadores

• Usuários do Opera, mesmo com licença paga, quase nunca viam os efeitos de <blink> ou <marquee>, mas isso não comprometia o acesso ao conteúdo
• O Netscape 7 foi quase o único navegador a oferecer suporte a <blink> e <marquee> ao mesmo tempo, permitindo combinar rolagem + piscada e criar um dos efeitos mais difíceis de ver na web

Conclusão: posição atual e lições para o web design

• A tag <blink> desapareceu completamente hoje (não é suportada por navegadores modernos), e, se necessário, pode ser substituída por animações em CSS
• <marquee> ainda tem suporte nativo ou polyfill em alguns navegadores, mas seu uso continua não sendo recomendado
• Elas permanecem como símbolos da história da web e da estética online do passado, além de servirem como exemplos instrutivos sobre padrões web e acessibilidade e manutenção
• Se você se interessa por nostalgia digital, vale consultar materiais ou sites relacionados ao web design antigo

[GN⁺]

Comentários do Hacker News

• Lembro que antigamente existia um site como o do link abaixo https://web.archive.org/web/20201111125145/https://danq.me/2020/11/11/blink-and-marquee/

• Sou do tipo que parece existir há 3.000 anos. Lembro da época em que se discutia ferozmente se navegação com frames era uma má prática (frames, não iframes). Se ainda houver alguém que conheça frames, é um prazer. Antes do AJAX aparecer, eu mesmo usava HTTP 204 para enviar mensagens ao servidor sem recarregar a página. No começo dos anos 2000, também trabalhei com image maps referência de image map: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map. Cheguei a passar vários dias desenhando contornos de mapas no Dreamweaver para completar um mapa-múndi clicável. Como não usávamos controle de versão nos templates do Dreamweaver, era comum perder todas as alterações durante uma atualização e não conseguir recuperar nada. Também lembro de tratar no backend a posição do clique em input type=image. Implementei atualizações em streaming na página usando Motion JPEG, e isso ainda funciona no Chrome, embora no Firefox seja meio instável. Tentei várias formas de resolver o problema de alpha blending de PNG no IE, acabei usando um pouco uma versão com ActiveX, mas no fim isso deixou de ser necessário quando o design flat virou moda. Já usei JAVA, Flash e Silverlight para navegação. Também lembro vividamente de spacer GIFs, comentários condicionais e de como o ambiente de desenvolvimento ficou muito mais confortável depois do surgimento do Firebug. O tempo passou sem eu nem perceber quando envelheci

  • Desenvolvi software web com frames antigamente e não sentia nenhum problema em especial. As pessoas falam de acessibilidade, mas até hoje não entendo bem qual era exatamente o problema

  • Lembro de trabalhar para clientes que pediam suporte em meio a todos os bugs bizarros e limitações do IE6. Quando o designer entregava um layout com cantos arredondados no Photoshop, eu só conseguia suspirar. Naquela época, “responsivo” na prática significava dar suporte a várias resoluções de desktop. Era preciso cortar os cantos como imagens e colocá-los manualmente nas células da tabela. Fazendo esse tipo de trabalho manual, a resistência mental do desenvolvedor realmente se fortalecia

  • Lembro da época em que eu dividia imagens minuciosamente com a ferramenta slice do Photoshop, exportava como gif e me esforçava para posicioná-las com precisão em tabelas HTML. Era uma época em que muitos designs eram otimizados para 800x600. Parece que todas essas memórias se dissolveram e desapareceram no tempo

  • Ainda existem alguns sites que visito de vez em quando que usam frames. O site da Open Group/POSIX ainda usa frames

  • Já fiz um webchat com frames. Em cima ficava a janela do chat, recarregando infinitamente, e embaixo havia uma input box; ao enviar uma mensagem, eu usava 204 para evitar o refresh. Também dava para enviar para o frame de cima um pequeno script que recarregava o frame da direita onde ficava a lista de usuários. Eu e alguns amigos usamos isso por volta de 2000

• Uma vez fiz um site com animações implementadas só com a tag marquee. Não usei JavaScript nenhum, e quando mostro para alguém, todo mundo se surpreende https://udel.edu/~ianozi/

  • Acho que faz uns 20 anos que não vejo a tag marquee, mas acho que eu não sabia que o parâmetro direction também permitia rolagem vertical

• Meu truque favorito com a tag marquee é aninhar várias delas. Se você colocar direções diferentes e ajustar a marquee interna para a mesma velocidade na direção oposta, dá para criar um efeito de pausa momentânea antes de continuar o movimento. Com velocidades diferentes, também era possível fazer movimentos mais complexos. Pelo que me lembro, para esse método funcionar direito era preciso definir uma largura máxima na marquee interna

• Eu odiava tanto a tag blink que uma vez alterei o arquivo binário do navegador que eu usava (acho que era o Netscape), trocando blink por blonk, para que ela parasse de piscar

  • Eu costumo fazer esse tipo de tweak binário com frequência no cliente do Slack (como é um app Electron, é muito fácil). Também dá para remover facilmente recursos que eu não gosto, como ocultar notificações ou bloquear sinais de “digitando”

  • Se alguém usou a tag blonk, talvez agora exista o blonking. Parece um hack bem divertido

  • Modificar binários é bem divertido. Eu trocava __gnu_warning por __gnu_whining para eliminar mensagens de aviso relacionadas a gets(). Buffer overrun pode acontecer, mas em código feito meio nas coxas eu não ligava muito para isso

• Uso bastante a tag marquee em testes de HTML injection. Como quase ninguém usa essa tag animada, fica fácil perceber na hora se o ataque funcionou. Mesmo para pessoas não técnicas, é muito mais fácil entender o risco mostrando um texto se mexendo quando não deveria do que usando algo como negrito

  • Ao fazer sanitização de HTML, eu deixo só a marquee na whitelist como easter egg e bloqueio quase todo o resto

  • Eu acompanho o Hacker News por um agregador customizado, e por causa deste post descobri que ele é vulnerável a HTML injection. Um post de 2020 estava passeando pela tela em marquee

• “A besta surgirá cercada por nuvens giratórias de vingança. A casa dos incrédulos será destruída, e suas tags piscarão até o fim.” – The Book of Mozilla, 12:10 (about:mozilla) me faz pensar que agora a própria Mozilla também está desaparecendo. Parece o fim dos tempos

  • Eu ainda uso o Firefox como navegador padrão

• Isso me fez lembrar da época em que eu hospedava o site do andar do dormitório da universidade no meu próprio computador. Eu tinha colocado uma mensagem enorme de 997 palavras em marquee, divagando sobre mulheres, depressão, filosofia e várias outras coisas. No fim da mensagem havia um !, e ele tinha um link para uma página escondida. No final, alguém encontrou essa página depois de ler o texto longo no view source

• Um amigo meu sempre envolvia o próprio nome do meio com a tag blink para testar rapidamente falta de escaping e possível xss. Antigamente, esse tipo de método simples era bastante eficaz para encontrar vulnerabilidades

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

  • Onde estão o contador de visitas e o livro de visitas?

  • Para qual navegador esta página foi otimizada?

  • Não esqueça a marcação [NEW]