# 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".

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

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".

## 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:

```tsx
<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:

```tsx
<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.

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

## Signature

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