Nuevas características de CSS para esperar en 2022

Aquí hay algunas actualizaciones de hojas de estilo en cascada que no querrá perderse, que van desde propiedades poco conocidas de ajuste de desplazamiento hasta impresionantes paletas de colores nuevas.

CSS (hojas de estilo en cascada) debutó en 1996 y sigue siendo un componente importante y en evolución de la pila de desarrollo web. CSS, al igual que otros lenguajes vivos, siempre agrega nuevas funciones en respuesta a las prácticas del mundo real. Debido a la rápida evolución, incluso los desarrolladores dedicados pueden pasar por alto nuevas funciones. Vea algunas de las funciones más útiles que llegarán a CSS en un futuro cercano.

subcuadrícula

CSS ha sido criticado por una serie de fallas flagrantes desde su creación. Algunas tareas sencillas, como centrar algo en CSS, requieren soluciones y trucos demasiado complejos.
Otro problema importante fue lograr un diseño de cuadrícula razonable, al menos hasta que intervino el módulo CSS Grid Layout.

Un diseño de cuadrícula se indica mediante la declaración display: grid y es similar a Flexbox en que le permite definir diseños rectangulares mientras también controla su cuadrícula en dos dimensiones.
Según la investigación, la mayoría de los desarrolladores de CSS conocen Grid Layout y muchos de nosotros lo usamos. (¡No olvides probarlo si no lo has hecho!)

Subgrid es una característica nueva y extremadamente útil para el módulo Grid Layout. La función de subcuadrícula le permite crear una cuadrícula secundaria que heredará el diseño de su cuadrícula principal.

A diferencia de anidar una visualización de cuadrícula dentro de otra, la cuadrícula secundaria define sus propias dimensiones y espacios. El diseño del padre se aplica a la subcuadrícula cuando se usa la subcuadrícula, pero la subcuadrícula aún puede anular aspectos del diseño si es necesario.

Actualmente, Subgrid solo está disponible en Firefox 71 y superior, pero está previsto para Safari WebKit, Google Chrome y Microsoft Edge. Una subcuadrícula será una característica de diseño muy útil en el futuro.

Acentuar el color

A pesar de su popularidad, algunos elementos de exhibición son notoriamente difíciles de diseñar. Las casillas de verificación y los botones de radio, por ejemplo, se reemplazan con frecuencia con un widget personalizado que imita su comportamiento mientras oculta la implementación del navegador. Puede orientar estos elementos con la nueva opción de acento de color CSS.

Por ejemplo, como se muestra en el Listado 1, podría aplicar un color magenta a todos los botones de radio de su página (vea también este ejemplo en vivo).

Listado 1: Control de color CSS para botones de opción

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

Ajuste de desplazamiento

CSS ofrece un práctico conjunto de propiedades para controlar la acción rápida de desplazamiento en un navegador web. Muchas de estas funciones ya están disponibles en versiones recientes del navegador, mientras que otras aún se están implementando.

Vale la pena señalar que más de un tercio de los usuarios de CSS aún desconocen el complemento de desplazamiento.

El comando de propiedades scroll-snap-* proporciona varias opciones para ajustar cómo funciona la posición de desplazamiento en un contenedor. Los desarrolladores se benefician de una mayor precisión, mientras que los usuarios finales se benefician de una experiencia de usuario más fluida y controlada.

El Listado 2 muestra un ejemplo simple de cómo controlar el ajuste de desplazamiento en un div (vea también este ejemplo en vivo).

El Listado 2 es un ejemplo de un complemento de desplazamiento simple.

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

La posición de desplazamiento y en el Listado 3 se mueve automáticamente al elemento secundario sin importar dónde suelte el movimiento de desplazamiento. Esto se debe a que la propiedad scroll-snap-type del contenedor de desplazamiento se establece en y y los elementos secundarios tienen la declaración scroll-snap-align: start.

Este comportamiento también se puede cambiar. Podría, por ejemplo, establecer la propiedad scroll-snap-type en la proximidad y. Eso funciona como se esperaba, ajustándose solo cuando el desplazamiento está cerca del elemento.

Además, la propiedad relacionada overscroll-behavior controla cómo se comportan los contenedores de desplazamiento anidado.

Propiedades lógicas de CSS

Probablemente haya experimentado la molestia de tener que escribir las propiedades border-left y border-right o border-top, border-bottom palabra por palabra si alguna vez quiso establecer un borde de contenedor a la izquierda y derecha, o abajo y parte superior. El problema es que no hay forma de usar la propiedad de acceso directo sin afectar los bordes que no desea cambiar. Esto también es válido para elementos como el relleno y los márgenes.

El módulo de propiedades lógicas de CSS le permite hacer referencia a cosas de forma abstracta mediante el uso de palabras clave en línea y bloque. Cuando se refiera a izquierda y derecha, use en línea; cuando se refiera a arriba y abajo, use bloque. Por ejemplo, para agregar un borde a los lados izquierdo y derecho de un div, use el código en el Listado 3. (También vea un ejemplo en vivo aquí).

Listado 3: relleno izquierdo y derecho con lógica en línea

 div { border- inline : 10px dashed seagreen; }

Estos son atajos útiles para los bordes, pero las palabras clave lógicas en línea y en bloque también se pueden encontrar en una variedad de otras propiedades.

La mayoría de los desarrolladores usan estos atajos para lidiar con problemas de dirección de texto y modo de escritura. En estos casos, una propiedad como padding-inline-end le permite orientar el relleno final independientemente de la dirección del texto.

Esencialmente, la abstracción en línea y bloque permite la creación de estilos generalizados que se pueden aplicar a una variedad de situaciones. Puede encontrar más información en Propiedades y valores lógicos de CSS.

Búsquedas de contenedores

Las consultas de contenedor aún no son completamente estables en CSS, pero lo serán pronto. Tendrán un impacto significativo en la forma en que pensamos sobre el diseño receptivo. La idea básica es que podrá establecer un punto de interrupción en función del tamaño de un contenedor principal en lugar de solo la ventana gráfica y los medios.

No hay una definición clara de la sintaxis, pero probablemente se parecerá al Listado 4.

@contenedor Listado 4.

 @container (max-width: 650px){ … }

Considere cuán poderoso será ajustar un diseño en función del tamaño de varios contenedores que aparecen en las capas anidadas de una interfaz de usuario. Este es un cambio bastante significativo que seguramente provocará una ola de innovaciones en la interfaz.

Tres nuevos esquemas de color.

Los profesionales de CSS han utilizado RGB, HEX y colores con nombre para embellecer y animar las pantallas de los dispositivos desde tiempos inmemoriales. La declaración de color al estilo HSL se introdujo recientemente. La especificación CSS ahora está introduciendo nuevos descriptores de color, a saber, hwb, lab y lch.

HWB es una abreviatura de tono, blancura y negrura. Es un toque agradable que se destaca por su legibilidad humana: eliges un color y luego agregas blanco y negro. Es compatible con las versiones más recientes de Chrome, Firefox y Safari. (La referencia de la característica de Microsoft Edge es curiosamente ensordecedoramente silenciosa sobre este tema). Para obtener más información sobre HWB, consulte hwb(): ¿una notación de color para humanos? Al igual que RGB y HWL, tiene un canal alfa para la transparencia.

LCH, que significa luminosidad, croma y tono, se destaca por expandir la paleta de colores disponible. ¿Qué, por qué y cómo se usan los colores LCH en CSS? Esta es una buena descripción general que incluye una discusión reveladora de la teoría del color en CSS. Actualmente, solo Safari es compatible con LCH.

El más teórico de los nuevos espacios de color es LAB, que se deriva de la teoría del color CIE LAB. El descriptor de color del laboratorio pretende cubrir todo el espectro de colores perceptibles por humanos, lo cual es una afirmación audaz. Al igual que LCH, actualmente solo es compatible con Safari. Puede encontrar más información sobre LAB para CSS en la documentación de Mozilla CSS.