🚩 2024 ha sido un gran año para CSS

El año 2024 ha traído consigo una serie de nuevas e interesantes características para CSS.

En el blog de Chrome.dev han creado un artículo detallando todas y cada una de las novedades.

A continuación, os voy a mencional solo algunas, para verlas todas os recomiendo ir al articulo original de Chrome.dev.

field-sizing

field-sizing: Esta propiedad simplifica la creación de campos de entrada de tamaño dinámico, como textarea, select e input. Ahora, estos elementos pueden ajustarse automáticamente al tamaño de su contenido, eliminando la necesidad de complejas soluciones con JavaScript.

textarea, select, input {
  field-sizing: content;
}

Animar a height: auto:

La capacidad de animar a height: auto ha sido una solicitud recurrente de la comunidad de desarrollo web. Con la introducción de interpolate-size y calc-size(), esta funcionalidad se convierte en una realidad, permitiendo transiciones suaves entre diferentes valores de altura, incluyendo min-content, max-content y fit-content.

:root {
    interpolate-size: allow-keywords;
}

<details> más versátiles

Los elementos <details> y <summary>, utilizados para crear secciones desplegables, ganan en versatilidad gracias a nuevas opciones de estilo. Ahora es posible utilizar la propiedad display y el pseudoelemento ::details-content, abriendo un sinfín de posibilidades para la creación de acordeones y otros widgets interactivos.

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>

Posicionamiento de anclaje

El posicionamiento de anclaje, una nueva forma declarativa de posicionar elementos en relación a otros, llega a CSS. Con las propiedades anchor-name y position-anchor, la creación de menús, tooltips y otros elementos flotantes se simplifica notablemente.

<div class="anchor">
  <img src="https://assets.codepen.io/2585/image_fx_.jpg" alt="a smiling sunny side up egg made of clay" />
</div>

<div class="positioned-element">
  Over-Easy
</div>

.anchor {
  anchor-name: --over-easy;
}

.positioned-element {
  position: fixed;
  position-anchor: --over-easy;
  position-area: block-end;
}

Barras de desplazamiento personalizadas

Las barras de desplazamiento, a menudo descuidadas en términos de diseño, ahora pueden ser personalizadas con mayor facilidad gracias a las propiedades scrollbar-width y scrollbar-color. Esto permite a los desarrolladores integrar las barras de desplazamiento de forma más armoniosa en el diseño general del sitio web.

.scroller {
  scrollbar-color: hotpink blue;
  scrollbar-width: 10%;
}

Transiciones de vista entre documentos

La posibilidad de crear transiciones fluidas entre páginas web separadas llega con las transiciones de vista entre documentos. Esta funcionalidad, disponible a partir de Chrome 126, elimina la necesidad de recurrir a arquitecturas de una sola página (SPA) para lograr este efecto.

@view-transition {
  navigation: auto;
}

Hay muchas más, como animaciones controladas por desplazamiento, la propiedad @property, una forma para crear temas oscuros, la nueva API de ventanas emergentes, etc.