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 usas el término “diseño responsivo”, es probable que estés pensando en usar consultas de medios para cambiar el diseño cuando cambias el tamaño de un diseño del tamaño de un dispositivo móvil al de una tablet y al de una computadora de escritorio.
Sin embargo, pronto, esta percepción del diseño responsivo podría considerarse tan desactualizada como el uso de tablas para el diseño de páginas.
Las solicitudes de medios basadas en la ventana de visualización te brindan algunas herramientas potentes, pero carecen de mucha precisión. No tienen la capacidad de responder a las necesidades de los usuarios ni de insertar estilos responsivos en los componentes.
Puedes usar la información del viewport global para aplicar diseño a tus componentes, pero estos aún no son propietarios de sus 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 hace con bastante rapidez. CSS evoluciona, y una nueva era del diseño responsivo está a la vuelta de la esquina.
Esto ocurre 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.
Así que, 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, definiendo especificaciones y comenzando la implementación de la próxima era del diseño responsivo.
Estas actualizaciones incluyen funciones multimedia basadas en las preferencias del usuario, consultas de contenedores y consultas multimedia para nuevos tipos de pantallas, como las plegables.
Es responsivo al usuario.
Las nuevas funciones multimedia de preferencias del usuario te permiten aplicar diseño a experiencias web que se alinean con las preferencias y necesidades específicas del usuario. Esto significa que las funciones de medios de preferencia te permiten adaptar las experiencias de los usuarios a las suyas.
Entre estas funciones multimedia de preferencias del usuario, se incluyen las siguientes:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Y mucho más
Las funciones de preferencia detectan las preferencias que un usuario estableció en su sistema operativo y ayudan a crear una experiencia web más sólida y personalizada, especialmente para las personas con 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 cambio de tarjeta, un cargador intrincado ni otras animaciones llamativas mientras usan la Web.
Con prefers-reduced-motion, puedes diseñar tus páginas teniendo en cuenta la reducción de movimiento y crear una experiencia mejorada con movimiento para quienes no tienen establecida esta preferencia.
Esta tarjeta tiene información en ambos lados. La experiencia de referencia de movimiento reducido es una compaginación para mostrar esa información, mientras que la experiencia mejorada con movimiento es un giro de tarjeta.
Prefers-reduced-motion no debe 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 sin 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 con 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 del CSS, el intercambio de 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 multimedia.
Para facilitar la prueba de algunas de estas consultas de preferencias, puedes usar DevTools para la emulación en lugar de abrir las preferencias del sistema cada vez.
Cómo diseñar para el tema oscuro
Cuando diseñas para un tema oscuro, no se trata solo de invertir los colores de fondo y texto, ni de las barras de desplazamiento oscuras. Hay algunas consideración que quizás no tengas en cuenta. Por ejemplo, es posible que debas desaturar los colores en un fondo oscuro para reducir la vibración visual.
En lugar de usar sombras para crear profundidad y destacar un elemento, te recomendamos que uses 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 pantallas AMOLED. Esas son las pantallas que vemos en los teléfonos de alta gama 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 temas oscuros mostró un ahorro de energía de hasta el 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 en pausa con el 100% de brillo de la pantalla con el tema oscuro para la IU de la app en comparación con un tema claro.
Siempre debes proporcionar una experiencia de tema oscuro a los usuarios siempre que sea posible.
Se ajusta automáticamente al contenedor
Una de las áreas emergentes más interesantes de CSS son las consultas de contenedor, 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 funciones que proporcionan las consultas de contenedores. Puedes manipular cualquiera de los estilos del elemento de la 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 ocupando espacio en un diseño creado con CSS Grid. Cada componente se ajusta a su asignación de espacio única y se aplica el diseño según corresponda.
Esta cantidad de flexibilidad es algo que no es posible solo con las consultas de medios.
Las consultas de contenedor proporcionan un enfoque mucho más dinámico al diseño responsivo. Esto significa que, si colocas este componente de tarjeta en una barra lateral o en una sección hero o dentro de una cuadrícula dentro del cuerpo principal de una página, el componente en sí posee su información responsiva y sus tamaños según el contenedor, no el viewport.
Esto requiere la regla de @container. 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.
El código anterior usa max-width y establece los vínculos en display:none, además de disminuir el tamaño de la fuente de tiempo cuando el contenedor tiene menos de 850px de ancho.
Tarjetas de consulta de contenedores
En este sitio web de la planta de demostración, cada una de las tarjetas de producto, incluida la del héroe, la barra lateral de los elementos vistos recientemente y la cuadrícula de productos, son el mismo componente exacto, con el mismo lenguaje de marcado.
No se usan consultas de medios para crear todo este diseño, solo consultas de contenedores. Esto permite que cada tarjeta de producto cambie al diseño adecuado para completar su espacio. Por ejemplo, la cuadrícula usa un diseño de columna 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 cuando se establece en display: flex, que tiene una dirección flex predeterminada de "fila".
Con menos espacio, las tarjetas de productos se apilan. Cada tarjeta de producto se aplica su propio diseño, algo que sería imposible solo con los diseños globales.
Combinación de 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 contenedor para volver a diseñar los eventos de calendario y otros segmentos según el ancho disponible de su elemento superior.
Este contenedor de demostración consulta 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 contenido multimedia (ajustar los estilos globales o macro) con las consultas de contenedor (ajustar 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.
Cómo usar consultas de contenedores en la actualidad
Estas demostraciones ahora están disponibles para jugar con una marca 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 la cuadrícula de LayoutNG.
La marca también habilita las funciones correspondientes de Chrome DevTools. Obtén información para inspeccionar y depurar consultas de contenedores en DevTools.
Estilos centrados
Para compilar en consultas de contenedores, usa estilos centrados con @scope para limitar el alcance de tus selectores.
Los estilos con alcance permiten aplicar estilos específicos del componente para evitar colisiones de nombres, algo que muchos frameworks y complementos, como los módulos 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 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 "en forma de dona", en los que puedes especificar un límite superior y uno inferior. Los selectores contenidos en la regla @scope coinciden entre esos límites.
Un ejemplo de esto sería un panel de pestañas, en el que deseas que las pestañas obtengan los estilos centrados, pero que el panel dentro de esas pestañas no se vea afectado por esos estilos centrados.
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 pantallas que cambian de forma o realidad virtual).
Las pantallas plegables o flexibles, y el diseño para pantallas extendidas, son un ejemplo de un cambio de factor de forma en la actualidad. Y 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 búsqueda de medios experimental para la expansión de pantallas podría ayudarnos aquí. 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 5 rem 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 permite 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 un “pliegue” en la IU.
Puedes probar pantallas plegables en el emulador de Chrome DevTools para depurar y crear prototipos de pantallas que se extienden 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 centrados son tan importantes. Te brindan la oportunidad de aislar los estilos de componentes del diseño de página y los estilos globales, y los estilos del usuario, lo que permite un diseño responsivo más resistente. Esto significa que ahora puedes diseñar diseños macro con consultas de contenido multimedia basadas en páginas, incluidas las diferencias entre pantallas. Al mismo tiempo, usa microdiseños con consultas de contenedor en los componentes y agrega consultas de medios basadas en las preferencias del usuario para personalizar las experiencias de los usuarios según sus preferencias y necesidades únicas.
Esta es la nueva versión responsiva.
Combina el diseño macro con el microdiseño y, además de todo eso, tiene en cuenta la personalización del usuario y el factor de forma.
Cualquiera de estos cambios por sí solo representaría un cambio considerable en la forma en que diseñamos para la Web. Pero, en conjunto, representan un cambio muy grande en la forma en que incluso concebimos el diseño responsivo. Es hora de pensar en el diseño responsivo más allá del tamaño de la vista y comenzar a considerar todos estos ejes nuevos para obtener mejores experiencias personalizadas y basadas en componentes.
La nueva era del diseño responsivo ya está aquí y puedes comenzar a explorarla por tu cuenta.
web.dev/learnCSS
Por ahora, si quieres mejorar tu nivel de CSS y, tal vez, repasar algunos aspectos básicos, mi equipo lanzará un curso y una referencia de CSS nuevos y totalmente gratuitos en web.dev. Puedes acceder a ellos en web.dev/learnCSS.
Espero que hayas disfrutado de esta descripción general de la próxima era del diseño responsivo y algunas de las primitivas que lo acompañarán. También espero que estés tan entusiasmado como yo con lo que esto significa para el futuro del diseño web.
Nos brinda una gran oportunidad como comunidad de IU para adoptar estilos basados en componentes, nuevos factores de forma y crear experiencias responsivas para el usuario.