Google introduce la función if() para condicionales CSS inline en Chrome

A partir de Chrome 137, los desarrolladores pueden experimentar con condicionales CSS inline usando la nueva función if(). Esta innovadora característica permite crear una interfaz de desarrollo más limpia para estilos dinámicos como consultas de estilo y consultas de medios, con algunas diferencias clave que transformarán la forma en que escribimos CSS.

Cómo funciona la función if()

La función CSS if() opera mediante una serie de pares condición-valor, estructurados de la siguiente manera:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

También puedes proporcionar una declaración else, que se utiliza si ninguna de las otras condiciones se cumple:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

Tres tipos de consultas compatibles

Actualmente, if() funciona con tres tipos diferentes de consultas:

• style(): Consultas de estilo
• media(): Consultas de medios
• supports(): Consultas de compatibilidad

Nota importante: Una diferencia clave entre las consultas de estilo tradicionales y usar style() dentro de la función if() es que if() se aplica al elemento estilizado inmediatamente. Como no depende de un elemento padre para consultar un valor, puedes consultar valores de estilo de manera inmediata.

Ejemplo práctico: consultas de medios inline

Usar if() es una excelente manera de incluir consultas de medios inline en tus estilos. Por ejemplo, podrías verificar la preferencia de tema del usuario (claro u oscuro), o hacer consultas de medios inline para el ancho de la ventana de visualización.

El siguiente ejemplo muestra la consulta de medios para dispositivos con puntero. El tamaño predeterminado del botón sería 30px en un dispositivo con puntero fino, como un mouse, pero para dispositivos táctiles, como aquellos con puntero grueso, el tamaño del botón sería el mínimo recomendado de 44px para el espaciado táctil apropiado y facilitar el acceso.

css button { aspect-ratio: 1; width: if(media(any-pointer: fine): 30px; else: 44px); }

El código anterior da el mismo resultado que la siguiente consulta de medios tradicional:

css button { aspect-ratio: 1; width: 44px; }

@media (any-pointer: fine) { button { width: 30px; } }

Usar el formato if() te permite tener la lógica inline, sin requerir la lógica de estilo en dos lugares diferentes.

Consultas de compatibilidad inline

Otra forma de usar if() es crear consultas de compatibilidad inline. Por ejemplo, para verificar la compatibilidad con colores de amplio gamut, como OKLCH, podrías usar:

css body { background-color: if( supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232); else: #00adf3; );

&::after { content: if( supports(color: oklch(0.7 0.185 232)): «Your browser supports OKLCH»; else: «Your browser does not support OKLCH»; ); } }

Con este código, si el navegador compatible con el espacio de color oklch, el usuario verá el color más vívido, y también obtendrá el mensaje: «Your browser supports OKLCH» en el contenido pseudo ::after.

Visualización del estado de la interfaz

También puedes usar if() para estilizar basado en estados. Por ejemplo, estilizar tarjetas de progreso según su estado de UI (pendiente o completo). Almacena el estado en un atributo de datos o una propiedad personalizada directamente, y luego aplica estilos inline a la propiedad usando if().

Con style() dentro de una función if(), puedes estilizar directamente el elemento que estás targeting, sin necesidad de un elemento padre como requieren las consultas de estilo CSS tradicionales.

Una nueva arquitectura para CSS

Este demo muestra un caso básico de cómo puedes usar if() para apoyar un nuevo enfoque arquitectónico para CSS. Un beneficio de usar propiedades personalizadas CSS sobre clases es la facilidad de actualizarlas en CSS. Por ejemplo, podrían actualizarse usando consultas de medios o pseudo estados como :hover.

El futuro de CSS

La adición de if() proporciona una nueva oportunidad arquitectónica para los desarrolladores de CSS. A medida que tecnologías como las consultas de estilo evolucionan, las consultas de rango probablemente serán posibles dentro de las funciones if(), y también serán útiles cuando se combinen con la próxima propuesta de funciones personalizadas (CSS @function).

Esta innovación marca un paso significativo hacia un CSS más dinámico y expresivo, permitiendo a los desarrolladores crear estilos más mantenibles y lógicos sin la necesidad de duplicar código o usar múltiples bloques de reglas CSS.