Fiquei interessado em web design e desenvolvimento no final dos anos 90. Droga, há quanto tempo. E como foi terrível. Quero dizer, criar um site e publicá-lo era um negócio complicado, e os clientes podiam ser contados nos dedos.

Pareceu-me que a maioria dos desenvolvedores se lembra daqueles dias, ou pelo menos da próxima década, mas não. Recentemente me deparei com um tweet , cujo autor ficou surpreso com a técnica de configurar cantos arredondados antes de aparecer border-radius(faça uma imagem separada para cada canto arredondado e posicione-o com precisão). Ainda me lembro de como esperávamos com a respiração suspensa quando ele border-radiusse tornou o padrão e o prefixo nos navegadores foi removido dele.

Por outro lado, muitos tentaram apenas um pouco o web design nos velhos tempos e acreditam que nada mudou desde então.

Este artigo é para todos. A história do CSS e web design, pelo que me lembro.

(Lembre-se de que memórias e pesquisas estão intimamente entrelaçadas neste artigo. Portanto, não posso garantir que tudo esteja realmente definido corretamente, especialmente em relação à causalidade. Você pode ler o histórico oficial de CSS do W3C , que é muito mais curto e melhor realidade e contém significativamente menos maldições).

(Além disso, o artigo se beneficiaria muito com mais ilustrações, mas apenas escrever o texto levou muito tempo).

Primeiros dias

Não havia CSS no começo.

Foi muito ruim.

Meu artefato favorito da época é o livro de O'Reilly, que estudei HTML: The Definitive Guide . Várias edições deste guia foram publicadas em meados e no final dos anos 90. O livro realmente fala apenas sobre HTML, sem nenhuma menção a CSS. Não tenho mais e não consigo encontrar digitalizações na Internet, mas há uma página da edição mais recente deste livro HTML & XHTML: O Guia Definitivo (falaremos sobre XHTML mais adiante). Aqui estão algumas dicas para o design web de ponta dos anos 90:

“Destaque claramente o cabeçalho e o rodapé com linhas horizontais.”

Não, não é issoborder-top. Isso<hr>. O título da página é quase certamente centralizado<center>.

A página possui um plano de fundo, fonte e cor de texto padrão. Em parte porque este guia introduz primeiro os conceitos iniciais; em parte porque é um livro em preto e branco e em parte porque refletia a realidade - colorir algo em uma página era uma enorme hemorróida.

Digamos que você queira deixar todos os cabeçalhos vermelhos. Para fazer isso, coloque as seguintes tags:

<H1><FONT COLOR=red>...</FONT></H1>

... para cada título . Espero que você nunca decida mudar para o azul!

Ah, e as tags HTML foram escritas em letras maiúsculas. Não me lembro por que todos decidimos que era uma boa ideia. Talvez isso tenha acontecido antes do destaque da sintaxe aparecer nos editores de texto (eu tinha 12 anos e usei o Bloco de Notas), e as tags de cabeçalho são mais fáceis de distinguir do texto principal.

Assim, manter o site foi um verdadeiro pesadelo. Muitos decidiram que era mais fácil não usar nenhum design, apenas as configurações padrão. De certa forma, foi até legal: os navegadores permitem alterar esses valores padrão, para que você possa ler o texto na Internet da forma que desejar.

Lembro-me de como uma solução alternativa interessante apareceu em muitos sites da Geocities: uma aparência completamente nova para cada nova página da web. Droga, certo? Basta fazer o que quiser em todas as novas páginas.

Talvez esse fosse o auge do design da web.

Inferno, sinto falta daqueles dias. Web completamente aberta, sem twitter, sem facebook. Se você tem algo a dizer, deve criar seu próprio site. Isso foi demais. Ninguém sabia o que ele estava fazendo; Aposto que a grande maioria dos web designers da época eram adolescentes amadores ignorantes (como eu) que copiam páginas de outros adolescentes amadores ignorantes. Metade da Internet era de portais feitos por fãs sobre animorphs, com inexplicáveis telas de aviso de que o site funciona melhor com uma resolução de tela de 640x480 (presumivelmente todos os 12 anos de idade com resolução de tela insuficiente devem comprar um novo monitor). Todos os caras legais usam o Internet Explorer 3 - o navegador mais avançado. No entanto, alguns perdedores ainda estão no Netscape Navigator; portanto, na página principal, você precisa colocar o GIF animado "Melhor no IE".

Foi também a era das "cores seguras para a Internet" - uma paleta de 216 cores, onde cada canal era igual a00, 33, 66, 99, ccOu ff, porque alguns ainda permaneceram 256 cores monitor! Hoje, não pensamos nisso, assumindo como certa a cor de 24 bits.

De fato, muito do que agora consideramos garantido era incompreensível e difícil. Deseja a mesma navegação em todas as páginas do site? Ok, não há problema: copie / cole o código de navegação em cada página. Se você atualizar esse código, atualize cada página - mas provavelmente esquecerá de fazer isso em algumas páginas, e o site parecerá um site arqueológico, com várias camadas de páginas de diferentes "épocas".

É muito mais fácil usar quadros.quando a janela do navegador é dividida em uma grade e uma página separada é carregada em cada célula ... mas as pessoas ficam confusas se chegarem a uma página separada sem quadros, como costuma acontecer quando vêm de um mecanismo de pesquisa como o AltaVista (não acredito que Eu explico frames, mas ninguém realmente usou desde 2001 ... você sabe o que iframe é? Aqui a letra 'i' significa em linha , ou seja, embutida quadros para distingui-los dos regulares quadros em toda a tela).

O PHP ainda nem recebeu esse nome, e ninguém ouviu falar dele. Essa estranha mistura de Perl e CGI era realmente difícil de entender e não funcionava no seu próprio computador, os erros eram difíceis de encontrar e diagnosticar, e o Geocities não suportava isso de qualquer maneira. Se você é realmente um desenvolvedor sortudo e avançado, seu host trabalha no servidor da Web Apache e pode usar sua linguagem de montagem dinâmica integrada Server Side Include e escrever algo como isto:

<BODY>
    <TABLE WIDTH=100% BORDER=0 CELLSPACING=8 CELLPADDING=0>
        <TR>
            <TD COLSPAN=2>
                <!--#include virtual="/header.html" --> 
            </TD>
        </TR>
        <TR>
            <TD WIDTH=20%>
                <!--#include virtual="/navigation.html" --> 
            </TD>
            <TD>
                (actual page content goes here)
            </TD>
        </TR>
    </TABLE>
</BODY>

Está bem. O Apache verá comentários especiais e inserirá o conteúdo dos arquivos referenciados. A desvantagem é que você não pode verificar nada no seu computador, toda a navegação estava faltando, porque aqui o seu navegador da web interpretou essas instruções como comentários normais em HTML. Obviamente, a instalação do Apache em casa era impossível, porque você tem um computador , não um servidor .

Infelizmente, todos os sites antigos desapareceram e ficaram cobertos pelas cinzas da história, nas quais tudo o que não foi feito nesta semana já está desatualizado e há muito esquecido. A web deveria tornar as informações eternas, mas, em vez disso, grande parte delas se tornou efêmera. Sinto falta daqueles momentos em que quase todos os meus amigos tinham sites próprios. Seu Twitter e Instagram como presença on-line é um substituto ruim.

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

Exemplo: Atolamento de Espaço

Se você não sabe, o Space Jam é o melhor filme de todos os tempos. Ele fala sobre a carreira extremamente curta no basquete do coelho Pernalonga, que, junto com o vivo Michael Jordan, salva o planeta de algum tipo de ameaça alienígena. Depois veio uma série de sequências muito bem-sucedidas e extremamente engraçadas para este filme.

E temos muita sorte de que, 24 anos após o seu lançamento, o site da Space Jam ainda esteja funcionando ! Aqui e agora, temos a oportunidade de estudar a melhor conquista de web design do modelo de 1996.

Primeiro, observe que cada página do site é estática. E esta é uma página estática com uma extensão .htm, não.htmlporque antes do Windows 95 ainda estávamos vinculados aos nomes de arquivo 8.3 (oito caracteres para o nome, três caracteres para a extensão). Não sei por que isso importava no URL, porque ninguém estava executando o Windows 3.11 em um servidor da Web, mas tudo bem.

Aqui está o CSS da página principal:

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

Haha, só estou brincando! Que diabos tipo de CSS? O “atolamento cósmico” foi lançado um mês antes da publicação deste padrão (na verdade, há uma linha no código fonte da página, mas tenho certeza de que ela foi adicionada muito mais tarde para estilizar alguns links para as regras que precisavam ser inseridas porque obrigações legais).

Preste atenção à localização extremamente precisa dos hiperlinks para navegação. Esse feito foi realizado da mesma maneira que todos em 1996: usando tabelas.

De fato, as tabelas têm uma vantagem funcional sobre o CSS no layout, o que era muito importante naqueles dias, porque, com Ctrl pressionado, era possível selecionar uma célulamesas ou até algumas. Um "retro-depurador" tão peculiar mostra como as células estão localizadas no layout. Foi ótimo porque o primeiro depurador normal do Firebug foi lançado apenas em 2006 - uma década depois!

A marcação desta tabela, por algum motivo desconhecido, é preenchida com linhas em branco, mas se você as excluir, será semelhante a:

<table width=500 border=0>
<TR>
<TD colspan=5 align=right valign=top>
</td></tr>
<tr>
<td colspan=2 align=right valign=middle>
<br>
<br>
<br>
<a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height=56 width=131 alt="Press Box Shuttle" border=0></a>
</td>
<td align=center valign=middle>
<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="Planet B-Ball" border=0></a>
</td>
<td align=center valign=bottom>
<br>
<br>
<a href="cmp/tunes/tunesframes.html"><img src="img/p-lunartunes.gif" height=77 width=95 alt="Lunar Tunes" border=0></a>
</td>
</tr>
<tr>
<td align=middle valign=top>
<br>
<br>
<a href="cmp/lineup/lineupframes.html"><img src="img/p-lineup.gif" height=52 width=63 alt="The Lineup" border=0></a>
</td>
<td colspan=3 rowspan=2 align=right valign=middle>
<img src="img/p-jamlogo.gif" height=165 width=272 alt="Space Jam" border=0>
</td>
<td align=right valign=bottom>
<a href="cmp/jump/jumpframes.html"><img src="img/p-jump.gif" height=52 width=58 alt="Jump Station" border=0></a>
</td>
</tr>
...
</table>

Estas são as duas primeiras linhas, incluindo o logotipo. Você entendeu a ideia. Tudo é posicionado dentro das células com aligne valign; freqüentemente aplicado rowspane colspan, há pouco <br>para ajustar o posicionamento vertical em uma linha, quando necessário.

Outros artefatos fantásticos podem ser encontrados na página, incluindo um cabeçalho que contém a sintaxe Apache SSI! Ele deve ter sido interrompido silenciosamente para todos quando o site mudou para hospedagem por muitos anos de vida. Agora ele está hospedado no Amazon S3. Bem, você conhece a Amazon? Livraria?

<table border=0 cellpadding=0 cellspacing=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>
</table>

Ok, veja a página do Jam Central . Por autenticidade, reduzi a resolução no navegador para 640 × 480 (embora, para uma imersão completa, eu devesse ter reservado um pouco mais de espaço vertical para a barra de título, a barra de tarefas e de cinco a seis barras de ferramentas do IE).

Preste atenção aos quadros: o logotipo no canto superior esquerdo retorna à página de destino, salvando corretamente um lugar na tela para não repetir toda essa navegação e no canto superior direito há um maldito banner de publicidade que foi bloqueado de sete maneiras diferentes. Todas as três partes são páginas separadas.

Observe também o texto completamente ilegível em vermelho em um plano de fundo texturizado, um dos sinais mais seguros do design dos anos 90. Você pode perguntar, por que não usar um plano de fundo normal para o texto? Você é um idiota. Como fazer isso? Afinal, o atributo backgroundé apenas com <body>! Você pode colocar uma mesa, mas as mesas suportam apenas um fundo sólido, parecerá chato!

Mas espere, o que é esse novo widget de navegação? Como você conseguiu travar todos os links? Outra mesa? Bem, não, embora muitas vezes os designers enchessem a mesa com pedaços de uma imagem cortada. Mas aqui temos o imagemap , uma função HTML há muito esquecida. Apenas mostre a fonte:

<img src="img/m-central.jpg" height=301 width=438 border=0 alt="navigation map" usemap="#map"><br>

<map name="map">
<area shape="rect" coords="33,92,178,136" href="prodnotesframes.html" target="_top">
<area shape="rect" coords="244,111,416,152" href="photosframes.html" target="_top">
<area shape="rect" coords="104,138,229,181" href="filmmakersframes.html" target="_top">
<area shape="rect" coords="230,155,334,197" href="trailerframes.html" target="_top">
</map>

Eu acho que tudo está mais ou menos claro aqui. O atributo usemapanexa um mapa de imagem, que é definido como um conjunto de áreas clicáveis lindamente codificadas por algumas coordenadas.

E ainda funciona! Em HTML! Você pode usá-lo agora mesmo! Embora provavelmente não.

Grade de miniaturas

Considere outra página aleatória. Por exemplo, "Foto do filme". (Espere, foto ? Naquela época, não conhecia as palavras “quadro” e “captura de tela”? Bem, tudo bem ...)

Outro conjunto de quadros, mas com arranjos diferentes.

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

Aqui, os desenvolvedores fizeram uma coisa importante: eles indicaram não apenas a imagem de fundo (opaca), mas também a cor de fundo. Caso contrário, o texto em branco sairia em um fundo branco se a imagem de fundo não fosse carregada.

(Outra diferença interessante em relação ao desenvolvimento moderno. Hoje, muitos designers supõem que todos os recursos serão baixados e, às vezes, apresentam o download como um inconveniente que precisa ser contornado. canal).

Mas voltando à própria página. As grades de miniaturas eram um problema clássico de design da web da época. O principal problema é que você deseja colocar as fotos lado a ladoe HTML por padrão os empilha em uma coluna grande. Naquela época, o designer tinha apenas uma ferramenta: uma mesa. Em nosso site, está estruturado da seguinte forma:

<table cellpadding=10>
<tr><td align=center><a href="..."><img src="..."></a></td>...</tr>
<tr>...</tr>
<tr>...</tr>
<table>

Uma grade de miniaturas 3 × 3 formatada a critério do navegador (a última imagem em uma linha separada não faz parte da tabela). O número de colunas não depende da largura da tela, mas naqueles dias todos tinham telas minúsculas, portanto isso não incomodava muito o designer. Aqui, as imagens não possuem legendas, mas, como cada uma delas é colocada em uma célula separada, elas podem ser facilmente adicionadas.

Essa foi a abordagem de exibição de miniaturas mais avançada em 1996. Voltaremos a esse pequeno quebra-cabeça da interface do usuário mais algumas vezes; Você pode ver exemplos reais (e código-fonte com marcação de exemplo) em uma página separada .

Vamos dar uma olhada no tamanho dos quadros “em tamanho real, em cores e com qualidade da Internet” do filme, por uma questão de interesse.

Ei, sim, eles têm menos de 16 KB! Essa imagem será carregada mais rapidamente do que em nove segundos!

(Lembro-me do problema com o vídeo incorporado, ele não pôde ser resolvido até a tag HTML5 aparecer <video>alguns anos depois. Até então, eu precisava usar algum plug-in proprietário e todos eram terríveis).

(Sim, a propósito: um quadro colorido foi adicionado às imagens dentro dos links por padrão. Aqui, a presença do link é óbvia, portanto o quadro parece redundante e irritante. Antes do CSS, eles deveriam ser desativados para cada imagem individual usando o atributo <img border=0>).

O layout usual daqueles tempos

Foi aí que começamos, e isso foi péssimo. Se você queria um estilo comum em mais de algumas páginas, suas possibilidades eram muito limitadas e a copiar e colar continuava sendo a única ferramenta. O site Space Jam optou por não se preocupar com a consistência do design - como muitos outros.

Então veio o CSS. Foi um verdadeiro milagre . Todas essas repetições de código em todas as páginas desapareceram. Deseja criar todas as manchetes de nível superior de uma cor específica? Sem problemas:

H1 {
    color: #FF0000;
}

Bam! E é tudo. Não importa quantos cabeçalhos existam <h1>no seu documento, cada um deles ficará em vermelho escaldante e você nunca mais precisará pensar nisso novamente. Ainda melhor: você pode colocar esse fragmento em seu próprio arquivo e aplicar essa opção estética duvidosa em todas as páginas do seu site sem quase nenhum esforço! O mesmo se aplica ao seu magnífico plano de fundo, cor do link e tamanho da fonte nas tabelas.

(Lembre-se de agrupar o conteúdo das tags <style>nos comentários HTML, caso contrário, navegadores mais antigos sem suporte a CSS os exibirão como texto).

Não é necessário aplicar tags a tudo em uma linha. O CSS introduziu os conceitos de "classes" e "ID"; portanto, o estilo se estende apenas a elementos especialmente marcados. Seletor de tipoP.importantaplica-se apenas a parágrafos da classe <P CLASS="important">, mas #headerafeta apenas <H1 ID="header">(a diferença é que os identificadores devem ser exclusivos no documento e as classes podem ser usadas inúmeras vezes). Usando essas ferramentas, você efetivamente cria suas próprias tags, obtendo uma versão individual do HTML exclusiva para o seu site!

Foi um grande salto em frente, mas naquela época ninguém (provavelmente) pensou em usar CSS para o layout. Quando a recomendação do CSS 1 foi publicada em 96 de dezembro , quase não tocava no layout, apenas separava as funções HTML existentes das tags às quais estão anexadas. Tivemos cores e plano de fundo da fonte graças a <FONT COLOR>e<BODY BACKGROUND>. A única coisa que pelo menos remotamente afetava a localização dos objetos na página era a propriedade floatequivalente <IMG ALIGN>, que puxava a imagem para o lado e incluía o fluxo de texto em torno dela, como em um jornal. Não é tão impressionante.

Mas isso não é surpreendente. Não havia ferramentas de layout reais em HTML, exceto tabelas, e as propriedades da tabela são muito difíceis de generalizar em CSS ou se relacionam à estrutura de tags; portanto, não havia nada a acrescentar ao CSS 1. Acabamos de automatizar um pouco, por exemplo, o uso de tags <FONT>, então o design da web tornou-se menos tedioso e menos propenso a erros, o código da página ficou mais limpo e muito mais fácil de manter. Um bom passo adiante, e todos o aceitaram com satisfação, mas as tabelas continuaram sendo a principal ferramenta de layout.

No entanto, isso era normal. Em geral, seu blog precisa apenas de um título e uma barra lateral. As tabelas funcionam bem com isso, e essa estrutura básica é adequada para a maioria das situações. Não é tão difícil copiar / colar algumas linhas <TABLE BORDER=0>e <TD WIDTH=20%>.

Por vários anos, esse foi o padrão. Tabelas para layout, CSS para ... bem, para estilo. Cores, tamanhos, negrito, sublinhado. Havia até um truque estúpido quando um link era enfatizado apenas quando o cursor do mouse estava sobre ele. A beleza!

(Curiosidade: o código HTML para a maioria dos serviços de email ainda não veio dessa época).

(E então eu vim para a indústria, com a idade madura de 11 anos, sem saber o que estava fazendo, e basicamente estudei com os outros 11 anos, que também não tinham ideia do que estavam fazendo. Uma grande parte da Rede foi criada por jovens de 11 anos crianças criando seus próprios sites, e isso foi ótimo. Por que ir a um site comercial se você pode se familiarizar com um hobby muito específico de um garoto ou uma garota do outro lado do planeta?)

Tempos sombrios

Um ano e meio depois, em meados de 1998, recebemos o CSS 2 (a propósito, adoro o pano de fundo dessa página). Esta foi uma atualização modesta, que eliminou algumas deficiências em várias áreas, mas a mais interessante foi a adição de um par de primitivas de posicionamento: a propriedade positionpermitiu colocar o elemento em coordenadas exatas, e o modo de exibição inline-blockpermitiu organizar blocos seguidos, um após o outro.

Uma fruta tão tentadora, mas inacessível! O uso positionparecia normal, mas o posicionamento exato em pixels contradizia seriamente o design flexível de HTML e, quando a tela era redimensionada, tudo necessariamente desmoronava ou surgiam outras falhas sérias. Este humilde inline-block pareciabastante interessante; no entanto, ele resolveu o principal problema do layout HTML, que consistia em colocar objetos em uma linha. Mas, a princípio, nenhum navegador implementou essa propriedade, então os designers a ignoraram.

Não sei ao certo por que motivo - talvez devido à aparência do posicionamento ou sob a influência de algum outro fator, mas nessa época os entusiastas decidiram tentar fazer o layout usando CSS. Idealmente, você pode separar completamente o conteúdo da sua página da aparência. Havia até um site CSS Zen Garden (ele ainda está vivo), que levou essa idéia ao extremo. Nele, o mesmo código HTML é convertido em projetos completamente diferentes após a aplicação de folhas de estilo diferentes.

O problema era que o suporte inicial ao CSS era um buggy. Olhando para trás, suspeito que os desenvolvedores de navegadores simplesmente duplicaram o processamento de tags HTML e acabaram com isso. O site RichInStyle ainda possui uma extensa lista de erros de CSS nos navegadores daqueles anos. Aqui estão alguns dos meus favoritos:

O IE 3 ignora todas as tags <style> no documento, exceto a última.
O IE 3 ignora as pseudo-classes, por isso a:hoverparece .
O IE 3 e o IE 4 tratam as bordas autocomo nulas. De fato, esse bug persistiu quase até a versão IE 6. Mas isso era normal, porque o IE 6 também era usado incorretamente text-align: centerpara elementos de bloco.
Se você especificar um URL absoluto para a imagem de plano de fundo, o IE 3 tentará abrir a imagem no programa local, como se você a tivesse baixado.
Netscape 4 , #id, h1#id .
Netscape 4 — ! — .
Netscape 4 <li> , .
float clear ( ), Netscape 4 Mac .

Foi com isso que tivemos que trabalhar. E as pessoas queriam criar um layout de página inteiro em CSS? Ha.

No entanto, a popularidade dessa idéia estava crescendo. Ele até se tornou um tipo de slogan unificador para a parte avançada da elite dos designers - a melhor prática, citada como o único argumento verdadeiro no debate. Usar tabelas para o layout é ruim, disseram eles. As tabelas confundem os leitores de tela (leitores de tela), eles são semanticamente incorretos, interagem mal com o posicionamento do CSS! Tudo isso é verdade, mas era muito difícil de aceitar.

Bem, voltemos a isso em um minuto. Primeiro, vejamos um pouco da atmosfera em que o desenvolvimento da web se desenvolveu na área de 2000.

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

A versão curta é a seguinte: a Netscape ganhou dinheiro vendendo o navegador Navigator (pago pelos negócios, gratuito para uso pessoal) e, em seguida, a Microsoft entrou no mercado com o Internet Explorer totalmente gratuito e, em seguida, teve a audácia de conectar o IE ao Windows. Você pode imaginar? Operando com um navegador ? Isso foi um grande negócio. A Microsoft processou , ela perdeu, mas, como resultado, quase nada mudou.

A Microsoft fez o que queria de qualquer maneira e funcionou. Ela praticamente destruiu o Netscape. Ambos os navegadores eram infernalmente com erros, mas com erros de maneiras diferentes. Portanto, um site testado em um navegador quase certamente desmorona em outro. Isso significava que quando a participação de mercado da Netscape caiu, os web designers prestaram menos atenção a ela, de modo que menos sites abriram normalmente nela, como resultado da participação da Netscape Navigator em queda ainda maior.

Provavelmente não são boas notícias para usuários em sistemas operacionais diferentes do Windows. O que é engraçado, porque havia o IE 5.5 para o Mac e geralmente era menos problemático do que o IE 6 (aliás, Bill Gates naquela época não era tanto um nerd brilhante quanto um empresário agressivo e cruel que fez fortuna para destruir intencionalmente qualquer concorrência que atrapalhe, o que acabou causando danos a toda a indústria, a propósito).

Quando o Windows XP com Internet Explorer 6 foi lançado, em meados de 2001, o Netscape Navigator passou de um enorme Juggernaut para um minúsculo anão para aplicativos de nicho.

E então, tendo tomado o mercado completamente e completamente, a Microsoft parou. Desde a sua criação, o Internet Explorer foi lançado a cada ano, mais ou menos, mas após o IE 6, houve um atraso de mais de cinco anos. Continuava com erros, mas na ausência de concorrentes não era evidente. Portanto, o Windows XP também parecia bom o suficiente para capturar o mercado de desktops, e a próxima versão do Windows também não foi lançada na mesma época.

Também interrompeu o trabalho do consórcio W3C, que aceita padrões (que não devem ser confundidos com W3Schools, sanguessugas de SEO). Em meados dos anos 90, o HTML foi revisado várias vezes e, em seguida, congelado como HTML 4. O CSS foi atualizado da primeira para a segunda versão em apenas um ano e meio, mas também congelou. Atualização secundária do CSS 2.1não alcançará o status de “recomendação de candidato” até o início de 2004 e levou mais sete anos para aceitar a versão final.

Nesta situação de domínio completo do IE 6, parecia que toda a rede parecia estar congelada no tempo. Os padrões não importavam, porque na verdade havia apenas um navegador. Tudo o que ele fez se tornou o padrão de fato. À medida que a Internet crescia em popularidade, o controle de estrangulamento do IE também tornava difícil o uso de qualquer plataforma que não fosse o Windows, pois o IE estava disponível apenas para Windows. Nunca foi possível garantir que o site funcione em qualquer outro navegador.

(Existe uma ideia de que os monopólios são ruins. Deve haver algum tipo de lei contra eles!)

Ao mesmo tempo, a Netscape piorou sua posição, tendo iniciado uma alteração em larga escala do motor. Como resultado, um padrão Netscape 6 muito mais consistente foi lançado, e o preço foi de vários anos de ausência no mercado, onde naquela época o IE continuava aumentando sua participação. O navegador Netscape 6 nunca chegará a 10%, enquanto o IE atingirá um pico de 96%. Por outro lado, o novo mecanismo saiu com fontes abertas como parte do Mozilla Application Suite, que mais tarde desempenhará um papel.

Mas antes disso havia mais alguns anos, mas por enquanto ...

Modo de compatibilidade

Todas as primeiras implementações de CSS nos navegadores estavam cheias de bugs. Talvez o mais notório deles seja um bug no modelo de contêiner (modelo de caixa).

Veja bem, um contêiner (o espaço retangular ocupado por um elemento) tem várias dimensões: largura e altura próprias, preenchimento, borda opcional e, em seguida, o campo que o separa dos contêineres vizinhos. CSS indica que todas essas distâncias se acumulam. Por exemplo, um contêiner com os seguintes estilos:

    width: 100px;
    padding: 10px;
    border: 2px solid black;

... terá 124 pixels de largura, de borda a borda.

No entanto, o IE 4 e o Netscape 4 adotaram uma abordagem diferente: eles viram a largura e a altura como uma dimensão de borda a borda, da qual as bordas e margens são subtraídas para obter a largura do próprio elemento. O mesmo campo nesses navegadores terá uma largura de 100 pixels de borda a borda e 76 pixels permanecerão para o conteúdo.

O IE 6 decidiu corrigir essa contradição com a especificação. Infelizmente, apenas fazer alterações quebraria o design de vários sites que funcionavam bem no IE e no Netscape.

Portanto, a equipe do IE apresentou um compromisso muito estranho: eles declararam o comportamento antigo (junto com vários outros erros importantes) como o "modo de compatibilidade" (modo quirks, literalmente "trabalhando com quirks") e o ativou por padrão . Para mudar para o novo "modo estrito" ou "padrão", era necessário especificar "doctype" no início do documento, antes da tag <html>. Parecia algo assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Por muitos anos, todos tiveram que inserir essa linha estúpida no início de cada documento HTML (o HTML5 mais tarde a simplificaria <!DOCTYPE html>). Se você pensar bem, essa é uma maneira realmente estranha de escolher o comportamento CSS correto. A declaração doctype faz parte da especificação HTML desde meados dos anos 90 , mas ninguém a usou. Acho que a ideia da Microsoft era permitir a escolha sem a introdução de extensões proprietárias. O uso dessa declaração pode evitar um comportamento inicialmente errado. Saída conveniente para a equipe do IE!

O engraçado é que o modo de compatibilidade com "peculiaridades" ainda existe. E ainda está instalado por padrãoem todos os navegadores, vinte anos depois! A lista exata de "peculiaridades" mudou ao longo do tempo. Em particular, nem o Chrome nem o Firefox usam o modelo de contêiner do IE, mesmo nesse modo, mas muitos outros erros são emulados.

Os navegadores modernos também têm um modo "quase padrão" que emula apenas uma peculiaridade. Talvez esta seja a segunda função mais escandalosa: se uma célula da tabela contiver apenas uma imagem, o espaço abaixo será excluído. De acordo com as regras CSS usuais, a imagem está na linha (vazia) de texto, que requer algum espaço abaixo - para elementos interlineares de letras, como "y". Os navegadores antigos não conseguiam lidar com isso normalmente; no entanto, alguns sites criados após o ano 2000 contavam com esse recurso, embora todo o resto fosse totalmente compatível. Por exemplo, eles cortam uma imagem grande em pedaços, que são colocados nas células da mesa próximas umas das outras. Se, de acordo com o padrão, adicionar espaço vazio, a imagem desmoronará.

Mas voltando ao passado. Embora os padrões tenham prevalecido formalmente, ele criou um novo problema. Como o IE 6 dominava a Web e as declarações do DOCTYPE eram opcionais, não era necessário pensar em oferecer suporte a esses padrões no "modo estrito" do navegador. Outros navegadores eventualmente o emularam , e o comportamento personalizado se tornou o padrão de fato. Os designers da Web que se preocuparam com essas coisas (para nosso crédito, havia muitos de nós) lançaram uma campanha de alto nível para ativar o modo estrito, pois esse era um primeiro passo absolutamente necessário para garantir a compatibilidade com outros navegadores.

Ascensão e queda de XHTML

Enquanto isso, o W3C perdeu o interesse no HTML em favor do XHTML. Esta é uma tentativa de redesenhar o HTML usando a sintaxe XML em vez de SGML.

(O que é SGML, você pergunta? Eu não sei. Ninguém sabe. Essa é a gramática na qual o HTML é criado e essa é a única coisa que se sabe sobre ele).

Para crédito do consórcio, naquela época havia razoavelmente boas razões para tal decisão. Como regra, o HTML foi escrito manualmente (como é agora), e isso significa a presença obrigatória de erros aleatórios. Os navegadores não rejeitaram o HTML com erros, mas envolveram vários métodos para corrigir erros - e, como em todo o resto, diferentes navegadores trataram os erros de maneira diferente. O HTML um pouco distorcido parecia funcionar bem no IE 6 (onde "funcionou bem" significa "fez o que você esperava dele"), mas se desfez completamente em outros navegadores.

O consórcio W3C escolheu XML porque no início dos anos 2000 eles viam XML como uma solução universal para todos os problemas. Se você não souber, o XML possui uma abordagem muito mais explícita e agressiva para o tratamento de erros - se o documento contiver um erro de análise, o documento inteiro será inválido. Isso significa que, se você selecionou XHTML e cometeu um erro de digitação, nada será exibido no navegador . Apenas um erro.

Isso é péssimo. À primeira vista, tudo parece normal, mas lembre-se: o XML universal geralmente é montado dinamicamente usando bibliotecas que tratam o documento como uma árvore que você manipula e, no final, o transforma em texto. Isso é ótimo para o uso geral de XML para serializar dados quando seus dados já são uma árvore e a maior parte da estrutura XML é simples e repetível, portanto é fácil ocultar funções.

HTML não é assim. Um documento HTML tem pouca estrutura de repetição confiável; mesmo este artigo na página é formatado principalmente por tags <p>, mas também contém inesperados <em>dentro do texto principal e aleatórios<h3>entre parágrafos. Não é muito divertido codificar isso na forma de uma árvore. E isso é importante, porque, ao mesmo tempo, a renderização do servidor estava ganhando força, e o HTML gerado antes e agora! - Entregue com modelos que o consideram um fluxo de texto.

Se as páginas HTML fossem documentos puramente estáticos, o XHTML poderia funcionar - você escreve um documento, vê-o em um navegador e sabe que tudo funciona. Sem problemas. Mas, para criar um documento dinamicamente e arriscar que, em alguma situação limítrofe, todo o site seja enganado e o visitante verá apenas um erro no navegador? Isso é péssimo.

É claro que a disseminação do novo padrão Unicode, na época, também teve um papel importante. Então nem sempre ficou claro como usá-lo, e uma sequência incorreta de UTF-8 era suficiente para considerar todo o documento XML como distorcido e "inválido"!

Então, depois de alguns mimos, quase nos esquecemos do XHTML. Ele deixou para trás apenas duas faixas:

Todo mundo parou de usar nomes de tags em maiúsculas! Tchau <BODY>, olá <body>! O XML diferencia maiúsculas de minúsculas e todas as tags XHTML eram minúsculas, portanto, as tags de título simplesmente não funcionaram (fato interessante: a API JavaScript ainda passa os nomes das tags HTML em maiúsculas). Provavelmente, isso se deve à crescente popularidade do destaque de sintaxe; não escrevemos mais no bloco de notas, como em 1997.
. , HTML : , <p>...</p>, <br>. <br> , </br>. XML : , <br/>, <br></br>.

XHTML , - , <br/> HTML-. XML ; HTML5 , . , <script/> <script> — HTML !

Sinto falta de apenas uma coisa no XHTML. Lá você pode usar a metalinguagem XSLT para tornar o modelo "dentro do navegador" (ou seja, inserir o conteúdo da página no layout geral do site) sem escrever scripts. Era a única maneira possível de fazer isso, e era muito legal se tudo desse certo. Mas alguma pequena falha pode estragar tudo.

A aparência do layout CSS

Voltar para CSS!

Você é um web designer iniciante e, por algum motivo, deseja tentar usar estilos CSS para layout, embora eles claramente sejam destinados apenas a cores e outras coisas. O que fazer?

Como mencionei, o principal problema é a posição horizontal dos objetos próximos um do outro . O posicionamento vertical não é um problema - este é um comportamento HTML normal. A única razão pela qual todos usam tabelas é porque podem dividir o material em células e organizá-las lado a lado em colunas.

O CSS 2 introduziu alguns modos de exibição que correspondem a partes da tabela. Mas para usá-los, você precisa dos mesmos três níveis de aninhamento que em tabelas reais: a própria tabela, depois a linha e a célula. Eles não estão aqui e, em qualquer caso, o IE não começará em breve a suportar esses modos.

Há mais position, mas ele constantemente procura colocar objetos em cima uns dos outros. Hmm

O que resta?

Na verdade, apenas uma ferramenta: float.

Eu disse que isso floatpermite que você faça jornal fluir pela imagem com texto, mas essa é uma descrição muito geral. Em princípio, pode ser aplicado a qualquer elemento. Se você precisar de uma barra lateral, incline-a para a borda esquerda, atribua uma largura de 20% da página e obtenha algo assim:

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

Infelizmente, as propriedades floatsão tais que o texto flui em torno dele. Assim, se o texto na página for maior que a barra lateral, ele aparecerá abaixo - e a ilusão será destruída. Mas pode ser contornado. As especificações do CSS esclarecem que o conteúdo floatnão pode fluir entre si, portanto basta colocar mais um float!

+ --------- + + ----------------------------------- +
| barra lateral | | Olá e bem vindo ao meu site! |
| | | |
+ --------- + | Aqui está um parágrafo mais longo para mostrar |
            | que meu CSS de galáxia cerebral flutua |
            | absurdo impede quebra de texto. |
            + ----------------------------------- +

Essa abordagem funcionou, mas suas limitações eram muito piores que as da tabela. Por exemplo, se você adicionar um rodapé, ele subirá à direita do texto principal, porque para o navegador o “cursor” ainda está no topo, à direita dos blocos flutuantes. Portanto, você precisa usá- clearlo para fixar um elemento em todos os flutuadores. E se você criou a barra lateral em 20% da largura da página e o corpo em 80%, qualquer espaço entre eles empurrará a página para fora da tela e exibirá uma barra de rolagem horizontal feia. Você sempre precisa se lembrar dessa aritmética estúpida. Se você tiver bordas ou fundos em ambos os lados, eles terão alturas diferentes; portanto, você deve fazer coisas realmente grotescas para queconsertá-lo. E os leitores de tela lerão a barra lateral inteira antes de passar para o texto principal, o que é bastante rude para os usuários. Portanto, você precisa usar uma configuração ainda mais complexa com três colunas, das quais a primeira aparece no meio em HTML.

Como resultado, obtemos um design que parece bonito, funciona bem e dimensiona corretamente, mas é descrito por um código CSS extremamente caótico. Nada do que você escreveu realmente correspondia ao que você queria - e essas são as partes principais do design, e não as molduras laterais! Era difícil entender como o código CSS está conectado e o que aparece na tela. E então a situação se tornará muito pior antes de finalmente melhorar.

Grade de miniaturas - 2

Armado com um novo brinquedo, podemos melhorar nossa grade em miniatura. O layout da tabela original era incrivelmente entediante, mesmo que você não fornecesse semântica de tags. Agora você pode fazer melhor!

<ul class="thumbnail-grid">
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    ...
</ul>

Isso é ideal: o HTML armazena o conteúdo da página de alguma forma razoável e, em seguida, o CSS descreve como ele realmente se parece.

Infelizmente, a implementação floatserá um pouco rude. Esta nova versão se adapta melhor a diferentes tamanhos de tela, mas requer alguns hacks: as células devem ter uma altura fixa, centralizar toda a grade é bastante difícil e o efeito da grade desaparece com elementos mais amplos. Torna-se claro que temos quase a mesma tabela, mas com um número flexível de colunas. Estamos apenas tentando imitá-lo.

Você também precisa desse feitiço estranho clearfix, notório naquela época. Como o float não move o "cursor", então<ul>com elementos de flutuação altura zero. Ele termina exatamente onde começa e todas as miniaturas flutuantes dormem o suficiente a partir de baixo. Pior, como todos os elementos subseqüentes não têm flutuadores adjacentes , eles ignoram completamente as miniaturas, continuando a renderizar sob uma “grade” vazia - criando uma bagunça!

A solução é adicionar um elemento fictício no final da lista, que não ocupa espaço, mas com um atributo CSS clear: both, que o omite em todos os carros alegóricos. Isso empurra efetivamente o último por <ul>baixo das miniaturas e adere-o perfeitamente a partir de baixo.

Mais tarde, os navegadores começarão a suportar pseudo-elementos de "conteúdo gerado" ::beforee::after, que abandonará completamente o elemento fictício. As folhas de estilo de meados dos anos 2000 costumavam incluir as seguintes linhas:

.thumbnail-grid::after {
    content: '';
    display: block;
    clear: both;
}

E, no entanto, era melhor que as mesas.

DHTML

Como uma breve digressão no mundo do JavaScript, a propriedade new-fangled ativou position verdadeiramente um layout dinâmico. Oponho-me sinceramente a uma heresia, até porque ninguém nunca fez isso direito, mas foi divertido de interpretar.

Assim começou a era do "HTML dinâmico", ou seja, HTML com efeitos JavaScript. Agora, esse termo ficou completamente fora de moda, porque agora não podemos criar nem mesmo um blog estático, sem JavaScript. Tudo começou muito mais inofensivo: os adolescentes colados na página brilharam após o cursor do mouse ou um pequeno relógio analógico que funcionava em tempo real.

A coleção mais popular desses scripts foi o Dynamic Drive. - Este site ainda existe milagrosamente. Provavelmente contém centenas de brinquedos que não foram atualizados desde o início dos anos 2000.

Se você não quiser se aprofundar nessa coleção, aqui está um exemplo: todos os anos (exceto o atual, quando esqueci, desculpe) no meu aniversário, gosto de adicionar confetes e outras bobagens ao meu blog. Sou muito preguiçosa, então comecei a tradição com a ajuda deste script, que encontrei em algum lugar . Ele foi originalmente projetado para flocos de neve e colocado na página um monte de fotos com position: absolute, e depois alterando repetidamente suas coordenadas.

Compare isso com a versão que escrevi do zero há alguns anos : aqui está apenas um pequeno código JSpara personalizar as imagens e, em seguida, o navegador as anima usando CSS. Este é um script um pouco menos funcional, mas permite que o navegador faça todo o trabalho, possivelmente mesmo com a aceleração de hardware. É assim que chegamos.

Web 2.0

Tempos sombrios não podem durar para sempre. Houve uma série de eventos que nos puxaram para a luz.

Um dos principais eventos foi o lançamento do Firefox - ou, para os mais avançados, inicialmente o Phoenix e o Firebird. A versão 1.0 apareceu em novembro de 2004 - e começou a mordiscar bem o IE. O navegador trabalhou no núcleo reescrito do Netscape 6, que é extraído do coração do Mozilla Suite para um aplicativo separado. Foi rápido, simples e muito melhor em manter os padrões, embora absolutamente nada disso importasse.

O verdadeiro era que o Firefox tinha abas. No IE 6, eles não estavam. Se você queria abrir uma segunda página da web, abriu uma nova janela. Isso é péssimo. O Firefox se tornou um verdadeiro milagre.

Obviamente, o Firefox não foi o primeiro navegador com abas, eles também existiam no navegador completo do Mozilla Suite e no Opera avançado que existem há séculos. Mas, por várias razões, foi o Firefox que decolou, principalmente pelo fato de não ter um painel de publicidade gigante no topo, como o Opera.

Obviamente, os designers promoveram o Firefox em conexão com o suporte a padrões, mas esse argumento atraiu apenas outros designers, não seus pais. Uma das demonstrações mais populares e espetaculares foi o teste Acid2 , projetado para testar os modernos padrões da web. Ele mostrou um belo sorriso, se os padrões foram elaborados corretamente, e uma imagem infernal no IE 6 .

Resultado do teste Acid2 no navegador IE 6

O Firefox inicial não era perfeito. Mas, é claro, ele suportava os padrões muito melhor, e você podia ver o progresso até que o navegador passasse por todos os testes com o lançamento do Firefox 3. O

Firefox também foi ajudado pelo mecanismo JavaScript mais rápido: isso foi antes do JIT. Foi muito, muito mais rápido que o IE. Por exemplo, tanto quanto me lembro, o IE 6 implementou a getElementByIditeração em todo o documento, mesmo no caso de identificadores exclusivos. Dê uma olhada no anúncio antigo dos lançamentos do jQuery , eles geralmente são acompanhados por um cronograma de desempenho, no qual todos os navegadores fazem pedidos mais rapidamente que o IE 6-8.

Ah, e o IE 6 era uma brecha gigantesca na segurança, especialmente com suporte nativo a componentes binários arbitrários que só precisavam clicar em “Sim” na caixa de diálogo abstrusa para obter acesso completo e ilimitado ao seu sistema. Provavelmente isso não contribuiu para a reputação do IE.

De qualquer forma, com o advento da menor alternativa ao IE, mesmo os designers mais cruéis não puderam apenas otimizar o site para o IE 6 e terminar aí. Agora havia um motivo para usar o modo estrito, havia um motivo para se preocupar com compatibilidade e padrões, e o Firefox fazia esforços constantes para cumpri-los o máximo possível, enquanto o IE 6 permanecia em estagnação.

(Eu diria que esse efeito abriu as portas para o OS X e também para o iPhone. Não estou brincando! Pense nisso: se o navegador do iPhone não funcionasse com nada, porque todo mundo ainda criava sites para o IE 6, continuaria sendo apenas uma alternativa cara à Palm. Lembre-se de que, a princípio, a Apple nem queria lançar seus próprios aplicativos - contava com a Internet).

(A propósito, o Safari foi lançado em janeiro de 2003, com base no fork do KHTML do navegador KDE Konqueror. Acho que usei o KDE na época, então foi muito interessante, mas ninguém realmente pensou no OS X com ele ridícula quota de mercado de 2%).

Outro fator importante apareceu em 1º de abril de 2004, quando o Google anunciou o Gmail. Haha É ridículo. Interface web conveniente para correio? Boa piada, google.

Ah Merda. Eles não estão brincando.Como essa coisa interativa funciona?

Hoje, todo desenvolvedor da Web sabe a resposta - esse é XMLHttpRequest, assim nomeado porque ninguém nunca o usou para consultas XML. Foi inventado pela Microsoft para correio do Exchange e depois clonado pela Mozilla (apenas cito na Wikipedia ).

O importante é que XMLHttpRequest permite fazer uma solicitação HTTP a partir do JavaScript. Agora você pode atualizar apenas parte da página com os novos dados, completamente em segundo plano, sem recarregar. Ninguém tinha ouvido falar disso antes, e quando o Google lançou um cliente de e-mail inteiro, era uma mágica absoluta.

Talvez tudo isso seja um erro que levará a um futuro infernal, onde páginas estáticas carregam três parágrafos de texto em segundo plano usando XHR sem motivo aparente, mas esse é o tópico de outro artigo .

Na mesma linha, o jQuery, um milagre semelhante, foi lançado em agosto de 2006. Ele não apenas descreveu as diferenças entre as APIs do IE “JScript” e as abordagens padrão adotadas por todas as outras (o que foi feito anteriormente por outras bibliotecas), mas também simplificou bastante o trabalho com grupos inteiros de elementos ao mesmo tempo, o que historicamente permaneceu uma enorme dor de cabeça. Agora é muito fácil aplicar CSS em qualquer lugar do JavaScript! Essa é uma péssima idéia, mas nessa situação não havia opção melhor!

Ouvi você se importar: JavaScript novamente! Este é um artigo sobre CSS?

Você está absolutamente certo! Menciono a crescente popularidade do JavaScript, porque foi isso que levou diretamente ao estado atual do CSS, graças a outro grande fator:

Ambição

O Firefox mostrou que os navegadores podem crescer rapidamente - todas as novas melhorias no Acid2 foram empolgantes. O Gmail nos mostrou que a Web é capaz de mais do que apenas exibir texto simples com flocos de neve caindo.

E as pessoas começaram a fantasiar .

O problema era que os navegadores não melhoraram. O Firefox estava, em alguns aspectos, mais rápido e mais aderente à especificação CSS, mas basicamente não fez nada de novo. Somente a caixa de ferramentas melhorou e isso afetou principalmente o JavaScript. CSS é uma linguagem estática, portanto você não pode escrever uma biblioteca para aprimorá-la. Criar CSS usando JavaScript era possível, mas, caramba, é sempre uma má ideia.

Outro problema foi que o CSS 2 é realmente bom apenas para modelar retângulos. Foi maravilhoso nos anos 90, quando todos os sistemas operacionais tinham uma interface de estilo retangular. Mas chegou a hora do Windows XP e OS X, onde tudo se tornou brilhante, brilhante e arredondado. Foi um pouco estranho que cantos arredondados e marcas de seleção com sombras estejam no seu navegador de arquivos , mas em nenhum lugar da Internet.

Então os tempos sombrios retornaram.

A Era do Hack CSS

Os designers queriam muito do que o CSS simplesmente não podia oferecer.

Cantos arredondados. Os quadrados ficaram fora de moda e agora todos queriam botões com cantos arredondados, já que “o futuro está com eles” (os botões nativos também ficaram fora de moda por algum motivo). Infelizmente, o CSS não pôde fazer isso. Suas opções:
1. . , . .
2. , . , .
3. , 3×3 . JavaScript.
4. , - lol
, IE 6 PNG 8- - ; 1-, , , GIF. , :
```
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bite-my-ass.png');
```
: ! . .
. CSS 3 opacity… IE, filter. , PNG, … , .
jQuery , fadeIn, . - , 2000- Linux ( ) .

, , JavaScript, . , , .
! . , , , . CSS , <tr class="odd"> (, !) - jQuery.
CSS 2 >, , ul.foo > li , , IE 6 — — !

Mas todas essas são considerações puramente estéticas. Se você estava interessado no layout, bem, a aparência do Firefox imediatamente tornou sua vida muito mais fácil e muito mais complicada.

Você se lembra inline-block? O Firefox 2 realmente suporta! Era um bug e escondido atrás do prefixo do fornecedor, mas funcionava mais ou menos, o que permitia aos designers tentar usá-lo. E então saiu o Firefox 3, que o suportava mais ou menos normalmente, o que parecia um milagre. A terceira versão da nossa grade de miniaturas não é mais complicada que a largura e inline-block:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
}

A idéia geral inline-blocké que o interior atue como um bloco, mas o próprio bloco seja colocado em texto simples, como uma imagem. Assim, cada miniatura é colocada em um contêiner, mas todos esses contêineres ficam próximos um do outro e, por sua largura igual, entram na grade. E como é funcionalmente uma linha de texto, não há efeitos estranhos no restante da página, como ocorreu com o float.

Obviamente, houve algumas desvantagens. Por exemplo, nada pode ser feito com o espaço restante; portanto, havia o risco de um campo grande aparecer à direita em telas grandes não padrão. Havia também o problema de quebra de malha por uma célula larga. Mas pelo menos não é um carro alegórico.

Um pequeno problema permaneceu: IE 6. Ele tecnicamente suportavainline-block, mas apenas em elementos incorporados naturalmente como <b>e <i>, mas não <li>. Não é assim que você realmente deseja (ou pensa) usar inline-block. Eh.

Felizmente, em algum momento, um gênio absoluto descobriu uma hasLayoutotimização interna no IE que marca se o elemento tem ... uh ... marcação. Ouça, eu não sei. Basicamente, ele altera o caminho de renderização dos elementos - portanto, não são esses, mas outros bugs que aparecem , como o modo de compatibilidade baseado em cada elemento! Como resultado, verifica-se que tudo isso funciona no IE 6, se você adicionar algumas linhas:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
    *zoom: 1;
    *display: inline;
}

Os asteriscos no início tornam a propriedade inválida, portanto os navegadores devem ignorar a cadeia inteira ... mas, por algum motivo desconhecido, 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 - sublinhado). Uma propriedade zoom é uma extensão da Microsoft que dimensiona tudo, com o efeito colateral de definir a propriedade de layout para o elemento. E ele display: inline deve forçar cada elemento a inserir seu conteúdo em uma grande linha de texto, mas o IE processa o elemento inlinecom a propriedade "markup", algo como inline-block.

E aqui vemos o verdadeiro potencial dos hacks CSS. As regras específicas do navegador, com sintaxe intencionalmente ruim que um navegador ignoraria, reproduzem um efeito ainda incompreensível do que você está escrevendo. Livros inteiros explicaram como tornar algo simples, como uma grade, mas para que isso funcione na maioria dos navegadores da época. Você também verá * html, html > /**/ bodye todo tipo de outras bobagens. Aqui está a lista completa ! E lembre-se do hack "clearfix"? A versão completa , compatível com todos os navegadores, é um pouco pior:

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

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

Era uma era de copiar e colar às cegas em tentativas inúteis de fazer essa maldita coisa funcionar. Exemplo: alguém (uma vez eu descobri o código-fonte, mas não consigo encontrá-lo agora) teve a estranha idéia de sempre instalar body { font-size: 62.5% }, uma vez que as unidades relativas são supostamente "boas", com o desejo de substituir o tamanho padrão da fonte do navegador padrão de 16px (que, acontece certo) e a necessidade de lidar com erros do IE. Depois de algum tempo, ele parou de fazer isso, mas o estrago estava feito, e milhares de sites agiram dessa maneira, considerando as "melhores práticas". Isso significa que, se você quiser alterar o tamanho da fonte padrão do seu navegador em qualquer direção, você terá disparates - se você reduzi-lo e várias páginas da web se tornarem microscópicas, se você aumentar, tudo ficará pequeno se você aumentar ainda mais. , os sites que respeitam sua decisão se tornarão enormes. Hoje, pelo menos, temos uma escala melhor, eu acho.

Sim, e lembre-se: o StackOverflow ainda não apareceu. Todo o conhecimento foi passado de boca em boca. Se você tiver sorte, conhece alguns sites com dicas como QuirksMode e Eric Meyer.

Na verdade, confira o site css / edge de Mayer . Existem alguns exemplos loucos que as pessoas fizeram, mesmo com apenas o CSS 1, em 2002. Eu ainda acho que a espiral complexa é um gênio puro, embora hoje em dia tudo esteja acabado opacitye com apenas uma imagem. Os métodos do raggedfloat receberam apenas suporte nativo ao CSS apenas alguns anos atrás, com o advento do shape-outside! Este autor também nos redefiniu o CSS , eliminando as diferenças entre os estilos de navegador padrão.

(O papel de Eric Meyer no CSS é difícil de superestimar. Quando sua filha Rebecca morreu seis anos atrás, ela foi imortalizada com sua própria cor CSS, redecapurple, um caso único. É o quanto a comunidade online aprecia! Bem, agora eu tenho que chorar um pouco por essa história.)

O futuro está chegando, mas gradualmente

Designers e desenvolvedores gradualmente expandiram os limites do que os navegadores são capazes. Até agora, os navegadores conseguiram um pouco mal. Todas as correções, soluções alternativas e bibliotecas eram secretas, frágeis, propensas a erros e / ou pesadas.

Obviamente, os navegadores precisavam de novas funcionalidades. Mas apenas liberá-lo não foi suficiente; A Microsoft fez muito disso e, basicamente, levou a uma nova bagunça.

Mas várias tentativas desesperadas ocorreram. Como a cabeça do W3C ainda estava em seu próprio ânimo - rejeitando até as melhorias propostas em HTML em favor do XML - alguns dos desenvolvedores de navegadores ativos (Apple, Mozilla e Opera) decidiram criar seu próprio clube. Em junho de 2004, o grupo de trabalho WHATWG foi formado e começou a trabalhar no padrão HTML5. Por fim, elimina completamente a necessidade de XHTML e elimina vários problemas de segurança ao trabalhar com HTML comum. Além disso, forneceu alguns novos benefícios, como suporte nativo para controles de áudio, vídeo e formulário para datas e cores. E outras coisas que são desajeitadamente suportadas pelos controles JavaScript. E, hum, eles ainda são desajeitadamente apoiados lá.

Depois veio o CSS 3. Não sei em que momento isso aconteceu. Ele apareceu lentamente, com todas as suas forças, como uma garota nascida de um ovo e não com pressa, caramba, para ir a lugar nenhum.

Eu posso fazer muitas suposições razoáveis. Eu acho que começou com 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 em 1999.

Veja, a própria interface de usuário do Firefox é renderizada usando CSS. Se a Mozilla queria fazer algo que não podia ser feito com CSS, ela adicionou sua própria propriedade com um prefixo -mozpara indicar que era sua própria invenção. E, se não houver nenhum dano real, disponibilizará a propriedade para sites.

Acho que o impulso para o CSS 3 realmente começou quando o Firefox decolou - e os designers descobriram a propriedade -moz-border-radius. De repente, cantos arredondados embutidos apareceram! Chega de confusão no Photoshop, basta escrever uma linha! Quase da noite para o dia, cantos redondos e redondos eram vistos em todos os lugares.

E a partir daí tudo rolou como uma bola de neve. Problemas comuns foram resolvidos um por um com a ajuda de novas funções CSS, que foram combinadas em uma nova versão do CSS - CSS 3. Os principais solucionaram os problemas de design mencionados anteriormente:

Cantos arredondados com border-radius.
Gradientes usando linear-gradient()etc.
O fundo múltiplo em si não era um problema, mas facilitava algumas outras coisas.
Transparência usando opacitye canal alfa em cores.
Sombras em recipientes.
, CSS 2, 2.1 .
(border image), , .
jQuery ( JS ).
:nth-child(), CSS.
. , ? SVG, , . , , , CSS! . .
Fontes da Web que estão em CSS há algum tempo, mas implementadas apenas no IE e apenas com algumas fontes estúpidas carregadas por DRM. Agora não estamos limitados às quatro fontes ruins que acompanham o Windows e que ninguém mais possui!

Foi ótimo! Esses recursos não resolver todos os problemas de layout, mas eles se resolver problemas estéticos que os designers usados para trabalho em torno desajeitadamente usando um monte de imagens e / ou JavaScript. Isso significava menos downloads e menos fotos usadas em vez de texto, o que era muito bom para a web.

A grande ironia é que esses efeitos de design saíram de moda quase imediatamente, e agora estamos de volta a retângulos planos.

Prefixos de fornecedor infernal nos navegadores

Ai! O mundo ainda não estava bem.

Alguns desses novos aparelhos foram desenvolvidos originalmente por fabricantes de navegadores e são prefixados. Alguns dos últimos foram desenvolvidos pelo comitê de CSS e depois implementados pelos navegadores quando o design ainda estava em desenvolvimento. Então, havia prefixos aqui também.

E o inferno de prefixos começou , que continua até hoje.

O Mozilla era -moz-border-radius, portanto, quando o Safari o implementou, o chamou -webkit-border-radius("WebKit" é o nome do garfo da Apple KHTML). Em seguida, a especificação CSS 3 padronizou e o nomeou simplesmente border-radius. Isso significava que, se você quiser usar bordas arredondadas, precisará definir três regras:

element {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

Os dois primeiros incluíram o efeito nos navegadores atuais e o último é registrado para o futuro: quando os navegadores implementarem a regra real e eliminarem os prefixos, ele entrará em vigor.

Você precisava fazer isso o tempo todo, porque 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 introduziam suas próprias implementações com prefixos -o-e -ms-, como resultado, o número total de linhas chegava a cinco. Com gradientes, ficou muito pior; a sintaxe passou por várias revisões incompatíveis sérias, portanto você não pode nem copiar / colar e alterar o nome da propriedade!

E muitos designers, bem, estragaram tudo. Não posso culpá-los demais; Quero dizer, é uma merda. Mas muitas páginas indicavam apenas formulários de prefixo, e não o formato final; portanto, os navegadores precisavam manter formulários de prefixo por mais tempo do que gostariam de não quebrar nada. E se o formulário de prefixo ainda funcionar, e você estiver acostumado a usá-lo, talvez não precise realmente de uma opção universal.

Pior, alguns usarão apenas o formulário que funciona em seu navegador favorito. As coisas ficaram especialmente ruins com o surgimento de navegadores da web móveis. Os navegadores internos no iOS e Android são Safari (WebKit) e Chrome (originalmente WebKit, agora fork), portanto, você só precisa do prefixo -webkit-. O que tornou a Mozilla mais difícil quando lançou o Firefox para Android.

Lembra daquela falha no IE 6? Aqui estamos de novo! A situação era tão ruim que a Mozilla finalmente decidiu implementar uma série de recursos -webkit-que ainda são suportados, mesmo no Firefox para desktop. A situação é tão estúpida que o Firefox agora suporta apenas alguns efeitos por meio dessas propriedades, como -webkit-text-stroke , que não é padronizado.

Além disso, o atual mecanismo bifurcado do Chrome é chamado Blink, portanto, tecnicamente, ele não deve usar propriedades -webkit-. E ainda assim eles são. Pelo menos isso não é tão ruim quanto confundir seqüências de agentes do usuário .

Agora, os criadores de navegadores abandonaram amplamente os prefixos; em vez disso, eles ocultam as funções experimentais atrás das bandeiras (portanto, elas só funcionarão em máquinas de desenvolvimento que as forçam). Teoricamente, novos recursos devem ser menores e mais fáceis de estabilizar.

Essa bagunça toda provavelmente se tornou um grande fator motivador para o desenvolvimento do Sass e do LESS , as duas linguagens que produzem o código CSS (pré-processadores). Eles têm objetivos muito semelhantes: ambos adicionam variáveis, funções e algumas formas de macros ao CSS, o que permite excluir muitas repetições, hacks do navegador e outras bobagens do seu código. Inferno, eu ainda uso o SCSS , embora o uso geral do setor esteja diminuindo gradualmente.

Flexbox

Mas então, como se um anjo desceu do céu ... flexbox .

O Flexbox existe há muito tempo - o suporte parcial supostamente estava de volta ao Firefox 2, já em 2006! Ele passou por várias revisões incompatíveis e levou uma eternidade para se estabilizar. Então, o IE não conseguiu implementar o suporte por anos e você não deseja confiar no layout que funciona para apenas metade do seu público. Apenas relativamente recentemente (2015? Mais tarde?), O Flexbox recebeu amplo suporte suficiente para uso seguro. E posso jurar que ainda encontro pessoas cujo Safari não o reconhece sem prefixos, embora o Safari pareça ter 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 vários filhos e o pai tem algum espaço livre e é automaticamente compartilhado entre os filhos. E isso coloca os objetos um ao lado do outro .

A idéia geral é que o navegador calcule quanto espaço livre o pai possui e o "tamanho inicial" de cada filho, calcula quanto espaço extra existe e o distribui de acordo com a flexibilidade de cada filho. Imagine uma barra de ferramentas: você pode atribuir a cada botão um tamanho fixo (flex 0), mas adicione espaçadores que dividam o espaço restante igualmente, portanto, flexione 1.

Uma vez feito isso, você também terá várias opções para opções convenientes: você pode distribuir espaço adicional entre as crianças, pode esticá-las para a mesma altura ou alinhá-las de maneiras diferentes; você pode até transferi-las para várias linhas, se tudo não couber!

Com isso, podemos otimizar ainda mais nossa grade de miniaturas :

.thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
}
.thumbnail-grid li {
    flex: 1 0 250px;
}

Isto é apenas um milagre. Você pode esquecer imediatamente inline-block. Este código expressa muito claramente o que precisamos.

…por pouco. Ele ainda tem um problema de que células muito largas rasgarão a grade, já que essa ainda é uma linha horizontal, transferida para várias linhas independentes. Mas isso ainda é muito legal e resolve vários outros problemas de layout. Provavelmente é o suficiente. Se ao menos ...

eu diria que a introdução massiva do flexbox deu início à era moderna do CSS. Havia apenas um problema não resolvido.

Morte lenta e dolorosa do IE

O IE 6 deixou o mercado por muito tempo. Até o início de 2010, mais ou menos, não poderia ter caído abaixo de 10% do mercado (ainda um grande pedaço).

O Firefox atingiu a versão 1.0 no final de 2004. O IE 7 saiu apenas dois anos depois, ofereceu apenas melhorias modestas, sofrendo de problemas de compatibilidade com sites para o IE 6, e muitos usuários do IE 6 (principalmente usuários inexperientes) não viram nenhum motivo para a atualização. O Vista vem com o IE 7, mas acabou sendo um tipo de falha - não acredito que, em toda a minha vida, ele tenha quase ultrapassado o XP.

Outros fatores incluíam políticas corporativas de TI, que geralmente assumem a forma de "nunca atualizam nada" - e geralmente por um bom motivo, porque ouvi inúmeras histórias sobre aplicativos internos que só funcionavam no IE 6 por todos os tipos de motivos terríveis. Havia toda a Coréia do Sul , que era legalmente obrigada a usar o IE 6 porque eles consagravam na lei alguns requisitos de segurança que só podiam ser implementados usando o controle ActiveX no IE 6.

Portanto, se você suportasse o site usado - ou pior, necessáriopara uso - por pessoas de negócios ou de outros países, você está praticamente paralisado com o suporte ao IE 6. As pessoas que criaram pequenas ferramentas e sites pessoais abandonaram imediatamente a compatibilidade com o IE 6 e exibiram banners cada vez mais desagradáveis para sites nos usuários do IE 6 ... Mas se você é um empresário, como explicar a perda instantânea de 20% do público potencial? Apenas trabalhe mais!

Ao longo dos anos, o estresse aumentou à medida que o CSS se tornou cada vez mais funcional e o IE 6 permaneceu uma âncora. Ele ainda não entendia PNG alfasem soluções alternativas e, enquanto isso, tínhamos funções cada vez mais importantes, como vídeo nativo em HTML5. As soluções alternativas ficaram cada vez mais confusas, e a lista de funções que você simplesmente não podia usar estava ficando mais longa. Eu mostraria a aparência do meu blog no IE 6, mas é improvável que você se conecte a ele - o TLS suportado é tão antigo e quebrado que já está desativado na maioria dos servidores!

Solicitações separadas vieram de desenvolvedores individuais da equipe do YouTube. Sem pedir permissão a ninguém, em julho de 2009 eles adicionaram um banner de aviso pedindo aos usuários do IE 6 que mudassem para algooutro, pois o suporte ao navegador herdado terminará em breve. Em um mês, a participação global do tráfego do IE6 caiu mais de 10%. Nem todos os heróis usam capas de chuva.

Eu marcaria o início do final do IE6 naquele dia em que o YouTube realmente desativou o suporte para o IE 6. Isso aconteceu em 13 de março de 2010, quase nove anos após o lançamento desta versão do navegador. Não sei o quanto o YouTube afeta usuários corporativos ou o governo sul-coreano, mas a recusa de uma grande empresa da web em oferecer suporte a um navegador inteiro envia uma mensagem bastante forte.

Obviamente, havia outras versões do IE, e muitas delas eram uma dor de cabeça diferente. Mas cada um dos seguintes ficou menos doloroso e agora você não precisa pensar muito em testar no IE (agora Edge). É hora da Microsoft abandonar seu próprio mecanismo de renderização e mudar para o clone do Chrome.

Agora

CSS é muito bom agora. Você não precisa de hacks estranhos para colocar objetos próximos. As ferramentas de desenvolvimento do navegador agora estão embutidas e incrivelmente incríveis - o Firefox começou a avisá-lo especificamente quando algumas propriedades CSS não entram em vigor devido aos valores de outras propriedades! Efeitos colaterais implícitos pouco claros, como "contextos de empilhamento", agora podem ser definidos explicitamente como propriedades isolation: isolate.

De fato, deixe-me listar tudo o que vem à mente sobre os recursos modernos de CSS. Este não é um guia para todos os usos possíveis de estilos, mas se seu conhecimento de CSS não for atualizado desde 2008, espero que isso aumente seu apetite. E tudo isso é apenas CSS! Agora tudo o que era impossível, doloroso ou necessário plug-ins desajeitados agora é suportado inicialmente - áudio, vídeo, desenho à mão livre, renderização em 3D ... para não mencionar as enormes melhorias ergonômicas no JavaScript.

Layout

O contêiner da grade pode fazer quase tudo o que as tabelas fizeram e ainda mais, inclusive determinar automaticamente o número de colunas. Isso é incrivelmente incrível. Mais sobre isso abaixo.

O contêiner flexbox decompõe seus filhos em uma linha ou coluna, permitindo que todos declarem seu tamanho padrão e quanto espaço eles desejam usar. Você pode agrupar esses contêineres, reorganizar os filhos sem alterar a ordem de origem e alinhar os filhos de várias maneiras.

As colunas podem dividir o texto, bem, em várias colunas.

Propriedadebox-sizingpermite selecionar o modelo de contêiner do IE para elementos individuais, se você desejar que o elemento inteiro ocupe uma quantidade fixa de espaço, e as bordas e os recuos sejam subtraídos da largura total .

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

widthagora pode ser configurado para min-content, max-contentou uma função fit-content()para o comportamento mais flexível.

white-space: pre-wrapmantém espaços, mas quebra as linhas sempre que necessário para evitar o estouro Também é útil pre-line, que recolhe espaços para um, mas preserva novas linhas literais.

text-overflowcorta o texto detalhado usando reticências (ou um caractere personalizado) quando o limite é excedido e não apenas o trunca. Também nas especificações está a função de ocultar suavemente o texto (desaparecer), mas ainda não foi implementado.

shape-outsidealtera a forma do fluxo de texto. Pode até usar o canal alfa da imagem como um formulário.

resizefornece a um elemento arbitrário um descritor de redimensionamento (se houver excesso).

writing-modedefine a direção da letra. Se o seu projeto tem de operar em vários modos, algumas propriedades CSS apoiar isso, você pode usá-los como uma alternativa para as propriedades padrão: inset-blocke inset-inlinepara o posicionamento, block-sizee inline-sizepara a largura / altura, border-blocke border-inlinepara as fronteiras, e propriedades semelhantes ao travessão.

Estética

As transições CSS interpolam suavemente um valor sempre que ele é alterado, seja devido a um efeito de tipo :hoverou, por exemplo, a uma classe adicionada a partir do JavaScript. As animações CSS são semelhantes, mas reproduzem animações predefinidas automaticamente. Ambos podem aplicar várias funções diferentes de "suavidade" .

border-radiusarredonda os cantos do recipiente. Todos os cantos podem ter tamanhos diferentes e também podem ser redondos ou elípticos. A curva também se aplica à borda, plano de fundo e quaisquer sombras do retângulo.

Sombras de contêineres podem ser usadas para o efeito óbvio de criar sombras. Você também pode usar várias sombras e sombras insetpara vários efeitos inteligentes.

text-shadowfaz o que diz, embora você também possa adicionar algumas sombras para criar algum tipo de estrutura de tópicos.

transformpermite aplicar uma transformação arbitrária em várias etapas a um elemento - ou seja, dimensionar, girar, inclinar, mover e / ou executar uma transformação de perspectiva sem afetar o layout.

filter(diferente do IE 6) oferece vários filtros visuais especiais que podem ser aplicados a um elemento. A maioria deles muda de cor, mas também existe ( blur()e, drop-shadow()ao contrário box-shadow, é aplicada à mente do elemento externo, e não ao seu recipiente).

linear-gradient(). radial-gradient(), novas e menos suportadas conic-gradient(), suas opçõesrepeating-* - Todos eles criam imagens gradientes e podem ser usados em qualquer lugar do CSS em que a imagem é esperada, como geralmente background-image.

scrollbar-coloraltera a cor da barra de rolagem, com um efeito colateral desagradável de velocidades de rolagem significativamente mais baixas nos navegadores atuais.

background-size: coverecontain eles dimensionarão proporcionalmente a imagem de plano de fundo para que ela se torne grande o suficiente para cobrir completamente o elemento (mesmo se for recortada) ou pequena o suficiente para caber dentro (mesmo que o elemento não cubra todo o plano de fundo).

object-fit É uma ideia semelhante, mas para outros objetos como <img>. object-positionTrabalhos apropriados como background-position.

É possível usar vários fundos, o que é especialmente útil para gradientes - você pode empilhar vários gradientes, outras imagens de fundo e uma cor sólida na parte inferior.

text-decorationtornou-se mais bizarro do que antes; Agora você pode definir a cor da linha e usar vários tipos diferentes de linhas, incluindo as tracejadas, pontilhadas e onduladas.

Os contadores CSS podem ser usados para numeração arbitrária de elementos arbitrários, oferecendo a possibilidade de usar <ol> em qualquer conjunto de elementos.

O pseudoelemento ::markerpermite estilizar o contêiner de marcador de um item da lista ou até substituí-lo completamente por um contador personalizado. O suporte ao navegador está incompleto, mas está melhorando. Da mesma forma, a regra@counter-styleimplementa um estilo de contador completamente novo (por exemplo, 1 2 3, ii ii, ABC, etc.) que você pode usar em qualquer lugar, embora até agora apenas o Firefox o suporte.

image-set()fornece uma lista de imagens possíveis e permite que o navegador selecione a mais adequada com base na densidade de pixels da tela do usuário.

@font-facedefine uma fonte que pode ser baixada de uma fonte externa, embora você possa usar o Google Fonts .

pointer-events: nonefaz com que o elemento ignore completamente o mouse; ele não responde à orientação e os cliques passam direto para o elemento abaixo.

image-renderingpode alterar o método de interpolação da imagem para o vizinho mais próximo, embora o suporte ao navegador ainda seja heterogêneo e também seja necessário ativar algumas propriedades específicas do navegador.

clip-pathapara um elemento a uma forma arbitrária. Também existe maskuma máscara alfa arbitrária, mas o suporte ao navegador não é uniforme, e esse geralmente é um procedimento bastante complicado.

Sintaxe e outras coisas

@supportspermite que você escreva códigos CSS diferentes, dependendo do que o navegador suporta, embora atualmente esteja longe de ser tão útil quanto seria em 2004.

A > Bseleciona filhos imediatos. A + Bescolhe irmãos e irmãs. A ~ Bseleciona irmãos e irmãs imediatos (por elemento). Os colchetes podem fazer várias coisas para escolher com base em atributos; o mais óbvio é que input[type=checkbox], embora coisas interessantes possam ser feitas com as partes correspondentes <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 a <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 predefinidas, botões de opção e <option>').

Para aplicação a elementos específicos dentro de um conjunto de elementos relacionados tem :first-child, :last-childbem como :only-child; :first-of-type, :last-of-typee :only-of-type(onde "type" significa o nome da tag); é :nth-child(), :nth-last-child(), :nth-of-type()e :nth-last-of-type()(para seleccionar cada um dos segundo, terceiro, e assim por diante elementos).

:not()inverte o seletor. :emptySeleciona elementos sem filhos e sem texto. :targetseleciona o elemento para o qual o fragmento da URL saltou (por exemplo, se a barra de endereço exibirindex.html#foo, ao mesmo tempo, o elemento cujo identificador é igual a é selecionado foo).

::beforee ::afteragora com dois dois pontos para indicar que eles criam pseudoelementos, e não apenas definir a área do seletor à qual estão anexados. ::selectionajusta como o texto selecionado é exibido; ::placeholderAltera a aparência do texto de substituição (nos campos de texto).

As consultas de mídia fazem um monte de coisas para que sua página possa se adaptar dependendo de como é visualizada. A consulta de mídia prefers-color-schemeinforma se o sistema do usuário está instalado em um tópico claro ou escuro, para que você possa configurá-lo automaticamente de acordo.

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

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

As variáveis CSS (oficialmente "propriedades personalizadas") permitem definir valores nomeados personalizados que podem ser usados em qualquer lugar. Você pode usar isso para reduzir a quantidade de manipulação de CSS necessária em JavaScript (por exemplo, para repintar uma parte complexa de uma página, definindo uma variável CSS em vez de definir manualmente várias propriedades) ou ter um componente genérico que responda às variáveis definidas pelo componente pai.

calc()calcula uma expressão arbitrária e a atualiza automaticamente (embora a necessidade de tais cálculos elimine parcialmentebox-sizing)

vw, vh, vmin, Evmax permitem que você especifique o comprimento como uma porcentagem da largura ou a altura da janela de exibição, ou o que for maior / menor.

Fuh! Tenho certeza de que esqueci muito e meus colegas complementarão a lista nos comentários. Agora posso deixar de ver o MDN e ir para a última parte divertida do artigo.

Grade moderna de miniaturas

No final, chegamos à maneira final e objetiva e correta de criar uma grade de miniaturas: usando a grade CSS . A escolha certa pode ser entendida mesmo porque possui uma grade no nome. Os recursos modernos de CSS são muito bons: permitem que você diga o que deseja - e funcionará da maneira que você disse, em vez de usar feitiços obscuros de vodu.

E aqui está como é simples:

.thumbnail-grid {
    display: grid;
    grid: auto-flow / repeat(auto-fit, minmax(250px, 1fr));
}

Feito! Isso nos dá uma grade . E você tem uma infinidade de outras opções para brincar com elas, assim como o flexbox, mas essa é a idéia principal. Você nem precisa estilizar os elementos; a maior parte do trabalho de layout é feita no contêiner.

A propriedade Shorthand gridparece um pouco intimidadora, mas apenas porque é flexível. Ele diz: preencha a grade uma linha de cada vez, gerando quantas linhas forem necessárias; crie o máximo de colunas de 250 px e divida o espaço restante entre elas igualmente.

As grades CSS também são convenientes para colocar <dl> 's, que historicamente têm sido uma grande dor de cabeça: uma <dl> contém qualquer número de <dt>, seguido por qualquer número de <dd> (incluindo zero). Anteriormente, a única maneira de estilizá-lo erafloat, o que significava uma largura fixa. Agora você pode simplesmente especificar <dt> na primeira coluna e <dd> na segunda, e a grade CSS cuidará do resto.

Como fica em uma página real? Essa história com a barra lateral? Veja como é simples:

body {
    display: grid;
    grid-template:
        "header         header          header"
        "left-sidebar   main-content    right-sidebar"
        "footer         footer          footer"
        / 1fr           6fr             1fr
    ;
}
body > header {
    grid-area: header;
}
#left-sidebar {
    grid-area: left-sidebar;
}
/* ... etc ... */

Feito. Fácil. Também não importa em qual ordem listar os detalhes na marcação.

Por outro lado

A web ainda é um desastre. Muitos nem sabem que flexbox e grade agora são suportados quase universalmente ; mas, dado o tempo que levou para passar de uma especificação inicial para uma ampla implementação, não posso culpá-los. Ontem mesmo vi um pequeno site novinho em folha, que consistia principalmente em uma enorme lista de "miniaturas" de várias larguras e que usava carros alegóricos! Nem mesmo inline-block! Não sei quem lhes ensinou esses truques complicados e por que ele não disse uma palavra sobre o flexbox.

Mas o pior é que ainda encontro sites que fazem todo o layout usando JavaScript . Se você usar o bloqueador de scripts uMatrixSua primeira experiência é um monte de texto sobreposto a outro. Isso é realmente um passo atrás? O que é que o título e a barra lateral estão posicionados corretamente somente quando o script é executado? Não é como carregar uma página sem CSS - em HTML simples, nada pode se sobrepor por padrão! Você deve indicar intencionalmente para fazer isso!

E há a web móvel, que, apesar de todas as boas intenções, acabou sendo uma péssima idéia. A idéia era usar consultas de mídia CSS na tela de um telefone celular que correspondesse a um site comum, mas a maioria dos sites principais possui versões móveis completamente separadas. Isso significa que o site para celular não possui muitas funções importantes e é necessário navegar desajeitadamente no telefone, ou a versão completa do site está cheia de porcaria que ninguém realmente precisa.

Mesmo nas versões do Google Docs / Sheets / etc. para Android, por exemplo, apenas 5% dos recursos das versões da web. Eu não sei o que fazer com isso.

Opções não cumpridas para o futuro

Não sei como o CSS se desenvolverá ainda mais, especialmente agora que o flexbox e o grid resolveram todos os nossos problemas. Vagamente ciente de que algum trabalho está em andamento em um suporte matemático mais extenso e, possivelmente, algumas funções para mudar as cores, como no Sass. Existe uma API de pintura que permite gerar um plano de fundo instantaneamente usando JavaScript usando a API do Canvas, o que é ... muito legal. Aparentemente, na especificação eu já consegui attr()calcular o valor de qualquer propriedade. Isso parece legal e pode até permitir que você implemente tabelas HTML inteiramente em CSS, mas você pode fazer o mesmo com variáveis. Quero dizer, bem, "propriedades personalizadas" (nome oficial). Estou mais preocupado :is()com listas de seletores e subgrades correspondentespara sub-redes aninhadas.

É muito mais fácil listar as coisas que estavam nos planos, mas não foram implementadas.

display: run-in faz parte do CSS desde a versão 2 (em 98), mas geralmente não é suportado. A idéia é que um bloco seja inserido no próximo. Por exemplo, este código:
```
<h2 style="display: run-in;">Title</h2>
<p>Paragraph</p>
<p>Paragraph</p>
```
Corresponde a esse problema:

Título Parágrafo
Parágrafo

E, hmm, estou começando a entender por que isso não é suportado. Ele existia no WebKit, mas provavelmente era tão inoperante que foi removido seis anos atrás.
« » 2000-, , . , ( ), . , , , , .

, Chrome , .
, CSS , CSS -. 2 :

… , .

, . . Firefox userContent.css URL- , .

, , Stylish, , (, - , . Stylus).

(, ) . :checked. :

<label><input type="checkbox"> Description of what this does</label>

… CSS <label>, . () jQuery :has():

/* checkbox label turns bold when checked */
label:has(input:checked) {
    font-weight: bold;
}

CSS 3, , , , . , , , , “”. :

label:subject input:checked {
    font-weight: bold;
}

!:

!label input:checked {
    font-weight: bold;
}

, , , , … :has()! , JavaScript, , , . , , .

<style scoped> , CSS <style> . , (, ) CSS . , , DOM .
, -, , HTML… , JavaScript , , . JS. .
<blink> <marquee>. RIP. , CSS-.

Você ainda esta aqui? Está tudo acabado agora. Hora de ir para casa.

E, talvez, faça sua contribuição para o confronto com a monocultura Blink usando o Firefox , inclusive no telefone , se por algum motivo você não estiver usando um iPhone, o que geralmente proíbe outros mecanismos de navegador. É muito pior do que qualquer coisa que a Microsoft já fez, mas apenas aceitamos por algum motivo ...

CSS antigo e novo. História do Web Design