Nueva sintaxis para consultas de medios por rango

Descubre cómo esta nueva sintaxis puede optimizar las consultas de medios.

Rachel Andrew

Alrededor del 80% de los sitios que usan consultas de medios usan las consultas de medios que tienen habilitado el diseño responsivo, y las funciones de rango que permiten probar el tamaño mínimo y máximo del viewport. La especificación de las consultas de medios de nivel 4 incluye una sintaxis mejorada para estas consultas por rango.

Navegadores compatibles

Origen

En los siguientes ejemplos, se muestra cómo puedes optimizar tus consultas.

Una consulta de medios típica que se prueba para un ancho mínimo de viewport se escribiría de la siguiente manera:

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

La nueva sintaxis permite el uso de un operador de comparación:

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

Prueba de un ancho máximo:

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

Y la versión con la sintaxis de nivel 4:

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

Esta sintaxis tiene el potencial de optimizar las consultas, especialmente cuando se prueban entre dos anchos. En el siguiente ejemplo, la consulta de medios prueba un viewport con un ancho mínimo de 400 px y un ancho máximo de 600 px.

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

Esto se puede volver a escribir en la sintaxis nueva de la siguiente manera:

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

La función que estás probando, en este caso width, se coloca entre los dos valores.

Además de hacer que las consultas de medios sean menos detalladas, la nueva sintaxis tiene la ventaja de la precisión. Las consultas min- y max- incluyen los valores especificados, por ejemplo, min-width: 400px prueba un ancho de 400 px o más. La nueva sintaxis te permite ser más explícito sobre lo que quieres decir y evitar la posibilidad de que haya consultas contradictorias.

Para usar la nueva sintaxis de rango y tener en cuenta los navegadores que aún no la implementaron, hay un complemento PostCSS que reescribirá la nueva sintaxis a la antigua en tus hojas de estilo.