CSSContainerRule: containerQuery プロパティ

Baseline 2023

Newly available

Since ⁨September 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

containerQuery は CSSContainerRule インターフェイスの読み取り専用プロパティで、コンテナーのサイズが変わったときに、関連する @container のスタイル設定が適用されるかどうかを判断するために評価されるコンテナー条件を表す文字列を返します。

例えば、下記の @container の containerQuery の値は (min-width: 700px) です。

css

@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

値

コンテナークエリーの入った文字列です。

ホワイトスペースの除去などの正規化が行われるため、値が元の文字列と同じになるとは限らないことに注意してください。

例

下記の例では、無名の @container ルールを定義し、関連する CSSContainerRule のプロパティを表示します。 CSS は @container の例コンテナーの大きさに基づいたスタイルの設定と同じです。

<div id="log">
  <h2>ログ</h2>
  <ul></ul>
  <hr />
</div>

// ログリストへの参照を格納
const logList = document.querySelector("#log ul");
// 基盤ソースからデータをログ出力する関数
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}

最初の HTML は post に含まれる card (<div>) の HTML を定義します。

html

<div class="post">
  <div class="card">
    <h2>カードタイトル</h2>
    <p>カードの内容</p>
  </div>
</div>

コンテナー要素の CSS はコンテナーの型を指定します。そして、 @container は、幅が 650px 未満の場合、格納する要素 "card" に新しい幅、フォントサイズ、背景色を適用します。

html

<style id="example-styles">
  /* インラインサイズに基づくコンテナーコンテキスト */
  .post {
    container-type: inline-size;
  }

  /* コンテナーの幅が 650px より狭い場合にスタイルを設定 */
  @container (width < 650px) {
    .card {
      width: 50%;
      background-color: gray;
      font-size: 1em;
    }
  }
</style>

下記のコードでは、例に関連付けられている HTMLStyleElement を id を使用して取得し、その sheet プロパティを使用して StyleSheet を取得しています。 StyleSheet から、シートに追加した cssRules の設定を取得します。上記の 2 つ目のルールとして @container を追加したので、 cssRules の 2 つ目の項目（インデックスが "1"）を使用して、関連する CSSContainerRule にアクセスすることができます。最後に、コンテナー名とクエリーのプロパティをログ出力します。

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);

出力例を下記に示します。ログ出力している文字列が掲載されています。ページの幅が 650px に遷移すると、カードは背景を変更します。