レイアウト CSS position: stickyが軸ごとに最寄りのScrollerへ固定されるように 長年のCSS制約がついに解消されました。position: stickyが、軸ごとに異なるスクロールコンテナを同時に追跡できるようになりました。従来はoverflow-x: autoのラッパー内に幅広のデータテーブルを配置すると、sticky header（top: 0）と先頭列（left: 0）が同じスクロール基準を共有し、垂直方向のstickyが機能しませんでした。重要なポイントはラッパーにoverflow: auto clipを使用することで、overflow-x: autoのみを使うとoverflow-yがautoに計算されて問題が再発します。Chrome 148 のExperimental Web Platform Featuresフラグで試験利用可能で、Chrome 150 からは@supports named-feature(single-axis-scroll-container)による機能検出がサポートされます。FirefoxとSafariはまだ対応していません。
Read Articlearrow_forward Video · CSSマインドセット
CSSとの戦いを永遠にやめよう Kevin Powellはカードレイアウトの実例を通じて、CSSでよくある落とし穴 — 過度に命令的なスタイルの記述 — を診断します。固定heightと固定widthの宣言がコンポーネントを実際のレイアウトに配置した際にoverflowとグリッドの崩れを引き起こす過程を実演しています。核心的な考え方の転換: ブラウザはすでにサイジングの方法を知っているので、ブラウザと戦うのではなくブラウザと協調する。具体的なルール: 明示的なheightの設定を避ける（要素は必要な高さだけ持とうとする）、overflowなしに収縮を許可するにはwidthよりmax-widthを使用する、コンポーネントのmarginとwidthが周囲のグリッドに影響しないようレイアウトの関心事とコンポーネントの関心事を分離する。この動画はプロパティの暗記よりブラウザ協調型CSSの哲学を軸にしたCSS Demystified v2 コースの再リリースに合わせて公開されました。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · アニメーション READ TIME: 5m
JavaScriptなしのCSS Entry・Exit Animation 3つ のモダンなCSS機能により、JavaScriptを使ったshow/hideアニメーションが不要になりました。@starting-styleは要素がDOMに現れる際のトランジション開始前の状態を定義します。transition-behavior: allow-discreteはdisplayのような離散プロパティをtransitionに参加させ、終了アニメーション完了後にdisplay: noneを適用します。interpolate-size: allow-keywordsはheight: autoのようなキーワードサイズへのトランジションをレイアウト時にピクセル値へ解決してアニメーションを可能にします。ブラウザサポートは@starting-styleとtransition-behaviorがChrome 117 ・Firefox 129 ・Safari 17.5 、interpolate-sizeはChrome 129 ・Safari 18 で利用可能ですがFirefoxは未対応です。3つ を組み合わせることでGSAPやFramer Motionなしに基本的なUI表示/非表示パターンを実装できます。
READ_FULL_LOGarrow_forward Article · パフォーマンス READ TIME: 15m
CSS Containmentとは？どう使う？ Harry Robertsがあまり活用されていないcontainプロパティとその4つ の値 — layout、paint、size、style — について、レンダリングパイプラインの観点から実践的に解説しています。contain: layoutはコンポーネント内部のレイアウトを独立させ、フォーマットコンテキストを確立し、position: fixedの子要素の基準をビューポートではなく該当要素に限定します。contain: paintはレンダリングをpadding boxにクリップし、画面外のサブツリーをスキップします。shorthandのcontent（layout+paint+style）とstrict（4つ 全て）はカードやウィジェットパターンに最適で、strictはcontain-intrinsic-sizeによる明示的なサイズ指定が必要です。OpenTableの事例ではモバイルドロワーにcontain: strictを適用し、レイアウトイベントで触れるノードを4,371個から73個に削減 し約6倍高速化 しました。
READ_FULL_LOGarrow_forward Article · ツーリング READ TIME: 2m
view-transitions-toolkitを発表：View Transitions API向けUtility Function Bramus Van Dammeが、View Transitions APIに関する数年 間の実験から得た高度なパターンを再利用可能なヘルパー関数としてまとめたnpmパッケージview-transitions-toolkitを公開しました。このツールキットはView Transitionsサブ機能の検出、document.activeViewTransitionのshimサポート、keyframeアニメーションの抽出・最適化（SCALE・SLIDEストラテジー対応）、トランジション再生制御（一時停止・スクラブ）、そしてナビゲーションの起点・終点に基づくView Transitionタイプの自動注入を提供します。npm i view-transitions-toolkitでインストールし、必要なモジュールのみ個別にimportして使用できます。デモサイトはchrome.dev/view-transitions-toolkit/で公開されています。
READ_FULL_LOGarrow_forward Article · グリッド READ TIME: 9m
列をまたぐ可変Contentの整列：CSS Subgridで解決 可変長の見出しを持つ兄弟カード間でディバイダーを揃えることは、CSS subgrid を知るまで不可能に思えるレイアウト課題です。解決策は親にgrid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))を設定し、各カードがgrid-row: span 3で親の3行 トラックを占有しつつgrid-template-rows: subgridで親の行サイズ決定に参加する方法です。subgridは親のgap値を継承するため、カード内部ではrow-gap: 0で上書きして内部間隔を維持します。トラック共有は同じ視覚的な行のカードのみに適用されるため、JavaScriptや@media queryなしでもレスポンシブラッピングが正しく機能します。:has()疑似クラスでアイコンの有無によるバリアントカードを宣言的に処理できます。subgridは2026年3月 にBaseline Widely Availableに達しました。
READ_FULL_LOGarrow_forward Article · ツーリング READ TIME: 6m
CSS @propertyにはもっと良いToolingが必要 — だからValidatorを作る CSS @property at-ruleはcustom propertyにcolor・length・time・imageなどの型コントラクトを宣言できますが、使用箇所でその型を検証するツールが存在しません。登録されたプロパティを誤用した場合（例: --brand-colorがcolorで登録されているのにbackground-image: var(--brand-color)と使用する）、仕様でIACVT と呼ばれる方式で計算値時点にサイレントに失敗します。CSS Property Type Validator はTypeScriptライブラリとCLI（コアバリデーションエンジンとCLIラッパーの2つ のscoped npmパッケージ）で、スタイルシートを解析して@propertyレジストリを構築し、var()の使用箇所を巡回してcss-treeのlexerで型互換性を検査します。終了コードは慣習的（0/1/2 ）でJSON出力によりCI統合が可能です。現在は宣言ごとに単一のvar()のみ対応し、 Stylelintプラグインとエディタ統合が予定されています。
READ_FULL_LOGarrow_forward summarize Digest_Summary
第14週はJavaScriptへの依存を減らすCSS機能のアップグレードが相次ぎました。最も実用的な影響を持つのはChrome 148 での軸ごとのposition: sticky修正です。ラッパー要素にoverflow: auto clipを使うことで、データテーブルのstickyヘッダーと先頭列が異なるスクロールコンテナを同時に追跡でき、Chrome 150 では@supports named-feature(single-axis-scroll-container)で機能検出が可能になります。また、3つ のCSS機能の組み合わせによりJSベースのshow/hideアニメーションが不要になります：エントリートランジション用の@starting-style、displayなどの離散プロパティ用のtransition-behavior: allow-discrete、height: autoアニメーション用のinterpolate-size: allow-keywordsです。
Harry RobertsはCSS containmentの詳細ガイドを発表し、モバイルドロワーにcontain: strictを適用するとレイアウトイベントが4,371ノードから73ノードへ と約6倍高速化 することを示しました。 content-visibility: autoとcontain-intrinsic-sizeと組み合わせると、JavaScriptなしで仮想化に近いパフォーマンスを得られます。グリッド面ではCSS subgrid が2026年3月 にBaseline Widely Availableに達し、grid-template-rows: subgridとgrid-row: span 3の実践ガイドがJavaScriptなしで列間の可変高さカードコンテンツを揃える方法を実演しました。
ツール面でも注目すべき2件 がありました。Bramus Van Dammeが高度なView Transitions APIヘルパーを提供するview-transitions-toolkitをnpmで公開し、新しいTypeScriptベースのCSS Property Type Validator CLIがタイプされた@property custom propertyが誤った値型で使用される静的なIACVT 失敗を検出します。
Key Takeaways Chrome 148 は軸ごとのposition: stickyを修正しました。ラッパーにoverflow-x: autoだけでなくoverflow: auto clipを使うことで、ヘッダーと先頭列が異なるスクロールコンテナを同時に追跡できます。 @starting-style、transition-behavior: allow-discrete、interpolate-size: allow-keywordsを組み合わせると、モダンブラウザでエントリー・イグジット・height: autoトランジションにJSクラストグルアニメーションが不要になります。contain: strictで実際のOpenTableモバイルドロワーのレイアウトが4,371 ノードから73 ノードに削減されました。独立したカードやウィジェットコンポーネントにCSS containmentを適用すると測定可能なレンダリング改善が得られます。 
