Índice

1. Sintaxis antigua: min-width y max-width
2. La nueva sintaxis de Rangos para Media Querys
3. Las etiquetas <picture> y <source> de HTML
4. ¿Y el Can I Use?
5. State of CSS 2023
6. Conclusiones
7. Referencias
8. Agradecimientos

Ahora en CSS tenemos una nueva sintaxis para poder escribir media querys de una manera más intuitiva y menos confusa, mediante rangos.

1. Sintaxis antigua: min-width y max-width

La única sintaxis que teníamos para escribir media querys era usando las palabras clave min-width y max-width, por ejemplo:

@media screen and (min-width: 600px) {
  .element {
    /* La media query se aplica para resoluciones mayores a 600px */
  }
}

o también tenemos la misma sintaxis usando max-width:

@media screen and (max-width: 800px) {
  .element {
    /* La media query se aplica para resoluciones menores a 600px */
  }
}

Como puedes ver, tanto min-width y max-width son un poco ambiguas para el desarrollador, tenemos que pensar siempre cuando usar uno u el otro.

Si quisiéramos hacer un rango con esta sintaxis tendríamos que hacer algo como lo siguiente:

@media screen and (min-width: 400px) and (max-width: 1000px) {
  .element {
    /* La media query se aplica para 
       resoluciones entre 400px y 1000px */
  }
}

Aunque esta última sintaxis está un poco más clara es muy larga.

2. La nueva sintaxis de Rangos para Media Querys

La nueva sintaxis de rangos para media querys de CSS consiste en usar operadores de comparación (populares en cualquier lenguaje de programación) en lugar de min-width y max-width.

• < evalúa si un valor es menor que otro valor.
• > evalúa si un valor es mayor que otro valor.
• = evalúa si un valor es igual a otro valor.
• <= evalúa si un valor es menor o igual a otro valor.
• >= evalúa si un valor es mayor o igual a otro valor.

Veamos algunos ejemplos:

// sintaxis clásica
@media screen and (min-width: 600px) {
  .element {
    /* La media query se aplica para resoluciones mayores a 600px */
  }
}

// sintaxis de rango
@media screen and (width >= 375px) {
  .element {
    /* La media query se aplica para 
       resoluciones mayores o iguales a 600px */
  }
}

Con la nueva sintaxis omitimos el uso de min-width y max-width y pasamos a usar siempre width acompañado de los operadores de comparación vistos anteriormente.

Con max-width tendríamos algo similar:

// sintaxis clásica
@media screen and (max-width: 800px) {
  .element {
    /* La media query se aplica para resoluciones menores a 800px */
  }
}

// sintaxis de rango
@media screen and (width <= 800px) {
  .element {
    /* La media query se aplica para 
       resoluciones menores o iguales a 600px */
  }
}

Ahora con solo leer el código me queda claro cuando se aplicaran las distintas media querys. Y eso no es todo, ahora veamos cómo podemos hacer rangos:

// sintaxis clásica
@media screen and (min-width: 400px) and (max-width: 1000px) {
  .element {
    /* La media query se aplica para 
       resoluciones entre 400px y 1000px */
  }
}

//sintaxis de rangos
@media screen and (400 <= width <= 1000) {
  .element {
    /* La media query se aplica para 
       resoluciones entre 400px y 1000px */
  }
}

¡Muchísimo más claro! ¿No crees?

3. Las etiquetas <picture> y <source> de HTML

Con HTML puro es posible hacer imagenes responsive en la web modera. Para ello usamos el atributo media de la etiqueta <source> para crear una media query y el punto de quiebre que deseamos para que se muestren diferentes imagenes.

La sintaxis de rangos de media querys también funcionan con estas etiquetas:

4. ¿Y el Can I Use?

A la fecha de publicado este post, tenemos un soporte de más de 80% en navegadores.

Puedes verificarlo aquí.

5. State of CSS 2023

En la encuesta las importante de CSS que se realiza de manera anual me encontré con interesantes datos sobre esta nueva sintaxis.

Analizando la data tenemos que (Del 2022 al 2023)

• Se redujo la cantidad de desarrolladores que desconocían esta nueva sintaxis de CSS, lo que es algo muy positivo.
• Se incrementó la cantidad de desarrolladores que al menos han oido hablar de esta sintaxis, pero no la han usado todavía.
• Y también hubo un leve incremento de programadores que usaron esta nueva característica, lo que también es positivo.

Toda la información apunta que para el 2024 el uso los rangos en las media querys se volverán más conocidos y por ende mas usados en los proyectos.

6. Conclusiones

La nueva sintaxis de rangos para media querys genera un código mucho más limpio y entendible a simple vista, visto que la compatibilidad con los navegadores es muy alta recomiendo familiarizarse con su uso.

7. Referencias

• https://filisantillan.com/bits/media-query-ranges/
• https://2023.stateofcss.com/en-US/features/layout/
• https://css-tricks.com/the-new-css-media-query-range-syntax/

8. Agradecimientos

Agradezco a @midudev por su post en X mediante el cual me enteré y me anime a escribir este breve post.

Más post de mi autoría:

Probando generadores de texto a imagenes con IA, StableCog vs Mage🤖

Cristian Fernando ・ Jul 28 '23

#ai #promptengineering #beginners #productivity

Paracetamol.js💊| #213: Explica este código JavaScript

Cristian Fernando ・ Apr 5 '23

#javascript #webdev #spanish #programming

Paracetamol.js💊| #212: Explica este código JavaScript

Cristian Fernando ・ Apr 4 '23

#javascript #webdev #spanish #programming