css/limited-needs-supports

Dlaczego

A browser drops declarations it does not understand. A menu placed only with position-anchor and anchor() ends up at the corner of the page in a browser without anchor positioning, and an animation bound only to a scroll timeline runs once on load where scroll timelines are missing. On 2026-11-11 anchor positioning was not Baseline and scroll-driven animations had been Baseline for two weeks, so many visitors still lack them.

Poprawka

Write a working fallback first (a plain position: absolute placement, no animation), then the new feature inside @supports (anchor-name: --a) or @supports (animation-timeline: scroll()). Put motion inside prefers-reduced-motion: no-preference as well. Recheck the Baseline status before you remove the fallback.

Przykłady

/* bad */
.menu { position: absolute; position-anchor: --menu; top: anchor(bottom); }
/* good */
.menu { position: absolute; top: 100%; }
@supports (anchor-name: --a) { .menu { position-anchor: --menu; top: anchor(bottom); } }

Źródła

• MDN, @supports
• MDN, CSS anchor positioning
• MDN, CSS scroll-driven animations
• W3C WebDX Community Group, web-features (the data behind Baseline)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain css/limited-needs-supports