Descubra como a nova sintaxe pode simplificar as consultas de mídia.
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.
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.