クエリーの定義

再利用する条件に一度名前を付け、ネイティブ CSS やクラスの接尾辞で使います。メディア名はビューポートやデバイスの条件、コンテナー名は使用箇所で選んだコンテナーに対する条件を表します。定義は最上位かつ無条件でなければなりません。

クラスの接尾辞構文は条件、プリセットの全条件は名前付き条件、レイアウトの境界の選び方はレスポンシブデザインを参照してください。

定義が保存するのは条件です。使用箇所でコンテナー名 card を指定します。--dense の展開は幅とスタイルの両検査を保持します。

テキストによる説明

1. --md は幅条件 (width >= 28rem) を定義し、--dense はその参照と style(--density: compact) を組み合わせます。
2. 使用箇所の @container card (--dense) が card というコンテナーを選びます。
3. 展開結果は @container card (width >= 28rem) and style(--density: compact) です。コンテナー名は変わらず、定義の一部にもなりません。
4. 同じ条件を別のコンテナー名や、最も近い適格なコンテナーで再利用できます。図はコンパイル時の代入であり、DOM ツリーではありません。

@custom-media

CSS Media Queries 仕様に従って名前付きメディアクエリを定義します。

@custom-media --wide (width >= 60rem);@custom-media --reading (--wide), print;@custom-media --outside not (--reading);@custom-media --enabled true;@custom-media --disabled false;@media (--reading) {  .article {    max-width: 70ch;  }}

名前は -- で始まります。CSS の参照は (--name)、マークアップは @name、ローカルの名前付きブロックは @media (--name) を使います。ネイティブ CSS、ユーティリティと ミックスイン の定義、マークアップのクエリは同じ登録情報を使います。

定義はクエリリスト、前方参照、true、false、入れ子の論理式、否定、メディアタイプに対応します。展開は論理的で、リストの論理和を保ち、否定は参照式全体に適用します。リスト内の各クエリは別分岐となり、クラス上の全条件の分岐数は掛け合わせられます。@reading を12 回繰り返すなど、4,096 分岐を超えるクラスは規則を生成しません。コンパイラーは通常のメディアクエリを出力し、混在するメディアタイプを 1 クエリで表せない場合は入れ子のブロックを使います。ブラウザーの custom-media API や JavaScript ランタイムの登録は不要です。

未定義、循環、無効な参照はコンパイルエラーです。同名の定義は後のものが優先します。メディア名と ミックスイン 名は独立し、@name はメディアを選び、@apply(--name) は ミックスイン を呼びます。@starting-style が組み込みのため --starting-style は予約名です。プリセットに --breakpoint-* トークンはありません。その接頭辞を持つプロジェクトのカスタムプロパティは通常の CSS であり、暗黙のメディア条件にはなりません。幅の上限にはネイティブの長さか独立した名前のレイアウトトークンを使います。外部 URL を保持するインポートには未解決の custom-media クエリを含められません。変換前にそのスタイルシートのインポートを解決するか、インポートで通常のネイティブクエリを使ってください。

@custom-media --card (width >= 40rem); .card { @media (--card) { display: grid; } }

.card {  @media (width >= 40rem) {    display: grid;  }}

@custom-container

Master CSS はコンパイル時に @custom-container 定義を展開し、ブラウザーには通常の @container 規則を渡します。定義が持つのは条件だけで、測定するコンテナーは条件の使用箇所で選びます。

@custom-container --md (width >=28rem);@custom-container --max-md not (--md);@custom-container --compact style(--density: compact);@custom-container --dense (--md) and (--compact);@container card (--md) {  .title {    font-size: 1.25rem;  }}

名前は -- で始まります。CSS の参照は任意のコンテナー名の後に (--name) を置き、@container card not (--md) のように書きます。マークアップもクエリ内で同じ参照を使い、@container(--md) は最も近いコンテナー、@container(card|--md) は名前付きコンテナーを測ります。ネイティブ CSS、ユーティリティと ミックスイン の定義、マークアップは同じ登録情報を共有します。

定義にはサイズ・スタイルクエリ、not、and、or、前方参照を含む他の独自コンテナーの参照など、任意のコンテナー条件を使えます。展開時は参照条件を代入し、すでに 1 グループか条件全体でなければ括弧で囲みます。そのため @container card (--dense) は @container card (width >= 28rem) and style(--density: compact) を出力します。コンテナー条件は常に 1 つの前置部に収まり、展開で分岐は増えません。コンパイラーは通常のコンテナークエリを出力し、各展開条件を manifest の customContainers に保存します。

未定義、循環、空の参照や、コンテナー名から始まる定義はコンパイルエラーです。同名では後の定義が優先し、それを参照する定義も最終版を使います。コンテナー名は独自メディアや ミックスイン と独立し、単独の @md は常に独自メディアを選び、コンテナー条件は選びません。--container-* トークンは要素のサイズ用で、コンテナーのしきい値にはなりません。

@custom-container --roomy (width >= 40rem); .card { @container (--roomy) { display: grid; } }

.card {  @container (width >= 40rem) {    display: grid;  }}