Posted on Sep 19 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.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.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
pra fazer os ajustes finos. 🚫 Inclusive, você sabia que o elemento
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 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.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)Templates let you quickly answer FAQs or store snippets for re-use.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!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 importanteMuito 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 Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Raj Nandan Sharma - Aug 28 Nick Langat - Aug 30 Kushal sharma - Sep 16 Ryan Carniato - Sep 14 Once suspended, lixeletto will not be able to comment or publish posts until their suspension is removed. Once unsuspended, lixeletto will be able to comment and publish posts again. Once unpublished, all posts by lixeletto will become hidden and only accessible to themselves. If lixeletto is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Camilo Micheletto. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag lixeletto: lixeletto consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging lixeletto will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.