Condicionales if() en CSS

Históricamente, siempre se ha creído que CSS carece de un sistema de condicionales como los if de los lenguajes de programación. Sin embargo, aunque es cierto que no existía algo equivalente a los condicionales if, CSS posee varias formas de establecer condicionales:

• 1️⃣ La regla @media: Aplica estilos si el dispositivo o ventana cumple ciertos criterios.
• 2️⃣ La regla @supports: Aplica estilos si el dispositivo soporta cierta funcionalidad.
• 3️⃣ La regla @container: Aplica estilos si el contenedor cumple ciertos criterios.
• 4️⃣ Las variables var(): Aplica un estilo si existe la variable, u otro si no existe.

No obstante, se trata de condicionales particulares y limitados al objetivo de cada uno. Sin embargo, actualmente se está desarrollando una función que permitirá utilizar condicionales más potentes en CSS a través de la función if().

La función if() de CSS

La función if() de CSS nos permite aplicar un estilo en base a una condición definida. Se utiliza como valor, al igual que otras funciones como url(), rgb() o similares. Su sintaxis es la siguiente:

.container {
  /* Condición simple */
  width: if( *condición*: valor_verdadero; else: valor_falso);

  /* Condición múltiple */
  width: if( *condición1*: valor_verdadero;
             *condición2*: valor_verdadero;
             else: valor_falso);
}

Como puedes ver, la función if() trabaja de forma muy similar a un operador ternario de programación. Simplemente debemos indicar una condición, seguido del valor si esa condición es verdadera, luego, a través de else: podemos indicar alternativas, que nuevamente se pueden volver a anidar con otro if().

En las condiciones debemos utilizar una de las tres funciones disponibles:

Veamos cada una por separada con un ejemplo.

Condicionales de estilo

Probablemente, la función style() es de las más interesantes. Esta función nos permite consultar si un estilo concreto se cumple o no. En este ejemplo podemos ver que consultamos si la variable CSS --bgcolor tiene un valor blanco definido. En ese caso, establecemos el black, en caso contrario, establecemos white. De esta forma conseguimos un valor que invierte el de la variable --bgcolor:

.container {
  color: if(
    style(--bgcolor: white): black;
    else: white
  );
}

Aunque en el ejemplo utilizamos una variable CSS, se puede realizar con propiedades CSS normales también.

Condicionales de soporte

Mediante la función supports() podemos indicar al navegador que queremos aplicar un valor sólo si el navegador soporta la funcionalidad indicada. En el ejemplo preguntamos si el navegador soporta la función color-mix(), de soportarla, la utilizamos como valor. En caso contrario, utilizamos indigo como valor resultante:

.container {
  background: if(
    supports(color: color-mix(in srgb, red, blue)): color-mix(in srgb, red, blue);
    else: indigo
  );
}

Condicionales de medios

Mediante la función media() podemos definir un valor como lo haríamos en un media query, pero de una forma más compacta. En este ejemplo, si el dispositivo o ventana gráfica es menor a 600px, aplica un font-size de tamaño 1rem, en caso contrario, de tamaño 2rem:

.container {
  font-size: if(
    media( width < 600px ): 1rem;
    else: 2rem
  );
}

Las reglas @when y @else

Aunque aún parecen estar lejos de implementarse, existe una propuesta de las reglas @when y @else, que actuarían como reglas condicionales que podrían simplificar condiciones que hasta ahora se hacían mediante @media o @supports y terminaban siendo muy complejas y verbosas.

La estructura de estas reglas es la siguiente:

@when *condición* {
  /* Reglas a aplicar */
} @else {
  /* Reglas a aplicar */
}

Obviamente, si no es necesario y no tener una alternativa que aplicar, la regla @else se puede omitir. Veamos un ejemplo sencillo que muestra como funcionarían estas reglas:

@when media(width <= 600px) {
  .container {
    display: flex;
    flex-direction: column;
  }
} @else {
  .container {
    display: flex;
    flex-direction: row;
  }
}

Estas reglas siempre se utilizan definiendo una condición mediante las funciones media() y/o supports() que explicamos anteriormente. El ejemplo anterior, al ser muy sencillo, es posible que se vea mucho más claro definido con una regla @media. Sin embargo, a medida que se requieren más condiciones, será mucho más legible con @when y @else.

Además, ten en cuenta que es posible utilizar and, or o not para unir condiciones en las reglas @when o @else. También es posible utilizar paréntesis para agrupar dichas condiciones.

Veamos un ejemplo de condicionales encadenados más complejos:

@when media(width <= 600px) and supports(display: grid) {
  /* Reglas a aplicar */
} @else media(width >= 600px) and supports(display: flex) {
  /* Reglas a aplicar */
} @else {
  /* Reglas a aplicar */
}

En este caso estamos haciendo tres condiciones encadenadas:

• 1️⃣ Los navegadores que soporten grid y tengan un tamaño menos a 600px entrarán en la primera.
• 2️⃣ En caso contrario, si tienen un tamaño más grande que 600px y soportan flex, entrarán en la segunda.
• 3️⃣ Si no cumplen ninguna de las dos anteriores, entrarán en la tercera condición.