コンテナクエリ|CSS

コンテナクエリは現時点でまだ使えない(caniuse)が、Googleからポリフィルが公開されたのでメモ。

ポリフィルだとFOUCと呼ばれる現象が起こるため、実用上はまだ使わないほうがいいという段階らしい。

正式な公開を待つ感じ。

ソース

以下のHTMLに対してCSSを定義する。

サンプルではdl直下にdivを置いてdt,ddを括っており、あれ?と思ったけど調べてみたら現在はこれはありとのこと(一部バリデーターによってはエラーを返す場合もあるらしい)なので、自分としてはたぶんこういうソースは書かないけど、サンプルの構造をそのまま流用。

<div class="parent-container">
  <dl class="child-container">
    <div>
      <dt>タイトル1</dt>
      <dd>
        値1
      </dd>
    </div>
    <div>
      <dt>タイトル2</dt>
      <dd>
        値2
      </dd>
    </div>
  </dl>
</div>

.parent-containerを親として横幅300pxで切り替えを行う

/* 切り替えの基準とする親コンテナを定義 */
.parent-container {
  container-type: inline-size;
  container-name: parent-wrapper;
  /* ショートハンド */
  /* container: inline-size / parent-wrapper;*/
}
/* 子コンテナを定義 */
.child-container {
  display: flex;
}
/* .parent-containerを親として横幅300pxで切り替えを行う */
@container parent-wrapper size(max-width: 300px) {
/* 上記条件下では以下のスタイルを適用 */
  .child-container {
    flex-direction: column;
  }
}

/* 見やすくするためのスタイル 実装には不要 */
dt {
  margin: 1px;
  padding: 5px;
  background-color: grey;
  color: white;
  text-align: center;
}
dd {
  margin: 1px;
  padding: 5px;
  background-color: lightgrey;
  text-align: center;
}

ポリフィル

const supportsContainerQueries = "container" in document.documentElement.style;

if (!supportsContainerQueries) {
  import("https://cdn.skypack.dev/container-query-polyfill");
}

実装サンプル

See the Pen Untitled by kngsmym (@kngsmym) on CodePen.