Resumo

  • O primeiro rascunho W3C de Media Queries apareceu em 4 de abril de 2001. HTML4 e CSS2 já distinguiam screen de print; o novo texto permitia perguntas mais específicas sobre o ambiente.
  • Em 8 de julho de 2002 veio uma Recomendação Candidata. A Recomendação de 19 de junho de 2012 definiu expressões de largura, altura e cor para escolher estilos sem multiplicar o conteúdo.

Na tela larga da redação, a reportagem parecia ter nascido de terno. Três colunas alinhadas, navegação no lugar, foto com espaço para respirar. A editora puxou a borda da janela. A coluna da direita invadiu a do meio e o título perdeu as mangas. Depois a impressora pediu uma versão para papel, sem o cardápio inteiro de cliques. A reportagem não precisava de outra apuração. Precisava de uma roupa que coubesse.

O primeiro rascunho de trabalho W3C, de 4 de abril de 2001, começou de uma distinção que já existia. HTML4 e CSS2 conheciam tipos de mídia como screen e print. Uma folha de estilos podia tratar papel e tela de modo diferente. O problema era a pergunta larga demais: duas janelas cabiam sob a etiqueta «tela», mas uma acomodava três colunas e a outra mal recebia uma. Dizer ao alfaiate apenas que a roupa era para um ser humano não resolveria o corte.

As consultas acrescentaram medidas à conversa. Largura, altura, cor e resolução podiam entrar nas condições. Com min-width, uma disposição podia exigir um mínimo de espaço; com max-width, outra aparecia quando o espaço apertasse. A largura do papel também entrava nos exemplos. O navegador conhece o ambiente em que o leitor está; o autor define a condição e as regras de apresentação. Assim, a mesma matéria pode chegar a salas de tamanhos distintos.

Imagine a reportagem com foto, texto e uma coluna lateral. Na tela larga, os três elementos conversam lado a lado. Na janela menor, a lateral passa para baixo, enquanto a manchete recupera a largura. No papel, a navegação de cliques sai de cena. As palavras da repórter continuam no mesmo documento. O que muda é a maneira de arranjá-las para a leitura.

A Recomendação Candidata de 8 de julho de 2002 levou o modelo adiante no processo de padronização. O nome da etapa importa: candidata não é recomendação final, nem prova de que todo navegador da época já havia mudado de figurino. O texto consolidou a ideia de rótulos mais precisos para apresentação, preservando o conteúdo.

A Recomendação W3C de 19 de junho de 2012 deu ao mecanismo uma referência definitiva. Um tipo de mídia pode trazer zero ou mais expressões de características. A especificação mostra largura, altura e cor, inclusive intervalos com min-width e max-width, além de condições para impressão. O ponto de mudança faz sentido onde a coluna começa a espremer a matéria. Escolhê-lo pelo nome de um aparelho popular é apostar que a vitrine de hoje continuará mandando no desenho amanhã.

Há uma pegadinha nas medidas: px significa pixel CSS. Não é a contagem física dos pontinhos da tela. Um aparelho de alta densidade pode exibir muitos pontos físicos enquanto a largura vista pelo CSS segue outra escala. Ao decidir se uma coluna cabe, importa o espaço de layout que o navegador apresenta, não o número estampado na embalagem do equipamento.

O texto de 2012 também trata de only, not e características desconhecidas. Ele espera que o agente de usuário reavalie as consultas e reorganize a página quando o ambiente muda, sem tornar essa reação obrigatória em todos os casos. Vale, portanto, puxar a janela, abrir a visualização de impressão e observar o resultado real. Sintaxe bem formada não conserta uma manchete que ficou de joelhos.

Media Queries não escolheu sozinha o melhor ponto para dobrar o jornal. Deu à equipe uma forma de escrever essa decisão e ao navegador o trabalho de conferir a medida. A editora reduziu a janela mais uma vez: as colunas se empilharam, a manchete respirou, e a impressora recebeu uma página sem barulho. A matéria permaneceu em seu lugar. O CSS tinha, enfim, mais de um tamanho no cabide.