CSS @supports selector(): gate a relational selector safely

When to use it

A dispatch card has a permanent border and a visible text label for its held state. If :has() is supported, the card adds a thicker edge when it contains a checked hold control. The plain border and text remain meaningful without that selector. A script may still need to update an external summary; this CSS relationship cannot persist a review decision or submit it. Test checked, unchecked, disabled, and dynamically replaced controls. Do not write the checked-state emphasis before the feature gate with the unsupported selector in a comma-separated group, since the entire rule can be discarded when parsing fails. If the relationship becomes expensive across a huge changing tree, scope the selector to a short component rather than a page-wide ancestor. The conditional rule should only improve an already working control.

.dispatch-card { border: 1px solid #597581; padding: 1rem; }
@supports selector(:has(input:checked)) { .dispatch-card:has(> .hold-control input:checked) { border-inline-start: .35rem solid #7a382e; } }
.dispatch-card:focus-within { outline: 2px solid #205d78; outline-offset: 2px; }

Cost and verification

The feature check is cheap. The relationship selector can cost more when broad ancestors must be reconsidered after frequent DOM changes; keep the subject narrow and benchmark a large repeated list if necessary. More significant is the compatibility risk: a browser that fails the condition never sees the enhancement, so the visible label and usable checkbox must stand on their own. @supports validates selector syntax, not accessible state wording or server persistence. Confirm the checked control remains operable with keyboard and assistive technology. The card's focus-within outline makes the current group easier to locate but does not replace the input's own focus cue.

Common Mistakes

• Do not assume a syntax check proves the state relationship is correct.
• Do not hide the only held-state cue inside a feature gate.
• Do not use an unscoped :has() rule across a large changing page.

Connected lessons

• CSS Property Decisions
• CSS @supports: layer a feature over a usable base
• CSS :has: style a parent from a meaningful child state
• CSS :focus-within: mark the active field group
• HTML constraint validation: improve feedback without trusting the browser