✦ Extras

@supports · if() · random()

Tres utilidades chicas que no necesitaban página propia… hasta ahora. Cada tarjeta detecta en vivo si tu navegador las soporta.

Tres utilidades chicas que no necesitaban página propia… hasta ahora. Cada tarjeta detecta en vivo si tu navegador las soporta, sin una línea de JS.

@supports

Soporte amplio

La base de toda mejora progresiva del sitio: cada feature experimental está envuelta en una guarda que activa el fallback cuando no hay soporte.

css

/* mejora progresiva: cada feature experimental del sitio
   vive dentro de una guarda como esta */
@supports (corner-shape: superellipse(2)) {
  .panel { corner-shape: superellipse(.75); }
}

/* sin soporte -> queda el border-radius clasico */

¿Tu navegador lo soporta?

@supports

✗ Sin soporte✓ Soportado

if()

Experimental · Chrome 137+

Condicionales inline en cualquier propiedad. El tagline del showcase resuelve su ancho así:

css

.tagline {
  max-width: 52ch; /* fallback declarativo */
}

@supports (width: if(media(width > 100px): 1px; else: 2px)) {
  .tagline {
    max-width: if(media(max-width: 480px): none; else: 52ch);
  }
}

¿Tu navegador lo soporta?

if()

✗ Sin soporte✓ Soportado

random()

Experimental · Chrome 125+ con flag

Azar nativo en cualquier propiedad: posición, tamaño, rotación o delay, distinto en cada carga. La chispa verde del árbol usa exactamente esto:

css

/* la chispa del arbol se rota y desplaza sola */
@supports (width: random(1px, 5px)) {
  .spark {
    rotate: random(-25deg, 25deg);
    translate: random(-2px, 2px) random(-2px, 2px);
  }
}

¿Tu navegador lo soporta?

random()

✗ Sin soporte✓ Soportado

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.