条件

条件の接尾辞は、クラスのルールを適用できる場合を制限します。Master CSS が名前付きの定義を解決してネイティブ CSS クエリーを出力し、ブラウザーが評価します。コンパイルは現在のビューポート、入力デバイス、ブラウザー対応をテストしません。

このページは、対応する接尾辞、クエリーのエンコード、組み合わせを定義します。ビューポートやコンポーネントの境界の選び方はレスポンシブデザインを、プログレッシブエンハンスメントは互換性を参照してください。

コンパイラーは、どちらのブラウザーの例を評価するより前にクエリーを出力します。クエリーが一致しても、カスケードで優先されるとは限りません。

テキストによる説明

1. grid@media(width>=40rem) は、現在のビューポートを調べずに、display: grid を含む @media ルールを出力します。
2. 39rem ではブラウザーはルールを適用しません。40rem になると条件が一致し、宣言がカスケードに参加します。
3. 最終的な display 値は、ほかのカスケードルールで決まることもあります。コンパイル、クエリーの一致、最終的な計算済みスタイルは別の確認事項です。

クエリーの形式

条件はユーティリティとセレクター接尾辞の後に追加します。クラスの括弧がクエリーを区切るため、メディア機能、範囲、supports 宣言をさらに括弧で囲まないでください。

@layer utilities {  @media (pointer:coarse) {    .hidden\@media\(pointer\:coarse\) {      display: none    }  }  @media print {    .hidden\@media\(print\) {      display: none    }  }  @supports (display:grid) {    .grid\@supports\(display\:grid\) {      display: grid    }  }}

| は、文字列、コメント、CSS エスケープの外の空白を表します。@container(card|width>=40rem) ではコンテナー名と条件を区切ります。引用符付き文字列とエスケープはリテラルの内容を保ちます。このエンコードはクラス用であり、CSS 定義には通常の空白を書きます。

各接尾辞は単純なクエリーを 1 つ受け付け、単一値内の括弧が釣り合った関数は保持します。Master CSS はブラウザー対応データベースで機能名を制限しません。生成に成功しても、ブラウザーが条件に対応することや一致することは保証されません。複合式とクエリーリストはCSS に記述するクエリーを参照してください。

条件を組み合わせる

単純なクエリー接尾辞を重ねると、すべての条件が必要になります。最初の接尾辞が外側のクエリーになり、その後の接尾辞が内側に入れ子になります。同じ種類のラッパーを繰り返しても順序を保ちます。

最初のクエリーが最も外側です。display 宣言は両方の条件が一致した場合だけカスケードに参加します。入れ子は実行の時間軸ではありません。

テキストによる説明

1. grid@media(width>=40rem)@supports(display:grid) は、@supports (display:grid) 内に grid ルールを出力し、さらにそれを @media (width>=40rem) 内に置きます。
2. メディアクエリーはビューポート幅を、supports クエリーはブラウザーの display: grid への対応を調べます。宣言がカスケードに参加するには、両方の一致が必要です。
3. 生成セレクターは、完全なクラスを持つ要素に一致します。図では外側の utilities レイヤーを省略していますが、生成 CSS の例には残っています。

<div class="grid@media(width>=40rem)@supports(display:grid)">Content</div>

@layer utilities {  @media (width >= 40rem) {    @media (hover:hover) {      @supports (display:grid) {        .grid\@media\(width\>\=40rem\)\@media\(hover\:hover\)\@supports\(display\:grid\) {          display: grid        }      }    }  }  @media (width >= 40rem) {    @supports (display:grid) {      .grid\@media\(width\>\=40rem\)\@supports\(display\:grid\) {        display: grid      }    }  }}

これらは入れ子の CSS 条件であり、順番に実行する手順ではありません。両方のクエリーが一致して初めて、display: grid 宣言がカスケードに参加します。宣言を受け取る要素は、引き続きセレクターが決めます。

セレクターとトークンの依存関係

fg-red:hover@sm は、トークンを参照するユーティリティ、セレクター、名前付きメディア条件を組み合わせます。

<div class="fg-red:hover@sm">Hover at sm and above</div>

プリセットでは、fg-red は --color-red を使い、:hover はクラスを持つ要素を調べ、@sm はビューポート幅が少なくとも 52.125rem であることを要求します。プリセットの red エイリアスは固定色ですが、プロジェクトで上書きできます。トークン値と競合する CSS がなければ、クラスだけで最終色を確定できません。

@layer theme {  :root,  :host {    --color-red-60: oklch(60.94% .2501 29.2)  }  :root,  :host {    --color-red: var(--color-red-60)  }}@layer utilities {  @media (width >= 52.125rem) {    .fg-red\:hover\@sm:hover {      color: var(--color-red)    }  }}

生成 CSS は必要なトークンの依存関係を含みますが、ベースのレイヤー順序宣言は挿入しません。通常は @import '@master/css' でベーススタイルシートを読み込みます。

名前付きメディア条件

@sm のような単独の接尾辞は @custom-media 定義を解決します。未定義の名前はエラーです。ミックスイン名は別の @apply(--name) 構文を、コンテナー条件は @container(--name) を使い、どちらも単独の接尾辞では選びません。

ブレークポイント

プリセットの media.css は 11 個のビューポートのブレークポイントを登録します。theme.css だけのインポートでは登録されず、テーマ変数もメディア条件を定義しません。値はブレークポイントのリファレンスを参照してください。

プロジェクトはネイティブ単位を保ってクエリーを置き換えられます。プリセットの --max-* は対応する名前の否定で、--max-md は not (--md) です。定義を一緒にコンパイルすると、--md の置き換えが両方の範囲を更新し、境界で重複しません。

コンパイル済み manifest には、すでに展開したクエリーが入っています。そこに定義を追加しても、既存の依存条件は再展開されません。両方の範囲を置き換える設定フラグメントには、両方の名前を明示します。

@custom-media --md (width >= 60rem);@custom-media --max-md not (--md);

<div class="hidden@md hidden@max-md">Example</div>

@layer utilities {  @media not (width >= 60rem) {    .hidden\@max-md {      display: none    }  }  @media (width >= 60rem) {    .hidden\@md {      display: none    }  }}

これは定義を読み込む 2 つの段階の比較であり、両方の元の定義を一緒にコンパイルする場合の動作ではありません。

テキストによる説明

1. --md と --max-md を一緒にコンパイルすると、not (--md) は対応する最小幅の定義を使って展開されます。
2. コンパイル済み manifest には展開したクエリーが入っています。新しい --md: 60rem の定義を加えても、古い 64rem の --max-md の補集合は再展開されません。
3. 両方の範囲を一緒に変える必要がある場合は、後の設定フラグメントで両方の名前を再宣言します。

システムのカラー設定

プリセットの @light と @dark は prefers-color-scheme をクエリーします。祖先セレクターを挿入したり、手動で選んだサイトテーマに従ったりはしません。手動の有効化には @apply(--manual-dark) などの明示的なセレクターミックスインを使います。変数とモードを参照してください。

ネイティブクエリー

メディア機能と範囲

ネイティブ機能名と単位を省略せずに使います。print、screen、all などのメディアタイプは、グループ化の括弧なしで出力します。メディアタイプでない単独の名前は真偽値の機能となり、@media(hover) は @media (hover) を出力します。

範囲は <、<=、>、>=、= を受け付け、連鎖する比較にも対応します。小数とネイティブ単位を保持し、CSS の解像度単位 x もネイティブの意味を保ちます。

@layer utilities {  @media (resolution >= 2x) {    .hidden\@media\(resolution\>\=2x\) {      display: none    }  }  @media (width < 40rem) {    .hidden\@media\(width\<40rem\) {      display: none    }  }  @media (40rem <= width < 64rem) {    .grid-cols\(2\)\@media\(40rem\<\=width\<64rem\) {      display: grid;      grid-template-columns: repeat(2, minmax(0, 1fr))    }  }}

同じ単位で比較可能な範囲は、範囲の優先順位を保ちます。名前付きメディア条件と等価なネイティブクエリーは、同じ順序付け情報を使います。異なる単位や式は安定した構文順序を使い、Master CSS は並べ替えのためにルートのフォントサイズを仮定したり、単位を変換したりしません。コンテナークエリーの領域はメディアクエリーと別です。等価な条件かつ同じプロパティのスコープでは、直接値が名前付きトークンより後になります。

ブラウザーによる機能と範囲の解釈は、Media Queriesを参照してください。

Supports 宣言

@supports(property:value) は @supports(display:grid) などの CSS 宣言を 1 つ受け付け、ブラウザーがそのプロパティと値の組み合わせへの対応を調べます。selector() の検査、否定、複合の対応条件は CSS ミックスインに記述します。

@layer utilities {  @supports (display:grid) {    .grid\@supports\(display\:grid\) {      display: grid    }  }}

コンテナー

サイズクエリーは、クエリー対象にできる祖先コンテナーを測定します。通常の CSS でコンテナーを作り、最も近い対象ではなく特定のコンテナーを選ぶ場合は名前を付けます。この例では、クエリーを適用する要素は子孫です。

<aside class="(container-name:card) container-inline">  <div class="grid-cols(2)@container(card|width>=40rem)">    <div>First item</div>    <div>Second item</div>  </div></aside>

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

条件が一致すると、組み合わせスタイルは display: grid と等幅の 2 列を設定します。しきい値未満ではどちらの宣言も提供しないため、2 つのブロック子要素は通常フローで縦に並びます。コンテナー自身の幅は周囲のレイアウトが決めます。

カスタムプロパティのスタイルクエリーは、祖先コンテナーの値を調べます。container-inline は不要です。

<div style="--density:compact">  <div class="p(8)@container(style(--density:compact))">Compact content</div></div>

@layer utilities {  @container style(--density:compact) {    .p\(8\)\@container\(style\(--density\:compact\)\) {      padding: calc(8 * 1px)    }  }}

コンテナーの適格性と照合は、ネイティブのコンテナークエリーが定義します。--container-md などのサイズトークンを変えても、明示的なしきい値や名前付きコンテナー条件は変わりません。独立したサイズの役割はコンテナートークンを参照してください。

名前付きコンテナー条件

@container(--md) は @custom-container --md を解決し、@container(card|--md) は同じ条件を名前が card の適格なコンテナーに適用します。定義が提供するのは条件であり、コンテナー名ではありません。

プリセットの container.css は 13 個のコンポーネント幅と、それぞれの max- の補集合を登録します。ビューポートのブレークポイントとは独立しており、@container(--md) は 28rem、@md は 64rem です。

プリセットのコンテナースケールとその補集合の一覧は、名前付き条件を参照してください。

各 --max-* は、対応する最小幅条件の否定です。たとえば --max-md は not (--md) です。メディア条件と同様に、一緒にコンパイルした定義は参照先の上書きに従いますが、展開済み manifest の定義は、フラグメントが参照先の名前だけを置き換えても再展開されません。

@layer utilities {  @container card (width >= 28rem) {    .grid-cols\(2\)\@container\(card\|--md\) {      display: grid;      grid-template-columns: repeat(2, minmax(0, 1fr))    }  }  @container not (width >= 24rem) {    .hidden\@container\(--max-sm\) {      display: none    }  }}

名前の定義や置き換えには @custom-container を使います。未定義の名前はエラーです。

CSS に記述するクエリー

クラスのクエリーは、意図的にネイティブ CSS より小さな文法だけを受け付けます。メディアクエリーリスト、複合条件、否定は @custom-media で定義します。ほかのクエリーには @mixin を使い、@contents でクラスの宣言を挿入する場所を示します。

余分なグループ化の括弧は、使うべきクラス形式とともに CLASS_SYNTAX_ERROR を報告します。複雑な形式は MASTER_QUERY_REQUIRES_CSS を報告し、ルールを生成しません。クエリーを引用符で囲んでも文法は広がりません。|= 属性演算子などのリテラルなパイプは、クラスのクエリーではなくネイティブ CSS に記述してください。

@custom-media --wide-screen screen and (width >= 50rem);@mixin --language-selector {  @supports selector([lang|=en]) {    @contents;  }}

<div class="p-md@wide-screen block@apply(--language-selector)">Example</div>

@layer theme {  :root,  :host {    --spacing-md: 1rem  }}@layer utilities {  @supports selector([lang|=en]) {    .block\@apply\(--language-selector\) {      display: block    }  }  @media screen {    @media (width >= 50rem) {      .p-md\@wide-screen {        padding: var(--spacing-md)      }    }  }}

再利用できるラッパーと引数は、ユーティリティとミックスインを参照してください。

その他の接尾辞

以下の接尾辞も @ を使いますが、メディア、対応、コンテナーの条件はテストしません。

カスケードレイヤーの選択

@layer(base)、@layer(defaults)、@layer(components)、@layer(utilities) はクラス全体のレイヤーを選び、サブレイヤーは作りません。同じレイヤーの繰り返しは許可されますが、1 つのクラスで異なるレイヤーを選ぶとエラーです。順序と制約はカスケードレイヤーを参照してください。

開始時のスタイル

@starting-style はネイティブの at-rule でルールを囲みます。要素に以前の描画スタイルがない場合に変更前のスタイルを提供し、登場時のトランジションを可能にします。自動でトランジションを作ったり、汎用の「初回描画」セレクターとして働いたりはしません。ネイティブの動作は @starting-styleを参照してください。

@layer utilities {  @starting-style {    .\(opacity\:0\)\@starting-style {      opacity: 0    }  }}

@starting-style と @layer(...) は組み込みの接尾辞であり、プリセット定義を必要としません。再利用する CSS ラッパーには @apply(--name) を使います。