A función CSS if()

Cantas veces pensaches en poder establecer propiedades CSS baseándote en determinadas condicións: Si se da unha condición aplicamos un estilo, se a condición cambia, o estilo tamén cambia?

Seguro que para responder esta pregunta se che ocorren unhas cantas solucións.

a) empregar calc() con variables CSS (–var)

O máis próximo a lóxica condicional:

:root {
  --es-grande: 0; /* 0 = falso, 1 = verdadeiro */
}

.elemento {
  /* Se --es-grande é 1 → 200px, se é 0 → 100px */
  width: calc(100px + var(--es-grande) * 100px);
  height: calc(50px + var(--es-grande) * 50px);
}

b) Variables CSS con valores alternativos (var(--a, fallback))

.elemento {
  --mi-ancho: var(--ancho-personalizado, 200px); /* Fallback */
  width: var(--mi-ancho);
}

c) Media Queries (condicións baseadas no contexto)

/* "If" a pantalla é maior de 768px */
.elemento {
  width: 100%;
}

@media (min-width: 768px) {
  .elemento {
    width: 50%; /* Valor diferente */
  }
}

d) min(), max(), clamp() (lóxica matemática)

Soporte total en navegadores modernos (2024+).

/* Exemplo práctico: Ancho responsivo con límites */
.contenedor {
  width: min(100%, 1200px); /* Nunca máis de 1200px */
}

/* Font-size responsiva */
.texto {
  font-size: clamp(1rem, 2.5vw, 2rem); /* Mínimo 1rem, máximo 2rem */
}

/* "If" implícito con max() */
.boton {
  padding: max(1rem, 3%); /* O maior dos dous valores */
}

e) @supports (feature queries)

/* "if" o navegador soporta grid */
@supports (display: grid) {
  .contenedor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* "if" NON soporta grid */
@supports not (display: grid) {
  .contenedor {
    display: flex;
    flex-wrap: wrap;
  }
}

Vexamos algúns exemplos de todo isto:

Exemplo 1: Tema claro/escuro

:root {
  --tema: 0; /* 0 = claro, 1 = escuro */
  --fondo: calc(255 - var(--tema) * 200);
  --texto: calc(var(--tema) * 200);
}

body {
  background-color: rgb(var(--fondo), var(--fondo), var(--fondo));
  color: rgb(var(--texto), var(--texto), var(--texto));
}

Exemplo 2: Layout condicional

:root {
  --sidebar-active: 0; /* 0 = oculto, 1 = visible */
}

.main-content {
  width: calc(100% - var(--sidebar-active) * 300px);
}

.sidebar {
  transform: translateX(calc((1 - var(--sidebar-active)) * -100%));
}

Exemplo 3: Spacing responsive con clamp()

.card {
  /* Espazo que cambia co ancho pero con límites */
  padding: clamp(1rem, 5vw, 3rem);
  margin: clamp(0.5rem, 3vw, 2rem);

  /* Gap condicional */
  gap: max(1rem, min(4vw, 2rem));
}

Soporte dos navegadores (2025)

Vale! iso é algo que xa fixeches moitas veces con axuda de JavaScript ou recorrendo a técnicas alternativas en CSS como as que se enumeran aquí. Pero, e que che parecería poder facelo con só CSS?

Desde fai xa tempo existe unha proposta para if() no borrador de CSS Values Level 4, pero polo de agora ningún navegador o soporta actualmente de forma nativa, excepto Chrome 137+.

Certo que case ningún outro navegador lle da soporte, de momento. Pero todo se andará!

Pero mentres agardamos pola extensión completa do soporte de if() nativo en CSS, as funcións min(), max(), clamp(), calc() combinadas con variables CSS e @supports ofrecen capacidades de lóxica moi potentes con soporte universal en navegadores modernos.

1. clamp() para valores responsivos con límites
2. @supports para fallbacks compatibles
3. combinación de técnicas para lóxica complexa:

.elemento {
  /* lóxica condicional complexa */
  width: var(--custom-width, clamp(300px, 50vw, 800px));
}

4. Para casos complexos, os preprocesadores seguen sendo unha opción válida, con ferramentas para "CSS condicional" como:
   • Sass/Less: Ofrecen @if, @else no preprocesado
   • PostCSS: Plugins como postcss-conditionals
   • CSS-in-JS: Lóxica real de JavaScript (Styled-components, Emotion)

Dado o soporte que ofrece xa Chrome 137+, podemos dar por descontado que pouco a pouco o resto de navegadores iran incorporando este soporte.

Capacidades da función if()

Tal como se planea, a función if() introduce a lóxica condicional nativa en CSS:

propiedade: if(
  condicion-1: valor-1;
  condicion-2: valor-2;
  condicion-3: valor-3;
  else: valor-por-defecto
)

A función comproba as condicións de forma secuencial e aplica o valor axeitado correspondente. Se ningunha condición coincide, úsase o valor else — tal e como se esperaría das linguaxes de programación, pero agora en CSS -.

A función if() contará con tres capacidades básicas:

1. Consultas de estilo: style()

Con style(), podes reaccionar ás propiedades personalizadas CSS:

.card {
  --status: attr(data-status type(<custom-ident>));

  border-color: if(
    style(--status: pending): royalblue;
    style(--status: complete): seagreen;
    style(--status: error): crimson;
    else: gray
  );
}

Un único atributo data-status en HTML controla agora todo o estilo — xa non precisas máis clases de utilidade-.

2. Consultas de medios: media()

Con media(), defines valores responsivos en liña, evitando así os bloques de consulta multimedia (@media query) aniñados. :

h1 {
  font-size: if(
    media(width >= 1200px): 3rem;
    media(width >= 768px): 2.5rem;
    media(width >= 480px): 2rem;
    else: 1.75rem
  );

3. Detección de características: supports()

Con supports(), se comproban as funcións do navegador directamente na propiedade:

.element {
  border-color: if(
    supports(color: lch(0 0 0)): lch(50% 100 150);
    supports(color: lab(0 0 0)): lab(50 100 -50);
    else: rgb(200, 100, 50)
  );
}

Casos de uso

Modo escuro en tres liña

body {
  --theme: "dark"; /* Toggle via JavaScript or User Preference */

  background: if(
    style(--theme: "dark"): #1a1a1a;
    else: white
  );

  color: if(
    style(--theme: "dark"): #e4e4e4;
    else: #333
  );
}

Compoñentes do estado do sistema de deseño

.alert {
  --type: attr(data-type type(<custom-ident>));

  background: if(
    style(--type: success): #d4edda;
    style(--type: warning): #fff3cd;
    style(--type: danger): #f8d7da;
    style(--type: info): #d1ecf1;
    else: #f8f9fa
  );

  border-left: 4px solid if(
    style(--type: success): #28a745;
    style(--type: warning): #ffc107;
    style(--type: danger): #dc3545;
    style(--type: info): #17a2b8;
    else: #6c757d
  );
}

Contedor sen caos de consultas de medios

.container {
  width: if(
    media(width >= 1400px): 1320px;
    media(width >= 1200px): 1140px;
    media(width >= 992px): 960px;
    media(width >= 768px): 720px;
    media(width >= 576px): 540px;
    else: 100%
  );

  padding-inline: if(
    media(width >= 768px): 2rem;
    else: 1rem
  );
}

Combinación con funcións modernas de CSS

.element {
  /* With the new light-dark() function */
  color: if(
    style(--high-contrast: true): black;
    else: light-dark(#333, #e4e4e4)
  );

  /* With CSS Custom Functions (@function) */
  padding: if(
    style(--spacing: loose): --spacing-function(2);
    style(--spacing: tight): --spacing-function(0.5);
    else: --spacing-function(1)
  );
}

Lembra

A data Nadal 2025 este é o soporte para función nativa de CSS if():

• ✅ Chrome/Edge: Da versión 137
• ✅ Chrome Android: Da versión 139
• ❌ Firefox: En desenvolvemento
• ❌ Safari: Na folla de ruta
• ❌ Ópera: Aínda sen apoio

Como o soporte segue a medrar, podes usar este patrón:

.button {
  /* Fallback for all browsers */
  padding: 1rem 2rem;
  background: #007bff;

  /* Modern browsers automatically override */
  padding: if(
    style(--size: small): 0.5rem 1rem;
    style(--size: large): 1.5rem 3rem;
    else: 1rem 2rem
  );

  background: if(
    style(--variant: primary): #007bff;
    style(--variant: success): #28a745;
    style(--variant: danger): #dc3545;
    else: #6c757d
  );
}

O que depara o futuro

O Grupo de Traballo CSS xa está a traballar en extensións para esta nova función:

• Consultas sobre o rango: if(style(--value > 100): ...)
• Operadores lóxicos: if(style(--a: true) and style(--b: false): ...)
• Integración de Consultas de Contedores: Aínda máis conciencia do contexto.

ref:

• The CSS if() Function Has Arrived! | by Karsten Biedermann | Medium
• Lightly Poking at the CSS if() Function in Chrome 137 | CSS-Tricks
• How to correctly use if() in CSS