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() habilita una interfaz de desarrollador más clara para estilos dinámicos, como consultas de estilo y consultas de contenido multimedia, con algunas diferencias clave, sobre las que puedes obtener información 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 sentencia 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);

Por el momento, if() funciona con tres tipos diferentes de consultas:

• style(): Consultas de diseño
• media(): Búsquedas de contenido multimedia
• supports(): Admite consultas

Veamos algunos ejemplos para contextualizar esto:

Demostración: Consultas de medios intercaladas

Usar if() es una excelente manera de incluir consultas de contenido multimedia intercaladas en tus estilos. Por ejemplo, puedes verificar la preferencia de temas de un usuario (claro o oscuro) o realizar consultas de medios intercaladas para el ancho de la vista del viewport. En el siguiente ejemplo, se muestra la consulta de medios para dispositivos de puntero. El tamaño predeterminado del botón sería de 30 px en un dispositivo con un puntero fino, 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 de 44 px, el mínimo recomendado para un espaciado táctil adecuado y un acceso más fácil.

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

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

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

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

El uso del 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 intercaladas. 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 contenido pseudo ::after.

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

Demostración: Visualiza el estado de la IU

También puedes usar if() para aplicar estilos basados en el estado. Por ejemplo, aplicar diseño a las tarjetas de progreso según su estado de IU (pendiente o completo) Almacena el estado directamente en un atributo de datos o en una propiedad personalizada 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 diseño directamente al elemento al que segmentas, sin necesidad de un elemento superior, como lo requerirían las consultas de diseño de CSS.

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

¿Qué sigue?

La adición de if() proporciona una nueva oportunidad arquitectónica para los desarrolladores de CSS. A medida que evolucionen 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 de 3 minutos de la demostración n° 3
• Artículo de Lea Verou