if() en CSS: una herramienta clave para el desarrollo frontend.

CSS ha recorrido un largo camino desde sus días de puro estilo estático: hoy en día, no solo define cómo se ve una web, sino también su adaptabilidad gracias a que contamos con media queries, custom properties y @supports. Ahora algo está asomando la patita para que podamos dar un paso más allá: la función if().

Sí, has leído bien: condicionales directamente en las propiedades CSS sin tener que escribir un solo @media, repetir reglas o duplicar estilos. Una forma de traer un poquito de lógica condicional de otros lenguajes a las hojas de estilo. No es magia (aunque lo parezca); es el futuro del CSS, y ya ha comenzado.

Este artículo explora, con ejemplos visuales y prácticos, cómo funciona la propuesta de if() en CSS. Aunque todavía no está ampliamente soportada, su sintaxis ya está totalmente definida y apunta a ser una herramienta clave para los próximos años del desarrollo frontend.

✏️Nota: si queremos probar algo de esto, tenemos que asegurarnos de que nuestro navegador está al día. Solo disponible en Chrome 137 o superior y Edge 137.

Explicación de la definición

Si CSS pudiera pensar, probablemente usaría if(). Esta función está aún en borrador dentro de la W3C. Desde que CSS empezó a evolucionar, if() ha sido una petición histórica y, si Chrome la ha incluido, podemos tener la certeza de que ha llegado para quedarse. Promete traernos condicionales directamente a nuestras reglas CSS.

La estructura es sencilla y se ve más o menos así:

div {
   color: if(
               style(<some-condition>): <some-value>;
               style(<some-other-condition>): <some-other-value>;
               else: <default-value>;
           );
}

Lo que hace es evaluar una condición en línea y aplicar un valor u otro dependiendo del resultado. Nada de repetir bloques con @media, @supports, ni inventar hacks raros. Pura lógica CSS.

Hasta ahora, estas lógicas se resolvían combinando @media, variables, clases adicionales o directamente con JavaScript. Con if(), podremos tener estilos mucho más limpios, portables y declarativos.

Condicionales de estilo

Las condicionales de estilo evalúan el valor de una variable CSS personalizada para tomar decisiones visuales. Ideal para temas, estados, configuraciones del usuario o incluso props en componentes web.

Ejemplo: tema claro u oscuro

¿Tienes una variable --color que define si el modo es claro u oscuro? ¡Con if() puedes cambiar el color automáticamente!

Definamos un html sencillo, un par de párrafos con sus clases claro y oscuro.

Ya sé: con clases y variables también se puede. Pero lo interesante aquí es if(), luego iremos complicando el asunto. Estoy declarando un estilo en función de una variable y aplicando, si existe, ese valor.

De esta forma podemos obtener lo siguiente:

¿Resultado? Un tema que responde automáticamente sin tener que alternar clases, usar JavaScript o escribir 20 líneas adicionales. Y si no se define --color, simplemente se usará el color por defecto.

(A quienes se pregunten por qué el color por defecto es el naranja… ¿tenéis algún problema con el color naranja?)

Consejo: ideal para sistemas de diseño y frameworks de componentes donde quieres que cada pieza se comporte de forma autónoma dependiendo de variables.

Condicionales de medios

Usar if(media(...)) nos permite aplicar estilos diferentes según el entorno: ancho de pantalla, orientación, tipo de dispositivo, etc… El CSS responsive del futuro.

Los @media son popularmente conocidos ya que los hemos usado una y otra vez para maquetar diseños adaptativos. Seguro que más de una vez te has quedado estrechando y ensanchando la ventana del navegador solo para ver cómo todo cambiaba. No hace falta explicar mucho más: el resultado nos resulta familiar.

Ejemplo: tamaño del texto en función del ancho

Este ejemplo no tiene mucho misterio. Si el ancho supera los 1024px, la fuente será de 1.5rem. Si no, se mantiene en 1rem. Lo potente es que ya no necesitas duplicar reglas ni romper el flujo natural del componente.

Condicionales de soporte

Con esto le podremos decir (por fin) adiós a los vendor prefixes y, de paso, a uno de los mayores dolores de cabeza que sufrimos: ese navegador que solo usa el cliente…

Es cierto que el @supports no es nuevo, pero if() lo hace de forma más directa. Si no está soportado, omite el contenido y, además, podemos seguir añadiendo un comportamiento por defecto.

Ejemplo: color mezclado con color-mix

Vamos a aplicar, si se puede, un color-mix como color de fondo. Si el navegador no lo entiende, podemos establecer un color sin mezclar. Así evitamos tener que escribir una alternativa separada.

Truco útil. Podemos usar supports(...) dentro del if() para cualquier propiedad: tipografías, filtros, sombras, etc.

Ejemplo un poco más elaborado

Apliquemos este nuevo condicionante para modificar el aspecto y posición de unas tarjetitas. Algo como un mini tablero Kanban donde las tarjetas cambian de estilo según su estado.

Empezamos con tres tarjetas. Comparten la clase “card” y todas tienen un data-status (si no lo tienen se comportarán como “inactive” por defecto) con valores como pending, complete o inactive.

Omito en la captura los estilos que no son determinantes para el ejemplo, como los de body, container, card…

Creando la variable -–status podemos leer, gracias al attr, cada data-status en nuestro html.

Usamos **type()**para especificar el valor esperado. Este tipo es “custom” ya que no es un valor de los que están predefinidos en CSS (propiedad, valor numérico, nombre de color…).

if(style(--status: ...): compara el valor de --status y aplica estilos distintos para cada caso.

Poder definir los diferentes estados dentro de cada propiedad es un cambio declarativo importante. Al principio puede costar un poco, pero bien estructurado resulta bastante claro.

Será, finalmente, esa variable –status la que defina el border-color, el background-color y el grid-column, dándonos como resultado algo así:

Esto nos permite que cambiar data-status (desde back, por ejemplo) en el HTML haga cambios en la parte visual. De esta forma, podríamos tener el siguiente HTML cuando todas las tareas estén completadas y el resultado sería algo así:

Este enfoque desacopla completamente el HTML del CSS. Solo cambiando el data-status, podemos modificar múltiples estilos visuales sin tocar ni una línea de CSS ni agregar más clases en el HTML.

Conclusión

Más allá de lo bonito que suena, la función if() nos aporta:

• Estilos declarativos y fáciles de entender.
• CSS modular y reusable, ideal para sistemas de diseño y componentes.
• Más dinamismo sin JavaScript.
• Menos repetición, menos @media, menos @supports, menos clases auxiliares.

En definitiva: más poder, menos lío.

Aunque if() en CSS aún está por implementar (no se sabe exactamente cuánto tiempo tardará), su potencial es claro. Nos acerca a un CSS más inteligente, más compacto y más conectado con la lógica de diseño. Ya no solo aplicamos estilos, sino que tomamos decisiones dentro de nuestras reglas CSS para que esos estilos se apliquen de una forma más eficiente.

Y si aún no podemos usarlo directamente, empezar a diseñar pensando en este enfoque puede ayudarnos a estructurar mejor nuestro código.