if(): un valor según una condición

if() elige un valor adentro de la misma declaración. Se escribe como una lista de condición: valor separadas por punto y coma; gana la primera que se cumple, y else cubre el resto. Hay tres tipos de condición:

1. Una variablestyle()Pregunta por una propiedad personalizada del mismo elemento, como style(--estado: cancelado).
2. La pantallamedia()Una media query en línea: media(width < 40rem).
3. El navegadorsupports()Pregunta si el navegador entiende algo: supports(color: oklch(0 0 0)).

1.boton {
2  padding: if(media(width < 40rem): 8px 12px; else: 10px 16px);
3  background: if(
4    supports(color: oklch(0 0 0)): oklch(0.65 0.2 38);
5    else: #e8590c
6  );
7  opacity: if(style(--deshabilitado: si): 0.5; else: 1);
8}

En el tablero, cada fila tiene --estado en su atributo style y el CSS decide el resto: el texto del estado (con content), su color y si la hora se tacha. La lectura de arriba sale de getComputedStyle: es lo que resolvió el navegador. El relleno usa media(), así que en un celular baja a 6px.

.salida > td {
  padding-block: if(media(width < 40rem): 6px; else: 10px);
}

.hora {
  text-decoration-line: if(style(--estado: cancelado): line-through; else: none);
}

.estado::after {
  content: if(
    style(--estado: demorado): "Demorado";
    style(--estado: cancelado): "Cancelado";
    else: "A horario"
  );
  color: if(style(--estado: demorado): var(--aviso); else: inherit);
}

<tr class="[--estado:demorado]">
  <td class="[text-decoration-line:if(style(--estado:cancelado):line-through;else:none)]">18:27</td>
  <td>Bartolomé Mitre</td>
  <td class="after:[content:if(style(--estado:demorado):'Demorado';style(--estado:cancelado):'Cancelado';else:'A_horario')] after:[color:if(style(--estado:demorado):var(--aviso);else:inherit)]"></td>
</tr>

style() mira el propio elemento. Es la diferencia con @container style(), que pregunta por el contenedor: con if() un elemento puede reaccionar a sus propias variables. Conviene cerrar siempre con else, así hay un valor cuando no se cumple ninguna condición.

Todavía no es Baseline: anda en Chrome y Edge desde la versión 137, y Firefox y Safari no lo soportan. Un navegador que no lo entiende descarta la declaración entera, así que alcanza con escribir antes una versión sin if():

1.hora {
2  text-decoration-line: none; /* respaldo */
3  text-decoration-line: if(
4    style(--estado: cancelado): line-through;
5    else: none
6  );
7}

@function: funciones propias

@function define una función que devuelve un valor, con el nombre de dos guiones como las variables. Los parámetros pueden tener tipo y valor por defecto, y returns dice qué tipo devuelve. Adentro, result es el valor de salida.

1@function --escala(--paso <number>, --razon <number>: 1.25) returns <length> {
2  result: calc(1rem * pow(var(--razon), var(--paso)));
3}
4
5h1 { font-size: --escala(3); }        /* 1rem × 1.25³ = 31.25px */
6h2 { font-size: --escala(2, 1.333); }

El tipo no es decorativo: si le pasás algo que no es un número, la llamada es inválida y la propiedad vuelve a su valor heredado o inicial. Mové la razón: cada línea del espécimen fija solo su --paso, y la función hace la cuenta. En 1.25 la llamada no pasa la razón y usa el valor por defecto.

@function --escala(--paso <number>, --razon <number>: 1.25) returns <length> {
  result: calc(1rem * pow(var(--razon), var(--paso)));
}

.especimen > * {
  font-size: calc(1rem * pow(1.25, var(--paso))); /* respaldo sin @function */
  font-size: --escala(var(--paso)); /* --razon usa su valor por defecto */
}

<div>
  <p class="[--paso:3] [font-size:--escala(var(--paso))]">Delta</p>
  <p class="[--paso:2] [font-size:--escala(var(--paso))]">Islas del Tigre</p>
</div>

El cuerpo también acepta variables locales y reglas condicionales como @media, para que la función devuelva otra cosa según la pantalla:

1@function --relleno() returns <length> {
2  result: 16px;
3  @media (width < 40rem) {
4    result: 12px;
5  }
6}

sibling-index() y sibling-count()

sibling-index() devuelve la posición del elemento entre sus hermanos, empezando en 1, y sibling-count() cuántos hermanos hay, contándolo a él. Son enteros, así que entran en calc(). Antes había que escribir esos números a mano en el HTML o calcularlos con JavaScript.

1/* entrada escalonada: 40ms más por cada elemento */
2.item {
3  transition-delay: calc((sibling-index() - 1) * 40ms);
4}
5
6/* repartir: cada uno ocupa una parte igual */
7.segmento {
8  width: calc(100% / sibling-count());
9}

En la mesa, cada lugar gira 360deg / sibling-count() veces su posición. Sumá invitados: nadie recalcula nada, la cuenta cambia sola porque cambia la cantidad de hermanos. La entrada se escalona 40ms por lugar; con movimiento reducido, los lugares cambian sin desplazarse.

.lugar {
  --angulo: calc(360deg / sibling-count() * (sibling-index() - 1));
  transform: rotate(var(--angulo)) translateY(-110px) rotate(calc(var(--angulo) * -1));
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc((sibling-index() - 1) * 40ms);
  animation: aparecer 200ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc((sibling-index() - 1) * 40ms);
}

@keyframes aparecer {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lugar { transition: none; }
}

/* respaldo: índice y total escritos en el HTML */
@supports not (order: sibling-index()) {
  .lugar {
    --angulo: calc(360deg / var(--total) * var(--indice));
    transition-delay: calc(var(--indice) * 40ms);
    animation-delay: calc(var(--indice) * 40ms);
  }
}

<ol>
  <li class="[--angulo:calc(360deg/sibling-count()*(sibling-index()-1))] [transform:rotate(var(--angulo))_translateY(-110px)_rotate(calc(var(--angulo)*-1))] transition-transform duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] delay-[calc((sibling-index()-1)*40ms)] motion-reduce:transition-none">Ana</li>
  …
</ol>

Cuentan todos los hermanos que son elementos del HTML, incluso los ocultos. Por eso la mesa y las marcas naranjas del demo están fuera de la lista: si fueran hermanos de los lugares, cambiarían la cuenta.

Son Baseline 2026 (newly available): Chrome 138, Firefox 154 y Safari 26.2. Para versiones anteriores, el respaldo es el método de siempre: escribir --indice y --total en el HTML y usarlos adentro de @supports not (order: sibling-index()).

attr() con tipo

attr() existe desde siempre, pero solo devolvía texto para content. Ahora puede leer un atributo como número, longitud, color o ángulo, en cualquier propiedad. El tipo va en type(), y después de la coma, el valor si el atributo falta o no es válido.

1.barra {
2  --cacao: attr(data-cacao type(<number>), 0);
3  width: calc(var(--cacao) * 1%);
4}
5
6/* con una unidad: data-ancho="240" se lee como 240px */
7.foto { width: attr(data-ancho px, auto); }

El HTML solo dice el número (data-cacao="75") y el CSS lo usa dos veces: para el largo de la barra y para el porcentaje de chocolate oscuro en color-mix(). Mové el control: cambia el atributo, no el estilo.

.barra {
  width: 0; /* respaldo: sin barra; el porcentaje ya está escrito */
}

@supports (width: attr(data-cacao type(<number>))) {
  .barra {
    --cacao: attr(data-cacao type(<number>), 0);
    width: calc(var(--cacao) * 1%);
    background: color-mix(in oklch, #3b2417 calc(var(--cacao) * 1%), #e6cdb0);
  }
}

<p>Venezuela · Sur del Lago</p>
<div class="w-0 supports-[width:attr(data-cacao_type(<number>))]:w-[calc(attr(data-cacao_type(<number>),0)*1%)] supports-[width:attr(data-cacao_type(<number>))]:bg-[color-mix(in_oklch,#3b2417_calc(attr(data-cacao_type(<number>),0)*1%),#e6cdb0)]" data-cacao="75"></div>

Por seguridad, un valor que viene de attr() no se puede usar para armar una url(). Para todo lo demás, sirve igual que una variable.

En Tailwind

Tailwind no tiene clases para nada de esto: van como propiedades arbitrarias entre corchetes, con guiones bajos en lugar de espacios.

1<tr class="[--estado:demorado]">
2  <td class="
3    [text-decoration-line:if(style(--estado:cancelado):line-through;else:none)]">
4    18:27
5  </td>
6  <td class="
7    after:[content:if(style(--estado:demorado):'Demorado';else:'A_horario')]">
8  </td>
9</tr>
10
11<li class="delay-[calc((sibling-index()-1)*40ms)] transition-opacity">Ana</li>