Como funcionava o famoso site do Space Jam de 1996?

Esse site era genial, e permanece nos anais das coisas geniais feitas apenas com HTML e gambetagem. Na época do HTML4.1, as decisões de design do mesmo incorporava uma série de atributos relacionados à layout e design que foram depreciados pra serem aplicados via CSS.

Nesse artigo vamos abrir o capô da marcação desse site e entender como funcionava layout em um mundo não tão colorido pra pessoas frontend, mas que ainda assim era repleto de criatividade.

Logo na primeira página

O atributo alink era do HTML 3.2, definia a cor dos links selecionados, depreciado no HTML 4.1 junto com vlink, que era cor dos links visitados e com background diretamente no elemento.

Percebe o atributo text? Esse atribuía a cor do texto do elemento e seus descendentes. Lembra muito a escolha de design do Bootstrap ou Tailwind de usar text ao invés de color como palavras chaves nas suas classes utilitárias pra cor da fonte. Esse nome já era percebido como uma forma menos ambígua de definir cor de texto naquela época.

A tag center que não poderia faltar foi depreciada na transição do HTML 4.1 pro HTML 5.0, apesar de ainda ser usada por muita gente, inclusive no código fonte do Jira.

E esse comentário ai? Provavelmente os anúncios já eram injetados via script nessa época, e pensando que o git foi em 2005, não tinha forma mais clara de sinalizar as outras pessoas a não futricar naquele cantinho do código.

O layout dos planetas

Dei um border-collapse e pintei as bordas, e wow, que truque de mestre!

🔎 Se pensar bem, funciona de forma muito semelhante ao display: grid. Ajuda vocês a pensar em CSS grid como um sucessor espiritual do layout com table? Pra mim faz muito sentido.

Eu tentei recriar esse layout com grid, mas passando as props via HTML (sem as imagens, pra simplificar). Se já é complexo com grid, imagina com table?

O segredo desse nível de posicionamento com table é colocar mais ou menos certo usando a propriedade v-align e usar <br> pra fazer os ajustes finos.

🚫 Inclusive, você sabia que o elemento <br> foi depreciado? Então procure usar só em Markdown, pois hoje existem diversas formas de controlar espaço, viu?

Pra fechar essa parte, se liguem nessa tag <font> que [já tava depreciada na época (HTML 3.0 > HTML 4.1)(https://www.w3.org/TR/html401/present/graphics.html#edef-FONT), mas já recebia atributos de classe (era só uma margem de 5px).

Ficamos por aqui, mas na próxima vamos fuçar como eles fizeram essa sidebar irada, e ainda com um easter egg.

Referências

Lista de atributos do HTML 4.1 da W3C (link, site em inglês)

Lista de elementos do HTML 4.1 da W3C (link, site em inglês)