CSS antigo, novo CSS

Eu entrei na web design / desenvolvimento pela primeira vez no final dos anos 90, e somente ao digitar essa frase eu percebo há quanto tempo isso foi.

E garoto, foi horrendo. Quero dizer, ser capaz de fazer coisas e colocá-las on-line onde outras pessoas pudessem ver isso era muito bom, mas não tínhamos muito com o que trabalhar.

Eu tenho como certo que a maioria das pessoas que faz coisas na web ainda se lembra daqueles dias, ou pelo menos da década que se seguiu, mas acho que essa suposição pode estar um pouco desatualizada. Algum tempo atrás, encontrei um tweet maravilhado com o que tínhamos que prescindir border-radius. Ainda me lembro de esperar com a respiração suspensa para que não fosse corrigida!

Mas, então, suspeito que também conheço várias pessoas que só experimentaram web design nos velhos tempos e presumem que nada mudou desde então.

Estou aqui para dizer a todos que desçam do meu gramado. Aqui está uma história de CSS e web design, pelo que me lembro.

---

(Lembre-se de que este post é uma excelente mistura de memória e pesquisa, por isso não posso garantir que tudo esteja realmente correto, especialmente os detalhes sobre causalidade. Você pode tentar a história do CSS do W3C , que é consideravelmente mais curto, tem uma melhor chance de corresponder à realidade e contém significativamente menos palavrões.)

(Além disso, isso se beneficiaria muito com mais diagramas, mas demorou o suficiente para ser escrito .)

Os primeiros dias

No começo, não havia CSS .

Isso foi muito ruim.

Meu artefato favorito desta época é o livro que me ensinou HTML : O’Reilly HTML : The Definitive Guide , publicado em várias edições em meados dos anos 90. O livro era realmente sobre HTML , sem nenhuma menção a CSS . Não tenho mais e não consigo encontrar capturas de tela on-line, mas aqui está uma página de HTML & XHTML : The Definitive Guide, que parece ser uma revisão (chegarei ao XHTML mais tarde) com o mesmo estilo . Aqui está, então, o conselho de web design de ponta da 199X:

“ Delineie claramente cabeçalhos e rodapés com regras horizontais. “

Não, isso não é um border-top. Isso é um <hr>. O título da página é quase certamente centrado com, bem <center>,.

A página usa a cor do texto, o plano de fundo e a fonte padrão. Em parte porque este é um guia que apresenta conceitos um de cada vez; em parte porque o livro foi impresso em preto e branco; e em parte, tenho certeza, porque refletia a realidade de que colorir qualquer coisa era uma enorme dor na bunda.

Digamos que você queira que todos os seus <h1>s fiquem vermelhos em todo o site. Você tinha que fazer isso:

1	< H1 > < FONT COLOR = vermelho > … </ FONT > </ H1 >

… toda hora maldita . Espero que você nunca decida mudar para o azul!

Ah, e todo mundo escreveu tags HTML em maiúsculas. Não me lembro por que todos pensamos que era uma boa ideia. Talvez isso tenha acontecido antes de o destaque da sintaxe nos editores de texto ser muito comum (leia-se: eu tinha 12 anos e usando o Bloco de Notas), e as tags em maiúsculas eram mais fáceis de distinguir do texto do corpo.

Manter o site consistente era, portanto, um pesadelo. Uma solução era simplesmente não estilizar nada, o que muita gente fez. Isso foi legal, de certa forma, já que os navegadores permitem alterar esses padrões, para que você possa ler a Web como quiser.

Uma solução alternativa inteligente, que me lembro de ter aparecido em muitos sites da Geocities, era simplesmente dar a cada página um estilo visual completamente diferente. Foda-se, certo? Basta fazer o que quiser em cada nova página.

Essa tendência foi possivelmente a altura do web design.

Porra, sinto falta daqueles dias. Não havia grandes jardins murados, nem Twitter nem Facebook. Se você tinha algo a dizer a alguém, precisava montar seu próprio site. Foi incrível . Ninguém sabia o que estavam fazendo; Eu apostaria que a grande maioria dos web designers da época eram tweens hobby sem noção (como eu), todos copiando de outros tweens hobby sem noção. Metade da Web eram portais de fãs sobre Animorphs, com páginas inexplicáveis ​​alertando que o site funcionava melhor se você tivesse uma tela de 640 × 480. (Qualquer pessoa de 12 anos com resolução insuficiente deve, presumivelmente, comprar um novo monitor com sua permissão.) Todo mundo que era legal e conhecedor usava o Internet Explorer 3, o navegador mais avançado, mas alguns perdedores ainda usavam o Netscape Navigator para você teve que colocar um “Melhor no IE” GIF animado na sua página inicial também.

Esta foi também a era da “cores web-safe” – uma paleta de 216 cores, onde cada canal foi um dos 00, 33, 66, 99, cc, ou ff– que existiu porque algumas pessoas ainda tinham monitores de 256 cores! As coisas que tomamos como garantidas agora, como cores de 24 bits.

De fato, muitas coisas que nós damos como certa agora ainda eram um espaço problemático estranho e indomado. Deseja ter a mesma navegação em todas as páginas do seu site? Ok, não há problema: copie / cole em cada página. Ao atualizá-lo, atualize todas as páginas – mas provavelmente esquecerá algumas, e todo o site se tornará uma escavação arqueológica, com camadas de páginas cada vez mais com taxas de bits.

Muito mais fácil era usar quadros , o que significa que a janela do navegador é dividida em uma grade e carrega uma página diferente em cada seção … mas as pessoas ficariam confusas se chegassem a uma página individual sem os quadros, como era comum quando vinha de uma pesquisa motor como o AltaVista. (Não acredito que estou explicando quadros, mas ninguém os usa desde 2001. Você sabe iframes? O “i” é inline , para diferenciá-los dos quadros regulares , que ocupam toda a janela de exibição.)

O PHP nem era chamado assim ainda, e ninguém tinha ouvido falar. Essa coisa estranha de “Perl” e “ CGI ” era realmente estranha e difícil de entender, e não funcionava no seu próprio computador, e os erros eram difíceis de encontrar e diagnosticar, e mesmo assim o Geocities não suportava. Se você teve muita sorte e inteligência, seu host usou o Apache e você pode usar a sintaxe “incluir do lado do servidor” para fazer algo assim:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

< CORPO > < LARGURA DA TABELA = 100% FRONTEIRA = 0 CELLSPACING = 8 CELLPADDING = 0 > < TR > < TD COLSPAN = 2 > <! – # include virtual = “/ header.html” -> </ TD > < / TR > < TR > < LARGURA DO TD = 20% > <! – # include virtual = “/ navigation.html” -> </ TD > <TD > (o conteúdo real da página aparece aqui) </ TD > </ TR > </ POSIÇÃO NUMA TABELA > </ CORPO >

Mwah. Lindo. O Apache veria os comentários especiais, colaria o conteúdo dos arquivos referenciados e você estará pronto para as corridas. A desvantagem foi que, quando você queria trabalhar em seu site, toda a navegação estava faltando, porque você estava fazendo isso no seu computador comum sem o Apache, e seu navegador da web achou que esses eram apenas comentários HTML regulares . Era impossível instalar o Apache, é claro, porque você tinha um computador , não um servidor .

Infelizmente, tudo acabou agora – pavimentado por linhas de tempo homogêneas, onde tudo o que não foi feito nesta semana é uma notícia antiga e há muito esquecida. A web deveria tornar as informações eternas, mas, em vez disso, muitas delas se tornaram efêmeras. Sinto falta de praticamente todo mundo que eu conhecia tinha seu próprio site. Ter um Twitter e um Instagram como toda a sua presença online é um substituto ruim.

…

Então, vamos dar uma olhada no site do Space Jam.

Estudo de caso: Space Jam

Space Jam, se você não estiver ciente, é o melhor filme de todos os tempos. Ele documenta a carreira extremamente curta no basquete de Bugs Bunny, tocando ao lado de uma ação ao vivo Michael Jordan para salvar o planeta de alienígenas por algum motivo. Foi seguido por uma série de spin-offs de RPG muito bem-sucedidos e aclamados pela crítica , que descrevem as conseqüências do Space Jam e são extremamente canônicos.

E estamos verdadeiramente abençoado, por 24 anos depois que ele saiu, o seu site é AINDA UP . Podemos explorar o auge do design da web em 1996, aqui e agora.

Primeiro, observe que todas as páginas deste site são estáticas. Não é só isso, mas é uma página estática que termina em .htmvez de .html, porque as pessoas nas versões do Windows anteriores a 95 ainda tinham nomes de arquivos 8.3. Não sei por que isso importava em uma URL , como se você estivesse executando o Windows 3.11 em um servidor Web, mas lá está.

O CSS da página inicial é assim:

1	< body bgcolor = “# 000000” background = “img / bg_stars.gif” text = “# ff0000” link = “# ff4c4c” vlink = “# ff4c4c” alink = “# ff4c4c” >

Haha, está brincando! Que porra é CSS ? O Space Jam é anterior a um mês. (Vejo uma única linha na fonte da página, mas tenho certeza de que foi adicionada muito mais tarde para criar alguns links de política legalmente obrigatórios.)

Observe o posicionamento extremamente preciso desses links de navegação. Esse feito foi realizado da mesma maneira que todos fizeram tudo em 1996: com mesas.

De fato, as tabelas têm uma vantagem funcional sobre o CSS para o layout, o que era muito importante naqueles dias, e não apenas porque o CSS ainda não existia. Veja bem, você pode clicar com a tecla Ctrl pressionada para selecionar uma célula da tabela e até arrastar para selecionar todas elas, o que mostra como as células são organizadas e funcionam como um depurador de layout super retrô. Isso foi ótimo porque a primeira ferramenta significativa de depuração da Web, o Firebug , não foi lançada até 2006 – uma década depois!

A marcação para esta tabela está cheia de linhas em branco inexplicáveis, mas com as removidas, fica assim:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28. 29 30 31 32. 33 34 35 36. 37. 38.

< Tabela largura = 500 fronteira = 0 > < TR > < TD colspan = 5 align = direito valign = topo > </ td > </ tr > < tr > < td colspan = 2 align = direito valign = meio > < br > < br > < br > < a href= “cmp / pressbox / pressboxframes.html” > < img src = “img / p-pressbox.gif” height = 56 width = 131 alt = borda “Shuttle Box Shuttle” = 0 > </ a > </ td > < td align = center valign = Médio > < a href = “CMP / jamcentral / jamcentralframes.html” > < img src = “img / p-jamcentral.gif”height = 67 width = 55 alt = “Jam Central” border = 0 > </ a > </ td > < td align = center valign = top > < a href = “CMP / bball / bballframes.html” > < img src = “img /p-bball.gif ” height = 62 width = 62 alt = borda ” Planet B-Ball ” = 0 > </ a > </ td > < Td align = centro valign = inferior > < l > < l > < um href = “cmp / melodias / tunesframes.html” > < img src = “img / p-lunartunes.gif” altura = 77 largura = 95 alt = Borda “Lunar Tunes” = 0 > </ a > </ td > </ tr > < tr > <td align = Meio valign = topo > < l > < l > < um href = “cmp / linha / lineupframes.html” > < img src = “img / p-lineup.gif” altura = 52 largura = 63 alt = “O Formação ” borda = 0 > </ a > </ td > <td colspan = 3 linhaspan = 2 align = valign à direita = meio > < img src = “img / p-jamlogo.gif” height = 165 width = 272 alt = borda “Space Jam” = 0 > </ td > < alinhamento td = valign direito = inferior > < a href = ” cmp / jump / jumpframes.html ” > < img src = ” img / p-jump.gif “height = 52 width = 58 alt = Borda “Jump Station” = 0 > </ a > </ td > </ tr > … </ tabela >

Essas são as duas primeiras linhas, incluindo o logotipo. Você entendeu a ideia. Tudo é organizado com aligne valignnas células da mesa; rowspans e colspans são usados ​​com freqüência; e há alguns <br>s jogados para uma boa medida, para ajustar o posicionamento vertical em uma altura de linha por vez.

Outros artefatos fantásticos encontrados nesta página incluem este cabeçalho, que contém a sintaxe Apache SSI ! Isso deve ter sido interrompido silenciosamente quando o site foi movido ao longo dos anos; está atualmente hospedado no Amazon S3. Você sabe, Amazon? A livraria?

1 2 3 4 5 6 7

< borda da tabela = 0 cellpadding = 0 cellpacing = 0 width = 488 height = 60 > < tr > < td align = “center” > <! – # include virtual = “html.ng/site=spacejam&type=movie&home=no&size= 234 & page.allowcompete = no “-> </ td > < td align = ” center ” width = ” 20 ” > </ td > <td align = “center” > <! – # include virtual = “html.ng/site=spacejam&type=movie&home=no&size=234” -> </ td > </ tr > </ tabela >

Ok, vamos conferir o Jam Central . Usei as ferramentas de desenvolvimento do navegador para reduzir a janela de visualização para 640 × 480 para a experiência autêntica (embora eu também tivesse perdido espaço vertical na barra de título, na barra de tarefas e em cinco ou seis  barras de ferramentas do IE ).

Observe os quadros: o logotipo no canto superior esquerdo retorna à página de destino, economizando espaço na tela ao repetir toda essa navegação, e o canto superior direito é um maldito banner de anúncio que foi bloqueado de sete maneiras diferentes. Todas as três partes são páginas separadas.

Observe também o texto totalmente ilegível em vermelho em um plano de fundo texturizado, uma das marcas mais verdadeiras do design da web dos anos 90. “Por que não colocar esse bloco de texto em um plano de fundo mais fácil de ler?”, Você pode perguntar. Você imbecil. Como eu poderia possivelmente fazer isso? Somente o <body>tem um backgroundatributo! Eu poderia usar uma tabela, mas as tabelas suportam apenas cores sólidas de fundo, e isso seria muito chato!

Mas espere, o que é esse novo widget de navegação? Como os links estão todos desalinhados assim? Essa ainda é outra mesa? Bem, não, embora encher uma mesa com pedaços de uma imagem fatiada não fosse incomum. Mas este é um mapa de imagem , um recurso HTML esquecido . Vou apenas mostrar a fonte:

1 2 3 4 5 6 7 8

< Img src = “img / m-central.jpg” altura = 301 largura = 438 fronteira = 0 alt = “mapa de navegação” usemap = “#Map” > < br > < nome do mapa = “mapa” > < área shape = “rect” coords = “33,92,178,136” href = “prodnotesframes.html” target = “_top” > < área shape = “rect” coords = “244,111,416,152” href = ” photosframes.html ” target = ” _top ” > < formato da área = ” rect ” coords = ” 104.138.229.181 “href = “filmmakersframes.html” target = “_top” > < área shape = “rect” coords = “230,155,334,197” href = “trailerframes.html” target = “_top” > </ map >

Suponho que isso seja mais ou menos autoexplicativo. O usemapatributo anexa um mapa de imagem, definido como várias áreas clicáveis, maravilhosamente codificadas como listas de coordenadas inescrutáveis ​​ou algo assim.

E esse material ainda funciona! Isso está em HTML ! Você pode usá-lo agora mesmo! Provavelmente não!

A grade de miniaturas

Vejamos mais uma página aleatória aqui. Eu adoraria ver algumas fotos do filme. (Espere, fotos ? Ainda não sabíamos o que eram “capturas de tela”?)

Outro conjunto de quadros, mas organizado de maneira diferente desta vez.

1	< body bgcolor = “# 7714bf” background = “img / bg-jamcentral.gif” text = “#ffffff” link = “# edb2fc” vlink = “# edb2fc” alink = “# edb2fc” >

Eles fizeram uma coisa importante aqui: como eles especificaram uma imagem de fundo (que é opaca), eles também especificaram uma cor de fundo. Sem ele, se a imagem de plano de fundo falhar ao carregar, a página terá texto em branco no plano de fundo branco padrão, o que seria ilegível.

(Isso ainda é uma coisa importante a ter em mente. Sinto que o desenvolvimento moderno da Web tende a assumir que tudo carregará, ou vê o carregamento como algum tipo de inconveniente a ser contornado, mas nem todos estão trabalhando em uma conexão com fio em um São Francisco escritório a seis metros de distância da espinha dorsal.)

Mas sobre a própria página. As grades de miniaturas são um problema clássico de web design, que remonta a … er … bem, pelo menos desde o Space Jam. O principal problema é que você deseja colocar as coisas próximas umas das outras , enquanto o HTML usa como padrão empilhar tudo em uma grande coluna. Você pode colocar todas as miniaturas em linha, em uma única linha de texto (agrupando), mas isso não seria muito uma grade – e você geralmente quer que cada uma delas tenha algum tipo de legenda.

A abordagem do Space Jam era usar a única ferramenta real que alguém tinha em sua caixa de ferramentas na época: uma mesa. Está estruturado assim:

1 2 3 4 5

< Tabela cellpadding = 10 > < tr > < td align = center > < a href = “…” > < img src = “…” > </ a > </ td > … </ tr > < tr > … </ tr > < tr > … </ tr > < tabela >

Uma grade 3 × 3 de miniaturas, deixada para o navegador para organizar. (A última imagem, em uma linha própria, não faz parte da tabela.) Isso não pode ser dimensionado para caber na tela, mas a tela de todos era bem pequena naquela época, então isso era um pouco menos preocupante. Eles não adicionaram legendas aqui, mas como todas as miniaturas estão agrupadas em uma célula da tabela, elas poderiam facilmente ter.

Esse foi o estado da arte nas grades de miniaturas em 1996. Vamos revisitar esse pequeno quebra-cabeça da interface do usuário algumas vezes; você pode ver exemplos ao vivo (e ver a fonte da marcação de amostra) em uma página separada .

Mas vamos dedicar um momento para apreciar o tamanho das capturas de tela de filmes em tamanho real, em cores e com qualidade da Internet no meu monitor atual.

Ei, porém, eles têm menos de 16 KB ! Isso leva apenas nove segundos para fazer o download.

(Lembro-me do problema do vídeo incorporado , que não foi resolvido até a tag do HTML5<video> alguns anos depois. Até então, você tinha que usar um plug-in binário e todos eram terríveis.)

(Ah, a propósito: as imagens nos links, por padrão, têm uma borda colorida em volta deles. Os links de imagens geralmente são evidentes, então isso foi bastante irritante, e até o CSS você precisava desativá-los para todas as imagens com <img border=0>.)

Os primeiros dias regulares

Então é aí que começamos, e foi péssimo. Se você queria algum tipo de consistência em mais de algumas páginas, suas opções eram muito limitadas e praticamente limitadas a várias cópias e colagens. O site do Space Jam optou por, na maioria das vezes, não se incomodar – como muitos outros.

Então o CSS apareceu, foi um milagre . Toda essa repetição em linha foi embora. Você deseja que todos os seus títulos de nível superior tenham uma cor específica? Sem problemas:

1 2 3

H1 { cor : # FF0000 ; }

Bam! Você Terminou. Não importa quantos <h1>s você tenha em seu documento, cada um deles ficará vermelho de tirar o fôlego e você nunca mais precisará pensar nisso novamente. Melhor ainda, você pode colocar esse trecho em seu próprio arquivo e aplicar essa escolha estética questionável a todas as páginas de todo o site sem quase nenhum esforço! O mesmo se aplica à sua imagem de plano de fundo lado a lado, às cores dos seus links e ao tamanho da fonte nas suas tabelas.

Lembre-se de colocar o conteúdo de suas <style>tags em comentários HTML , ou navegadores antigos sem suporte a CSS os exibirão como texto.

Você também não estava limitado a estilizar tags em massa. O CSS introduziu “classes” e “IDs” para segmentar apenas elementos sinalizados especificamente. Um seletor como P.importantafetaria apenas <P CLASS="important">e #headerafetaria apenas <H1 ID="header">. (A diferença é que os IDs devem ser únicos em um documento, enquanto as classes podem ser usadas inúmeras vezes.) Com essas ferramentas, você pode efetivamente inventar suas próprias tags, fornecendo uma versão personalizada do HTML específica para o seu site!

Foi um grande salto em frente, mas na época ninguém (provavelmente?) Estava pensando em usar CSS para organizar a página. Quando o CSS 1 foi feito uma recomendação em dezembro de 96, ele mal abordou o layout. Tudo o que fiz foi de divórcio HTML ‘s existentes habilidades das tags que foram anexadas a. Tivemos cores de fonte e fundos porque <FONT COLOR> e <BODY BACKGROUND>existiu. O único recurso que afetava remotamente onde as coisas estavam posicionadas era a floatpropriedade, o equivalente a <IMG ALIGN>, que puxava uma imagem para o lado e deixava o texto fluir em torno dela, como em um artigo de revista. Dificilmente envolvente.

Isso não foi muito surpreendente. O HTML não tinha respostas reais para o layout além das tabelas, e as propriedades da tabela eram muito complicadas para generalizar em CSS e emaranhadas com a estrutura da tag; portanto, não havia nada para o CSS 1 herdar. Apenas reduziu a repetição do que já estávamos fazendo com, por exemplo, <FONT>tags – tornando o design da Web menos tedioso, menos propenso a erros, menos barulhento e muito mais sustentável. Um bom passo em frente, e todos o adotaram alegremente para isso, mas as mesas permaneceram excelentes para organizar sua página.

Tudo bem, porém; todo o seu blog realmente precisava era de um cabeçalho e uma barra lateral, que tabelas poderiam funcionar perfeitamente e não era como se você revisasse essa estrutura básica com muita frequência. Copiar / colar algumas linhas <TABLE BORDER=0>e <TD WIDTH=20%>não foi tão importante.

Por um certo período de tempo – quero dizer alguns anos, mas o tempo passa mais devagar quando você é criança – esse era o estado da Web. Tabelas para layout, CSS para … bem, estilo . Cores, tamanhos, negrito, sublinhado. Havia até esse truque doentio que você poderia fazer com links em que eles só seriam sublinhados quando o mouse estivesse apontando para eles. Tubular!

(Curiosidade: o email em HTML ainda está basicamente preso nesta época.)

(E aqui é onde eu entrei, com a idade avançada de 11 anos, sem saber o que estava fazendo e aprendendo principalmente com outras crianças de 11 anos que também não tinham ideia do que estavam fazendo. Mas isso foi bom; grande parte da Web era de 11 anos criando seus próprios sites, e era lindo.Por que você acessaria um site de negócios quando pode dar uma olhada nos hobbies muito específicos de alguém do outro lado do planeta? )

Os tempos sombrios

Um ano e meio depois, em meados de 98, recebemos o CSS 2 . (A propósito, adoro os antecedentes desta página.) Essa foi uma atualização modesta que abordou algumas deficiências em várias áreas, mas o mais interessante foi a adição de algumas primitivas de posicionamento: a positionpropriedade, que permite colocar os elementos em detalhes coordenadas e o inline-blockmodo de exibição, que permite inserir um elemento em uma linha de texto como você poderia fazer com as imagens.

Frutas tão tentadoras, fora de alcance! O uso positionparecia bom, mas o posicionamento perfeito em pixels estava em desacordo sério com o design fluido do HTML , e era difícil criar algo que não desmoronasse em outros tamanhos de tela ou apresentasse outros inconvenientes sérios. Essa inline-blockcoisa humilde parecia interessante o suficiente; afinal, ele resolveu o problema central do layout HTML , que está colocando as coisas um ao lado do outro . Mas, pelo menos por enquanto, nenhum navegador o implementou e foi amplamente ignorado.

Não posso dizer com certeza se foi a introdução do posicionamento ou algum outro fator, mas algo nessa época inspirou as pessoas a tentar fazer o layout em CSS . Idealmente, você divorciaria completamente a estrutura da sua página da aparência. Um site chegou a levar esse princípio ao extremo – o CSS Zen Garden ainda existe e mostra o mesmo HTML sendo radicalmente transformado em designs completamente diferentes, aplicando diferentes folhas de estilo.

O problema era que o suporte inicial ao CSS era um bugs. Em retrospecto, suspeito que os fornecedores de navegadores tenham simplesmente retirado o comportamento das tags HTML e o tenham chamado de dia. Fico feliz em dizer que o RichInStyle ainda possui uma extensa lista de erros anteriores do CSS do navegador ; Aqui estão alguns dos meus favoritos:

• O IE 3 ignoraria tudo, exceto a última <style>tag em um documento.
• O IE 3 ignorou as pseudo-classes, portanto a:hoverseria tratado como a.
• O IE 3 e o IE 4 trataram as automargens como zero. Na verdade, acho que este pode ter persistido até o IE 6. Mas tudo bem, porque o IE 6 também se aplicava incorretamente text-align: centeraos elementos de bloco.
• Se você definir uma imagem de plano de fundo como uma URL absoluta , o IE 3 tentará abrir a imagem em um programa local, como se você a tivesse baixado.
• O Netscape 4 entendeu um seletor de ID como #id, mas ignorado h1#idcomo inválido.
• O Netscape 4 não herdou propriedades – incluindo fonte e cor do texto! – nas células da tabela.
• O Netscape 4 aplicou propriedades no marcador<li> da lista , em vez do conteúdo.
• Se o mesmo elemento tiver ambos floate clear(não é razoável), o Netscape 4 for Mac trava.

Era com isso que tínhamos que trabalhar. E as pessoas queriam usar CSS para criar uma página inteira ? Ha.

No entanto, a ideia cresceu em popularidade. Até se tornou uma espécie de grito de guerra elitista, uma prática recomendada para bater na cabeça de outras pessoas. As tabelas de layout são simplesmente ruins, você ouviria! Eles confundem os leitores de tela, são semanticamente incorretos, interagem mal com o posicionamento do CSS ! Tudo isso é verdade, mas era uma pílula muito mais difícil de engolir quando a alternativa era:

Bem, vamos chegar a isso em um momento. Primeiro, alguns antecedentes da paisagem da Web por volta de 2000.

O fim das guerras dos navegadores e subsequente estagnação

A versão curta é: esta empresa Netscape estava vendendo seu navegador Navigator (para as empresas, era gratuito para uso pessoal), e depois Microsoft entrou no mercado com o seu navegador de Internet totalmente gratuito Explorer, e em seguida, Microsoft teve a audácia de agrupar IE com Janelas. Você pode imaginar? Um sistema operacional que vem com um navegador? Isso foi uma grande coisa, a Microsoft foi processada por isso e eles perderam, e a conseqüência foi basicamente nada.

Mas não teria importado de qualquer maneira, porque eles ainda haviam feito , e funcionou. O IE praticamente aniquilou a participação de mercado da Netscape. Ambos os navegadores eram buggy como o inferno, e diferentemente buggy como o inferno, então um site construído exclusivamente contra um provavelmente seria uma grande bagunça quando visto no outro – isso significava que quando a participação de mercado da Netscape caiu, os web designers prestaram cada vez menos atenção e menos da Web trabalhou nele, e sua participação no mercado caiu ainda mais.

É péssimo para você, se você não usa o Windows, eu acho. O que é engraçado, porque havia um IE para Mac 5.5 e geralmente era menos bugs do que o IE 6. (Aliás, Bill Gates não era tanto um nerd brilhante como um empresário agressivo e cruel que fez sua fortuna se esforçando deliberadamente para aniquilar qualquer concorrência que estiver no seu caminho e, consequentemente, piorar a computação como um todo.)

No momento em que o Windows XP foi lançado em meados de 2001, com o Internet Explorer 6 incorporado, o Netscape havia passado de um grande obstáculo para um pequeno nicho.

E então, tendo dominado completa e totalmente, a Microsoft parou. O Internet Explorer havia sido lançado todos os anos desde seu início, mas o IE 6 foi o último a mais de cinco anos. Ainda era de buggy, mas isso era menos perceptível quando não havia competição e era bom o suficiente . O Windows XP , da mesma forma, era bom o suficiente para ocupar a área de trabalho e não haveria outro Windows por tanto tempo.

O W3C , o grupo que escreve os padrões (não deve ser confundido com o W3Schools, que são sanguessugas obscuras de SEO ), também parou. O HTML passou por várias revisões em meados dos anos 90 e depois congelou como HTML 4. O CSS recebeu uma atualização em apenas um ano e meio e depois não mais; a atualização secundária CSS 2.1 não alcançaria o status de Recomendação de Candidatos até o início de 2004 e levou mais sete anos para ser finalizada.

Com o domínio do IE 6, era como se toda a Web estivesse congelada no tempo. Os padrões não importavam, porque havia efetivamente apenas um navegador e, o que quer que fosse, tornou-se o padrão de fato. À medida que a Web crescia em popularidade, o estrangulamento do IE também dificultava o uso de qualquer plataforma que não fosse o Windows , uma vez que o IE era apenas para Windows e era muito difícil se um site realmente funcionaria com outro navegador.

(Começa a suspeitar que os monopólios são ruins. Deve haver uma lei!)

Enquanto isso, a Netscape se colocava em uma posição ainda pior ao decidir fazer uma reescrita maciça de seu mecanismo de navegador, culminando no Netscape 6 muito mais compatível com os padrões – ao custo de vários anos de distância do mercado enquanto o IE estava em ação. a bunda deles. Ele nunca quebrou 10% de participação no mercado, enquanto o IE alcançaria 96%. Por outro lado, o novo mecanismo foi de código aberto como o Mozilla Application Suite, o que seria importante em alguns anos.

Antes de chegarmos a isso, algumas outras coisas também estavam acontecendo.

Modo Quirks

Todas as primeiras implementações de CSS estavam repletas de bugs, mas uma em particular é talvez o bug CSS mais infame de todos os tempos: o bug do modelo de caixa .

Veja bem, uma caixa (o espaço retangular ocupado por um elemento) tem várias medidas: sua própria largura e altura, depois o espaço em branco chamado padding, depois uma borda opcional e uma margem separando-a das caixas vizinhas. CSS especifica que essas propriedades são todas aditivas. Uma caixa com estes estilos:

1 2 3

largura : 100px ; preenchimento : 10px ; borda : 2px preto sólido ;

… Teria, portanto, 124 pixels de largura, de borda a borda.

O IE 4 e o Netscape 4, por outro lado, adotaram uma abordagem diferente: eles trataram widthe heightmediram de borda a borda e subtraíram a borda e o preenchimento para obter a largura do próprio elemento. A mesma caixa nesses navegadores teria 100 pixels de largura de borda a borda, com 76 pixels restantes para o conteúdo.

Esse conflito com as especificações não era o ideal, e o IE 6 decidiu corrigi-lo. Infelizmente, simplesmente fazendo a mudança significaria quebrar completamente o desenho de um monte de sites que tinham trabalhado anteriormente em ambos IE e Netscape.

Portanto, a equipe do IE apresentou um compromisso muito estranho: eles declararam o comportamento antigo (junto com vários outros bugs principais) como “modo peculiar” e o tornaram o padrão . O novo “modo estrito” ou “modo padrão” tinha de ser optou em , colocando um “tipo de documento” no início do documento, antes da <html>tag. Seria algo como isto:

1	<! DOCTYPE html PUBLIC “- // W3C // DTD HTML 4.01 // PT” “http://www.w3.org/TR/html4/strict.dtd”>

Todo mundo teve que colar essa porcaria de linha na parte superior de cada documento HTML por anos. (O HTML5 posteriormente simplificaria <!DOCTYPE html>.) Em retrospecto, é uma maneira realmente estranha de optar pelo comportamento correto do CSS ; Os doctypes faziam parte das especificações HTML desde quando era um RFC . Acho que a ideia era que, como ninguém se incomodava em incluir um, era uma maneira conveniente de permitir a inclusão sem a necessidade de extensões proprietárias apenas para evitar comportamentos que estavam errados em primeiro lugar. Bom para a  equipe do IE !

O engraçado é que o modo peculiar ainda existe e ainda é o padrão em todos os navegadores, vinte anos depois! As peculiaridades exatas variaram com o tempo e, em particular, nem o Chrome nem o Firefox usam o modelo de caixa do IE , mesmo no modo peculiar, mas ainda existem alguns outros bugs emulados .

Os navegadores modernos também têm o modo “quase padrão”, que emula apenas uma única peculiaridade, talvez a segunda mais infame: se uma célula da tabela contiver apenas uma imagem, o espaço sob a linha de base será removido. Sob regras CSS normais , a imagem está dentro de uma linha de texto (caso contrário vazio), que requer algum espaço reservado abaixo para os descendentes – as caudas nas letras como y. Os navegadores antigos não lidavam com isso corretamente, e alguns sites de modo estrito, por volta de 2000, confiam nele – por exemplo, cortando uma imagem grande e organizando os pedaços nas células da tabela, esperando que eles sejam exibidos um contra o outro – daí o modo intermediário para mantê-los mancando.

Mas voltando ao passado: embora essa tenha sido certamente uma vitória para os padrões (e, portanto, a interoperabilidade), criou um novo problema. Como o IE 6 dominava e os doctypes eram opcionais, havia poucas razões convincentes para se preocupar com o modo estrito. Outros navegadores acabaram imitando -o, e o comportamento não-padrão se tornou seu próprio padrão de fato. Os designers da Web que se preocupavam com esse tipo de coisa (e para nosso crédito, muitos de nós) gritaram para ativar o modo estrito, pois esse era o passo mínimo absolutamente absoluto para garantir a compatibilidade com outros navegadores.

A ascensão e queda do XHTML

Enquanto isso, o W3C havia perdido o interesse no HTML em favor do desenvolvimento de XHTML , uma tentativa de redesenhar o HTML com a sintaxe do XML em vez do SGML .

(O que diabos é SGML , você pergunta? Eu não sei. Ninguém sabe. É a gramática em que o HTML foi construído e essa é a única razão pela qual alguém já ouviu falar.)

Para seu crédito, havia algumas boas razões para fazer isso na época. Geralmente, o HTML era escrito à mão (como ainda é hoje), e qualquer coisa escrita à mão provavelmente apresenta erros ocasionais. Os navegadores não tinham o hábito de rejeitar completamente o HTML de buggy ; portanto, eles tinham várias técnicas de correção de erros – e, como todo o resto, navegadores diferentes tratavam os erros de maneira diferente. HTML ligeiramente malformado pode parecer funcionar bem no IE 6 (onde “funciona bem” significa “faz o que você esperava”), mas se transforma em uma bagunça horrível em qualquer outra coisa.

A solução do W3C era XML , porque a solução deles para foder tudo no início dos anos 2000 era XML . Se você não souber, o XML adota uma abordagem muito mais explícita e agressiva ao tratamento de erros – se o documento contiver um erro de análise, o documento inteiro será inválido. Isso significa que, se você apostar em XHTML e digitar um único erro em algum lugar, nada será processado. Apenas um erro.

Isso foi péssimo. Parece bom, apesar de tudo, mas considere: o XML genérico geralmente é montado dinamicamente com bibliotecas que tratam um documento como uma árvore que você manipula e depois transforma tudo em texto quando terminar. Isso é ótimo para o uso comum de XML como serialização de dados, onde seus dados já são uma árvore e grande parte da estrutura XML é simples, repetitiva e fácil de desviar em funções.

HTML não é assim. Um documento HTML possui pouca estrutura de repetição confiável; até mesmo este post do blog, construído principalmente a partir de <p>tags, também contém surpresas <em>no texto do corpo e ocasionais <h2>entre parágrafos. Isso não é divertido de expressar como uma árvore. E isso é importante, porque a renderização do servidor estava se tornando popular na mesma época e o HTML gerado – ainda é! – montar modelos que o tratem como um fluxo de texto.

Se o HTML fosse gravado apenas como documentos estáticos completos, o XHTML poderia ter funcionado – você escreve um documento, o vê no navegador, sabe que funciona, não há problema. Mas gerá-lo dinamicamente e arriscar que casos extremos específicos possam substituir todo o site por um erro ininteligível do navegador? Isso é péssimo.

Certamente não ajudou em nada que estávamos começando a ouvir sobre essa coisa Unicode alterada nessa época, e nem sempre estava claro como exatamente fazer isso funcionar, e uma sequência UTF -8 ruim é suficiente para um documento XML inteiro ser considerado malformado!

E assim, depois de algumas discussões, o XHTML foi amplamente esquecido. Seu legado vive de duas maneiras:

• Todos nós paramos de usar nomes de tags em maiúsculas! Até mais <BODY>, olá <body>. O XML diferencia maiúsculas de minúsculas, e todas as tags XHTML foram definidas em minúsculas, portanto, as maiúsculas simplesmente não funcionariam. (Curiosidade: até hoje, as APIs JavaScript relatam nomes de tags HTML em maiúsculas.) A crescente popularidade do destaque de sintaxe provavelmente também tinha algo a ver com isso; ainda não estávamos todos usando o bloco de notas como em 1997.
• Um monte de gente ainda acha que as tags de fechamento automático são necessárias. Veja bem, o HTML tem dois tipos de tags: contêineres <p>...</p>e marcadores <br>. Como um <br>não pode conter nada, não existe </br>. XML , como gramática genérica, não tem essa distinção; todas as tags devem ser fechadas, mas como atalho, você pode escrever <br/>como significando <br></br>.O XHTML está morto há anos, mas, por alguma razão, ainda vejo pessoas escrevendo <br/>em documentos HTML regulares . Fora do XML , essa barra não faz nada; O HTML5 o definiu por motivos de compatibilidade, mas é ignorado silenciosamente. É até ativamente prejudicial, pois pode levar você a acreditar que <script/>é uma <script>tag vazia – mas em HTML , definitivamente não é!

Sinto falta de uma coisa sobre XHTML . Você pode combiná-lo com o XSLT , a meta-linguagem de modelagem XML , para fazer modelagem no navegador (ou seja, inserir conteúdo específico da página no layout geral do site) sem a necessidade de scripts. É a única maneira que já foi possível, e foi legal como o inferno quando funcionou, mas os inconvenientes eram muito graves quando não funcionaram. Além disso, o XSLT é totalmente incompreensível.

O início do layout CSS

Voltar para CSS !

Você é um aspirante a web designer. Por alguma razão, você quer tentar usar essa coisa de CSS para organizar toda a sua página, mesmo que ela tenha sido claramente planejada apenas para cores e outras coisas. O que você faz?

Como eu mencionei antes, seu problema principal é colocar as coisas umas nas outras . Colocando as coisas em cima uns dos outros é um não-problema – que é o comportamento normal de HTML . Todo o motivo de todo mundo usar tabelas é que você pode colocar as coisas nas células da tabela e colocá-las lado a lado, em colunas.

Bem, as mesas parecem estar fora. O CSS 2 adicionou alguns modos de exibição de elementos que correspondiam às partes de uma tabela, mas para usá-los, você teria que ter os mesmos três níveis de aninhamento que as tabelas reais: a própria tabela, depois uma linha e uma célula. Isso não parece um grande avanço e, de qualquer forma, o IE não os apoiará até o futuro distante.

Existe essa positioncoisa, mas parece que as coisas se sobrepõem com mais frequência do que não. Hmm.

O que isso deixa?

Apenas uma ferramenta, realmente: float.

Eu disse que floatera destinado a imagens “pull” no estilo de revista, o que é verdade, mas o CSS a definiu de maneira bastante genérica. Em princípio , poderia ser aplicado a qualquer elemento. Se você quisesse uma barra lateral, poderia dizer para ela flutuar para a esquerda e ter 20% da largura da página e obteria algo assim:

1 2 3 4

+ ——— + | barra lateral | Olá e bem vindo ao meu site! | | + ——— +

Ai! Flutuante tem o comportamento secundário que o texto envolve. Se o texto da sua página for maior do que a barra lateral, ele será distribuído por baixo da barra lateral e a ilusão será destruída. Mas ei, não há problema. O CSS especificou que os carros alegóricos não se envolvem, então tudo o que você precisava fazer era flutuar no corpo também!

1 2 3 4 5 6 7

+ ——— + + ———————————– + | barra lateral | | Olá e bem vindo ao meu site! | | | | | + ——— + | Aqui está um parágrafo mais longo para mostrar | | que meu CSS galáxia do cérebro flutue | | absurdo impede quebra de texto. | + ———————————– +

Essa abordagem funcionou, mas suas limitações eram muito mais óbvias do que as das tabelas. Se você adicionou um rodapé, por exemplo, ele tentaria ajustar-se à direita do texto do corpo – lembre-se, tudo isso é “puxar” flutua; portanto, no que diz respeito ao navegador, o “cursor” ainda está em o topo. Então agora você precisa usar clear, que colide com um elemento abaixo de todos os flutuadores, para consertar isso. E se você tornasse a barra lateral com 20% de largura e o corpo com 80% de largura, qualquer margem entre elas aumentaria para 100%, tornando a página mais larga que a janela de visualização, então agora você tem uma barra de rolagem horizontal feia, então você deve fazer alguma matemática pateta para consertar isso também. Se você tem fronteiras ou fundos em qualquer parte, então foi um pouco evidente que eles eram diferentes alturas, então agora você tem que fazer alguma verdadeiramentecoisas grotescas para consertar isso . E os autores mais conscientes perceberam que os leitores de tela liam a barra lateral inteira antes de chegar ao texto do corpo, o que é uma coisa bastante rude a quem os visitantes cegos são submetidos, então eles criaram configurações ainda mais elaboradas para ter um layout de três colunas com o coluna do meio que aparece primeiro no HTML .

O resultado foi um design com boa aparência e funcionou bem e dimensionado corretamente, mas apoiado por uma estranha confusão de CSS . Na verdade, nada do que você estava escrevendo correspondia ao que você queria – essas são partes principais do seu design, não citações únicas! Era difícil entender a relação entre o CSS relacionado ao layout e o que aparecia na tela, e isso pioraria muito antes de melhorar.

Grade de miniaturas 2

Armado com um novo brinquedo, podemos melhorar a grade de miniaturas. O layout original baseado em tabela era, mesmo que você não se preocupasse com a semântica de tags, incrivelmente entediante. Agora podemos fazer melhor!

1 2 3 4 5 6

< Ul class = “thumbnail-grid” > < li > < img src = “…” > < br > caption </ li > < li > < img src = “…” > < br > caption </ li > < li > < img src = “…” > < br > caption </ li > … </ ul >

Este é o sonho do CSS : seu HTML contém os dados da página de alguma forma sensata e, em seguida, o CSS descreve como ele realmente se parece.

Infelizmente, com floata única ferramenta disponível, os resultados são um pouco difíceis. Esta nova versão se adapta melhor a vários tamanhos de tela, mas requer alguns hacks: as células precisam ter uma altura fixa, centralizar toda a grade é bastante complicado e o efeito da grade se desfaz inteiramente com elementos mais amplos. Está ficando claro que o que queríamos é algo mais como uma tabela, mas com um número flexível de colunas. Isso está apenas fingindo.

Você também precisa dessa coisa estranha de “correção clara”, um encantamento que se tornaria famoso durante essa época. Lembre-se de que um flutuador não move o “cursor” – uma ideia falsa que estou usando, mas perto o suficiente. Isso significa que isso <ul>, que é cheio apenas de elementos flutuantes, não tem altura. Ele termina exatamente onde começa, com todas as miniaturas flutuadas caindo abaixo dela. Pior ainda, porque quaisquer elementos subseqüentes não têm irmãos flutuantes , eles ignoram as miniaturas por completo e são renderizados normalmente logo abaixo da “grade” vazia – produzindo uma confusão sobreposta!

A solução é adicionar um elemento fictício no final da lista, que não ocupa espaço, mas tem o CSS clear: both – destacando-o abaixo de todos os carros alegóricos. Isso empurra efetivamente a parte inferior da parte inferior de <ul>todas as miniaturas individuais, para que se encaixe perfeitamente em torno delas.

Mais tarde, os navegadores suportam os pseudoelementos ::beforee o ::after ” conteúdo gerado”, o que permite evitar completamente o elemento fictício. As folhas de estilo de meados dos anos 00 eram frequentemente repletas de coisas como esta:

1 2 3 4 5

. thumbnail-grid :: after { content : ” ; display : bloco ; claro : ambos ; }

Ainda assim, era melhor que as mesas.

DHTML

Como um rápido lado para o mundo do JavaScript, a newfangled positionpropriedade que nos dá a capacidade de fazer algumas coisas de layout dinamicamente. Eu me oponho sinceramente a essa heresia, até porque ninguém nunca fez direito, mas foi bom para alguns brinquedos.

Assim começou a era do ” HTML dinâmico ” – isto é, o HTML afetado pelo JavaScript, um termo que caiu totalmente em desuso porque não podemos mais criar um blog estático sem JavaScript. Nos primeiros dias, era muito mais inócuo, com adolescentes colocando brilhos atrás do cursor do mouse ou pequenos relógios analógicos que passavam em tempo real.

A fonte mais popular dessas coisas foi o Dynamic Drive , um site que milagrosamente ainda existe e provavelmente tem um monte de brinquedos não atualizados desde o início dos anos 2000.

Mas se você não gosta de cavar, aqui está um exemplo: todo ano (exceto este ano, quando esqueci oops), gosto de adicionar confetes e outras bobagens ao meu blog no meu aniversário. Sou muito preguiçosa, então comecei essa tradição usando esse script que encontrei em algum lugar , originalmente destinado a flocos de neve. Ele funciona colocando um monte de imagens na página, fornecendo-as position: absolutee alterando meticulosamente suas coordenadas repetidas vezes.

Compare isso com a versão que escrevi do zero alguns anos atrás , que possui apenas um pouquinho de JS para configurar as imagens e, em seguida, permite que o navegador as anime com CSS . É um pouco menos funcional, mas permite que o navegador faça todo o trabalho, possivelmente mesmo com a aceleração do hardware. Quão longe chegamos.

Web 2.0

Tempos sombrios não podem durar para sempre. Uma combinação de fatores nos arrastou para a luz.

Um dos maiores foi o Firefox – ou, se você fosse legal, originalmente Phoenix e depois Firebird – que atingiu 1,0 em novembro de 2004 e passou a morder seriamente o IE . O núcleo reescrito do navegador Netscape 6, o coração do Mozilla Suite, foi extraído para um navegador independente. Foi rápido, simples, muito mais compatível com os padrões e absolutamente nada disso importava.

Não, o Firefox realmente se estabeleceu porque tinha abas . O IE 6 não tinha abas; se você deseja abrir uma segunda página da web, você abriu outra janela. Isso é péssimo, cara. O Firefox foi um milagre.

O Firefox não foi o primeiro navegador com guias, é claro; o navegador completo do Mozilla Suite os possuía, e a obscura (mas desprezível!) Opera os possuía há séculos. Mas foi o Firefox que decolou, por várias razões, entre as quais não havia uma barra de anúncios gigante no topo, como a Opera.

Os designers pressionaram o Firefox por motivos de padrões, é claro; é que esse ângulo atraiu principalmente outros designers, não tanto para seus pais. Uma das demonstrações mais populares e espetaculares foi o teste Acid2 , destinado a testar uma variedade de recursos dos padrões da Web então modernos. Ele tinha a vantagem de produzir uma carinha fofa quando renderizada corretamente, e um maldito pesadelo no inferno no IE 6. O Firefox inicial não era perfeito, mas certamente estava muito mais próximo, e você podia vê- lo progredir até passar completamente com o lançamento do Firefox 3.

Também ajudou o Firefox a ter um mecanismo JavaScript mais rápido, mesmo antes do JIT perceber. Muito, muito mais rápido. Como, pelo que me lembro, o IE 6 implementado getElementByIditerando o documento inteiro, mesmo que os IDs sejam únicos. Olhe para alguns anúncios antigos de lançamento do jQuery ; eles geralmente têm alguns gráficos de desempenho, e tudo o mais supera o IE 6 a 8.

Ah, e havia tudo isso em que o IE 6 era uma brecha gigantesca na segurança, especialmente com o suporte nativo a componentes binários arbitrários que só precisavam de um clique “sim” em um diálogo arcano para obter acesso total e irrestrito ao seu sistema. Provavelmente não ajudou sua reputação.

De qualquer forma, com algo que não fosse o IE assumindo uma participação séria no mercado, mesmo os designers mais comuns não podiam simplesmente mirar no IE 6 e chamá-lo mais um dia. Agora havia uma razão para usar o modo estrito, uma razão para se preocupar com compatibilidade e padrões – que o Firefox fazia um esforço constante para seguir melhor, enquanto o IE 6 permanecia estagnado.

(Eu diria que esse efeito abriu a porta para o OS X fazer algumas incursões e também para o iPhone existir. Não estou brincando! Pense nisso! Pense nisso; se o navegador do iPhone não tivesse realmente funcionado com nada porque todo mundo ainda estava alvejando o IE 6, basicamente teria sido um Palm mais caro. Lembre-se, a princípio, a Apple nem queria aplicativos nativos; apostou na Web.)

(Falando nisso, o Safari foi lançado em janeiro de 2003, baseado em um fork do mecanismo KHTML usado no navegador Konqueror do KDE . Acho que estava usando o KDE na época, então isso foi muito emocionante, mas ninguém mais realmente se preocupava com o OS X e sua participação de mercado de 2%.)

Outro fator importante apareceu no dia da mentira, em 2004, quando o Google anunciou o Gmail. Ha, ha! Uma piada engraçada. Webmail que não é terrível? Essa é boa, Google.

Oh Oh, porra. Oh, eles não estão brincando. Como diabos isso funciona?

A resposta, como todo desenvolvedor de web agora sabe, é XMLHttpRequest – nomeado pelo fato de que ninguém nunca a usou para solicitar XML . Aparentemente, foi inventado pela Microsoft para uso com o Exchange e depois clonado pela Mozilla, mas estou lendo isso na Wikipedia e você pode fazer isso sozinho.

O importante é que permite fazer uma solicitação HTTP a partir do JavaScript. Agora você pode atualizar apenas parte de uma página com novos dados, completamente em segundo plano, sem recarregar. Ninguém tinha ouvido falar sobre isso antes, então quando o Google lançou um cliente de e-mail inteiro com base nele, foi como uma maldita mágica.

Indiscutivelmente, a coisa toda foi um erro e levou a um futuro infernal, onde páginas estáticas carregam três parágrafos de texto em segundo plano usando XHR sem nenhuma razão, mas esse é um post diferente .

Na mesma linha, em agosto de 2006, foi lançado o jQuery , um milagre semelhante. Não apenas encobriu as diferenças entre as APIs “JScript” do IE e as abordagens padrão adotadas por todos os outros (que haviam sido feitas anteriormente por outras bibliotecas), mas também facilitou o trabalho com grupos inteiros de elementos de uma só vez. tempo, algo que historicamente tinha sido uma enorme dor na bunda. Agora você pode aplicar CSS com facilidade em todo o JavaScript! O que é uma péssima ideia! Mas tudo estava tão ruim que fizemos de qualquer maneira!

Espere, eu ouço você chorar. Essas coisas são sobre JavaScript! Este post não é sobre CSS ?

Você está absolutamente correto! Menciono a ascensão do JavaScript porque acho que ele levou diretamente ao estado moderno do CSS , graças a um aumento em um grande fator:

Ambição

Firefox mostrou-nos que poderíamos ter navegadores que realmente, como, melhorar – cada nova melhoria em Acid2 foi emocionante. O Gmail nos mostrou que a Web poderia fazer mais do que mostrar texto sem formatação com flocos de neve na frente.

E as pessoas começaram a ansiar para ficar chique .

O problema era que os navegadores ainda não haviam melhorado. O Firefox foi mais rápido em alguns aspectos e aderiu mais de perto às especificações do CSS , mas não fez fundamentalmente nada que os navegadores não devessem ser capazes de fazer. Somente as ferramentas haviam melhorado e isso afetava principalmente o JavaScript. O CSS era uma linguagem estática; portanto, não era possível escrever uma biblioteca para torná-la melhor. Gerar CSS com JavaScript era uma possibilidade, mas garoto, oh garoto, isso é sempre uma má idéia.

Outro problema era que o CSS 2 era realmente muito bom em modelar retângulos. Isso foi bom nos anos 90, quando todo sistema operacional tinha a estética de retângulos contendo mais retângulos. Mas agora estávamos nos dias do Windows XP e OS X, onde tudo era brilhante e lustroso e feito de plástico cheio de curvas. Foi um pouco embaraçoso ter cantos arredondados e manchas sombreadas no navegador de arquivos e em nenhum lugar da Web.

Assim começou um novo reino de trevas.

A era dos hacks CSS

Os designers queriam muitas coisas que o CSS simplesmente não podia oferecer.

• Os cantos arredondados eram grandes. Os cantos quadrados estavam fora de moda, e agora todos queriam botões com cantos arredondados, uma vez que eram o futuro. (Os botões nativos também ficaram fora de moda, por algum motivo.) Infelizmente, o CSS não tinha como fazer isso. Suas opções foram:
  1. Faça uma imagem de fundo de tamanho retangular de um retângulo arredondado e coloque-a em um botão de tamanho fixo. Talvez solte o texto completamente e faça da imagem toda uma coisa. Eugh.
  2. Faça uma imagem de plano de fundo genérica e dimensione-a para caber. Mais inteligente, mas os cantos podem acabar não sendo redondos.
  3. Faça o retângulo arredondado, corte os cantos e as bordas e coloque-os em uma mesa 3 × 3 com o rótulo do botão no meio. Melhor ainda, use JavaScript para fazer isso rapidamente.
  4. Foda-se, faça do seu site inteiro um grande aplicativo Flash lolOutro problema era que o IE 6 não entendia PNGs com alfa de 8 bits; só poderia exibir corretamente PNGs com alfa de 1 bit, ou seja, cada pixel é totalmente opaco ou totalmente transparente, como GIFs. Você tinha que se contentar com bordas irregulares, criar uma cor de fundo sólida na imagem ou aplicar várias correções que se centravam nessa porra de besteira:1filter : progid : DXImageTransform . Microsoft . AlphaImageLoader ( src = ‘bite-minha-bunda.png’ );
• Em linhas semelhantes: gradientes e sombras projetadas! Você não pode ter botões de plástico sofisticados sem esses. Mas aqui você estava basicamente preso em fazer imagens novamente.
• A translucidez foi um pouco confusa. A maioria dos navegadores suportava a propriedade CSS 3 opacitydesde muito cedo, exceto o IE , que precisava de outra filtercoisa específica e estranha da Microsoft . E se você quiser apenas o fundo translúcido, precisará de um PNG translúcido , que … bem, você sabe.
• Desde o início, o jQuery foi lançado com efeitos animados incorporados fadeIn, e eles começaram a aparecer por todo o lugar. Era como o equivalente na Web de como todos os usuários do Linux em meados dos anos 2000 (e eu me incluo nisso) usavam esse maldito efeito de cubo Compiz .Obviamente, você precisa do JavaScript para acionar o desaparecimento de um elemento na maioria dos casos interessantes, mas usá-lo para controlar a animação real foi um pouco pesado e sobrecarregou os navegadores. A navegação com guias agravou isso, já que os navegadores eram basicamente de thread único e, por várias razões, todas as páginas abertas eram executadas no mesmo segmento.
• Oh! Alternando cores de fundo nas linhas da tabela. Desde então, ficou fora de moda, mas acho uma pena, porque o homem facilitou a leitura das tabelas. Mas o CSS não tinha resposta para isso, então você tinha que dar a todas as outras linhas uma classe como <tr class="odd">(espero que a tabela seja gerada com código!) Ou fazer alguma besteira em jQuery.
• O CSS 2 introduziu o >seletor filho, para que você possa escrever coisas como ul.foo > liestilizar listas especiais sem bagunçar as listas aninhadas, e o IE 6! Não! Fodendo! Apoio, suporte! Isto!

Todas essas são apenas preocupações estéticas, no entanto. Se você estava interessado em layout, bem, a ascensão do Firefox tornou sua vida ao mesmo tempo muito mais fácil e muito mais difícil.

Lembra inline-block? O Firefox 2 realmente o suportou! Era um bug e escondido atrás de um prefixo de fornecedor, mas funcionava mais ou menos, o que deixava os designers começarem a brincar com ele. E então o Firefox 3 o suportava mais ou menos completamente, o que parecia milagroso. A versão 3 da nossa grade de miniaturas é tão simples quanto uma largura e inline-block:

1 2 3 4 5 6

. miniaturas li { exibição : bloco embutido ; largura : 250 px ; margem : 0,5 em ; alinhamento vertical : top ; }

A idéia geral inline-blocké que o interior atue como um bloco, mas o próprio bloco seja colocado em texto corrido regular, como uma imagem. Cada miniatura é, portanto, contida em uma caixa, mas todas as caixas ficam próximas uma da outra e, por suas larguras iguais, elas fluem para uma grade. E, como é funcionalmente uma linha de texto, você não precisa contornar nenhum impacto estranho no restante da página, como teve a ver com carros alegóricos.

Claro, isso teve algumas desvantagens. Você não podia fazer nada com o espaço restante, por exemplo, portanto havia o risco de um grande vazio vazio à direita com tamanhos de tela patológicos. Você ainda tinha o problema de quebrar a grade com uma célula larga. Mas pelo menos não são carros alegóricos.

Um pequeno problema: o IE 6. Ele tecnicamente suportava inline-block, mas apenas em elementos que eram naturalmente inline– como <b>e <i>não <li>. Portanto, não aqueles que você realmente deseja (ou pensa) usar inline-block. Suspiro.

Para nossa sorte, em algum momento um gênio absoluto descobriu hasLayout, uma otimização interna no IE que marca se um elemento … uh … tem … layout. Olha, eu não sei. Basicamente, ele altera o caminho de renderização de um elemento – tornando-o diferente de buggy, como o modo peculiares por elemento! O resultado é que o acima funciona no IE 6 se você adicionar algumas linhas:

1 2 3 4 5 6 7 8

. miniaturas li { exibição : bloco embutido ; largura : 250 px ; margem : 0,5 em ; alinhamento vertical : top ; * zoom : 1 ; * display : em linha ; }

Os asteriscos principais invalidam a propriedade; portanto, os navegadores devem ignorar toda a linha … mas, por alguma razão, não posso começar a entender, o IE 6 ignora os asteriscos e aceita o restante da regra. (Quase qualquer pontuação funcionou, incluindo um hífen ou – meu favorito pessoal – um sublinhado.) A zoompropriedade é uma extensão da Microsoft que escala coisas, com o efeito colateral de conceder a propriedade mística de “layout” ao elemento também. E display: inline deve fazer com que cada elemento derrame seu conteúdo em uma grande linha de texto, mas o IE trata um inlineelemento que tem “layout” mais ou menos como um inline-block.

E aqui vimos o verdadeiro potencial das bagunças CSS . Regras específicas do navegador, com sintaxe incorreta e deliberada que um navegador ignoraria, para replicar um efeito que ainda não está claramente descrito pelo que você está escrevendo. Tutoriais inteiros escritos para explicar como realizar algo simples, como uma grade , mas fazer com que funcione realmente nos navegadores da maioria das pessoas. Você também veria * html, html > /**/ bodye todo tipo de outras bobagens. Aqui está uma lista completa! E lembra-se do “clearfix” hack de antes? A versão completa , compatível com todos os navegadores, é um pouco pior:

1 2 3 4 5 6 7 8 9 10 11 12 13

. clearfix : depois de { visibilidade : oculto ; display : bloco ; tamanho da fonte : 0 ; conteúdo : “” ; claro : ambos ; altura : 0 ; } . clearfix { display : bloco embutido ; } / * start comentou a barra invertida hack \ * / * html . clearfix { altura : 1 % ; } .clearfix { display : bloco ; } / * fechamento de barra invertida com comentários * /

É de se admirar que as pessoas começaram a reclamar sobre CSS ?

Era uma época de cópia / colagem cega nas esperanças frustradas de fazer a maldita coisa funcionar. Caso em questão: alguém (eu desenterrei a fonte original uma vez, mas não a encontro agora) teve a ideia de sempre definir body { font-size: 62.5% }devido a uma combinação de “unidades relativas são boas” e querendo substituir o navegador padrão aparentemente maciço tamanho da fonte de 16px (o que está correto ) e lidar com os erros do IE . Ele retornou pouco tempo depois, mas o estrago já havia sido feito e agora milharesdos sites começam dessa maneira como uma “melhor prática”. O que significa que, se você deseja alterar o tamanho da fonte padrão do navegador em qualquer direção, você está ferrado – reduza-o e um monte da Web se torna microscópico, amplie-o e tudo ainda será muito menor do que você pediu, aumente mais para compensar e tudo o que realmente respeite sua decisão será gigantesco. Pelo menos temos melhor zoom de página agora, eu acho.

Ah, e lembre-se: o Stack Overflow ainda não existia. Esse material foi passado apenas de boca em boca. Se você teve sorte, sabia sobre alguns sites, como o modo quirks e o site de Eric Meyer .

De fato, confira o site css / edge de Meyer para ver alguns exemplos selvagens de coisas que as pessoas estavam fazendo, mesmo com apenas CSS 1, já em 2002. Eu ainda acho que complexspiral é pura genialidade, mesmo que você possa fazê-lo hoje em dia com opacityapenas uma imagem. A abordagem em raggedfloat não teria suporte nativo em CSS até alguns anos atrás, com shape-outside! Ele também nos trouxe redefinição de CSS , eliminando diferenças entre os estilos padrão dos navegadores.

(Não posso subestimar o quanto Eric Meyer é pioneiro em CSS . Quando sua filha Rebecca morreu seis anos atrás, ela foi imortalizada com seu próprio nome de cor CSS . É assim que a comunidade da Web pensa dele. vá chorar um pouco sobre essa história agora.)rebeccapurple

O futuro chega, gradualmente

Designers e desenvolvedores estavam empurrando os limites do que os navegadores eram capazes. Os navegadores estavam lidando com tudo um pouco mal. Todas as correções, soluções alternativas e bibliotecas eram misteriosas, quebradiças, propensas a erros e / ou pesadas.

Claramente, os navegadores precisavam de novas funcionalidades. Mas apenas introduzir algo não ajudaria; A Microsoft havia feito bastante disso, e na maior parte tinha feito uma bagunça.

Várias tentativas de luta começaram. Com a cabeça do W3C ainda totalmente decidida – até mesmo rejeitando explicitamente os aprimoramentos propostos para HTML , em favor do snorting XML – algumas pessoas dos fornecedores (ativos) de navegadores Apple, Mozilla e Opera decidiram criar seu próprio clube. O WHATWG surgiu em junho de 2004 e eles começaram a trabalhar no HTML5 . (Isso acabaria definindo o tratamento de erros de forma muito explícita, o que evitou completamente a necessidade de XHTML e eliminou várias preocupações de segurança ao trabalhar com HTML arbitrário. Também nos deu algumas novidades, como controles nativos de áudio, vídeo e formulário para datas e cores e outras coisas que foram desajeitadamente manipuladas por controles personalizados baseados em JavaScript. E, hum, ainda são muitas vezes.)

Havia o CSS 3. Não tenho certeza de quando ele começou a existir. Surgiu lentamente, lutando, como uma garota chocando de um ovo e levando seu maldito doce tempo para realmente ser implementada em qualquer lugar.

Estou tendo que adivinhar muito aqui, mas acho que começou com isso border-radius. Especificamente, com -moz-border-radius. Não sei quando foi introduzido pela primeira vez, mas o rastreador de erros da Mozilla menciona isso já em 1999.

Veja, a própria interface do Firefox é renderizada com CSS . Se a Mozilla quisesse fazer algo que não pudesse ser feito com CSS , eles adicionaram uma propriedade própria, prefixada -moz-para indicar que era sua própria invenção. E quando não há nenhum dano real, eles também deixam a propriedade acessível aos sites.

Meu palpite, então, é que o impulso para o CSS 3 realmente começou quando o Firefox decolou e os designers descobriram -moz-border-radius. De repente, os cantos arredondados estavam disponíveis! Não há mais brincadeiras no Photoshop; você só precisava escrever uma única linha! Praticamente da noite para o dia, tudo em todos os lugares tinha seus cantos arqueados.

E a partir daí, as coisas caíram na neve. Os problemas mais comuns foram abordados, um por vez por novos CSS recursos, que foram agrupadas em uma nova CSS versão: CSS 3. Os grandes eram soluções para os problemas de projeto mencionados anteriormente:

• Cantos arredondados, fornecidos por border-radius.
• Gradientes, fornecidos por linear-gradient()e amigos.
• Múltiplos antecedentes, que não eram exatamente uma preocupação urgente, mas que acabavam facilitando outras coisas.
• Translucidez, fornecida por opacitye cores com um canal alfa.
• Sombras de caixa.
• Sombras de texto, que estavam no CSS 2, mas caíram no 2.1 e nunca foram implementadas.
• Imagens de borda, para que você possa fazer coisas ainda mais sofisticadas do que meras bordas arredondadas.
• Transições e animações, agora realizáveis ​​com facilidade, sem a necessidade de jQuery (ou qualquer JS ).
• :nth-child(), que resolveu o problema de linhas alternadas com CSS puro .
• Transformações. Espere o que? Isso meio que vazou do SVG , que também era esperado que os navegadores implementassem, e que é construído fortemente em torno de transformações. O código já estava lá, então, ei, agora podemos girar coisas com CSS ! Não poderia fazer isso antes. Legal.
• Fontes da Web, que estavam em CSS há algum tempo, mas apenas foram implementadas no IE e somente com algum formato de fonte pateta DRM -laden. Agora, não estávamos limitados às quatro fontes ruins fornecidas com o Windows e que ninguém mais possui!

Estes foram ótimos! Eles não resolver todos os problemas de layout, mas eles fizeram questões estéticas endereço que os designers tinham sido desajeitadamente que trabalham em torno usando cargas de imagens e / ou JavaScript. Isso significava menos coisas para baixar e mais texto usado em vez de imagens, as quais eram muito boas para a Web.

A grande ironia é que todas as coisas que você poderia fazer com esses recursos ficaram fora de moda quase imediatamente, e agora voltamos aos retângulos planos novamente.

Inferno prefixo do navegador

Ai! Tudo ainda não estava certo com o mundo.

Acredito que vários desses novos aparelhos foram inicialmente desenvolvidos por fornecedores de navegadores e prefixados. Alguns posteriores foram projetados pelo comitê de CSS , mas implementados pelos navegadores enquanto o design ainda estava em fluxo e, portanto, também eram prefixados.

Então começou o prefixo hell , que continua até hoje.

A Mozilla tinha -moz-border-radius, então, quando o Safari a implementou, foi nomeada -webkit-border-radius(“WebKit” é o nome do fork KHTML da Apple ). Em seguida, a especificação do CSS 3 padronizou e chamou apenas border-radius. Isso significava que, se você queria usar bordas arredondadas, na verdade precisava dar três  regras:

1 2 3 4 5

elemento { -moz- border-radius : 1 em ; -webkit- raio da borda : 1 em ; raio da borda : 1 em ; }

Os dois primeiros fizeram o efeito realmente funcionar nos navegadores atuais, e o último foi preparado para o futuro: quando os navegadores implementavam a regra real e eliminavam os prefixados, ele assumia o controle.

Você precisava fazer isso toda vez , já que o CSS não é uma linguagem de programação e não possui macros, funções ou similares. Às vezes, o Opera e o IE teriam suas próprias implementações com -o-e -ms-prefixos, elevando o total para cinco cópias. Ficou muito pior com os gradientes; a sintaxe passou por várias revisões importantes incompatíveis; portanto, você não pode confiar em copiar / colar e alterar o nome da propriedade!

E muita gente, bem, estragou tudo. Não posso culpá-los demais; Quero dizer, isso é péssimo. Mas páginas suficientes usavam apenas os formulários prefixados, e não o formato final, para que os navegadores tivessem que continuar suportando o formulário prefixado por mais tempo do que gostariam de evitar quebrar coisas. E se o formulário prefixado ainda funcionar e é o que você está acostumado a escrever, talvez ainda não se importe com o formulário não prefixado.

Pior ainda, algumas pessoas usariam apenas o formulário que funcionasse em seu navegador preferido. Isso ficou especialmente ruim com o surgimento de navegadores da web móveis. Os navegadores integrados no iOS e Android são Safari (WebKit) e Chrome (originalmente WebKit, agora um fork), portanto, você só “precisou” para usar as -webkit-propriedades. O que dificultou as coisas para a Mozilla quando lançou o Firefox para Android .

Ei, lembra-se de todo esse desastre com o IE 6? Aqui estamos de novo! Já era ruim o suficiente que a Mozilla finalmente decidisse implementar várias -webkit-propriedades, que continuam sendo suportadas até no Firefox para desktop até hoje. A situação é tola o suficiente para que o Firefox agora suporte alguns efeitos apenas por essas propriedades, como -webkit-text-stroke, que não estão sendo padronizadas.

Melhor ainda, o atual mecanismo bifurcado do Chrome é chamado Blink, portanto, tecnicamente, ele também não deveria usar -webkit-propriedades. E, no entanto, aqui estamos nós. Pelo menos, não é tão ruim quanto a bagunça na cadeia do agente do usuário .

Agora, os fornecedores de navegadores abandonaram a prefixação; em vez disso, ocultam recursos experimentais atrás de sinalizadores (para que funcionem apenas na máquina do desenvolvedor), e novos recursos são teoricamente projetados para serem menores e mais fáceis de estabilizar.

Essa bagunça foi provavelmente um enorme fator motivador para o desenvolvimento do Sass e do LESS , duas linguagens que produzem CSS . Ou … dois pré-processadores CSS , talvez. Eles têm objetivos muito semelhantes: ambos adicionam variáveis, funções e alguma forma de macros ao CSS , permitindo que você elimine muitas repetições e hacks do navegador e outras bobagens de suas folhas de estilo. Inferno, este blog ainda usa SCSS , embora seu uso tenha diminuído gradualmente ao longo do tempo.

Flexbox

Mas então, como um anjo descendo do céu … flexbox .

O Flexbox existe há muito tempo – supostamente tinha suporte parcial no Firefox 2, em 2006! Passou por várias revisões incompatíveis e levou séculos para se estabilizar. Depois, o IE levou séculos para implementá-lo, e você realmente não quer confiar em ferramentas de layout que funcionam apenas para metade do seu público. É relativamente recente (2015? Mais tarde?) Que o flexbox teve suporte suficientemente amplo para ser usado com segurança. E eu poderia jurar que ainda encontro pessoas cujo Safari atual não o reconhece sem prefixar, mesmo que o Safari supostamente tenha abandonado os prefixos cinco anos atrás …

De qualquer forma, o flexbox é uma implementação CSS de uma ferramenta de layout da GUI bastante comum : você tem um pai com alguns filhos e o pai tem uma quantidade de espaço disponível, e é dividido automaticamente entre os filhos. Você sabe, isso coloca as coisas próximas uma da outra .

A idéia geral é que o navegador calcule quanto espaço o pai tem disponível e o “tamanho inicial” de cada filho, calcule quanto espaço extra há e o distribua de acordo com a flexibilidade de cada filho. Pense em uma barra de ferramentas: você pode querer que cada botão tenha um tamanho fixo (um flex de 0), mas deseja adicionar espaçadores que compartilhem igualmente qualquer espaço restante, para que você dê um flex de 1.

Uma vez feito isso, você também tem várias opções de qualidade de vida: você pode distribuir o espaço extra entre as crianças, pode dizer para elas esticarem para a mesma altura ou alinhá-las de várias maneiras, e você pode até enviá-los em várias linhas, se não couberem!

Com isso, podemos fazer mais uma rachadura nessa grade de miniaturas :

1 2 3 4 5 6 7

. grade de miniaturas { display : flex ; flex-wrap : wrap ; } . li da grade de miniaturas { flex : 1 0 250 px ; }

Isso é milagroso. Eu esqueci tudo da inline-blocknoite para o dia e, principalmente, salivou com isso até que fosse universalmente suportado. Até expressa muito claramente o que eu quero.

…quase. Ele ainda tem o problema de que células muito largas quebram a grade, pois ainda é uma linha horizontal envolvida em várias linhas independentes. É bem legal, no entanto, e resolve vários outros problemas de layout. Certamente isso é bom o suficiente. A menos que…?

Eu diria que a adoção em massa do flexbox marcou o início da era moderna do CSS . Mas havia um problema persistente …

A morte lenta e agonizante do IE

O IE 6 levou muito, muito, muito tempo para ir embora. Não caiu abaixo de 10% do mercado (ainda é um grande pedaço) até o início de 2010.

O Firefox atingiu a versão 1.0 no final de 2004. O IE 7 não foi lançado até dois anos depois, ofereceu apenas melhorias modestas, sofreu problemas de compatibilidade com itens criados para o IE 6 e os holdouts do IE 6 (muitos dos quais não eram Computer Pessoas) geralmente não via motivos para atualizar. O Vista foi lançado com o IE 7, mas o Vista foi meio que um fracasso – não acredito que tenha chegado perto de ultrapassar o XP , nem em toda a sua vida.

Outros fatores incluíam políticas corporativas de TI , que muitas vezes assumem a forma de “nunca atualizar nada” – e muitas vezes por um bom motivo, pois ouvi histórias intermináveis ​​de aplicativos internos que só funcionavam no IE 6 por todos os tipos de motivos terríveis. Havia a totalidade da Coréia do Sul , que era legalmente obrigada a usar o IE 6 porque eles haviam consagrado em lei alguns requisitos de segurança que só podiam ser implementados com um controle ActiveX do IE 6.

Portanto, se você mantinha um site que era usado – ou pior, exigido – por pessoas que trabalhavam para empresas ou moravam em outros países, você ficava praticamente paralisado ao apoiar o IE 6. As pessoas que criaram poucas ferramentas e sites pessoais abandonaram a compatibilidade com o IE 6 desde o início e estampou seus sites com banners cada vez mais desagradáveis, provocando qualquer um que ousasse aparecer usando-o … mas se você fosse o chefe de alguém, por que você diria a eles que não há problema em diminuir 20% do seu público em potencial? Apenas trabalhe mais!

A tensão aumentou ao longo dos anos, à medida que o CSS se tornou mais capaz e o IE 6 permaneceu uma âncora. Ainda nem entendia o PNG alfa sem soluções alternativas e, enquanto isso, começávamos a obter recursos mais críticos, como o vídeo nativo em HTML5 . As soluções alternativas ficaram mais confusas e a lista de recursos que você basicamente não podia usar aumentou mais. (Eu mostraria a você como meu blog se parece no IE 6, mas acho que ele não pode se conectar – o material TLS que ele suporta é tão antigo e quebrado que foi desativado na maioria dos servidores!)

A propósito, gritos para algumas pessoas da equipe do YouTube, que em julho de 2009 adicionaram um banner de aviso implorando aos usuários do IE 6 que mudassem para qualquer outra coisa – sem pedir aprovação a ninguém. “Dentro de um mês … mais de 10% do tráfego global do IE6 caiu.” Nem todos os heróis usam capas.

Eu marcaria o início do fim no dia em que o YouTube realmente abandonou o suporte do IE 6 – 13 de março de 2010, quase nove anos após seu lançamento. Não sei quanto impacto direto o YouTube tem nos usuários corporativos ou no governo sul-coreano, mas uma enorme empresa da web que interrompe um navegador inteiro envia uma mensagem bastante forte.

Havia outras versões do IE , é claro, e muitas delas eram dores de cabeça confusas. Mas cada um deles se tornou menos trabalhoso e hoje em dia você nem precisa pensar muito em testar no IE (agora Edge). Bem a tempo de a Microsoft desfazer seu próprio mecanismo de renderização e transformar seu navegador em um clone do Chrome.

Agora

CSS é ótimo agora. Você não precisa de hacks estranhos só para colocar as coisas um ao lado do outro. As ferramentas de desenvolvimento do navegador estão incorporadas agora e são incríveis – o Firefox começou a avisá-lo especificamente quando algumas propriedades CSS não entram em vigor por causa dos valores de outras! Efeitos colaterais implícitos obscuros, como “contextos de empilhamento” (sejam eles quais forem), agora podem ser definidos explicitamente, com propriedades como isolation: isolate.

De fato, deixe-me listar tudo o que consigo pensar que você pode fazer em CSS agora. Este não é um guia para todos os usos possíveis do estilo, mas se seu conhecimento de CSS não for atualizado desde 2008, espero que isso melhore seu apetite. E esse material é apenas CSS ! Tantas coisas que antes eram impossíveis ou dolorosas ou que requerem plugins desajeitados agora são suportadas nativamente – áudio, vídeo, desenho personalizado, renderização em 3D … para não mencionar as vastas melhorias ergonômicas no JavaScript.

Layout

Um contêiner de grade pode fazer praticamente qualquer coisa que as tabelas possam fazer e muito mais, incluindo determinar automaticamente quantas colunas caberão. É incrível pra caralho. Mais sobre isso abaixo.

Um contêiner flexbox expõe seus filhos em uma linha ou coluna, permitindo que cada filho declare seu tamanho “padrão” e qual a proporção de espaço restante que deseja consumir. As caixas flexíveis podem agrupar, reorganizar os filhos sem alterar a ordem de origem e alinhar os filhos de várias maneiras.

As colunas derramarão texto em, bem, várias colunas.

A box-sizingpropriedade permite que você opte pelo modelo de caixa do IE por elemento, para quando você precisar de um elemento inteiro para ocupar uma quantidade fixa de espaço e precisar de preenchimento / bordas para subtrair isso.

display: contentsdespeja o conteúdo de um elemento em seu pai, como se ele não estivesse lá. display: flow-rooté basicamente uma correção automática, apenas uma década tarde demais.

widthagora pode ser definido como min-content, max-contentou a fit-content()função para um comportamento mais flexível.

white-space: pre-wrappreserva o espaço em branco, mas quebra as linhas quando necessário para evitar o estouro. Também é útil pre-line, que reduz seqüências de espaços em um único espaço, mas preserva novas linhas literais.

text-overflowcorta o texto transbordante com reticências (ou caractere personalizado) quando ele transborda, em vez de simplesmente truncá-lo. Também especificada é a capacidade de esmaecer o texto, mas isso ainda não foi implementado.

shape-outsidealtera a forma usada ao envolver o texto em torno de um flutuador. Pode até usar o canal alfa de uma imagem como forma.

resizedá a um elemento arbitrário um identificador de redimensionamento (desde que tenha overflow).

writing-modedefine a direção em que o texto flui. Se suas necessidades de design para trabalhar para vários modos de escrita, uma série de CSS propriedades que mencionar esquerda / direita / superior / inferior têm alternativas que descrevem direções em termos de modo de escrita: inset-blocke inset-inlinepara a posição, block-sizee inline-sizepara a largura / altura, border-blocke border-inlinepara as fronteiras e semelhante para preenchimento e margens.

Estética

As transições interpolam suavemente um valor sempre que ele é alterado, seja devido a um efeito como :hoverou por exemplo uma classe sendo adicionada do JavaScript. As animações são semelhantes, mas reproduzem uma animação predefinida automaticamente. Ambos podem usar várias funções de atenuação diferentes .

border-radiusarredonda os cantos de uma caixa. Os cantos podem ter tamanhos diferentes e podem ser circulares ou elípticos. A curva também se aplica à borda, ao fundo e a qualquer sombra de caixa.

Sombras de caixa podem ser usadas para o efeito óbvio de projetar uma sombra projetada. Você também pode usar várias sombras e insetsombras para uma variedade de efeitos inteligentes.

text-shadow faz o que diz na lata, embora você também possa empilhar várias delas para uma aproximação aproximada de um esboço de texto.

transform permite aplicar uma transformação de matriz arbitrária a um elemento – ou seja, você pode dimensionar, girar, inclinar, traduzir e / ou transformar em perspectiva, tudo sem afetar o layout.

filter(diferente do IE 6) oferece vários filtros visuais específicos que você pode aplicar a um elemento. A maioria deles afeta a cor, mas também existe um blur()e um drop-shadow()(que, diferentemente box-shadow, se aplica à aparência de um elemento, e não à sua caixa contendo).

linear-gradient(),, radial-gradient()o novo e com menos suporte conic-gradient()e suas repeating-*variantes produzem imagens de gradiente e podem ser usados ​​em qualquer lugar do CSS em que uma imagem é esperada, geralmente como a background-image.

scrollbar-color altera a cor da barra de rolagem, com a desvantagem de reduzir a barra de rolagem para um polegar e faixa muito simples nos navegadores atuais.

background-size: coverecontain dimensionará uma imagem de plano de fundo proporcionalmente, seja grande o suficiente para cobrir completamente o elemento (mesmo se cortado) ou pequena o suficiente para caber exatamente nele (mesmo que não cubra todo o plano de fundo).

object-fité uma ideia semelhante, mas para mídias que não são de fundo, como <img>s. O relacionado object-positioné como background-position.

São possíveis vários planos de fundo, o que é especialmente útil com gradientes – você pode empilhar vários gradientes, outras imagens de plano de fundo e uma cor sólida na parte inferior.

text-decorationé mais extravagante do que costumava ser; agora você pode definir a cor da linha e usar vários tipos diferentes de linhas, incluindo tracejada, pontilhada e ondulada.

Os contadores CSS podem ser usados ​​para numerar elementos arbitrários de maneira arbitrária, expondo a capacidade de contagem<ol>para qualquer conjunto de elementos que você desejar.

O ::markerpseudoelemento permite estilizar a caixa de marcadores de um item da lista ou até substituí-lo completamente por um contador personalizado. O suporte ao navegador é irregular, mas está melhorando. Da mesma forma, a @counter-styleregra implementa um estilo de contador totalmente novo (como 1 2 3, ii ii iii, ABC etc.) que você pode usar em qualquer lugar, embora apenas o Firefox o suporte até o momento.

image-set() fornece uma lista de imagens candidatas e permite que o navegador escolha a mais apropriada com base na densidade de pixels da tela do usuário.

@font-facedefine uma fonte que pode ser baixada, mas você pode evitar descobrir como usá-la corretamente usando o Google Fonts .

pointer-events: nonefaz um elemento ignorar completamente o mouse; não pode passar o mouse e os cliques passam direto para o elemento abaixo.

image-rendering pode forçar o redimensionamento de uma imagem para o vizinho mais próximo, em vez de interpolado, embora o suporte ao navegador ainda seja irregular e você também precise incluir algumas propriedades específicas do fornecedor.

clip-pathcorta um elemento para uma forma arbitrária. Também existe maskpara o mascaramento alfa arbitrário, mas o suporte ao navegador é irregular e o hoo boy é complicado.

Sintaxe e variados

@supportspermite que você escreva explicitamente CSS diferentes, dependendo do que o navegador suporta, embora não seja tão útil hoje em dia como teria sido em 2004.

A > Bseleciona filhos imediatos. A ~ Bseleciona irmãos. A + Bseleciona irmãos imediatos (elemento). Os colchetes podem fazer um monte de coisas para selecionar com base em atributos; O mais óbvio é input[type=checkbox]que você também pode fazer coisas interessantes com partes correspondentes de <a href>.

Agora há um monte de pseudo-classes. Muitos deles são para elementos de formulário: :enablede :disabled; :checkede :indeterminate(também se aplica ao rádio e <option>); :requirede :optional; :read-writee :read-only; :in-range/ :out-of-rangee :valid/ :invalid(para uso com validação de formulário do lado do cliente HTML5 ); :focuse :focus-within; e :default(que seleciona o botão de formulário padrão e quaisquer caixas de seleção pré-selecionadas, botões de opção <option>es).

Para a segmentação elementos específicos dentro de um conjunto de irmãos, temos: :first-child, :last-childe :only-child; :first-of-type,, :last-of-typee :only-of-type(onde “type” significa nome da tag); e :nth-child(), :nth-last-child(), :nth-of-type(), e :nth-last-of-type()(para seleccionar cada segunda, terceira, etc. elemento).

:not()inverte um seletor. :emptyseleciona elementos sem filhos e sem texto. :targetseleciona o elemento para o qual foi saltado com um fragmento de URL (por exemplo, se a barra de endereço aparecer index.html#foo, isso seleciona o elemento cujo ID é foo).

::beforee ::afterdeve ter dois pontos agora, para indicar que eles criam pseudoelementos, em vez de apenas definir o escopo do seletor ao qual estão conectados. ::selectionpersonaliza como o texto selecionado aparece; ::placeholderpersonaliza como o texto do espaço reservado (nos campos de texto) aparece.

As consultas de mídia fazem um monte de coisas para que sua página possa se adaptar com base em como está sendo visualizada. A prefers-color-schemeconsulta de mídia informa se o sistema do usuário está definido como um tema claro ou escuro, para que você possa ajustar adequadamente sem precisar perguntar.

Você pode escrever cores translúcidas como #rrggbbaaou #rgba, assim como usar as funções rgba()e hsla().

Os ângulos podem ser descritos como frações de um círculo completo com a turnunidade. Claro, dege rad(e grad) também estão disponíveis.

As variáveis CSS (oficialmente, “propriedades personalizadas”) permitem especificar valores nomeados arbitrários que podem ser usados ​​em qualquer lugar em que um valor apareça. Você pode usar isso para reduzir a quantidade de manipulação de CSS necessária no JavaScript (por exemplo, recolorir uma parte complexa de uma página, definindo umavariável CSS em vez de ajustar manualmente várias propriedades) ou ter um componente genérico que reaja às variáveis ​​definidas por um ancestral.

calc()calcula uma expressão arbitrária e atualiza automaticamente (embora isso seja um pouco evitado por box-sizing).

A vw, vh, vmin, e vmaxunidades permitem especificar comprimentos como uma fração da largura ou a altura da janela, ou qualquer dos dois é maior / menor.

---

Ufa! Tenho certeza de que estou esquecendo bastante e as pessoas terão listas ainda maiores de petiscos interessantes nos comentários. Obrigado por me poupar algum esforço! Agora posso parar de navegar no MDN e fazer essa parte divertida final.

Grade de miniaturas de última geração

Finalmente, chegamos à maneira final e objetiva correta de construir uma grade de miniaturas: usando a grade CSS . Você pode dizer que essa é a coisa certa a ser usada, pois possui “grade” no nome. Os recursos modernos de CSS são ótimos para permitir que você diga o que deseja e faça acontecer, em vez de tentar convencê-lo a acontecer implicitamente via vodu.

E é tão simples:

1 2 3 4

. grade de miniaturas { display : grid ; grade : auto – fluxo / repeat ( auto – ajuste , minmax ( 250 px , 1 fr )); }

Feito! Isso te dá uma grade . Você tem inúmeros outros truques para brincar, assim como no flexbox, mas essa é a idéia básica. Você nem precisa estilizar os elementos; a maior parte do trabalho de layout é feita no contêiner.

A gridpropriedade taquigráfica parece um pouco intimidadora, mas apenas porque é muito flexível. Está dizendo: preencha a grade uma linha por vez, gerando quantas linhas forem necessárias; crie o máximo de colunas de 250 px e compartilhe igualmente o espaço restante entre elas.

As grades CSS também são úteis para o layout de <dl>s, algo que historicamente tem sido uma grande dor para dar certo – a <dl>contém qualquer número de <dt>s seguido por qualquer número de <dd>s (incluindo zero), e a única maneira de estilizar isso até a grade flutuar os <dt>, o que significava que eles tinham que ter uma largura fixa. Agora você pode simplesmente dizer <dt>s para ir na primeira coluna e <dd>s para ir na segunda, e o grid cuidará do resto.

E colocando sua página? Essa coisa toda da barra lateral? Veja como isso é fácil:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

corpo { display : grade ; grid-template : “cabeçalho cabeçalho cabeçalho” “barra lateral esquerda conteúdo principal barra lateral direita” “rodapé rodapé rodapé” / 1 fr 6 fr 1 fr ; } corpo > cabeçalho { grid-area : header ; } # barra lateral esquerda { área da grade : esquerda – barra lateral ; } / * … etc … * /

Feito. Fácil. Também não importa em que ordem as partes aparecem na marcação.

Por outro lado

A web ainda é um pouco de um desastre. Muitas pessoas nem sabem que o flexbox e o grid são suportados quase universalmente agora; mas, dado o tempo que levou para ir do trabalho inicial de especificações à ampla implementação, não posso culpá-los. Ontem vi um pequeno site novinho em folha que consistia principalmente de uma enorme lista de “miniaturas” de várias larguras e que usava carros alegóricos! Nem mesmo inline-block! Não sei como conseguimos ensinar a todos sobre todos os hacks necessários para fazer esse trabalho, mas de alguma forma não divulgamos a notícia sobre o flexbox.

Mas muito pior do que isso: continuo encontrando regularmente sites que fazem todo o layout da página com JavaScript . Se você usa o uMatrix , sua primeira experiência é com uma pilha de texto sobreposta a outra pilha. Certamente este é um passo para trás? O que você possivelmente está fazendo para que seu cabeçalho e barra lateral só possam ser dispostos corretamente executando código? Não é como se a página fosse carregada sem CSS – nada em HTML simples se sobrepõe por padrão! Você tem que dizer para fazer isso!

E também há a web móvel, que apesar das boas intenções de todos, acabou sendo um fracasso. A idéia era que você pudesse usar consultas de mídia CSS para caber no seu site normal na tela do telefone, mas, em vez disso, a maioria dos sites principais possui versões móveis totalmente separadas. O que significa que, ou o site para celular não possui muitos recursos importantes, e eu terei que navegar desajeitadamente pelo telefone, de qualquer maneira, ou o site para computador está cheio de porcaria que ninguém realmente precisa.

(Enquanto isso, as versões do Google para documentos do Google Docs / Sheets / etc. Possuem 5% dos recursos das versões da Web? Não sabe o que fazer com isso.)

Hmm. Considerando fortemente escrever algo que explique mais detalhadamente as melhorias no CSS desde a era do Firefox 3, semelhante ao que escrevi para JavaScript . Mas este post é longo o suficiente.

Alguns futuros que nunca foram

Não sei o que virá a seguir no CSS , especialmente agora que o flexbox e o grid resolveram todos os nossos problemas. Estou vagamente ciente de que algum trabalho está sendo feito em um suporte matemático mais abrangente e, possivelmente, algumas funções para alterar cores, como no Sass. Existe uma API de pintura que permite gerar fundos dinamicamente com JavaScript usando a API de tela , o que é … bastante. Aparentemente, agora está nas especificações que você pode usar attr()(que avalia o valor de um atributo HTML ) como o valor de qualquer propriedade, o que parece interessante e pode até permitir que você implemente tabelas HTML inteiramente em CSS, mas você pode fazer o mesmo com variáveis. Quero dizer, propriedades personalizadas. Estou mais empolgado com o :is()que corresponde a uma lista de seletores e subgrid , que permite adicionar um aninhamento a uma grade, mas mantém os netos ainda alinhados a ela.

Muito mais fácil é listar algumas coisas que eram no futuro, mas fracassaram.

• display: run-infaz parte do CSS desde a versão 2 (em 98), mas basicamente não é suportado. A idéia é que uma caixa de inserção seja inserida, inline, no próximo bloco, portanto:1 2 3< h2 style = “display: introdução;” > Título </ h2 > < p > Parágrafo </ p > < p > Parágrafo </ p > exibe assim:Título  ParágrafoParágrafoE, ah, estou começando a ver por que isso não é suportado. É usado para existir em WebKit, mas era aparentemente tão impraticável quanto a ser removido, há seis anos.
• As ” folhas de estilo alternativas” eram populares no início dos anos 2000, pelo menos em alguns sites dos meus amigos. A ideia era que você pudesse listar mais de uma folha de estilo para o seu site (presumivelmente para temas diferentes), e o navegador forneceria ao usuário uma lista deles. Infelizmente, essa lista sempre foi esquivada em um menu sem indicação óbvia de quando foi realmente preenchida; portanto, no final, todos que desejavam vários temas implementavam eles mesmos um alternador de temas na página.Esse recurso ainda é suportado , mas aparentemente o Chrome nunca se deu ao trabalho de implementá-lo, portanto está efetivamente morto.
• De maneira mais geral, a especificação CSS original espera claramente que os usuários possam escrever seu próprio CSS para um site – exatamente no parágrafo 2, diz… O leitor pode ter uma folha de estilo pessoal para ajustar as desvantagens humanas ou tecnológicas.Ei, isso parece legal. Mas nunca se materializou como um recurso do navegador. O Firefox tem userContent.csse alguns seletores de URL para escrever regras por site, mas isso é relativamente obscuro.Ainda assim, há claramente uma demanda pelo conceito, como evidenciado pela popularidade da extensão Stylish – que faz exatamente isso. (Pena que foi comprada por alguns chucklefucks que começaram a usá-lo para sugar os dados do navegador para vender aos anunciantes . Use a Stylus  .)
• Um problema comum (bem, para mim) é o estilo da etiqueta para uma caixa de seleção, dependendo do seu estado. O estilo da caixa de seleção em si é bastante fácil com o :checkedpseudo-seletor. Mas se você organizar uma caixa de seleção e seu rótulo da maneira óbvia:1< label > < input type = “checkbox” > Descrição do que isso faz </ label > … Então o CSS não tem como segmentar o <label>elemento ou o nó de texto. O mecanismo seletor do jQuery (originalmente personalizado) oferecia uma :has()pseudo classe personalizada , que poderia ser usada para expressar isso:1 2 3 4/ * o rótulo da caixa de seleção fica em negrito quando marcado * / label : has ( entrada : marcada ) { font-weight : bold ; } As primeiras discussões do seletor do CSS 3 aparentemente queriam evitar isso, acho que por razões de desempenho? A alternativa um tanto nova era escrever o seletor inteiro, mas poder alterar em qual parte dele as regras afetavam com um indicador de “sujeito”. No começo, era uma pseudo-classe:1 2 3rótulo : assunto entrada : marcado { peso da fonte : negrito ; } Depois, eles introduziram um !prefixo:1 2 3! entrada da etiqueta : marcada { peso da fonte : negrito ; } Felizmente, isso foi uma péssima idéia, então a atual maneira especificada de fazer isso é… :has()! Infelizmente, só é permitido ao consultar a partir de JavaScript, não em uma folha de estilo ao vivo, e nada o implementa de qualquer maneira. 20 anos e ainda estou esperando uma maneira de estilizar os rótulos das caixas de seleção.
• <style scoped>era um atributo que faria com que <style>as regras de CSS de um elemento se aplicassem apenas a outros elementos em seu pai imediato, o que significa que você poderia inserir CSS arbitrário (possivelmente escrito pelo usuário) sem nenhum risco de afetar o restante da página. Infelizmente, isso foi silenciosamente abandonado há algum tempo, com a sombra DOM sugerida como uma substituição totalmente inapropriada.
• Eu me lembro que quando ouvi pela primeira vez sobre componentes da Web , eles eram modelos que você poderia usar para reduzir a duplicação em HTML puro ? Mas não consigo encontrar nenhum vestígio desse conceito agora, e as implementações atuais requerem JavaScript para defini-los, portanto, não há nada declarativo vinculando uma nova tag à sua implementação. O que os torna completamente inutilizáveis ​​para qualquer coisa que não tenha um motivo atraente para confiar no JS . Infelizmente.
• <blink>e <marquee>. RIP . Embora ambos possam ser facilmente replicados com  animações CSS .