CSS @container scroll-state()クエリ：JavaScriptな… — 2026年 第4週 CSS・スタイリング

今週のCSSカバレッジは一つのテーマに収束しています。かつてJavaScriptが必要だった動作を、ブラウザがますます自前で処理できるようになっているということです。注目アイテムであるBrecht De RuyteによるCSS @container scroll-state()クエリの詳解が最も明確な例です。Chrome 144の新しいscrolled状態を使えば、@container scroll-state(scrolled: bottom)ルール一つで、JavaScriptゼロのスクロールダウン時ヘッダー非表示パターンが実装できます。Chrome 133で導入されたstuck・snapped・scrollable状態を基盤としていますが、現在はChrome限定のためprogressive enhancementが推奨されます。Kevin Powellのネイティブ<dialog>要素の動画も同じ文脈です。.showModal()がブラウザのtop layerに昇格させてz-indexの競合を完全に排除し、組み込みのフォーカストラップとEscapeキーによる閉鎖が数百行のカスタムオーバーレイコードを置き換えます。

精密なポジショニングも詳しく取り上げられています。Schalk NeethlingのCSS anchor positioningのfallbackシステムガイド — position-try-fallbacks、名前付き@position-try at-rule、position-try-order: most-block-size — は、ツールチップやポップオーバーがJavaScriptによる計測なしに自動的に位置を再調整する仕組みを示しています。Manuel Matuzovićはリセットスタイルシートを匿名@layer {}ブロックで囲む洗練されたcascadeテクニックを紹介します。これにより全てのunlayeredルールよりspecificityが低くなり、セレクターごとに:where()で包む冗長なパターンをすっきりと置き換えられます。

言語の未来を見渡すと、OddBirdのポッドキャストでMiriam SuzanneとChris Coyierが、2025年末のFirefoxサポートによりクロスブラウザとなった@scopeと、@contentブロックを活用したネイティブCSS mixins仕様を探っています。Polypaneの包括的なCSSレイアウト基礎解説は、normal flow・box model・margin collapse・stacking contextなど全レイアウトアルゴリズムの土台となるメンタルモデルを整理し、高さを指定したblock要素にplace-content: centerを適用することが現代的な垂直中央揃えの最もシンプルな解法だと結論づけています。