リリースInterop 2026始動 – Mozilla Hacks
Interop 2026は150件以上の提案から20のfocus areaを選定し正式にスタートしました。2025年には全体スコアが25から95へと大幅に向上し、Same-Document View TransitionsやCSS Anchor Positioningなどがcross-browserで利用可能になりました。2026年の新CSS対象には、scroll-driven animations、CSS container style queries、疑似要素以外でも使えるようになったCSS attr()、::highlight()を使ったCSS custom highlights、そしてレスポンシブなclip-path向けのCSS shape()が含まれます。CSS scroll snap、anchor positioning、user-select、zoomの信頼性改善も継続され、accessibility、モバイルviewport、JPEG XL、WebVTTの4つの調査領域も設けられています。
Read Articlearrow_forward Video · チュートリアル17:17
自分のWebサイトにスライドインナビを実装した方法
Kevin Powellは個人のAstroサイトでJavaScriptベースのsticky navを純粋なCSSに置き換えるプロセスを公開します。新しいcontainer-type: scroll-stateを使うことで、子要素がcontainerのstuck・snapped・scrollable状態をクエリできます。@container scroll-state(stuck: top)ルールでheaderのtranslateなどのnavスタイルを適用し、JavaScriptは不要です。position: stickyに負のtopオフセット（例: top: -200px）を設定してnavを画面外に隠し、ユーザーがその閾値をスクロールするとスライドインします。animation-range-startとanimation-range-endをピクセル単位で指定したanimation-timeline: scroll()フォールバックも実演し、録画時点でscroll-stateのglobal supportは71%（Chrome専用）、animation-timelineは78%と解説しています。
AI_INFOGRAPHICWATCH_VIDEOarrow_forwardArticle · テクニックREAD TIME: 4m
animation-timelineで背景色付きテーブルにスクロールインジケーターを追加
交互に背景色を持つ横スクロールテーブルにスクロールshadow indicatorを表示するCSSテクニックを紹介します。background-attachment: localなどの従来手法はテーブル自身の背景がshadowを覆うため失敗します。解決策はCSS Grid（grid-template: "leftindicator content rightindicator" auto / 30px max-content 30px）でテーブルをラップし、::before/::after pseudo-elementにposition: stickyとz-index: 10を適用する方法です。各pseudo-elementはlinear-gradient shadowを持ち、opacityはanimation-timeline: scroll(nearest inline)とopacity: 1から0へのシンプルな@keyframes show-indicatorで制御します。::beforeはreverseで実行し、animation-timelineは必ずanimation shorthandの後に宣言しないとリセットされます。
READ_FULL_LOGarrow_forwardArticle · ガイドREAD TIME: 2m
パーセント高さを表現するより良い方法
Temani Afifはheight: 100%がよく失敗する理由 — 親要素に明示的なheightが必要で、あったとしてもmargin・padding・box-sizingによってoverflowが起きうる — を解説し、height: stretchを現代的な代替として紹介します。height: 100%と異なりstretchはalign-self: stretchの整列として動作し、box-sizingに関係なくmarginを自動的に考慮します。またdefinite heightを付与するため、全称セレクタでcascading stretchも実現できます。80%のような部分的な充填にはcalc-size()関数と組み合わせます: height: calc-size(stretch, .8*size)。現時点でのブラウザサポートはChrome限定です。
READ_FULL_LOGarrow_forwardArticle · テクニックREAD TIME: 8m
CSSでPantoneカラーデッキを再現する
Mads StoumannはJavaScriptを一切使わず、最新のCSS機能だけで完全インタラクティブなPantone fan-deckコンポーネントを実装します。fan spreadにはprogress(100cqi, 300px, 1440px)を用いてcontainer inline sizeを0–1の連続値にマッピングし、-45°から+45°の回転に適用します。各カードの回転角度は、DOM内の位置を把握できる新CSS関数sibling-index()とsibling-count()で算出します。<details name="deck">のexclusive accordionパターンがクリックフォーカスを担い、::details-content pseudo-elementにcontent-visibility: visibleを設定してカード色を常時表示します。:has()ベースの4つのフラグ(--has-active、--is-before、--is-active、--is-after)が単一の回転計算式を制御し、0.25s linear transitionでスムーズにアニメーションします。progress()のブラウザサポートは現在ChromeとSafariのみです。
READ_FULL_LOGarrow_forwardArticle · ガイドREAD TIME: 7m
Polypaneで@starting-style at-ruleをデバッグする
@starting-style at-ruleは2023年末からcross-browserで対応済みですが、Chrome DevToolsでのデバッグは2025年11月リリースのバージョン143まで待つ必要がありました。一方Polypaneは2024年6月のバージョン20から、Elements panelで@starting-styleを常時表示・編集できます。この機能はDOM追加時にJavaScript不要でCSS transitionの"from"状態を定義するものです。重要なspecificityルールとして、@starting-style自体にはspecificityがないため、内部セレクタは基本ルールと同じspecificityを持ち、ソース順で最後に記述する必要があります。Polypaneは:hoverや:focusと同じメニューから@starting-styleの強制適用トグルも提供しています。
READ_FULL_LOGarrow_forwardArticle · ディープダイブREAD TIME: 15m
CSS Animation Trigger：スクラブなしでスクロール時にアニメーションを再生。相性抜群！
Brecht De RuyteはChrome Canaryの実験的フラグで試用でき、Chrome 146での正式リリースが予定されているCSS scroll-triggered animationsを詳しく解説します。新プロパティtimeline-triggerはtrigger要素にdashed-ident名・view()などのソース・contain/coverのようなenter/exit rangeを指定し、animation-triggerはplay-forwards/play-backwardsやplay-once/noneなどのアクションペアでアニメーションに接続します。記事ではscroll-drivenな背景(animation-timeline: scroll(root))とscroll-triggeredなテキストrevealを組み合わせたValentine's Dayのscrollytelling demoを紹介し、Chromeのtyped attr()構文で多数のtriggerルールを1行のCSS宣言にまとめる方法も示します。@layer scrollTimelineでanimation-rangeのパーセンテージを一元管理するパターンも取り上げています。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
今週のCSSはクロスブラウザ協調とscroll-drivenの革新を中心に大きな動きがありました。注目記事のInterop 2026は、scroll-driven animations・container style queries・新しいCSS shape()構文など20のfocus areaを掲げてスタートし、2025年のスコアが25から95へ急上昇した成果を引き継ぎ、今週の技術チュートリアルの戦略的背景となっています。
3本の実践的な記事がanimation-timelineの最前線を押し広げています。Chrome 146で予定されるscroll-triggered animation APIの詳細解説、animation-timeline: scroll(nearest inline)を使った交互背景色テーブルへのスクロールshadow indicator手法、そしてKevin Powellがcontainer-type: scroll-stateで実装した純粋CSSのsticky navが主役です。いずれもJavaScriptのイベントリスナーを宣言的なCSSに置き換えるという共通目標を持ちつつ、Chrome寄りの現在のブラウザ対応状況を率直に認めています。
2本の短いガイドはCSSのサイジングの悩みを解決します。height: 100%の代替となるmarginを自動考慮するheight: stretchと、JavaScript不要でsibling-index()やprogress()などの最新関数だけで実装したPantone fan-deckが、イベントリスナーなしでCSSがどれだけ多くのインタラクティブUIを実現できるかを示しています。
Key Takeaways- Interop 2026がscroll-driven animationsとCSS shape()を公式ターゲットに設定したことで、これらの機能は今後12か月以内に安定したクロスブラウザ対応を迎える見込みです。
- animation-timeline: scroll()は今日からJavaScriptのスクロールリスナーを置き換えられますが、animationショートハンドの後に宣言しないとリセットされるため注意が必要です。
- height: stretchはbox-sizingに関わらずmarginを自動考慮するため、親コンテナを埋めるにはheight: 100%よりスマートな代替です — 現時点ではChrome限定です。
