Nueva sintaxis para consultas de medios por rango

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

Rachel Andrew

Las consultas de medios habilitaron el diseño responsivo, y las funciones de rango que permiten probar el tamaño mínimo y máximo de la ventana de visualización son utilizadas por alrededor del 80% de los sitios que usan consultas de medios. La especificación de nivel 4 de las consultas de contenido multimedia incluye una sintaxis mejorada para estas consultas de rango.

Navegadores compatibles

Origen

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

Una consulta de medios típica que prueba un ancho de viewport mínimo 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 para un ancho máximo:

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

Y la versión que usa 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, en particular cuando se prueba 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 nueva sintaxis 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 encuentra 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, existe un complemento PostCSS que volverá a escribir la sintaxis nueva en la antigua en tus hojas de estilo.