v146 · css

Upgrade Strategy

A decision tree for choosing between CSS strategies based on named-feature() support results. Each row probes a named feature and recommends the best available implementation path — from ideal to polyfill fallback.

Feature detection: checking…
Feature detection → implementation strategy
Loading…

strategy patterns

Anchor + transforms Chrome 146+

When named-feature("anchor-position-follows-transforms") is true, anchor-positioned elements reliably track their anchors even when CSS transforms are applied. Use position-anchor freely.

/* Safe to use with transforms */
@supports named-feature("anchor-position-follows-transforms") {
  .tooltip {
    position-anchor: --anchor;
    top: anchor(bottom);
  }
}
Anchor fallback Older browsers

Without the named feature, fall back to absolute positioning relative to the nearest positioned ancestor. Less precise, but works everywhere.

/* Absolute fallback */
.tooltip {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
}

/* Override with better approach */
@supports named-feature("anchor-position-follows-transforms") {
  /* ... better code ... */
}
Live demo — tooltip strategy switches on named-feature support

Hover the button to see the tooltip. In Chrome 146+, the tooltip uses position-anchor (blue). In older browsers it uses absolute positioning (dark).

Tooltip content here
Checking strategy…
/* Cascade from safe fallback to best enhancement */
.tooltip {
  /* Fallback: absolute positioning */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
}

/* Best: anchor-position that follows CSS transforms */
@supports named-feature("anchor-position-follows-transforms") {
  .tooltip {
    position: fixed;
    position-anchor: --my-anchor;
    top: anchor(bottom);
    left: anchor(left);
  }
}

see also