[ @sdxc/u/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.

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

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: "..." } })`

Examples

Basic example

Use media(query, ...) to apply utilities under any media query, like media("(min-width: 48rem)", ...) for the viewport width. Resize your browser window to see the grid change:

<div
	mix={[grid(), gap(4), media("(min-width: 48rem)", gridTemplate({ columns: repeat(3, 1) }))]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
</div>

Querying a device feature

Query a device feature, like media("(pointer: coarse)", ...), to give touch screens larger targets. Open the page on a phone, or emulate touch in your browser's dev tools:

<div mix={[...]}>
	<button
		type="button"
		mix={[
			bg("brand.solid"),
			fg("brand.onSolid"),
			media("(pointer: coarse)", [minBs(11), minIs(11)]),
			...,
		]}
	>
		Like
	</button>
	<button
		type="button"
		mix={[
			bg("neutral.tint"),
			fg("neutral.emphasis"),
			media("(pointer: coarse)", [minBs(11), minIs(11)]),
			...,
		]}
	>
		Share
	</button>
</div>

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>)