La evolución del estilo web está impulsada cada vez más por 'Interop', un proyecto colaborativo que involucra a los principales proveedores de navegadores como Google, Apple, Microsoft y Mozilla. El objetivo de Interop es garantizar el soporte universal de los navegadores para las nuevas tecnologías web. Un ejemplo exitoso de esta colaboración es CSS Subgrid, que alcanzó casi el 100% de soporte en los navegadores modernos dentro de un año tras ser añadido a la hoja de ruta de Interop. A medida que la industria se prepara para Interop 2027, los desarrolladores están comenzando a ver una vista previa de la próxima generación de capacidades de CSS.

Un gráfico de líneas que muestra el rápido aumento del soporte de CSS Subgrid en los navegadores a lo largo de 2023.
La rápida adopción de CSS Subgrid demuestra el éxito del proyecto Interop en lograr el soporte universal de los navegadores.www.joshwcomeau.com

Este gráfico ilustra la exitosa colaboración entre los proveedores de navegadores para implementar CSS Subgrid, que alcanzó casi el 100% de soporte en un año.

Uno de los cambios más significativos involucra la introducción de funciones CSS. De manera similar a JavaScript, estas funciones permiten a los desarrolladores definir lógica personalizada, como convertir coordenadas polares a coordenadas cartesianas para animaciones complejas. Otro avance importante es la expansión de las capacidades de forma más allá de las esquinas redondeadas estándar. La propiedad `corner-shape` propuesta introduce opciones como 'squircle' (usando algoritmos de superelipse), 'bevel' (esquinas diagonales de 45 grados) y recortes tipo 'notch' o 'scoop'. A diferencia de los métodos anteriores que utilizaban `clip-path`, estas propiedades modifican realmente el border-box del elemento, asegurando que los bordes, los contornos y las sombras de caja sigan correctamente las nuevas formas.

Cinco cajas que demuestran diferentes formas de esquina, incluyendo redondo, squircle, bevel, notch y scoop.
La propiedad corner-shape propuesta introduce diversas opciones geométricas como squircles y bordes biselados.www.joshwcomeau.com

La propiedad corner-shape propuesta introduce opciones como 'squircle', 'bevel' y recortes tipo 'notch' o 'scoop'.

Una tarjeta verde con esquinas estilo squircle y un recorte circular que sigue la parte inferior de una moneda de oro.
Un ejemplo práctico de las nuevas propiedades corner-shape aplicadas a un elemento de interfaz de usuario con un recorte complejo.www.joshwcomeau.com

A diferencia de los métodos anteriores que utilizaban clip-path, estas propiedades modifican realmente el border-box del elemento, asegurando que los bordes, los contornos y las sombras de caja sigan correctamente las nuevas formas.

Otras mejoras se centran en el diseño y la accesibilidad. La API de Anchor Positioning 'Nivel 2' incluirá nuevas consultas de contenedor para detectar si un elemento objetivo (como un tooltip) se ha invertido a una posición de respaldo, permitiendo ajustes de interfaz de usuario más precisos. Además, una propiedad `reading-flow` propuesta tiene como objetivo alinear el orden de tabulación de los elementos con su orden visual en diseños complejos de grid o flexbox, lo cual representa una victoria significativa para los usuarios que dependen de tecnologías de asistencia. Aunque algunas funciones como la función `inherit()` permanecen en etapas tempranas de propuesta, estos desarrollos señalan un movimiento hacia un entorno CSS más programático y geométricamente flexible.