スクロールの状態変化でスタイル切替が可能に！ CSSコンテナークエリーのscroll-state()入門
BRANK

@containerscroll-state()は、CSSコンテナークエリーの一種です。従来はJavaScriptを使って実装していた、「スクロールされたらヘッダーのスタイルを切り替える」等のインタラクションをCSSだけで実装できるようになります。

ics.media
Related Topics: CSS Web Standards / Browsers
2 comments
  • 池田 泰延
    @clockmaker

    「コンテナクエリ」＝「要素のサイズに応じたスタイル制御」と限定して登場時より紹介されがちですが、それは軽率。

    @​containerはCSS変数やscroll-state()にも使える応用の効く技術です。

  • 池田 泰延
    @clockmaker

    ICS MEDIAで解説記事が公開されました！
    担当：古舘

    スクロールの状態変化でスタイル切替が可能に！ CSSコンテナークエリーのscroll-state()入門 - ICS MEDIA ics.media/entry/250602/