Como funcionava o famoso site do Space Jam de 1996?

Camilo Micheletto - Sep 19 '23 - - Dev Community

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

Tag body com os atributos bgcolor, alink, vlink, link e text

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.

 

Ainda no layout da home, uma tag center rodeada de comentários dizendo que alguns espaços do site estavam reservados pra anúncios

 

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

Layout do Space Jam com planetas ao redor do logotipo do filme. Eles eram posicionados de forma circular ao redor de uma tabela bidimensional

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.

Print do devTools inspecionando a tabela do Space Jam. Na célula, a imagem com seu alinhamento e vários <br> acima dela

 

🚫 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).

Uso da tag font no HTML com a classe css footer-link


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

Sidebar do space-jam com hiperlinks pra todos os planetas do site


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)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .