Nova sintaxe para consultas de mídia de intervalo

Descubra como essa 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 do nível 4 inclui uma sintaxe melhorada para essas consultas de intervalo.

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

Um teste típico de consulta de mídia para uma largura mínima da viewport 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 para uma 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 do 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, principalmente ao testar entre duas larguras. No exemplo a seguir, a consulta de mídia testa uma viewport 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, fica 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 conflitos de consultas.

Para usar a nova sintaxe de intervalo e considerar os navegadores que ainda não a implementaram, há um plug-in do PostCSS que vai reescrever a nova sintaxe para a antiga nas folhas de estilo.