Nova sintaxe para consultas de mídia de intervalo

Descubra como a nova sintaxe pode simplificar as consultas de mídia.

Rachel Andrew

As consultas de mídia ativaram o design responsivo, e os recursos de intervalo que permitem testar os tamanhos mínimo e máximo da janela de visualização são usados por cerca de 80% dos sites que usam consultas de mídia. A especificação de consultas de mídia nível 4 inclui uma sintaxe aprimorada para essas consultas de intervalo.

Compatibilidade com navegadores

Origem

Os exemplos a seguir mostram como ele pode otimizar suas consultas.

Um teste de consulta de mídia típico para uma largura mínima da janela de visualização seria escrito da seguinte maneira:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

A nova sintaxe permite o uso de um operador de comparação:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Teste de largura máxima:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

E a versão que usa a sintaxe de nível 4:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

Essa sintaxe tem o potencial de simplificar as consultas, especialmente ao testar entre duas larguras. No exemplo a seguir, a consulta de mídia testa uma janela de visualização com largura mínima de 400 px e largura máxima de 600 px.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

Isso pode ser reescrito na nova sintaxe como:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

O recurso que você está testando, neste caso, width, vai entre os dois valores.

Além de tornar as consultas de mídia menos detalhadas, a nova sintaxe tem a vantagem da precisão. As consultas min- e max- incluem os valores especificados, por exemplo, testes min-width: 400px para uma largura de 400 px ou mais. A nova sintaxe permite que você seja mais explícito sobre o que quer dizer e evita possíveis consultas conflitantes.

Para usar a nova sintaxe de intervalo considerando os navegadores que ainda não a implementaram, existe um plug-in PostCSS que reescreve a nova sintaxe com a antiga nas suas folhas de estilo.