未来のCSS: State Container Queries

 (ishadeed.com)
11 ポイント 投稿者 xguru 2023-07-01 | 3件のコメント | WhatsAppで共有
  • Chromiumチームが新しいタイプのクエリを実験中
  • 昨年は Size Container Query が主要ブラウザーすべてでサポート開始
    • コンテナの幅を基準にクエリ可能
  • これに加えて、いまは Style クエリも可能: 特定のCSS変数があるかを確認。まだ Chrome Canary でのみ利用可能
  • State クエリは状態値に応じたクエリ
    • position: sticky などの状態が有効になっているかを確認でき、@container state(stuck: top) のように方向に応じて別のスタイルを指定
    • flex-wrap されたかどうかも @container header state(wrap: true) のように確認
    • 文書の方向が ltr rtl のどちらかによっても処理可能 @container state(dir: rtl)

関連記事

3件のコメント

 
alstjr7375 2023-07-02

CSS toggleもそうだし、だんだん「私はCSSでプログラミングしています」が可能な日が来ているような…。
 
xguru 2023-07-02

https://github.com/kkuchta/css-only-chat

こういうのもありましたね.. CSSだけで実装したチャット
 
alstjr7375 2023-07-02

すごいですねｗｗｗｗｗ