Técnicas de hacking em HTML que moldaram a internet

 (tedium.co)
2 pontos por GN⁺ 2023-12-03 | 1 comentários | Compartilhar no WhatsApp
  • Os primeiros desenvolvedores web lidavam com implementações de padrões e falhas diferentes em cada navegador, então era difícil garantir de forma confiável o layout e o comportamento desejados usando apenas HTML/CSS válido
  • Ambientes como Netscape 4, Internet Explorer 5/6/7, Safari/WebKit e Outlook deram origem a códigos de contorno específicos por navegador em CSS, transparência de PNG, comentários, seletores e prévias de email
  • Layout com tabelas em HTML, sIFR, Chrome Frame e design responsivo foram exemplos de combinações usadas fora da intenção original para superar limitações de design e problemas de navegadores antigos
  • Esses hacks tinham limitações, como piora de acessibilidade, código fora do padrão e dependência de Flash e plugins, mas na época eram um meio prático de garantir compatibilidade e expressão visual
  • O ideal dos padrões web e a forma real de uso continuaram em conflito, e os contornos repetidos de desenvolvedores e designers deixaram marcas duradouras no web design, no HTML de email e na adaptação para dispositivos móveis

Hacks de CSS para contornar falhas de navegador

  • O hack de @import do Netscape Navigator 4.0 carregava de propósito via @import CSS que o Netscape não conseguia suportar, impedindo que o navegador aplicasse estilos avançados
    • O CSS básico era carregado com <link>, enquanto o CSS mais avançado era separado e carregado com @import
    • O CSS Cookbook resume que isso tinha o efeito de carregar junto arquivos CSS que não funcionavam no Netscape
    • O Netscape promovia o JSSS, e após o W3C escolher o CSS, implementou CSS às pressas no Netscape 4 no verão de 1997
    • No Netscape 4, desativar JavaScript também desativava o CSS como efeito colateral
  • O hack de CSS voltado ao Internet Explorer 6 usava um sublinhado antes da propriedade, como em _width, para fazer só o IE6 interpretar aquela declaração
    • O modelo de caixa do W3C entendia que width excluía border e padding, mas o Internet Explorer tratava padding e border de forma diferente, criando diferenças de layout entre navegadores
    • O exemplo era usar algo como width: 300px; _width: 320px; padding: 10px;, com uma declaração inválida no CSS padrão servindo como ajuste específico para o IE6
    • Também havia hacks específicos para IE em que se adicionava um ponto de exclamação extra após !important para fazer o comportamento mudar apenas no IE7 ou inferior

Distorcendo a estrutura semântica para fazer layout

  • O layout com tabelas em HTML foi um hack emblemático que usava <table>, originalmente destinado a dados tabulares, como ferramenta de composição visual de páginas
    • David Siegel abordou a web com o olhar de um designer tradicional e tentou criar sites mais bonitos, contrariando a convenção de que o navegador decide o resultado visual do HTML
    • Em Creating Killer Web Sites, ele trata de contornar a marcação estrutural, usar imagens para criar composição bidimensional e, quando surgem as tabelas, colocar texto em colunas
    • Jay Hoffman, de The History of the Web, resume que os puristas de HTML/XML viam a mistura entre design e estrutura de código como um grande tabu
    • O layout com tabelas prejudicou a acessibilidade e levou tempo para ser corrigido, mas mostrou o valor de permitir que desenvolvedores organizassem visualmente portais na web
  • O design responsivo, como o layout com tabelas, recombinou tecnologias existentes de um jeito novo, mas dentro do escopo dos padrões web, para adaptar o layout ao tamanho da tela
    • No web design dos anos 2000, implementar em CSS o “Holy Grail layout”, com três colunas indo até o fim da página, era um grande tema de debate
    • Houve vários contornos, como criar colunas falsas com imagens de fundo, e depois o CSS passou a oferecer suporte a layouts baseados em grid
    • Com a popularização dos smartphones, o sentido do layout tradicional de três colunas enfraqueceu, e surgiu a necessidade de gastar com sites móveis separados
    • Ethan Marcotte propôs em responsive web design na A List Apart usar media queries para adaptar a composição do site ao formato da tela
    • Na época, o design responsivo parecia um hack que usava media queries, então pouco familiares, mas mudou o web design no longo prazo

Contornos com imagens e comentários na era do Internet Explorer

  • AlphaImageLoader contornava o problema de o Internet Explorer 5 e 6 não suportarem corretamente transparência em PNG por meio de um filtro proprietário da Microsoft
    • O Internet Explorer suportava PNG desde a versão 4, mas não renderizava corretamente em vários casos, e principalmente a falta de suporte adequado a PNG transparente no IE5/IE6 era um grande problema
    • Jeff Starr, do Perishable Press, aborda em PNG fix for Internet Explorer que as soluções da época exigiam o filtro proprietário de transparência AlphaImageLoader da Microsoft
    • O exemplo consistia em aplicar ao IE filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...) e, para navegadores que não eram IE, aplicar a imagem de fundo normal com o seletor [class]
    • Pequenas lacunas de recurso como essa fizeram desenvolvedores continuarem considerando hacks por navegador até o fim dos anos 2000 e início dos anos 2010
  • Comentários condicionais eram uma extensão de comentários HTML criada pela Microsoft para decidir se o IE renderizaria determinado HTML de acordo com a versão do navegador
    • Como o Internet Explorer exigia hacks demais para implementar sites, a Microsoft introduziu outro hack para gerenciar esses hacks
    • Comentários HTML, que originalmente não eram para execução, passaram a funcionar com base em condições de versão do IE
    • Foram introduzidos pela primeira vez no Internet Explorer 5 e ainda podem ser necessários em designs complexos de email no Microsoft Outlook para Windows
    • Jens Oliver Meiert criticou em um texto de 2007 que comentários condicionais faziam o HTML de cada documento ou template ser reajustado de novo para lidar com versões do IE, prejudicando a separação entre estrutura e apresentação
    • Os comentários condicionais foram removidos após o IE9, e a compilação condicional em JavaScript podia ser usada como alternativa

Combinações fora do padrão para fontes, email e navegadores antigos

  • sIFR (Scalable Inman Flash Replacement) era um hack baseado em JavaScript que trocava texto por um embed em Flash para mostrar a fonte desejada sem ficar preso a web-safe fonts
    • O Core Fonts for the Web da Microsoft na prática incentivava o uso de um conjunto limitado de fontes seguras para a web, e depois foi descontinuado
    • As técnicas iniciais de substituição de fontes começaram com imagens, mas tinham limitações de acessibilidade e de expressão
    • Shaun Inman teve a ideia de substituir a fonte desejada por um pequeno arquivo Adobe Flash, e Mike Davidson fez com que isso pudesse se expandir conforme necessário por meio do sIFR
    • Davidson observou em seu texto de lançamento do sIFR, de 2004 que o problema de entregar fontes customizadas que o usuário não tinha instaladas ainda não estava resolvido
    • O sIFR foi uma etapa intermediária rumo a uma solução real de web fonts e não durou muito, já que o Flash não conseguiu acompanhar a transição para o mobile
  • O hack de texto de preheader em email insere caracteres ocultos e espaços para impedir que a próxima parte indesejada do corpo do email seja anexada à linha de prévia do cliente de email
    • O preheader é o texto curto exibido na caixa de entrada ao lado do assunto, funcionando como um subtítulo do email
    • Como clientes de email podem puxar tags HTML ou trechos irrelevantes do corpo para a prévia, insere-se à força um espaço entre o preheader desejado e o texto seguinte
    • O exemplo recomendado pela Litmus usava uma área com display: none, max-height: 0px, overflow: hidden e repetia caracteres como ͏, ‌,  ,   e ­
  • Google Chrome Frame era um plugin de navegador que permitia usar o motor de renderização do Chrome dentro do Internet Explorer, tornando possíveis recursos web modernos mesmo em ambientes dependentes de IE6
    • Algumas empresas tinham departamentos de TI muito rígidos e dependências técnicas baseadas em IE6, o que dificultava a migração para navegadores modernos
    • O Google criou o Chrome Frame em 2009 para oferecer um motor moderno ao Internet Explorer antigo, evitando que desenvolvedores tivessem de criar várias versões ou abrir mão de recursos novos
    • Segundo o texto sobre a aposentadoria do Chrome Frame, muitos usuários ainda estavam presos a navegadores atrasados em recursos modernos
    • Ferramentas como Google Wave e YouTube exigiam recursos de HTML5, e dar suporte ao IE6 era uma limitação para o Google
    • O Chrome Frame ficou no mercado por cinco anos, e após esse período o Chrome se tornou um navegador altamente dominante

Respostas específicas para Safari/WebKit e a evolução real da web

  • O hack com seletor específico de WebKit usa o suporte a CSS próprio de certos navegadores, como em @supports (-webkit-appearance:none) {}, para aplicar CSS apenas a navegadores da família WebKit
    • Quando surgiu, o Safari era baseado em um motor com raízes na comunidade de código aberto e, no início, tinha forte suporte aos padrões HTML/CSS
    • O Apple Mail usava WebKit e era visto como um ambiente que em geral funcionava bem para codificação de emails
    • Com o tempo, o cronograma de lançamentos do Safari ficou atrelado aos ciclos do Mac e do iOS, gerando atraso em relação ao restante do setor
    • Desenvolvedores criticavam a Apple por ignorar bugs ou atrasar recursos desfavoráveis à sua posição competitiva
    • Um usuário no Reddit escreveu em um desabafo sobre desenvolver para Safari que, mesmo quando as APIs são implementadas, elas têm muitos bugs ou quebram depois
    • Esse hack também funcionava nas primeiras versões do Chrome, quando ele ainda era baseado em WebKit
  • A intenção original do HTML e a forma como a web realmente foi usada se distanciaram muito, e designers e especialistas em UI construíram expressão visual sobre a internet apesar do código estranho
    • Como explica David Siegel, os grupos de padronização queriam que o HTML funcionasse de um jeito mais voltado ao usuário e à estrutura do que ao design final, quase como um RSS
    • Protocolos como o Gopher, surgidos na mesma época, também funcionavam de um modo com pouca influência de design
    • Porém, a criatividade dos usuários da internet e a dependência da internet comercial de uma linguagem visual impediram que essa filosofia virasse dominante
    • No HTML de email, até hoje pode ser difícil fazer até mesmo um gradiente transparente simples com HTML/CSS padrão, e contornos como glitches de tabela HTML mencionados em comentários antigos do StackOverflow ainda podem servir como solução

Leituras relacionadas

1 comentários

 
GN⁺ 2023-12-03
Comentários do Hacker News

  • Usar tabelas para layout é bem compreensível
    Mas, por alguns anos depois que as tabelas saíram de moda, tudo era fazer layout com float. Aquela época sim foi selvagem, então é surpreendente que tenha ficado de fora
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    “A propriedade float, que originalmente servia para fazer imagens flutuarem dentro de blocos de texto, tornou-se uma das ferramentas mais usadas para criar layouts de múltiplas colunas em páginas web. Com o surgimento de flexbox e grid, ela agora voltou ao seu propósito original”

    • Quando o float apareceu pela primeira vez, desenvolvi um site de conserto de computadores inteiro no FF
      Quando fui finalizar, abri no IE e o design inteiro desmoronou; como o público-alvo quase certamente usaria IE, no fim tive que reescrever tudo com base em tabelas. Foi um dia triste
    • Já me incomodava chamar layout baseado em tabelas de hack desde o começo
      Depois que as tabelas foram deixadas de lado, vi muitas equipes de frontend desperdiçarem meses acumulados com malabarismos de float para defender a fé dos “puristas”, criando páginas muito menos compreensíveis, e tirei uma lição importante daí
      Joel Spolsky chamou esses desenvolvedores de Architecture Astronauts em um ótimo texto: o tipo de pessoa que esquece que seu trabalho é realmente criar software que funcione bem com o mínimo de esforço. Acho que a bizarrice da primeira especificação do EJB e coisas ridicularizadas como o AbstractFactoryBuilderConstructor do Java também vieram dessa turma
      Com o tempo, passei a reconhecer bem essa tendência e a manter distância
    • “Fizemos layout com float por anos” era o que se chamava de faux columns, e até um simples layout de 3 colunas era tão difícil que chegou a ser chamado de “santo graal” dos layouts
      https://en.wikipedia.org/wiki/Holy_grail_(web_design)#Faux_c...
    • O novo e moderno hack de clearfix, como a W3Schools ainda chama
      .clearfix::after { content: ""; clear: both; display: table; }
      [1] https://www.w3schools.com/howto/howto_css_clearfix.asp
    • A era entre tabelas e flexbox/grid foi dura
      float era chato e difícil de acertar, e muita gente simplesmente voltou para as tabelas, o que honestamente era difícil de condenar

  • spacer.gif não merece respeito?
    Claro, ele ainda está no HN e é incluído em toda requisição de página
    https://news.ycombinator.com/s.gif

    • Não dá para falar de layout baseado em tabelas sem falar de imagens espaçadoras

  • Havia algumas coisas de que eu gostava
    Faux columns faziam a barra lateral parecer visualmente estendida, como se tivesse o mesmo comprimento do conteúdo principal: https://alistapart.com/article/fauxcolumns/
    Indo além, dava para simular bordas manualmente com 9-patch e 9 divs ou uma tabela 3x3, repetindo o fundo ao longo dos eixos. O CSS3 trouxe border-image, o que ajudou um pouco, mas esse tipo de estilo de borda já não está mais tão em alta
    Bordas arredondadas também podiam ser feitas com 9-patch, e muita gente usava geradores para criar HTML com vários elementos que simulavam cantos arredondados. Este artigo explica: http://benogle.com/2009/04/29/css-round-corners.html Em geral, entendia-se que a marcação extra ocupava mais bytes do que imagens, mas reduzia round trips e era relativamente fácil de fazer

    • Nossa equipe usou tanto a abordagem 3x3 que acabou criando um componente só para isso
      Era mais próximo do lado do ActionScript, mas a ideia de estilização era a mesma, então até escrevemos um texto sobre isso: https://brajeshwar.com/2005/splice9-bitmap-window-resizer-co...
      Outra coisa boa era usar o princípio da cigarra em padrões de estilo de fundo não repetitivos
    • Cliquei no A List Apart e fiquei meio chocado ao ver que o cabeçalho está quebrado no mobile
      Mesmo assim, continua elegante apesar de todo esse tempo
    • Vale mencionar também a técnica de sliding doors para cantos arredondados: https://alistapart.com/article/slidingdoors/
    • Faux columns ainda vivem no nosso site principal. Nunca sobra tempo para trocar por algo mais moderno ;)

  • Gosto do fato de o HN ainda usar uma dessas: usar tabelas HTML para montar o layout
    Falando mais seriamente, esta lista mostra bem que, quando se desenvolve sem padrões, as informações de controle acabam sendo codificadas em vários caminhos secundários “mais ou menos toleráveis”
    Essa confusão e esse potencial de conflito fazem olhar de novo para o desprezo que o processo do W3C às vezes recebe. Esse processo combina a evolução das tecnologias da web guiada por padrões com a inovação guiada pelos navegadores, permitindo que ora uma, ora outra avance na frente, ou que ambas caminhem lado a lado
    Embora seja frequentemente ridicularizado, também dá para interpretar isso como uma forma mais sustentável e estável do que o modelo anterior
    Fico pensando quantas das pessoas que criticam as novas normas W3C-fornecedores realmente gostariam de voltar àquela época agitada que essas “10 hacks estranhos” evocam

    • Isso parece menos uma ausência de padrões e mais uma ausência da funcionalidade necessária
      Se aquilo que você quer fazer não é tratado como um recurso, você acaba dando um jeito criativo de fazer. Se um padrão amadurece sem conseguir captar todas as demandas potenciais, ele pode acabar criando rigidez e gerando esse tipo de situação. Isso vale especialmente para a web, onde se fica preso a padrões que podem ou não atender à necessidade
      Em outras áreas, normalmente há opções suficientes, e uma delas costuma ser flexível o bastante para fazer o que é preciso, então basta escolhê-la
      Se você trabalha bastante tempo com pesquisa, fica surpreso com a frequência com que o que se quer fazer exige uma abordagem técnica meio hacky. Isso acontece porque muitos padrões e conjuntos de recursos surgem em torno das interações de negócios/consumo, para onde vai o dinheiro, e dos sistemas ao redor delas
    • Infelizmente, hoje em dia W3C e TC39 são completamente dominados pelo Google, que empurra muitos padrões enquanto se preocupa com o processo quase só de forma protocolar
      Muitos atores que dependem de recursos de navegador, por exemplo fabricantes de TV que executam apps dentro de versões de WebKit ou Chromium, ficam totalmente calados nos comitês de padronização. Então, na prática, isso nem chega a ser um cabo de guerra entre Google, Apple e Mozilla
    • É engraçado dizerem que as tabelas “sumiram”, quando elas foram amplamente substituídas por Bootstrap
      No fim das contas, você ganha uma tabela dentro de divs. Só que com 12 colunas
    • O WHATWG não fez a web evoluir em benefício de ninguém além de interesses corporativos com fins lucrativos
      Eu aprendi com HTML 3.2, então sei bem que tipo de maluquice bizantina era necessária por causa do IE e do Netscape. Mas aquilo foi escolha da MS e da Netscape, e mesmo que o W3C tivesse tido mais presença, não havia garantia nem indício de que MS e Netscape seguiriam novos padrões
      Ainda assim, aquilo era melhor do que a situação lixo de hoje, em que, se um grande conglomerado quer algo, o resto da web tem que aguentar
      Nossa, bem melhor mesmo /s

  • Faltou o meu hack “favorito”: colocar um título para acessibilidade na posição -10000, para que ele não seja renderizado na tela, mas ainda possa ser lido por leitores de tela

    • Uma variação próxima disso ainda é bem comum, porque ainda não existe uma ótima opção para lidar com texto invisível, mas acessível a leitores de tela em todos os casos
      Algo como aria-label substituiu parte dos usos desse padrão, mas não todos
    • Isso ainda funciona? Ou agora tem que usar ARIA?

  • Não falaram do html5 shiv, que se instalava antes de todo o CSS para eliminar as quirks do navegador
    https://paulirish.com/2011/the-history-of-the-html5-shiv/

    • Também faltaram reset, normalize e afins

  • Lembro com saudade dos bons velhos tempos do GIF transparente de 1×1 pixel usado para manter as células da tabela comportadas

    • “Bons velhos tempos”? A própria página que você está vendo agora usa isso ;)
      https://news.ycombinator.com/item?id=38485665
    • Antigamente, a gente cortava imagens grandes em um padrão de grade e as prendia com tabelas
      Nem lembro mais por que fazíamos isso. Era para carregar mais rápido?

  • Outra dos primórdios: o uso generalizado da entidade de espaço sem quebra de linha  
    Era usada para empurrar texto para a direita ou para a esquerda dentro de um contêiner e, se bem me lembro, também servia como um GIF espaçador 1x1 para manter células de tabela comportadas. Algumas páginas tinham centenas de  , quase como um meio universal de inserir espaço em branco ou padding

  • Às vezes não sei se os desenvolvedores web modernos ficaram mal-acostumados por causa do CSS Grid e porque o IE morreu, ou se nós é que éramos mal-acostumados por não termos que lidar com a complexidade dos frameworks modernos e dos processos de build daquela época

    • Provavelmente as duas coisas
      Ainda assim, hoje em dia talvez seja mais fácil. Tecnicamente, você não precisa usar frameworks modernos nem processos de build; com CSS e JavaScript modernos já dá para criar com facilidade sites e apps que antes seriam complicados
    • O desenvolvimento web tem uma nuance única em comparação com outras áreas em que já trabalhei
      A indústria adquiriu o hábito de reinventar a roda de formas cada vez mais complicadas
      Meu palpite mais plausível é que isso seja um efeito colateral de a web ser uma área escolhida com mais frequência por desenvolvedores novos ou menos experientes

  • Design responsivo é mesmo um hack? Media queries são excelentes
    Colocar a lógica condicional no CSS em vez de no JavaScript é uma grande vitória. Especialmente quando você quer renderização no lado do servidor

    • Usar media queries para dar suporte a diferentes mídias parece exatamente o caso de uso correto
    • Vira hack se, em vez de consultar o que você realmente quer saber, você consulta algo que só tem correlação acidental com aquilo de que precisa
    • Não é hack
      Você pode consultar várias características do user agent e fornecer CSS diferente com base no resultado. Chamar isso de hack é ignorância, e isso é parte necessária para criar design responsivo