Las nuevas características de CSS para este 2022

CSS, el lenguaje que todo frontend se ve obligado a dominar y con el cual todo backend batalla continuamente hasta para centrar un div. Si estás aquí leyendo, seguramente ya has escuchado hablar del buen CSS y por ello, te interesará conocer las novedades que traerá el 2022 para este lenguaje

Recientemente salieron a la luz las nuevas características que irán llegando a lo largo de este año para este amado y a veces odiado lenguaje.

Acompáñame a descubrir algunas de estas nuevas características.

1. Container queries

Las container queries permiten dar estilos a un elemento en función del tamaño de su padre, muy diferente de las media queries, las cuales lo hacen en función del viewport. Estas nuevas queries permiten ahora que un componente se adapte a su contexto.

Para su uso es necesario especificar un elemento como el contenedor, haciendo uso de la propiedad container, la cual puede tener como valores width, height, inline-size o block-size.

main {
	container: inline-size;
}

Con el elemento contenedor definido, se puede usar @container como si se tratara de un media query para aplicar los estilos que desees cuando se cumpla la regla.

@container (inline-size > 50em) {
  section {
    display: flex;
  }
}

Con este ejemplo se indica que cuando el contenedor es más ancho que 50em se cambia a un diseño horizontal con flexbox.

Actualmente ningún navegador soporta el uso de las container queries, algunos como Chrome indican que esta propiedad puede ser usada habilitándolas desde chrome://flag, pero su implementación aún no es consistente.

Puedes mantenerte al tanto de su adopción en los diferentes navegadores en Can I Use, esta característica tiene mucho impulso, así que seguramente la puedas ver implementada pronto en tu navegador favorito.

2. :has()

:has() es una nueva pseudo-clase que te permitirá seleccionar un elemento en función de sus descendientes. Por ejemplo, podrías aplicar un estilo diferente a una imagen dentro de un figure dependiendo si va acompañada o no de un figcaption. Si piensas en ello las posibilidades son infinitas.

Suponiendo que tienes una contenedor llamado .container como elemento padre, si este contenedor tiene un h1 como elemento hijo, el background deberá de ser verde. Este tipo de casos de uso lo resuelve esta pseudoclase de la siguiente manera:

.container:has(h1) {
   background: green;
}

Actualmente solo Safari en su versión 15.4 y Safari Technology Preview lo soportan.

Puedes mantenerte al tanto sobre cómo evoluciona la adopción de esta característica en los principales navegadores a través de Can I Use.

3. Subgrid

El hecho de utilizar subgrid permite que un elemento herede la cuadrícula de su padre, ya sea en cuanto a las filas o las columnas. Con subgrid podrías alinear elementos con diferentes longitudes sin necesidad de definir una altura fija.

Si quieres utilizar subgrid entonces el elemento padre debe de ser configurado como un elemento grid tradicional. En los hijos de este elemento se podría utilizar el subgrid en las propiedades de grid-template-columns o grid-template-rows para que herede la rejilla del padre.

.grid {
	display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
}

.grid > section {
    display: grid;
    grid-template-rows: subgrid;
}

Firefox lo soporta desde el 2019, sin embargo, ningún otro navegador lo hace hasta el momento.

Puedes mantenerte al tanto sobre cómo evoluciona esta característica en otros navegadores en Can I Use.

4. @when/@else

Condicionales en CSS, el @when/@else tiene una lógica similar al if/else de otros lenguajes de programación. Esta característica podría facilitar el uso de media queries y reducir la complejidad.

Un ejemplo de uso se tiene cuando el usuario tiene un ancho determinado de viewport y su navegador soporta subgrid. Esto sería la condición @when y en caso de que no se cumpliera se ejecutaría el @else.

@when media(min-width: 30em) and supports(display: subgrid) {
	/* Estilos aplicados si el viewport es mayor a 30em y el navegador soporta subgrid */
} @else {
    /* Estilos para navegadores que no cumplan la condición */
}

Actualmente no tienen soporte en ningún navegador, de hecho es una característica que aún se encuentra en discusión ya que es una propuesta reciente.

Aún así puedes mantenerte al tanto sobre su adopción con Can I Use.

5. accent-color

La propiedad accent-color hace que sea fácil aplicar colores a los formularios y a sus elementos. Esto puede aplicar a botones, barras de progreso, casillas de verificación y entradas de texto.

Trabajar con los estilos de un formulario siempre ha sido complicado ya que cada navegador los representa de diferente manera. Una de las opciones tradicionales para trabajar con estos elementos era ocultar la versión por defecto y crear una nueva usando pseudo-elementos; esta propiedad permite mantener la versión original y aplicar un color sin muchas complicaciones.

Esta propiedad se hereda, por lo que puedes definirla en el root para aplicarla en todas partes.

:root {
    accent-color: lime;
}

O también en elementos individuales:

form {
    accent-color: lime;
}

input[type="checkbox"] {
    accent-color: pink;
}

Es compatible con los navegadores principales. Si un navegador aún no es compatible mostrará los colores por defecto y no afectará su funcionalidad.

Aún así puedes mantenerte al tanto sobre su adopción con Can I Use.

6. Funciones para colores

Ahora podrás jugar con los colores a través de diferentes funciones con únicamente CSS. Estas nuevas funciones son:

1. hwb(): tono, blancura, negrura.
2. lab(): luminosidad, junto con los valores a y b, que determinan el tono.
3. lch(): luminosidad, croma, tono.
4. color-mix(): mezcla de dos colores.
5. color-contrast(): a partir de una lista de colores, emite el que tiene el mayor contraste comparado con el primer argumento.
6. color(): especifica un color en un espacio de color.

Las primeras tres funciones (hwb(), lab() y lch()) se usan de la misma manera que la función rgb(), con un parámetro alfa como opcional.

div {
	/* se obtiene un color más opaco */
  background-color: lch(80% 100 50);
}

div {
	/* color con un 50% de transparencia */
  background-color: lch(80% 100 50 / 0.5);
}

color-mix() produce un color resultado de la mezcla de otros todos. Esta función necesita como primer argumento el método de interpolación que se va a usar.

div {
  background-color: color-mix(in lch, blue, lime);
}

color-contrast() requiere un color base con el que comparar los demás. Se mostrará el color con el mayor contraste, o en el caso de que se proporcione una palabra clave adicional, el primer color de la lista que cumpla la relación de contraste correspondiente.

/* Color con el contraste más alto */
div {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue);
}

/* Color que cumpla con el ratio AA de contraste */
div {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}

Las implicaciones que tiene este tipo de funciones para la accesibilidad es increíble. Por ejemplo, puedes dejar que el CSS seleccione si el texto en blanco o negro es el más adecuado para un botón con un color de fondo determinado.

Actualmente Safari está a la cabeza en cuanto a soporte en este momento, ya que soporta hwb(), lab(), lch() y color() desde su versión 15. Por otro lado color-mix() y color-contrast() pueden ser activados con una bandera.
Firefox tiene soporte para hwb(). El resto de navegadores no tiene soporte aún para estas características.

A pesar de que solo Safari implementa estas funciones, eso no significa que no las puedas utilizar en tu código, ya que puedes definir dos reglas y el navegador ignorará la que no tiene soporte. Así cuando el soporte a estas funciones se vuelva más generalizado tu código ya estará preparado.

div {
	background-color: rgb(57 186, 130);
  background-color: lch(50% 100 331);
}

Recuerda que puedes mantenerte al tanto sobre su adopción de todas estas funciones (hwb, lab, lch, color-mix, color-contrast, color) en Can I Use.

7. Cascade layers

Las cascade layers nos dan el poder para gestionar la parte “en cascada” de CSS.

Actualmente, hay varios factores que determinan qué estilos se aplicarán en tu código, incluyendo la especificidad del selector y el orden de aparición. Las cascade layers permiten agrupar eficazmente el CSS capas.

El código dentro de una capa inferior en el orden tendrá prioridad sobre el código en una capa superior, incluso si un selector en la capa superior tiene mayor especificidad. Aunque es algo un poco complejo de entender en un inicio, puedes pensar en esto como si fuera la funcionalidad del z-index pero potenciada.

/* Layers en el orden de importancia */
@layer reset, base, theme;

/* Css para cada layer */
@layer reset { ... }

@layer base {
  h1.title {
      font-size: 5rem;
  }
}

@layer theme {
  h1 {
      font-size: 3rem;
  }
}

La declaración font-size para h1 en la capa theme le gana a la de base, a pesar de que esta última tiene una mayor especificidad.

Esta característica es soportada por los navegadores más populares en sus últimas versiones.

cascade layers está teniendo una fuerte adopción, así que es de esperarse que cuente con un apoyo bastante amplio en el futuro cercano. Puedes mantenerte al tanto de su adopción en Can I Use.

8. Scroll Timeline

Seguramente has visto un montȯn de sitios web en los cuales al desplazarte por el sitio van saliendo animaciones, un sitio donde puedes ver esto es Apple. Hay un montón de librerías de JavaScript que ayudan a implementar estos efectos pero con scroll timeline se pretende que CSS tenga la capacidad de hacerlo solo, sin necesidad de la intervención de JavaScript.

Para implementarlo se necesita un par de cosas como tener la animación, usar la regla @scroll-timeline at y añadir la propiedad de animation-timeline en el elemento que se va a animar.

/* Keyframe animation */
@keyframes slide {
    to { transform: translateX(calc(100vw - 2rem)); }
}

/* Scroll timeline */
@scroll-timeline slide-timeline {
  source: auto;
  orientation: vertical;
  scroll-offsets: 0%, 100%;
}

/* aplicar keyframe y scroll timeline */
.animated-element {
  animation: 1s linear forwards slide slide-timeline;
}

También se puede utilizar el scroll-timeline basado en elementos con la propiedad scroll-offsets, para que se active cuando un elemento en particular se desplaza a la vista.

@scroll-timeline slide-timeline {
    scroll-offsets: selector(#element) end 0, selector(#element) start 1;
}

Esta propiedad aún no es soportada en ningún navegador de forma predefinida, pero se puede activar en navegadores como Chrome a través de una bandera.

Para mantenerte al tanto de su adopción en tu navegador preferido, puedes revisar Can I Use.

9. Nesting

Si has trabajado con preprocesadores como Sass, esta característica no te resultará desconocida. El anidamiento permite mantener el código organizado y con esto se busca implementar en CSS nativo.

La sintaxis de esta característica es similar a la de Sass, por ejemplo, la siguiente regla apunta a un h2 dentro de un div.

div {
    color: red;

    &h2 {
        color: blue;
    }
}

También puedes utilizarlo en las pseudo-clases o los pseudo-elementos.

.link {
    color: red;

    &:hover,
    &:focus {
        color: blue;
    }
}

Ningún navegador lo soporta todavía, ni siquiera con el uso de banderas. Pero si usas PostCSS, puedes probarlo con el plugin postcss-preset-env.

Recuerda que puedes revisar su adopción en Can I Use.

10. El futuro del CSS

En estos días podemos ver como CSS mejora continuamente, lo cual es muy interesante ya que antes si querías hacer animaciones o efectos necesitabas por fuerza llamar a JavaScript para que te ayudara. Actualmente, CSS puede solito con estos retos e intenta emprender nuevos para que, conforme pase el tiempo, necesites menos ayudas externas.

Cuéntame en los comentarios cuáles de estas características son las que más te emocionan y también si quieres ver alguna funcionalidad especifica próximamente dentro del estándar de CSS.

Sé como CSS y nunca pares de mejorar y por supuesto aprender 💚