[ @sdxc/u/responsive ]

supports

A feature-query wrapper, applying the given utilities only when the browser supports query — progressive enhancement for CSS features without a reliable fallback path other than "don't apply this at all".

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { supports } from "@sdxc/u/responsive";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.supports("(corner-shape: squircle)", u.corner("squircle"))`	`css({ "@supports (corner-shape: squircle)": { cornerShape: "squircle" } })`

Examples

Basic example

Use supports(query, ...) to apply utilities only when the browser supports a feature, like supports("(backdrop-filter: blur(1px))", ...), keeping a solid fallback for the rest:

Frosted glass

<div mix={[...]}>
	<div
		mix={[
			bg("color.neutral.900"),
			supports("(backdrop-filter: blur(1px))", [bg("transparent"), backdropBlur("md")]),
			...,
		]}
	>
		Frosted glass
	</div>
</div>

Testing a selector

Use selector(...) in the query to test a selector, like supports("selector(:has(*))", ...). Check the box:

Email me a weekly summary

<label
	mix={[
		hstack({ gap: 3 }),
		border({ color: "neutral.border", width: 1 }),
		supports("selector(:has(*))", has(":checked", bg("brand.tint"))),
		...,
	]}
>
	<input type="checkbox" />
	Email me a weekly summary
</label>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.supports("(corner-shape: squircle)", u.corner("squircle")))

Signature

u.supports(query: string, input: UtilityInput<Node>)