✦ Extras

@supports · if() · random()

Three tiny utilities that did not need their own page… until now. Each card detects live whether your browser supports them.

Three tiny utilities that did not need their own page… until now. Each card detects live whether your browser supports them, without a line of JS.

@supports

Wide support

The foundation of every progressive enhancement on this site: each experimental feature is wrapped in a guard that activates the fallback when unsupported.

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 */

Does your browser support it?

@supports

✗ Not supported✓ Supported

if()

Experimental · Chrome 137+

Inline conditionals on any property. The showcase tagline resolves its width like this:

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);
  }
}

Does your browser support it?

if()

✗ Not supported✓ Supported

random()

Experimental · Chrome 125+ with flag

Native randomness on any property: position, size, rotation or delay, different on every load. The green spark on the tree uses exactly this:

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);
  }
}

Does your browser support it?

random()

✗ Not supported✓ Supported

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".