v146 · CSS · demo
Progressive Enhancement
Two product cards — one using a simple absolute-positioned tooltip as a fallback, and one that applies @supports named-feature("anchor-position-follows-transforms") to use a more precise anchor-positioned version in Chrome 150+.
Feature detection results in this browser
CSS.supports("named-feature(...)")
…
named-feature("anchor-position-follows-transforms")
…
Hover the ⓘ icon in each card to see the tooltip. The right card uses named-feature() to enhance behaviour when the feature is present.
Fallback — no named-feature() test
Ceramic Mug
Dishwasher-safe · 350ml capacity
Uses position: absolute relative to the card — tooltip always appears at top-left of the card regardless of transforms.
Enhanced — @supports named-feature()
Glass Teapot
Heat-resistant borosilicate · 600ml
In Chrome 150+: tooltip tracks the icon even through CSS transforms.
CSS comparison
Without named-feature()
.tooltip {
/* Simple absolute positioning —
doesn't account for transforms */
position: absolute;
bottom: calc(100% + 6px);
left: 0;
}
/* Works everywhere, but the tooltip
won't track transforms on the anchor */
With named-feature() — Chrome 150
/* Base style — works everywhere */
.tooltip { position: absolute; … }
/* Enhanced when transform tracking
is available */
@supports named-feature(
"anchor-position-follows-transforms"
) {
.icon { anchor-name: --info; }
.tooltip {
position-anchor: --info;
top: anchor(bottom);
left: anchor(left);
}
}
see also
- Feature Query Explorer — all @supports condition types
- Back to feature index
- ChromeStatus entry