Controla el diseño macro y micro en una nueva era del diseño web responsivo.
Diseño responsivo hoy
Hoy en día, cuando se usa el término "diseño responsivo", lo más probable es que pienses en usar consultas de medios para cambiar el diseño cuando se cambia el tamaño de un diseño de un tamaño para dispositivos móviles a un tamaño para tablets y a un tamaño para computadoras de escritorio.
Sin embargo, pronto, esta percepción del diseño responsivo podría considerarse tan obsoleta como el uso de tablas para el diseño de páginas.
Las consultas de medios basadas en el viewport te brindan algunas herramientas potentes, pero carecen de mucha precisión. No tienen la capacidad de responder a las necesidades del usuario ni de insertar estilos responsivos en los componentes.
Puedes usar la información global del viewport para aplicar diseño a tus componentes, pero estos siguen sin tener sus propios estilos, y eso no funciona cuando nuestros sistemas de diseño se basan en componentes y no en páginas.
La buena noticia es que el ecosistema está cambiando, y lo está haciendo con bastante rapidez. CSS está evolucionando, y una nueva era del diseño responsivo está a la vuelta de la esquina.
Esto sucede aproximadamente cada 10 años. Hace 10 años, entre 2010 y 2012, vimos un gran cambio con el diseño responsivo y para dispositivos móviles, y el surgimiento de CSS3.
Por lo tanto, una vez más, el ecosistema está listo para que se produzcan algunos cambios bastante grandes en CSS. Los ingenieros de Chrome y de toda la plataforma web están creando prototipos, especificando y comenzando la implementación para la próxima era del diseño responsivo.
Estas actualizaciones incluyen funciones de contenido multimedia basadas en las preferencias del usuario, consultas de contenedores y consultas de medios para nuevos tipos de pantallas, como las plegables.
Responde al usuario
Las nuevas funciones de medios de preferencia del usuario te permiten diseñar experiencias web que se alineen con las preferencias y necesidades específicas del usuario. Esto significa que las funciones de medios de preferencia te permiten adaptar las experiencias del usuario a las experiencias del usuario.
Estas características de medios de preferencia del usuario incluyen las siguientes:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Y mucho más
Las funciones de preferencias detectan las preferencias que un usuario estableció en su sistema operativo y ayudan a crear una experiencia web más sólida y personalizada, en especial para quienes tienen necesidades de accesibilidad.
prefers-reduced-motion
Los usuarios que establecieron preferencias del sistema operativo para reducir el movimiento solicitan menos animaciones cuando usan la computadora en general. Por lo tanto, es probable que no aprecien una pantalla de introducción llamativa, una animación de volteo de tarjeta, un cargador complejo ni otras animaciones llamativas mientras usan la Web.
Con prefers-reduced-motion, puedes diseñar tus páginas teniendo en cuenta el movimiento reducido y crear una experiencia mejorada para quienes no tienen esta preferencia establecida.
Esta tarjeta tiene información en ambos lados. La experiencia de movimiento reducido de referencia es un fundido cruzado para mostrar esa información, mientras que la experiencia con movimiento mejorado es un giro de tarjeta.
Prefers-reduced-motion no debería significar "sin movimiento", ya que el movimiento es fundamental para transmitir información en línea. En su lugar, proporciona una experiencia de referencia sólida que guíe a los usuarios sin movimientos innecesarios y mejora progresivamente esa experiencia para los usuarios que no tengan esas necesidades o preferencias de accesibilidad.
prefers-color-scheme
Otra función de medios de preferencia es prefers-color-scheme. Esta función te ayuda a personalizar tu IU según el tema que prefiera el usuario. En su sistema operativo, ya sea en computadoras de escritorio o dispositivos móviles, los usuarios pueden establecer una preferencia por temas claros, oscuros o automáticos, que cambian según la hora del día.
Si configuras tu página con propiedades personalizadas de CSS, intercambiar los valores de color es sencillo. Puedes actualizar rápidamente los valores de tu tema de color, como backgroundColor y textOnPrimary, para que se ajusten de forma dinámica al tema nuevo dentro de la consulta de medios.
Para facilitar la prueba de algunas de estas consultas de preferencias, puedes usar las Herramientas para desarrolladores para la emulación en lugar de abrir las preferencias del sistema cada vez.
Diseña para el tema oscuro
Cuando se diseña para un tema oscuro, no se trata solo de invertir los colores del fondo y del texto, o de usar barras de desplazamiento oscuras. Hay algunas consideraciones que quizás no conozcas. Por ejemplo, es posible que debas reducir la saturación de los colores en un fondo oscuro para disminuir la vibración visual.
En lugar de usar sombras para crear profundidad y destacar un elemento, puedes usar luz en el color de fondo del elemento para destacarlo. Esto se debe a que las sombras no serán tan eficaces en un fondo oscuro.
Los temas oscuros no solo proporcionan una experiencia del usuario más personalizada, sino que también pueden mejorar significativamente la duración de la batería en las pantallas AMOLED. Esas son las pantallas que vemos en los teléfonos refinados más nuevos, y se están volviendo cada vez más populares en los dispositivos móviles.
Un estudio de Android de 2018 sobre los temas oscuros mostró un ahorro de consumo de energía de hasta un 60%, según el brillo de la pantalla y la interfaz de usuario general. La estadística del 60% se obtuvo comparando la pantalla de reproducción de YouTube con un video pausado al 100% del brillo de la pantalla con el tema oscuro para la IU de la app en comparación con un tema claro.
Siempre que sea posible, debes proporcionar una experiencia de tema oscuro para tus usuarios.
Se adapta al contenedor
Una de las áreas emergentes más interesantes en CSS son las consultas de contenedores, que también se suelen llamar consultas de elementos. Es difícil subestimar lo que el cambio del diseño responsivo basado en páginas al diseño responsivo basado en contenedores hará para evolucionar el ecosistema de diseño.
Este es un ejemplo de las potentes capacidades que proporcionan las consultas de contenedores. Puedes manipular cualquiera de los estilos del elemento de tarjeta, incluida la lista de vínculos, los tamaños de fuente y el diseño general según su contenedor superior:
En este ejemplo, se muestran dos componentes idénticos con dos tamaños de contenedor diferentes, ambos ocupan espacio en un diseño creado con CSS Grid. Cada componente se ajusta a su asignación de espacio única y se diseña según corresponda.
Este nivel de flexibilidad no es posible solo con las consultas de medios.
Las consultas de contenedor proporcionan un enfoque mucho más dinámico para el diseño responsivo. Esto significa que, si colocas este componente de tarjeta en una barra lateral o una sección hero, o dentro de una cuadrícula en el cuerpo principal de una página, el componente en sí posee su información responsiva y se ajusta según el contenedor, no el viewport.
Esto requiere la regla-at @container, que funciona de manera similar a una consulta de medios con @media, pero, en su lugar, @container consulta el contenedor superior para obtener información, en lugar del viewport y el usuario-agente.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Primero, establece la contención en el elemento superior. Luego, escribe una consulta @container para aplicar diseño a cualquiera de los elementos dentro del contenedor según su tamaño, con min-width o max-width.
En el código anterior, se usa max-width y se establecen los vínculos en display:none, además de disminuir el tamaño de la fuente de la hora cuando el contenedor tiene menos de 850px de ancho.
Tarjetas de consulta de contenedor
En este sitio web de plantas de demostración, cada una de las tarjetas de productos, incluida la del banner principal, la barra lateral de elementos vistos recientemente y la cuadrícula de productos, son exactamente el mismo componente, con el mismo lenguaje de marcado.
No se usan consultas de medios para crear todo este diseño, solo consultas de contenedor. Esto permite que cada tarjeta de producto cambie al diseño adecuado para llenar su espacio. Por ejemplo, la cuadrícula usa un diseño de columnas minmax para permitir que los elementos fluyan en su espacio y vuelvan a diseñar la cuadrícula cuando ese espacio esté demasiado comprimido (lo que significa que alcanzó el tamaño mínimo).
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
Cuando hay al menos 350px de espacio en la cuadrícula, el diseño de la tarjeta se vuelve horizontal, ya que se establece en display: flex, que tiene una dirección flexible predeterminada de "row".
Con menos espacio, las tarjetas de productos se apilan. Cada tarjeta de producto se aplica su propio estilo, algo que sería imposible solo con estilos globales.
Mezcla consultas de contenedores con consultas de medios
Las consultas de contenedores tienen muchos casos de uso, uno de los cuales es un componente de calendario. Puedes usar consultas de contenedores para volver a diseñar los eventos de calendario y otros segmentos en función del ancho disponible de su elemento superior.
Este contenedor de demostración realiza consultas para cambiar el diseño y el estilo de la fecha y el día de la semana del calendario, así como para ajustar los márgenes y el tamaño de la fuente en los eventos programados para que se adapten mejor al espacio.
Luego, usa una consulta de medios para cambiar todo el diseño para tamaños de pantalla más pequeños. En este ejemplo, se muestra lo potente que es combinar las consultas de medios (que ajustan los estilos globales o macro) con las consultas de contenedor (que ajustan los elementos secundarios del contenedor y sus microestilos).
Ahora podemos pensar en diseños macro y micro dentro del mismo componente de la IU para permitir algunas decisiones de diseño con matices muy agradables.
Usa las consultas de contenedores hoy mismo
Estas demostraciones ya están disponibles para jugar con un parámetro de configuración en Chrome Canary. Ve a about://flags en Canary y activa la marca #enable-container-queries.
Esto habilitará la compatibilidad con los valores @container, inline-size y block-size para la propiedad contain y la implementación de LayoutNG Grid.
El parámetro también habilita las funciones correspondientes de las Herramientas para desarrolladores de Chrome. Obtén más información para inspeccionar y depurar consultas de contenedores en las Herramientas para desarrolladores.
Estilos con alcance
Para aprovechar las consultas de contenedor, usa estilos con alcance con @scope para limitar el alcance de tus selectores.
Los estilos con alcance permiten aplicar estilos específicos de los componentes para evitar colisiones de nombres, algo que muchos frameworks y complementos, como los módulos de CSS, ya nos permiten hacer dentro de los frameworks. Los estilos con alcance te permiten escribir estilos encapsulados de forma nativa para componentes con CSS legible sin necesidad de ajustar el lenguaje de marcado.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
El alcance te permite crear selectores con forma de "rosquilla", en los que puedes especificar
un límite superior y uno inferior. Los selectores contenidos en la regla @scope se hacen coincidir entre esos límites.
Un ejemplo de esto sería un panel de pestañas, en el que querrías que las pestañas obtuvieran los estilos con alcance, pero que el panel dentro de esas pestañas no se viera afectado por esos estilos con alcance.
Se adapta al factor de forma
El siguiente tema de nuestra conversación sobre la nueva era del diseño responsivo es un cambio en los factores de forma y las crecientes posibilidades de lo que necesitaremos diseñar como comunidad web (como la pantalla que cambia de forma o la realidad virtual).
Las pantallas plegables o flexibles, y el diseño para la expansión de la pantalla son un ejemplo de dónde podemos ver un cambio en el factor de forma hoy en día. La expansión de pantalla es otra especificación en la que se está trabajando para cubrir estos nuevos factores de forma y necesidades.
Una consulta de medios experimental para la expansión de pantalla podría ayudarnos en este caso. Actualmente, se comporta de la siguiente manera: @media
(spanning: <type of fold>). La demostración configura un diseño de cuadrícula con dos columnas:
una tiene un ancho de --sidebar-width, que es de 5rem de forma predeterminada, y la otra es
1fr. Cuando el diseño se ve en una pantalla doble que tiene un solo pliegue vertical, el valor de --sidebar-width se actualiza con el valor de entorno del pliegue izquierdo.
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
Esto habilita un diseño en el que la barra lateral, la navegación en este caso, ocupa el espacio de uno de los pliegues, mientras que la IU de la app ocupa el otro. Esto evita que se produzca un "pliegue" en la IU.
Puedes probar las pantallas plegables en el emulador de las Herramientas para desarrolladores de Chrome para depurar y crear prototipos de la expansión de pantalla directamente en el navegador.
Conclusión
Explorar el diseño de la IU más allá de una pantalla plana es otra razón por la que las consultas de contenedores y los estilos con alcance son tan importantes. Te dan la oportunidad de aislar los estilos de los componentes del diseño de la página, los estilos globales y los estilos del usuario, lo que permite un diseño responsivo más resiliente. Esto significa que ahora puedes diseñar diseños de macros con consultas de medios basadas en páginas, incluidos los matices que abarcan la pantalla. Al mismo tiempo, usa microdiseños con consultas de contenedores en los componentes y agrega consultas de medios basadas en las preferencias del usuario para personalizar las experiencias del usuario según sus preferencias y necesidades únicas.
Este es el nuevo diseño responsivo.
Combina el diseño macro con el diseño micro y, además, tiene en cuenta la personalización del usuario y el factor de forma.
Cualquiera de estos cambios por sí solo constituiría un cambio considerable en la forma en que diseñamos para la Web. Sin embargo, en conjunto, representan un cambio muy grande en la forma en que conceptualizamos el diseño responsivo. Es hora de pensar en el diseño responsivo más allá del tamaño del viewport y comenzar a considerar todos estos nuevos ejes para obtener mejores experiencias personalizadas y basadas en componentes.
La próxima era del diseño responsivo ya está aquí, y puedes comenzar a explorarla por tu cuenta.
web.dev/learnCSS
Por ahora, si quieres subir de nivel tu juego de CSS y, tal vez, repasar algunos conceptos básicos, mi equipo lanzará un curso y una referencia de CSS completamente nuevos y gratuitos en web.dev. Puedes acceder a ellos en web.dev/learnCSS.
Espero que hayas disfrutado de esta descripción general sobre la próxima era del diseño responsivo y algunas de las primitivas que lo acompañarán, y también espero que te entusiasme tanto como a mí lo que esto significa para el futuro del diseño web.
Esto abre una gran oportunidad para nosotros como comunidad de IU para adoptar estilos basados en componentes, nuevos factores de forma y crear experiencias que respondan a los usuarios.