Índice

1. La nueva sentencia if de CSS
2. ¿Dónde se puede usar if?
3. Sintaxis
4. Ejemplos de uso
5. Soporte en navegadores
6. Conclusiones
7. Referencias

1. La nueva sentencia if de CSS

Desde mayo de 2025 tenemos a nuestra disposición la nueva sentencia if de CSS disponible en la versión 137 de Google Chrome.

Como en cualquier lenguaje de programación, una sentencia if nos permite escribir código condicional, es este caso, estilos condicionales pero bajo ciertas peculiaridades que comprenderemos en este post.

2. ¿Dónde se puede usar if?

La sentencia if puede ser usada en 3 escenario diferentes:

• style(): para especificar estilos personalizados (la más innovadora e interesante a mi parecer)
• supports(): para verificar si el navegador soporta o no una caractertitica
• media(): para verificar el tamaño u orientación de la pantalla.

En este post ejemplificaremos casos de uso usando style() y aplicando estilos personalizados a nuestros diseños.

3. Sintaxis

En CSS la sentencia if es en realidad una función que se puede usar de la siguiente manera:

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

Notar que podemos usar la nueva función sytle() y agregar la condición entre parentesis seguido del valor a aplicar en caso de que dicha función se cumpla.
Para dejar un valor por defecto en caso de que ninguna condición se cumpla usamos else.
Esta sintaxis es muy similar a usar un switch en cualquier lenguaje de programación.

4. Ejemplos de uso

En este ejemplo cambiamos el estilo condicional del background-color de cada contenedor dependiendo al valor de la variable --color, si la variable tiene el valor white lo cambiamos a black y sino tiene valor establecemos por defecto el color orange.

Es un ejemplo sencillo pero sirve para comprender el funcionamiento de if en CSS.

Ahora veamos otro ejemplo donde hacemos uso de los data-attributes de HTML y como hacer uso de propiedades personalizadas nos pueden ser muy útiles para escribir condicionales.

En el ejemplo recuperamos los data-attributes de cada botón y los recuperamos haciendo uso de la función attr de CSS.
Luego, dependiendo si el valor cambia entre los 3 posibles valores: info, danger o warning configuramos los diferentes estilos para cada tipo de botón.

5. Soporte en navegadores

A la fecha de publicar este post los condicionales en CSS solo están disponibles en la versión 137 de Google Chrome alcanzado un 47% de soporte en navegadores.
Este porcentaje es bajo aun porque esta característica es muy nueva. Recomiendo aun no usar condicionales de CSS en producción debido a este motivo.

6. Conclusiones

• La nueva manera de escribir condicionales en CSS es muy innovadora y puede significar una magnifica herramienta para poder escribir estilos mas limpios en nuestras paginas.
• Debido a que es una característica muy reciente no la uses aun en producción, espera que la compatibilidad entre navegadores mejore un poco mas.
• El debate nuevamente queda abierto: ¿CSS es un lenguaje de programación o no?

7. Referencias

• https://www.amitmerchant.com/the-if-function-in-css/?ref=dailydev
• https://caniuse.com/?search=css%20if()