if - condicionales

<< @property @function >>

Esta función está como experimental, sólo la tenemos disponible por ahora en Chrome(v137) y Edge(v137).

Sintaxis: if(<condicion>: <valor-true>; else: <valor-false>);

La <condición> puede ser desde una comparación del valor de una variable como comprobaciones de las preferencias del usuario media(), supports() o feature(). Podemos dentro de la condición usar and, or, o not para establecer la "query style".

Importante! No puede haber un espacio entre el if y el paréntesis donde pasamos a evaluar la condicion, es decir, debe ser siempre if(...)

main{
    color: if( style(--textColor: white): black; else: pink); /* "ternaria" */
    background: if( style(--textColor: white): black); /* No hay propiedad en else */
    color: if(media(print): black;);
    if(supports(color: lch(7.1% 60.23 300.16)): lch(7.1% 60.23 300.16);)
}

¡Importante! Esta regla como @function se debería poner dentro del @supports, en el rule @supports podemos verificar si una determinada propiedad es compatible en ese navegador.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo @supports con if()</title>
    </head>
    <link rel="stylesheet" href="3.if.css">
<body>

    <main>
        Este es un mensaje que cambia de color.
        <br>
        <strong>
            Abre este ejemplo con firefox y con chrome! 
        </strong>
    </main>

</body>
</html>

Uno de los usos más potentes es cambiar valores de color o espaciado basándose en la preferencia del sistema operativo, capturada por la función media(). En este ejemplo, definimos que si el usuario está en modo oscuro (dark), el fondo del botón debe ser negro, y si no (o si la consulta no aplica), será azul claro.

.boton-tematico {
  background-color: if(media(prefers-color-scheme: dark): black; else:skyblue);
  color: if(media(prefers-color-scheme: dark): white; else:black);
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
  • Condición (media(...)): La función if() utiliza el resultado de la función media(prefers-color-scheme: dark). Esta función devuelve un valor lógico (verdadero o falso) dependiendo de la consulta del medio.
  • Resultado si FALSO: Si la consulta da falso (es decir, el usuario está en modo claro o no se conoce la preferencia), el background-color se establece en skyblue.
  • Resultado si VERDADERO: Si la consulta da verdadero (el usuario está en modo oscuro), el background-color se establece en black.

Al igual que @function, la función if() es parte de los borradores del W3C y aún no tiene un soporte amplio y estable en todos los navegadores principales.

Podemos evaluar no sólo un if, sino varios de golpe, por ejemplo:

article {
  padding: 20px;
  --color1: if(
    style(--scheme: ice): #03045e;
    style(--scheme: fire): #621708;
    else: black;
  );
}

Lo que no podemos hacer es (al menos hasta día de hoy) es:

main{
    /* NO SE PUEDE HACER */
    if(background-color: if(style(color: white): black;);)
}

<< @property @function >>