La nueva sintaxis de rango de consulta de medios CSS

Nosotros confiamos en Consultas de medios CSS para seleccionar y diseñar elementos en función de una condición específica. Esa condición puede ser todo tipo de cosas, pero generalmente se divide en dos campos: (1) el tipo de medio que se usa y (2) una característica específica del navegador, el dispositivo o incluso el entorno del usuario.

Entonces, digamos que queremos aplicar cierto estilo CSS a un documento impreso:

@media print {
  .element {
    /* Style away! */
  }
}

El hecho de que podamos aplicar estilos en un cierto ancho de ventana gráfica ha convertido a CSS Media Queries en un ingrediente central del diseño web adaptable desde Ethan Marcotte. acuñar el termino. Si el ancho de la ventana gráfica del navegador es de cierto tamaño, aplique un conjunto de reglas de estilo, lo que nos permite diseñar elementos que respondan al tamaño del navegador.

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

Note la and ¿ahí? Ese es un operador que nos permite combinar declaraciones. En ese ejemplo, combinamos una condición de que el tipo de medio es un screen y eso es min-width la función está configurada en 30em (o superior). Podemos hacer lo mismo para apuntar a un rango de tamaños de ventana gráfica:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

¡Ahora esos estilos se aplican a un rango explícito de anchos de ventana gráfica en lugar de a un solo ancho!

Pero la especificación Media Queries Level 4 ha introducido una nueva sintaxis para apuntar a un rango de anchos de ventana gráfica utilizando operadores de comparación matemáticos comunes, cosas como <, >y = — que tienen más sentido sintácticamente al escribir menos código.

Profundicemos en cómo funciona eso.

Nuevos operadores de comparación

Ese último ejemplo es una buena ilustración de cómo hemos "falsificado" rangos al combinar condiciones usando el and operador. El gran cambio en la especificación de Media Queries Level 4 es que tenemos nuevos operadores que comparan valores en lugar de combinarlos:

• < evalúa si un valor es menos 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 tu otro valor
• >= evalúa si un valor es mayor o igual a tu otro valor

Así es como podríamos haber escrito una consulta de medios que aplica estilos si el navegador está 600px ancho o mayor:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

Así es como se ve escribir lo mismo usando un operador de comparación:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

Dirigirse a un rango de anchos de ventana gráfica

A menudo, cuando escribimos consultas de medios CSS, estamos creando lo que se llama un punto de interrupción — una condición en la que el diseño se “rompe” y se aplica un conjunto de estilos para arreglarlo. ¡Un diseño puede tener un montón de puntos de interrupción! Y generalmente se basan en que la ventana gráfica se encuentra entre dos anchos: donde comienza el punto de interrupción y donde termina el punto de interrupción.

Así es como lo hemos hecho usando el and operador para combinar los dos valores de punto de interrupción:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

Empiezas a tener una buena idea de lo más corto y fácil que es escribir una consulta de medios cuando nos deshacemos del valor booleano. and operador a favor de la nueva sintaxis de comparación de rango:

@media (400px <= width <= 1000px) {
  /* etc. */
}

Mucho más fácil, ¿verdad? Y está claro exactamente lo que está haciendo esta consulta de medios.

Soporte del navegador

Esta sintaxis de consulta de medios mejorada todavía está en sus inicios en el momento de escribir este artículo y no es tan ampliamente compatible en este momento como el enfoque que combina min-width y max-width. ¡Sin embargo, nos estamos acercando! Safari es el único obstáculo importante en este momento, pero hay un boleto abierto para ello que puedes seguir.

Veamos un ejemplo

Aquí hay un diseño que se adapta muy bien a pantallas más grandes, como una computadora de escritorio:

Este diseño tiene estilos básicos que son comunes a todos los puntos de interrupción. Pero a medida que la pantalla se vuelve más estrecha, comenzamos a aplicar estilos que se aplican condicionalmente en diferentes puntos de interrupción más pequeños que son ideales para tabletas hasta teléfonos móviles:

Para ver lo que sucede, aquí se muestra cómo responde el diseño entre los dos puntos de interrupción más pequeños. La lista de navegación oculta se muestra, así como title existentes main se incrementa en font-size.

Ese cambio se activa cuando los cambios de la ventana gráfica pasan de hacer coincidir las condiciones de un medio con otro:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

¡Hemos combinado algunos de los conceptos que hemos cubierto! Estamos apuntando a dispositivos con un screen tipo de medio, evaluando si el ancho de la ventana gráfica es mayor o igual a un valor específico usando la nueva sintaxis de rango de características de medios, y combinando las dos condiciones con el and operador.

OK, eso es genial para los dispositivos móviles a continuación 768px y para otros dispositivos iguales o superiores a 768px. Pero, ¿qué pasa con ese diseño de escritorio? ¿Cómo llegamos allí?

En cuanto al diseño va:

• El main elemento se convierte en una cuadrícula de 12 columnas.
• Se muestra un botón en la imagen.
• El tamaño de la .title la fuente del elemento aumenta y se superpone a la imagen.

Suponiendo que hayamos hecho nuestra tarea y determinado exactamente dónde deben tener lugar esos cambios, podemos aplicar esos estilos cuando la ventana gráfica coincida con el width condición para ese punto de interrupción. Vamos a decir que el punto de interrupción está en 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

Juega con él:

Por qué la nueva sintaxis es más fácil de entender

El resultado final: es más fácil distinguir un operador de comparación (por ejemplo, width >= 320px) que decir la diferencia entre min-width y max-width usando el and operador. Eliminando el matiz entre min- y max-, tenemos uno solo width parámetro con el que trabajar y los operadores nos cuentan el resto.

Más allá de las diferencias visuales de esas sintaxis, también están haciendo cosas ligeramente diferentes. Usando min- y max- es equivalente a usar operadores matemáticos de comparación:

• max-width es equivalente a la <= operador (p. ej. (max-width: 320px) es el mismo que (width <= 320px)).
• min-width es equivalente a la >= operador (p. ej. (min-width: 320px) es el mismo que (width >= 320px)).

Nótese que tampoco es el equivalente de la > or < operadores.

Extraigamos un ejemplo directamente de la especificación de Media Queries Level 4 donde definimos diferentes estilos basados ​​en un punto de interrupción en 320px en el ancho de la ventana gráfica usando min-width y max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

Ambas consultas de medios coinciden con una condición cuando el ancho de la ventana gráfica es igual a 320px. Eso no es exactamente lo que queremos. Queremos ya sea una de esas condiciones en lugar de ambas al mismo tiempo. Para evitar cambios implícitos, podríamos agregar un píxel a la consulta según min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

Si bien esto garantiza que los dos conjuntos de estilos no se apliquen simultáneamente cuando el ancho de la ventana gráfica es 320px, cualquier ancho de ventana gráfica que se encuentre entre 320px y 321px dará como resultado una zona súper pequeña donde no se aplica ninguno de los estilos en ninguna de las consultas, una extraña situación de "destello de contenido sin estilo".

Una solución es aumentar el segundo valor de la escala de comparación (los números después del punto decimal) a 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

Pero eso se está volviendo tonto y demasiado complicado. Es por eso que la nueva sintaxis de rango de funciones de medios es un enfoque más apropiado:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

Terminando

Uf, cubrimos mucho terreno en la nueva sintaxis para apuntar a los rangos de ancho de la ventana gráfica en CSS Media Queries. Ahora que la especificación Media Queries Level 4 ha introducido la sintaxis y ha sido adoptada en los navegadores Firefox y Chromium, estamos cerca de poder usar los nuevos operadores de comparación y combinarlos con otras funciones de medios de rango además de widthdel ADN, tales como los height y aspect-ratio

Y esa es solo una de las características más nuevas que introdujo la especificación de Nivel 4, junto con una un montón de consultas que podemos hacer en función de las preferencias del usuario. ¡No termina ahí! Revisar la Guía completa de consultas de medios CSS para un adelanto de lo que podría incluirse en Media Queries Nivel 5.