詳細解説 カオスを受け入れる — Masonry Layoutの形と流れ display: grid-lanesによってネイティブのmasonryレイアウトがブラウザに実装されるにあたり、この記事ではmasonryをshape （grid-template-columnsまたはgrid-template-rowsで定義される視覚的な列・行構造）とflow （常に最短のlaneを選ぶ機会主義的なpackingアルゴリズム）という2つ の観点から分析しています。著者はmasonryをGrid（grid-templateの構文やgrid-column、grid-rowによるlane配置を共有）およびFlexbox（同様に一方向のみ定義し、flowを開始edgeと方向に限定）と比較します。重要な違いは、GridがgridAutoFlowでshapeとflowを分離できるのに対し、masonryでは不可能な点です。DOM読み取り順序よりも視覚的な密度が優先される画像ギャラリーやポートフォリオに最適との実践的な結論を示しています。
Read Articlearrow_forward Video · 詳細解説 18:20
CSSは今や強力すぎる Kevin Powell がTemani Afif のCSS専用最短経路デモをライブで探索します。このデモは計算にJavaScriptを一切使用しません。inline（X）およびblock（Y）軸のview timelineでノード位置を追跡し、counter-reset宣言内のhypot()でノード間距離を計算し、range構文を使ったcontainer style query（パスの距離がすべての距離のCSS min()と等しいかチェック）で最短経路を選択します。anchor positioningが線要素をノードに接続し、steps()が離散アニメーションフレームを駆動し、登録されたcustom propertyがすべてのノードペアの軸ごとの距離を保持します。Kevinは、CSSが今や数学関数（hypot、sin、tan、round）、scroll timeline、style query、anchor positioning、ATTR()を網羅し、スタイリングとプログラミングの境界を曖昧にしていると述べています。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · テクニック READ TIME: 4m
Style Queryとif()の隠れたテクニック CSSのinline if()とstyle queriesはどちらもstyle()条件を受け付けますが、コロン構文（style(--n: 3)）と等号構文（style(--n = 3)）では動作が根本的に異なります。コロン形式はcomputed valueの文字列完全一致を行います。--n: calc(6/2)のcomputed valueは未計算のcalc(6/2)のままなので3とは一致しません。等号形式はstyle-rangeパスを経由し、custom propertyをvar()のように代入してから両辺を数値型（integer、length、percentageなど）に解決して比較するため、calc(6/2) = 3はtrueと評価されます。一方、「new」のような非数値の文字列値には等号形式は機能しません。実践的なルール：コロンは文字列センチネル値に、等号は数値の数学的比較に使用してください。
READ_FULL_LOGarrow_forward Article · チュートリアル READ TIME: 7m
Webのスプライト • Josh W. Comeau Twitter の2015 年ハートアニメーション（14個 のパーティクルを含む16 要素が同時にアニメーション）は、低スペックデバイス向けのパフォーマンス戦略としてsprite Based CSSアニメーションを普及させました。現代的なアプローチはimg要素にobject-fit: coverを使ってspritesheetを1 フレームのビューポートにトリミングし、CSSキーフレームアニメーション内でobject-positionでフレームを切り替えます。重要な点はsteps()タイミング関数で、デフォルトのjump-endはループ中に最後のキーフレーム値を除外するため、ループするspritesheetにはsteps(N, jump-none)を使って全N枚のフレームを均等に表示する必要があります。2026 年現在、パフォーマンスはもはやDOMアニメーションよりspriteを選ぶ理由にはなりません。Spriteはゲーム風のピクセルアートのようなコンテンツに最適です。
READ_FULL_LOGarrow_forward Article · ガイド READ TIME: 8m
モバイルでscroll-snapコンテナがオーバーフローする三つの理由 fieldsetをscroll-snap: x mandatory flexコンテナとして使用した際、inline-size: 100vwおよび100dviを明示的に指定したにもかかわらずモバイルで約1180px にレイアウトが崩れる現象が発生しました。最初の原因はUAスタイルシートのfieldset { min-inline-size: min-content }ルールで、nowrapのflexアイテムの幅の合計まで広がり明示的なsizingを無視します。修正: min-inline-size: unset。この修正後もoverflowが続いた原因は、視覚的に非表示のradio input（position: absolute, inline-size: 1px）に近いpositioned祖先がなく、ビューポート右端から1100px 以上離れたcontaining blockにアンカリングされていたためです。標準のoffsetWidth診断では検出できず、getBoundingClientRect()でのみ捕捉できます。修正: 包むlabelにposition: relativeを追加。
READ_FULL_LOGarrow_forward Article · リリース READ TIME: 3m
Safari Technology Preview 238リリースノート Safari Technology Preview 238 （WebKitコミット306596–307618 ）では、CSSとレンダリングに関する重要な改善が導入されました。スレッドベースのtime-based アニメーション解決機能により、accelerated time-based アニメーションとscroll-drivenアニメーションをメインスレッド外で同期させ、CSS Motion PathアニメーションのGPU加速も可能になりました。CSS :open疑似クラスが追加され、openな状態のフォーム要素などを選択できます。appearance: base-selectによってcustomizable selectが有効化され、selectドロップダウンに任意のコンテンツとスタイルを適用可能になりました。レイアウト面では、ブロックコンテナのscrollable overflow計算がCSS Overflowの仕様に従いpadding-inline-endを考慮するようになり、scroll anchoringが有効化されてビューポート上部のコンテンツ挿入・削除時のスクロール位置ジャンプを防ぎます。
READ_FULL_LOGarrow_forward summarize Digest_Summary
今週のフィーチャー記事は、ネイティブのmasonryレイアウトをshapeとflowという2つの観点から再構成しています。display: grid-lanesの仕様は列や行の構造を提供しますが、常に最短のlaneを選ぶpackingアルゴリズムは本質的に順序に依存せず、GridのgridAutoFlowのように視覚的な結果と切り離すことはできません。 実践的な結論は、masonryはDOM読み取り順序よりも視覚的な密度が重要な画像ギャラリーやポートフォリオに最適だということです。
CSSの機能拡張が今週の他のハイライトを席巻しました。Temani Afif によるstyle()条件内のコロンと等号の違いの深掘りでは、calc(6/2)は等号形式でのみ3 と一致することが明らかになりました。コロン形式はcomputed valueの文字列を正確に比較するためです。Safari Technology Preview 238 は:open疑似クラス、appearance: base-selectによるcustomizable select、メインスレッド外でのscroll-drivenアニメーション同期を搭載しました。Kevin Powell によるCSS専用最短経路デモの解説は、hypot()、container style query、anchor positioning、view timelineがスタイリングとプログラミングの境界をどのように曖昧にしているかを示しました。
実用的なデバッグの観点では、モバイルのscroll-snap overflowの原因が2 層で判明しました: UAスタイルシートのfieldset min-inline-size: min-contentルール、そして遠く離れたcontaining blockにアンカリングする非表示のinput — 後者はoffsetWidthでは検出できず、getBoundingClientRect()でのみ捕捉できます。
Key Takeaways display: grid-lanesのネイティブmasonryはshapeとpackingアルゴリズムを分離し、flowは常に順序非依存なため、構造化リストよりギャラリーに適しています。 CSSのstyle()コロン構文は文字列完全一致を、等号は数値解決を行います — if()やstyle queryでcustom propertyを正しく使うための重要な区別です。 Safari Technology Preview 238 が:open、appearance: base-select、オフスレッドscroll-drivenアニメーションを搭載し、クロスブラウザCSSの収束を加速させています。 
