CSS @container 规則

定義と使用法

CSS @container 規則は、コンテナの大きさやスタイルに基づいて他の要素にスタイルを定義するために使用されます。

スタイル宣言は条件に基づいてフィルタリングされ、条件が真の場合にコンテナに適用されます。コンテナの大きさやスタイル値が変更された場合、条件が再評価されます。

ヒント：CSSでは、コンテナは他の要素をグループ化してスタイルを設定するために使用される要素です。

例

コンテナの大きさやスタイルに基づいて他の要素にスタイルを定義します：

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* myContainerが500px未満の場合にスタイルを追加 */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

自分で試してみてください

CSS 文法

@container containername (containerquery) {
  css declarations
}

属性値

ブラウザのサポート

テーブルの数字は、この @ 规則を完全にサポートする最初のブラウザのバージョンを示しています。