La nueva sintaxis de ámbito de las consultas de medios CSS | trucos CSS

Confiamos en las consultas de medios CSS para seleccionar y diseñar elementos en función de una condición objetivo. Esta condición puede ser cualquier cantidad 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, dispositivo o incluso el entorno del usuario.

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 ancho de ventana de visualización específico ha convertido a CSS Media Queries en un elemento básico del diseño web adaptable desde Ethan Marcotte. acuñar el terminoSi el ancho de la ventana gráfica del navegador es de cierto tamaño, aplique un conjunto de reglas de estilo, lo que nos permitirá diseñar elementos que se ajusten al tamaño del navegador.

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

Aviso and ¿en el interior? Es un operador que nos permite combinar expresiones. En este ejemplo, combinamos una condición de que el tipo de medio es screen y eso es min-width la función está configurada para 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! */
  }
}

¡Estos estilos ahora se aplican a un rango claro de anchos de ventana gráfica, no a un solo ancho!

Pero la especificación Media Queries Level 4 introdujo 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.

Averigüemos cómo funciona esto.

Nuevos operadores de comparación

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

• < evalúa si un valor dado es menos que otro valor
• > evalúa si un valor dado es mas grande que otro valor
• = evalúa si un valor dado es igual a otro valor
• <= evalúa si un valor dado es menor o igual a tu otro valor
• >= evalúa si un valor dado es mayor o igual que tu otro valor

Así es como podríamos escribir una solicitud de medios que aplique estilos si el navegador lo hace 600px ancho o más grande:

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

Esto es lo que parece escribir lo mismo usando un operador de comparación:

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

Orientación a un rango de anchos de ventana

A menudo, cuando escribimos consultas de medios CSS, creamos lo que se llama un punto de ruptura — 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 muchos puntos de ruptura! Y generalmente se basan en la ventana gráfica que está entre dos anchos: donde comienza el punto de ruptura y donde final del punto de ruptura.

Así es como lo hicimos con la ayuda de 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 sentir lo más corto y fácil que es escribir una consulta de medios cuando nos deshacemos del 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 hace esta solicitud de medios.

Compatibilidad con navegador

Esta sintaxis de consulta de medios mejorada todavía está en pañales en el momento de escribir este artículo y actualmente no es tan ampliamente compatible como el enfoque que combina min-width y max-width. ¡Aunque nos estamos acercando! Safari es la única copia de seguridad importante en esta etapa, pero hay un boleto abierto para ello que puedes seguir.

Veamos un ejemplo

Aquí hay un diseño que es adecuado para 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 de forma condicional en varios puntos de interrupción más pequeños que se adaptan perfectamente para tabletas y teléfonos móviles:

Para ver qué sucede, así es como reacciona el diseño entre los dos puntos de interrupción más pequeños. La lista de navegación oculta también se muestra title en main aumenta en font-size.

Este cambio se activa cuando la ventana gráfica cambia de coincidir con una condición de medios a otra:

/* 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 sintaxis de alcance de las funciones de los nuevos medios y combinando las dos condiciones con and operador.

Ok, esto es genial para dispositivos móviles a continuación 768px y para otros dispositivos iguales o superiores a 768pxPero, ¿qué pasa con el diseño del escritorio? ¿Cómo llegamos allí?

En cuanto al diseño:

• los main elemento se convierte en una cuadrícula de 12 columnas.
• La imagen muestra un botón.
• La talla de .title la fuente del elemento aumenta y se superpone a la imagen.

Suponiendo que hayamos hecho nuestra tarea y determinado exactamente dónde deben ocurrir estos cambios, podemos aplicar estos estilos cuando la ventana gráfica coincida con el width condición para este punto de interrupción. Diremos 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 ello:

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

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

Además de las diferencias visuales de estas sintaxis, también hacen cosas ligeramente diferentes min- y max- es equivalente a usar operadores matemáticos de comparación:

• max-width es equivalente a <= operador (por ejemplo (max-width: 320px) es lo mismo que (width <= 320px)).
• min-width es equivalente a >= operador (por ejemplo (min-width: 320px) es lo mismo que (width >= 320px)).

Tenga en cuenta que ninguno es equivalente a > o < 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 usando el min-width y max-width:

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

Ambas consultas de medios cumplen una condición cuando el ancho de la ventana gráfica es igual a 320px.. Esto no es exactamente lo que queremos. Queremos o una de estas condiciones, no ambas. Para evitar estos cambios implícitos, podemos agregar un píxel a la consulta según min-width:

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

Si bien esto asegura que ambos conjuntos de estilos no se apliquen al mismo tiempo cuando el ancho de la ventana gráfica es 320pxcualquier ancho de ventana gráfica que se encuentre entre 320px y 321px dará como resultado un área súper pequeña donde ninguno de los estilos se aplica en ninguna de las solicitudes, una extraña situación de "contenido intermitente sin estilo".

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

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

Pero eso se vuelve tonto y demasiado complicado. Por lo tanto, la nueva sintaxis del alcance de la función multimedia es un enfoque más apropiado:

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

resumiendo

Uf, hemos cubierto gran parte de la nueva sintaxis para orientar 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 se ha adoptado en los navegadores Firefox y Chromium, estamos cada vez más cerca de poder utilizar los nuevos operadores de comparación y combinarlos con otras funciones multimedia. widthme gusta height y aspect-ratio

Y esta es solo una de las características más nuevas introducidas por la especificación de Nivel 4, junto con un montón de solicitudes que podemos hacer según las preferencias del usuario. ¡No termina ahí! Consulte la Guía completa de consultas de medios CSS para ver rápidamente lo que se puede incluir en las consultas de medios de nivel 5.