構文

名前付き条件

プリセットのすべてのメディア条件とコンテナー条件、その展開したクエリー、測定するスコープ。

このページの内容

プリセットは、独立したメディア条件とコンテナー条件を定義します。短い名前を共有しますが、どちらの登録一覧もテーマトークンの集合ではありません。単独の @md はビューポートを、@container(--md) は条件を満たす祖先コンテナーをクエリーします。

メディア条件

メディア名は media.css に由来します。幅の条件は記述された rem 値を使い、向きや設定の条件はネイティブのメディア機能を使います。@dark と @light が調べるのはシステムの設定であり、手動で選んだサイトテーマではありません。

ビューポートの最小幅

接尾辞	展開後のクエリー
`@4xs`	`(width >= 22.5rem)`
`@3xs`	`(width >= 30rem)`
`@2xs`	`(width >= 37.5rem)`
`@xs`	`(width >= 48rem)`
`@sm`	`(width >= 52.125rem)`
`@md`	`(width >= 64rem)`
`@lg`	`(width >= 80rem)`
`@xl`	`(width >= 90rem)`
`@2xl`	`(width >= 100rem)`
`@3xl`	`(width >= 120rem)`
`@4xl`	`(width >= 160rem)`

指定幅未満のビューポート

接尾辞	展開後のクエリー
`@max-4xs`	`not (width >= 22.5rem)`
`@max-3xs`	`not (width >= 30rem)`
`@max-2xs`	`not (width >= 37.5rem)`
`@max-xs`	`not (width >= 48rem)`
`@max-sm`	`not (width >= 52.125rem)`
`@max-md`	`not (width >= 64rem)`
`@max-lg`	`not (width >= 80rem)`
`@max-xl`	`not (width >= 90rem)`
`@max-2xl`	`not (width >= 100rem)`
`@max-3xl`	`not (width >= 120rem)`
`@max-4xl`	`not (width >= 160rem)`

向きと設定

接尾辞	展開後のクエリー
`@dark`	`(prefers-color-scheme: dark)`
`@landscape`	`(orientation: landscape)`
`@light`	`(prefers-color-scheme: light)`
`@motion-reduce`	`(prefers-reduced-motion: reduce)`
`@motion-safe`	`(prefers-reduced-motion: no-preference)`
`@portrait`	`(orientation: portrait)`

コンテナー条件

コンテナー名は container.css に由来します。定義が提供するのはクエリー条件だけです。@container(--md) は最も近い適格なコンテナーを使い、@container(card|--md) は名前が card の適格なコンテナーを選びます。どちらもコンテナーを作成しません。

コンテナーの最小幅

接尾辞	展開後のクエリー
`@container(--3xs)`	`(width >= 16rem)`
`@container(--2xs)`	`(width >= 18rem)`
`@container(--xs)`	`(width >= 20rem)`
`@container(--sm)`	`(width >= 24rem)`
`@container(--md)`	`(width >= 28rem)`
`@container(--lg)`	`(width >= 32rem)`
`@container(--xl)`	`(width >= 36rem)`
`@container(--2xl)`	`(width >= 42rem)`
`@container(--3xl)`	`(width >= 48rem)`
`@container(--4xl)`	`(width >= 56rem)`
`@container(--5xl)`	`(width >= 64rem)`
`@container(--6xl)`	`(width >= 72rem)`
`@container(--7xl)`	`(width >= 80rem)`

指定幅未満のコンテナー

接尾辞	展開後のクエリー
`@container(--max-3xs)`	`not (width >= 16rem)`
`@container(--max-2xs)`	`not (width >= 18rem)`
`@container(--max-xs)`	`not (width >= 20rem)`
`@container(--max-sm)`	`not (width >= 24rem)`
`@container(--max-md)`	`not (width >= 28rem)`
`@container(--max-lg)`	`not (width >= 32rem)`
`@container(--max-xl)`	`not (width >= 36rem)`
`@container(--max-2xl)`	`not (width >= 42rem)`
`@container(--max-3xl)`	`not (width >= 48rem)`
`@container(--max-4xl)`	`not (width >= 56rem)`
`@container(--max-5xl)`	`not (width >= 64rem)`
`@container(--max-6xl)`	`not (width >= 72rem)`
`@container(--max-7xl)`	`not (width >= 80rem)`

プリセットの各 max- 条件は、対応する最小幅の条件の補集合です。下に展開したクエリーは境界で重複しません。元の定義は not (--name) で対応する名前を参照します。

同じ名前でもスコープは独立

同じキーでも、クエリーの領域ごとに異なるしきい値を表せます。--container-md のようなコンテナーサイズのトークンには、さらに独立した別の役割があります。サイズのユーティリティに長さを提供します。

使用例

このレイアウトは、プリセットの md のビューポートしきい値未満では 1 列、しきい値以上では 3 列を使います。

Notes

Drafts

カスタマイズ

ビューポートや設定のクエリーには独自のメディア名を、コンポーネントのクエリーには独自のコンテナー名を宣言します。ネイティブの単位は保持されます。コンパイル済みの manifest で条件を置き換える際、両方のしきい値を変えたい場合は、補集合の条件も再宣言してください。

@custom-media --tablet (width >= 48rem);@custom-container --wide-card (width >= 30rem);

<aside class="(container-name:card) container-inline">  <div class="grid-cols(1) grid-cols(2)@container(card|--wide-card)">Card content</div></aside><div class="grid-cols(1) grid-cols(3)@tablet">Page content</div>

生成された CSS

@layer utilities {  .grid-cols\(1\) {    display: grid;    grid-template-columns: repeat(1, minmax(0, 1fr))  }  .container-inline {    container-type: inline-size  }  .\(container-name\:card\) {    container-name: card  }  @container card (width >= 30rem) {    .grid-cols\(2\)\@container\(card\|--wide-card\) {      display: grid;      grid-template-columns: repeat(2, minmax(0, 1fr))    }  }  @media (width >= 48rem) {    .grid-cols\(3\)\@tablet {      display: grid;      grid-template-columns: repeat(3, minmax(0, 1fr))    }  }}