Condicionales de CSS con la nueva función if()

Una Kravets

Fecha de publicación: 1 de julio de 2025

A partir de Chrome 137, puedes probar los condicionales intercalados de CSS con la función if(). if() permite una interfaz de desarrollador más limpia para los diseños dinámicos, como las consultas de diseño y las consultas de medios, con algunas diferencias clave que puedes conocer en esta publicación.

La función if() de CSS funciona con una serie de pares condición-valor, estructurados de la siguiente manera:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

Puedes proporcionar una instrucción else, que se usa si no se cumple ninguna de las otras condiciones:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

En este momento, if() funciona con tres tipos diferentes de búsquedas:

• style(): Consultas de estilo
• media(): Consultas de medios
• supports(): Admite consultas

Veamos algunos ejemplos para poner esto en contexto:

Demostración: Consultas de medios intercaladas

Usar if() es una excelente manera de incluir consultas de medios intercaladas en tus estilos. Por ejemplo, puedes verificar la preferencia de tema de un usuario (claro u oscuro) o realizar consultas de medios intercaladas para el ancho de la ventana gráfica. En el siguiente ejemplo, se muestra la consulta de medios para dispositivos apuntadores. El tamaño predeterminado del botón sería de 30 px en un dispositivo con un puntero preciso, como un mouse, pero para los dispositivos con pantalla táctil, como los que tienen un puntero grueso, el tamaño del botón sería el mínimo recomendado de 44 px para un espaciado táctil adecuado que facilite el acceso.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

El código anterior arroja el mismo resultado que la siguiente consulta de medios:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

Usar el formato if() te permite tener la lógica intercalada, sin necesidad de tener la lógica de diseño en dos lugares diferentes.

Demostración: Consultas de asistencia intercaladas

Otra forma de usar if() es crear consultas de asistencia integradas. Por ejemplo, para verificar la compatibilidad con colores de amplia gama, como OKLCH, puedes usar lo siguiente:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Con este código, si el navegador admite el espacio de color oklch, el usuario verá el color más vívido y también recibirá el mensaje "Tu navegador admite OKLCH" en el seudocontenido ::after.

Para obtener más información y ver la diferencia entre el espacio de color RGB y otros más avanzados, consulta el selector de color y los recursos en oklch.com.

Demostración: Visualización del estado de la IU

También puedes usar if() para el diseño basado en el estado. Por ejemplo, puedes aplicar un diseño a las tarjetas de progreso según su estado de la IU (pendiente o completado). Almacena el estado en un atributo de datos o en una propiedad personalizada directamente y, luego, aplica estilos intercalados a la propiedad con if().

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

Con style() dentro de una función if(), puedes aplicar estilo directamente al elemento al que te diriges, sin necesidad de un elemento principal como lo requerirían las consultas de estilo CSS.

En esta demostración, se muestra un caso básico de cómo puedes usar if() para admitir un nuevo enfoque arquitectónico para CSS. Uno de los beneficios de usar propiedades personalizadas de CSS en lugar de clases es la facilidad con la que se pueden actualizar en CSS. Por ejemplo, se podrían actualizar con consultas de medios o pseudoestados, como :hover.

¿Qué sigue?

La incorporación de if() brinda una nueva oportunidad arquitectónica para los desarrolladores de CSS. A medida que evolucionen las tecnologías, como las consultas de estilo, es probable que las consultas de rango sean posibles dentro de las funciones if(), y también serán útiles cuando se combinen con la próxima propuesta de funciones personalizadas (@function de CSS).

Para obtener más información sobre estas funciones, consulta los siguientes recursos:

• Video explicativo de 3 minutos de la demostración núm. 3
• Artículo de Lea Verou