CSS - @container

概要

ルール名@container
構文 @container <container-condition># {
  <style-sheets>
}
詳細 <container-condition> =
    [ <container-name>? <container-query>? ]!
<container-query> =
    not <query-in-parens>
  | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]
<query-in-parens> =
    ( <container-query> )
  | ( <size-feature> )
  | style( <style-query> )
  | scroll-state( <scroll-state-query> )
  | <general-enclosed>
<style-query> =
    not <style-in-parens>
  | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ]
  | <style-feature>
<style-in-parens> =
    ( <style-query> )
  | ( <style-feature> )
  | <general-enclosed>
<scroll-state-query> =
    not <scroll-state-in-parens> )
  | <scroll-state-inparens> [ [ and <scroll-state-in-parens> ]* | [ or <scroll-state-in-parens> ]* ]
  | <scroll-state-feature>
<scroll-state-in-parens> =
    ( <scroll-state-query> )
  | ( <scroll-state-feature> )
  | <general-enclosed>
サポート https://caniuse.com/mdn-css_at-rules_container

説明

コンテナクエリの条件とスタイルを指定します。詳細は「コンテナクエリ」を参照してください。

リンク

Copyright (C) 2023-2025 杜甫々
初版：2023年2月19日、最終更新：2025年3月2日
https://www.tohoho-web.com/css/rule/container.htm