CSS moderno: Media Queries Range Syntax 😎
Tags: webdev, css, html, frontend
Published: 2023-09-01 15:26:34

#**Índice**   
1. [Sintaxis antigua: `min-width` y `max-width`](#id1)
2. [La nueva sintaxis de Rangos para Media Querys](#id2)
3. [Las etiquetas `<picture>` y `<source>` de HTML](#id3)
4. [¿Y el Can I Use?](#id4)
5. [State of CSS 2023](#id5)
6. [Conclusiones](#id6)
7. [Referencias](#id7)
8. [Agradecimientos](#id8)



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`** <a name="id1"><a/> 
La única sintaxis que teníamos para escribir media querys era usando las palabras clave `min-width` y `max-width`, por ejemplo:

```css
@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`:

```css
@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:

```css
@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** <a name="id2"><a/> 
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:

```css
// 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:

```css
// 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:

```css
// 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** <a name="id3"><a/> 
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:

{% codepen https://codepen.io/dux-soft/pen/abPZKeE %}

## **4. ¿Y el Can I Use?** <a name="id4"><a/> 
A la fecha de publicado este post, tenemos un soporte de más de 80% en navegadores. 

![can](https://github.com/crisdux/img-dev-to/blob/master/range.png?raw=true)

Puedes verificarlo [aquí](https://caniuse.com/?search=media%20query%20range).

## **5. State of CSS 2023** <a name="id5"><a/> 
En la encuesta las importante de CSS que se realiza de manera anual me encontré con interesantes datos sobre esta nueva sintaxis.

![state](https://assets.devographics.com/captures/css2023/en-US/media_queries_range_contexts.png)

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** <a name="id6"><a/> 
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** <a name="id7"><a/> 
* 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** <a name="id8"><a/> 
Agradezco a @midudev por su post en X mediante el cual me enteré y me anime a escribir este breve post.

{% twitter 1696463184666710475 %}

---

Más post de mi autoría:

{% link https://dev.to/duxtech/probando-generadores-de-texto-a-imagenes-con-ia-parte-i-3fmf %}
{% link https://dev.to/duxtech/paracetamoljs-217-explica-este-codigo-javascript-4ci %}
{% link https://dev.to/duxtech/paracetamoljs-216-explica-este-codigo-javascript-4g6d %}

![gif](https://media.giphy.com/media/beNeX29fBOizu/giphy.gif)