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().

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.

<< @property @function >>