A nova sintaxe do intervalo de consulta de mídia CSS

Nós confiamos em Consultas de mídia CSS para selecionar e estilizar elementos com base em uma condição de destino. Essa condição pode ser todos os tipos de coisas, mas normalmente se enquadra em dois campos: (1) o tipo de mídia que está sendo usado e (2) um recurso específico do navegador, dispositivo ou até mesmo do ambiente do usuário.

Então, digamos que queremos aplicar certo estilo CSS a um documento impresso:

@media print {
  .element {
    /* Style away! */
  }
}

O fato de podermos aplicar estilos em uma certa largura da janela de visualização tornou o CSS Media Queries um ingrediente central do design responsivo da web desde Ethan Marcotte cunhou o termo. Se a largura da janela de visualização do navegador for de um determinado tamanho, aplique um conjunto de regras de estilo, o que nos permite projetar elementos que respondam ao tamanho do navegador.

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

Observe a and lá? Esse é um operador que nos permite combinar declarações. Nesse exemplo, combinamos uma condição de que o tipo de mídia é um screen e que é min-width recurso está definido para 30em (ou acima). Podemos fazer o mesmo para segmentar uma variedade de tamanhos de janela de visualização:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

Agora esses estilos se aplicam a um intervalo explícito de larguras de viewport em vez de uma única largura!

Mas a especificação Media Queries Level 4 introduziu uma nova sintaxe para direcionar uma variedade de larguras de janela de visualização usando operadores matemáticos comuns de comparação - coisas como <, > e = — que fazem mais sentido sintaticamente ao escrever menos código.

Vamos nos aprofundar em como isso funciona.

Novos operadores de comparação

Esse último exemplo é uma boa ilustração de como nós meio que “fingimos” ranges combinando condições usando o and operador. A grande mudança na especificação de Media Queries Nível 4 é que temos novos operadores que comparam valores em vez de combiná-los:

• < avalia se um valor é menos que outro valor
• > avalia se um valor é Melhor que outro valor
• = avalia se um valor é igual para outro valor
• <= avalia se um valor é menor ou igual a to outro valor
• >= avalia se um valor é maior ou igual a to outro valor

Veja como podemos ter escrito uma consulta de mídia que aplica estilos se o navegador estiver 600px largo ou maior:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

Veja como parece escrever a mesma coisa usando um operador de comparação:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

Segmentação de um intervalo de larguras de janela de visualização

Muitas vezes, quando escrevemos consultas de mídia CSS, estamos criando o que é chamado de breakpoint — uma condição em que o design “quebra” e um conjunto de estilos é aplicado para corrigi-lo. Um design pode ter vários pontos de interrupção! E eles geralmente são baseados na janela de visualização entre duas larguras: onde o ponto de interrupção começa e onde o ponto de interrupção termina.

Veja como fizemos isso usando o and operador para combinar os dois valores de ponto de interrupção:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

Você começa a ter uma boa noção de como é mais curto e fácil escrever uma consulta de mídia quando abandonamos o Boolean and operador em favor da nova sintaxe de comparação de intervalo:

@media (400px <= width <= 1000px) {
  /* etc. */
}

Muito mais fácil, certo? E está claro exatamente o que essa consulta de mídia está fazendo.

Suporte ao navegador

Essa sintaxe de consulta de mídia aprimorada ainda está em seus primeiros dias no momento da redação deste artigo e não é tão amplamente suportada no momento quanto a abordagem que combina min-width e max-width. Estamos chegando perto, no entanto! O Safari é o único grande obstáculo neste momento, mas há um ticket aberto para isso que você pode seguir.

Vamos ver um exemplo

Aqui está um layout adequado para telas maiores, como uma área de trabalho:

Esse layout tem estilos básicos que são comuns a todos os pontos de interrupção. Mas à medida que a tela fica mais estreita, começamos a aplicar estilos que são aplicados condicionalmente em diferentes pontos de interrupção menores que são ideais para tablets até telefones celulares:

Para ver o que está acontecendo, veja como o layout responde entre os dois pontos de interrupção menores. A lista de navegação oculta sendo exibida, bem como title no main fica aumentado em font-size.

Essa alteração é acionada quando as alterações da janela de visualização deixam de corresponder às condições de uma mídia para outra:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

Combinamos alguns dos conceitos que abordamos! Estamos segmentando dispositivos com um screen tipo de mídia, avaliando se a largura da janela de visualização é maior ou igual a um valor específico usando a nova sintaxe de intervalo de recursos de mídia e combinando as duas condições com a and operador.

OK, então isso é ótimo para dispositivos móveis abaixo 768px e para outros dispositivos iguais ou superiores 768px. Mas e o layout da área de trabalho… como chegamos lá?

Quanto ao layout:

• A main elemento torna-se uma grade de 12 colunas.
• Um botão é exibido na imagem.
• O tamanho do .title a fonte do elemento aumenta e se sobrepõe à imagem.

Supondo que fizemos nossa lição de casa e determinamos exatamente onde essas alterações devem ocorrer, podemos aplicar esses estilos quando a janela de visualização corresponder ao width condição para esse ponto de interrupção. Vamos dizer que o ponto de interrupção está em 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

Brinque com ele:

Por que a nova sintaxe é mais fácil de entender

Conclusão: é mais fácil distinguir um operador de comparação (por exemplo, width >= 320px) do que para dizer a diferença entre min-width e max-width usando o and operador. Ao remover a nuance entre min- e max-, temos um único width parâmetro para trabalhar e os operadores nos dizem o resto.

Além das diferenças visuais dessas sintaxes, eles também estão fazendo coisas ligeiramente diferentes. Usando min- e max- é equivalente a usar operadores de comparação matemática:

• max-width é equivalente ao <= operador (por exemplo (max-width: 320px) é o mesmo que (width <= 320px)).
• min-width é equivalente ao >= operador (por exemplo (min-width: 320px) é o mesmo que (width >= 320px)).

Observe que nenhum dos dois é equivalente ao > or < operadores.

Vamos extrair um exemplo direto da especificação de Media Queries Nível 4, onde definimos estilos diferentes com base em um ponto de interrupção em 320px na largura da janela de visualização usando min-width e max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

Ambas as consultas de mídia correspondem a uma condição quando a largura da janela de visualização é igual a 320px. Não é exatamente isso que queremos. Nós queremos ou uma dessas condições em vez de ambas ao mesmo tempo. Para evitar essas alterações implícitas, podemos adicionar um pixel à consulta com base em min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

Embora isso garanta que os dois conjuntos de estilos não se apliquem simultaneamente quando a largura da janela de visualização for 320px, qualquer largura da janela de visualização que esteja entre 320px e 321px resultará em uma zona super pequena onde nenhum dos estilos em qualquer consulta é aplicado - uma situação estranha de "flash de conteúdo sem estilo".

Uma solução é aumentar o segundo valor da escala de comparação (números após o ponto decimal) para 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

Mas isso está ficando bobo e muito complicado. É por isso que a nova sintaxe de intervalo de recursos de mídia é uma abordagem mais apropriada:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

Resumindo

Ufa, abordamos muito sobre a nova sintaxe para direcionar os intervalos de largura da janela de visualização em consultas de mídia CSS. Agora que a especificação Media Queries Level 4 introduziu a sintaxe e foi adotada nos navegadores Firefox e Chromium, estamos chegando perto de poder usar os novos operadores de comparação e combiná-los com outros recursos de mídia de intervalo além width, gostar height e aspect-ratio

E esse é apenas um dos recursos mais recentes que a especificação Nível 4 introduziu, juntamente com um monte de consultas que podemos fazer com base nas preferências do usuário. Não termina aí! Confira o Guia completo para consultas de mídia CSS para uma espiada de o que pode ser incluído nas consultas de mídia nível 5.