As técnicas de hacking em HTML que moldaram a internet

A engenhosidade dos hacks em HTML

• Necessidade dos hacks em HTML: em alguns casos, por falhas no código HTML ou por implementações incompletas dos navegadores, era preciso escrever código nada elegante para obter o resultado esperado. Esses hacks às vezes eram criativos e dignos de ser lembrados.
• Hack do @import no Netscape Navigator 4.0: permitia bloquear estilos CSS que o Netscape não suportava. O Netscape defendia JSSS em vez de CSS, mas quando o W3C escolheu CSS, a implementação de CSS no Netscape 4 foi apressada, o que a tornou inferior em comparação com navegadores posteriores.
• Uso de tabelas HTML para layout: possibilitou layouts mais experimentais. Usar tabelas HTML como ferramenta de layout é a própria definição de hack, e isso ainda é usado no mundo dos e-mails.
• Uso de sublinhado antes de estilos CSS: fazia com que certos estilos fossem aplicados apenas ao IE6. Explorava as limitações do IE ao fazer parsing de caracteres especiais.
• Uso do AlphaImageLoader para oferecer transparência em PNG: renderizava a transparência de arquivos PNG, algo que o IE6 não suportava. A imagem era processada por meio de um filtro.
• Comentários condicionais: permitiam usar certos truques apenas em versões específicas do IE. Alteravam o funcionamento do recurso de comentários HTML para possibilitar a execução de código.
• Scalable Inman Flash Replacement (sIFR): permitia usar fontes que não eram web-safe. Usava um hack em JavaScript que substituía o texto por uma incorporação em Flash.
• Hack do texto de preheader: evitava que texto adicional em e-mails vazasse para a linha de descrição. Usava uma sequência não padronizada ou incomum de caracteres de espaço em branco.
• Google Chrome Frame: substituía o IE6 por uma janela do Chrome. Era implementado por meio de um plugin de navegador.
• Hack de seletor exclusivo do Webkit: aplicava código CSS apenas a navegadores Webkit. Detectava se um navegador específico suportava determinado código CSS.
• Design responsivo: organiza informações de forma eficiente em várias configurações, especialmente em tablets e dispositivos móveis. Na maioria dos casos, usa media queries para dispor as informações de acordo com o dispositivo.

Opinião do GN⁺

• O mais importante é o esforço dos desenvolvedores para encontrar soluções criativas fora dos padrões de HTML e CSS.
• O texto é interessante e envolvente ao mostrar como desenvolvedores web usaram hacks criativos para superar as limitações dos navegadores e melhorar a experiência do usuário.
• Esses hacks refletem a evolução dos padrões web e o esforço contínuo dos desenvolvedores por um web design melhor.

[GN⁺]

Comentários do Hacker News

• Dá para entender o uso de tabelas para layout.

  Quando tabelas saíram de moda, por alguns anos usar float para layout virou o padrão. Surpreende isso ter ficado de fora da lista. Segundo a documentação da MDN, a propriedade float foi originalmente usada para fazer imagens flutuarem dentro de blocos de texto, mas também foi muito usada para criar layouts de múltiplas colunas em páginas web. Agora, com a chegada de flexbox e grid, voltou ao seu propósito original.

• Falta respeito pelo spacer.gif.

  Ainda é usado no HN e está incluído em todas as requisições de página: s.gif

• Técnicas favoritas:

  • Faux columns para fazer a barra lateral parecer ter a mesma altura do conteúdo
  • Usar nine-patch e 9 divs ou uma tabela 3x3 para hackear bordas, repetindo o fundo em alguns eixos. No CSS3 surgiu border-image para ajudar nisso. Mas esses estilos de borda já não são mais preferidos.
  • É possível usar nine-patch para criar bordas arredondadas, mas muita gente usava geradores que criavam HTML para simular bordas arredondadas. Como explicado no artigo, havia a sabedoria convencional de que a marcação extra ocuparia mais bytes do que imagens, mas exigia menos round-trips e era mais fácil de executar.

• O HN ainda usa uma dessas técnicas até hoje:

  • Usa tabelas HTML para layout
  • Esta lista destaca como o desenvolvimento sem padrões codifica informações de controle em vários canais colaterais aceitáveis.
  • A potencial confusão e os conflitos decorrentes disso às vezes ressaltam o desprezo que se sente pelo processo do W3C. Esse processo combina a evolução de tecnologias web baseadas em padrões com a inovação liderada pelos navegadores. Às vezes um puxa o outro, ou ambos avançam em paralelo.
  • Embora frequentemente criticado, esse processo pode ser visto como mais sustentável e estável do que o anterior.
  • Fico pensando quantos dos que criticam as novas normas W3C-fornecedores lembram desses mais de 10 hacks estranhos e realmente gostariam de voltar àquela época.

• Não inclui esconder títulos para acessibilidade posicionando-os em -10000 para que não apareçam na tela.

• Não há menção a instalar o HTML5 shiv antes do CSS para eliminar as peculiaridades de todos os navegadores.

  A história do HTML5 shiv

• Lembro dos bons velhos tempos em que se usava um gif transparente de 1×1 pixel para controlar células de tabelas.

• Menção adicional ao amplamente usado   nos primórdios, ou seja, a entidade de caractere de espaço não separável:

  Era usado para mover texto para a direita ou para a esquerda dentro de um contêiner. Ou era usado de forma semelhante a um gif espaçador 1x1 para fazer células de tabela funcionarem direito. Algumas páginas usavam centenas de  . Em geral, era usado como forma de adicionar margem ou padding.

• Às vezes é difícil dizer se os desenvolvedores web modernos ficaram mal-acostumados por causa do CSS Grid e do fim do IE, ou se naquela época é que eram mal-acostumados por não terem de lidar com frameworks modernos complexos e processos de build.

• Dúvida sobre se design responsivo é mesmo um hack:

  Media queries são incríveis. Colocar lógica condicional no CSS em vez de no JavaScript é uma grande vantagem quando se quer renderização no lado do servidor.