[ @sdxc/u/responsive ]

atQuery

The raw escape hatch for expressing a container condition directly — querying height, orientation, a style feature, or combining several with and/or.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.atQuery("(min-width: 40rem)", u.p(6))`	`css({ "@container (min-width: 40rem)": { padding: "..." } })`
`u.atQuery("sidebar (min-width: 40rem)", u.p(6))`	`css({ "@container sidebar (min-width: 40rem)": { padding: "..." } })`

Examples

Basic example

Use atQuery(query, ...) to write the whole @container condition yourself, like atQuery("(min-width: 24rem)", ...). Drag the handle at the box's bottom-right corner to resize it and watch the layout change:

Lakeside cabin

Sleeps four, with a dock on the water.

<div mix={[container("card"), resize("horizontal"), overflow(), minIs(48), ...]}>
	<article
		mix={[
			grid(),
			gap(4),
			atQuery("(min-width: 24rem)", gridTemplate({ columns: "10rem 1fr" })),
		]}
	>
		<img src={...} alt="" mix={[is("100%"), bs(24), fit(), rounded("md")]} />
		<div>
			<h3 mix={[weight("semibold")]}>Lakeside cabin</h3>
			<p mix={[...]}>Sleeps four, with a dock on the water.</p>
		</div>
	</article>
</div>

Combining conditions

Combine conditions and name the container in the query, like atQuery("panel (min-width: 20rem) and (max-width: 36rem)", ...), to style a range of widths. The card is tinted only inside it. Drag the handle at the box's bottom-right corner to resize it and watch the layout change:

Lakeside cabin

Sleeps four, with a dock on the water.

<div mix={[container("panel"), resize("horizontal"), overflow(), minIs(48), ...]}>
	<article
		mix={[
			grid(),
			gap(4),
			atQuery("panel (min-width: 20rem) and (max-width: 36rem)", bg("brand.tint")),
		]}
	>
		<img src={...} alt="" mix={[is("100%"), bs(24), fit(), rounded("md")]} />
		<div>
			<h3 mix={[weight("semibold")]}>Lakeside cabin</h3>
			<p mix={[...]}>Sleeps four, with a dock on the water.</p>
		</div>
	</article>
</div>

Querying orientation

Declare a size container with container(name, "size") to query its height or orientation, like atQuery("frame (orientation: landscape)", ...). Drag the handle at the box's bottom-right corner in any direction:

Lakeside cabin

Sleeps four, with a dock on the water.

<div
	mix={[
		container("frame", "size"),
		resize("both"),
		overflow(),
		bs(64),
		minIs(48),
		minBs(32),
		...,
	]}
>
	<article
		mix={[
			grid(),
			gap(4),
			atQuery("frame (orientation: landscape)", gridTemplate({ columns: "1fr 1fr" })),
		]}
	>
		<img src={...} alt="" mix={[is("100%"), bs(24), fit(), rounded("md")]} />
		<div>
			<h3 mix={[weight("semibold")]}>Lakeside cabin</h3>
			<p mix={[...]}>Sleeps four, with a dock on the water.</p>
		</div>
	</article>
</div>

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.atQuery("(min-width: 40rem)", u.p("2.75rem"))

Applying on a state

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

u.hover(u.atQuery("(min-width: 40rem)", u.p(6)))

Signature

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