Las media queries han sido un gran aliado en el diseño web cuando empezaron a aparecer dispositivos con diferentes formatos de pantalla, siendo a día de hoy un elemento imprescindible en cualquier hoja de estilos. Y el CSS, como todo en esta vida, tiene que evolucionar, por eso hoy os queríamos hablar de las mejoras en la sintaxis de las media queries que ya podemos ir probando en algunos navegadores, y que en un futuro próximo se extenderán al resto.
Como vimos en el artículo de Ricardo sobre la nueva versión de CSS que nunca existirá, las actualizaciones de CSS ya no serán como con CSS1 y CSS2, con un documento único donde aparecían todas las mejoras. Actualmente, estas revisiones se hacen por módulos independientes, por lo que podemos ir disfrutando de cosas nuevas. La parte negativa es que muchas de estas mejoras pueden pasar desapercibidas, ya que no se le dan tanta publicidad como cuando era una gran actualización para todos.
En este artículo nos centraremos en las mejoras en la sintaxis de las media queries de nivel 4. Y más concretamente, en la forma en la que escribimos los rangos de las media queries. Puede parecer algo menor, pero es un tema en el que, cuando empezamos a aprender CSS, siempre cuesta algo de trabajo comprender. Eso sí, antes de nada, vamos a ver como es la sintaxis actual.
Sintaxis actual de las Media Queries
Si no estáis muy acostumbrados a trabajar con media queries, os recomendamos nuestro artículo sobre como funcionan. De todas formas, vamos a hacer un pequeño repaso para ponerlas frente a frente a las nuevas mejoras.
Los rangos de las media queries nos sirven para especificar el alto (height) o ancho (width) de pantalla donde se va a aplicar lo que está dentro de la media querie. Por ejemplo, si queremos que un código se muestre solo cuando el ancho de la ventana del navegador sea menor o igual a 500px, el media querie a utilizar sería el siguiente:
@media (max-width: 500px) { … }Y si queremos que solo se muestre cuando sea mayor o igual a 500px, sería:
@media (min-width: 500px) { … }Con min- nos referimos a cuando es mayor o igual, y max- cuando es menor o igual. No es una sintaxis obvia de entender, ya que hay que tener en cuenta que min-width es a partir ese ancho mínimo, y max-width es por debajo de ese ancho máximo. Con el paso del tiempo, personalmente casi lo recuerdo como un mantra, pero esta sintaxis no es algo que en mi cabeza sea evidente su funcionamiento.
También da otros problemas. Por ejemplo, si escribimos en una hoja de estilos las dos media queries que hemos escrito antes, si la pantalla tiene un ancho de 500px, ¿se usará lo que esté dentro de (max-width: 500px), o lo de (min-width: 500px)?. Porque, si recordamos, el primero es un menor o igual, y el segundo un mayor o igual. Muchos resuelven esta situación escribiendo 500.1px en alguno de los dos rangos, pero no es algo bonito de ver.
Las nuevas mejoras en la sintaxis de las Media Queries
Entonces, ¿qué es lo que se nos propone en la sintaxis de nivel 4?. Pues escribiendo los rangos haciendo uso de los símbolos mayor que o >, y menor que o <. Siguiendo con los ejemplo que teníamos antes, si queremos que un código se muestre solo cuando el ancho de la ventana del navegador sea menor a 500px, escribiremos:
@media (width < 500px) { … }Y si queremos que solo se muestre cuando sea mayor a 500px, sería:
@media (width > 500px) { … }A mi al menos me resulta más fácil de comprender como funciona ahora las media queries con esta sintaxis. Pero antes nos referíamos a un ancho mayor o igual que no tenemos ahora. Por suerte, esto también está resuelto con >= (para mayor o igual) y <= (para menor o igual). Escrito en CSS sería algo así:
@media (width <= 500px) { … }
No lo hemos comentado antes, pero con las media queries también podemos crear rango entre dos valores de forma sencilla. Por ejemplo, si queremos que nuestra media querie se aplique entre 400px y 800px, actualmente escribimos esto:
@media (min-width: 400px) and (max-width: 800px) { ... }¿Cómo escribiríamos esto con la sintaxis de nivel 4?. Pues siguiendo lo que hemos estado viendo, sería algo asi:
@media (width >= 400px) and (width <= 800px) { ... }Pero es que incluso lo podríamos mejorar. ¿Y como se puede mejorar?. De la única forma posible, escribiendo menos. Veamos como quedaría:
@media (400px <= width <= 800px) { ... }
Bonito y corto. Lo que todos vamos buscando al escribir código. Todo esto es ideal sobre el papel, pero aun nos queda por ver como es la compatibilidad de esta nueva sintaxis para las media queries con los navegadores web.
Compatibilidad actual
Todo esto esta muy bien pero, ¿qué compatibilidad tiene en la actualidad?. Podemos consultar esta tabla e irnos a la fila Range syntax from Media Queries Level 4 para comprobar la compatibilidad con los navegadores web más usado. A día de hoy, vemos que solo es compatible con Firefox 63 en adelante, tanto en versión escritorio como móvil. Así que no es recomendable usar la nueva sintaxis de las media queries en entornos de producción. Además, se encuentra en la rama experimental, por lo que puede que haya cambios, mejoras o nuevas adiciones.
Eso si, podemos ir haciendo nuestras propias pruebas para ir probando la nueva sintaxis de nivel 4 de las media queries, para tenerlas frescas una vez se extiendan al resto de navegadores. Por supuesto, la forma actual de escribir las media queries no desaparecerá en un futuro cercano, pero nos parece que la nueva sintaxis es un paso adelante a la hora de escribir y leer CSS, y mucho más evidente de entender para aquellos que estén empezando.
Con esto terminamos por hoy. Siempre nos gusta saber que novedades nos va a traer CSS en el futuro. Y aun nos gusta más compartirlas con vosotros. Como siempre, tenéis los comentarios disponibles para hacernos llegar vuestras opiniones sobre la nueva sintaxis de las media queries, tanto si es la primera vez que oís hablar de ellas, como si ya las habéis estado probando.
