responsive
media
The explicit escape hatch for a real viewport/feature media query, for a rule that must read the viewport or a user preference.
import { media } from "@sdxc/u/responsive";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.media("(prefers-contrast: more)", u.border("brand.strong")) | css({ "@media (prefers-contrast: more)": { borderColor: "..." } }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.media("(prefers-contrast: more)", u.border("brand.strong"))Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.media("(prefers-contrast: more)", u.border("brand.strong")))Signature
u.media(query: string, input: UtilityInput<Node>)