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)
Top comments (11)
Simplesmente incrível Camilo. Admiro demais todos os teus textos e o conhecimento que tu passa pra comunidade.
Mano, fico muito feliz de ler isso! E amanhã vem mais um ai!
Texto incrivel!!! Parabens!!!
Valeu deusa! Vindo de você é muito importante
Sensacional a análise das tags
Esse site realmente tava muito além do seu tempo. Fizeram rindo o que eu não faço hj chorando kkkkkl
É de uma liberdade criativa que eu queria muito ver com mais frequência hoje
Não tem como, você é um dos meus criadores de conteúdo de front favoritos. Mais uma vez um belo artigo.
Obrigado manoooo, que honra!
Muito bom! É muito interessante ver como um site tão complexo era feito com tecnologias mais "brutas" como elas eram antes.
Né? Inclusive queria muito que o Markdown desse suporte pra algumas dessas tags de estilo, sinto falta de uma corzinha aqui no devTo
Muito bom ver analise de código antigo, meus olhos brilham em ver como a tecnologia está evoluindo e como até limitados pela tecnologia podemos nos diferenciar apenas com criatividade e força de vontade. Sinto um apreço aparte com código legado e adoraria ler ele na integra para poder ver o quão caótico e genial ele é KKKKK 🦤.