CSS Values and Units Level 5は、sibling-index()とsibling-count()という2つの整数を返す関数を導入します。これにより、JavaScriptやハードコードされた:nth-child()ルールなしに、スタイルシートから直接兄弟要素の中での位置にアクセスできます。sibling-index()は1始まりの位置を返し、sibling-count()は兄弟要素の総数を返します。どちらもcalc()、min()、max()、sin()、cos()などの数学関数で使用できる整数として解決されるため、staggeredアニメーションディレイ、自動均等幅タブ、均一な色相分布、純粋CSSのradialメニュー、z-indexスタッキングを1行で実装できます。display:none要素はDOMスロットを占有してカウントに影響し、親で評価されたcustom propertyは各子のインデックスではなく親のインデックスを取得し、shadow DOMスコーピングは外部CSSがコンポーネント内部を探索する際に0を返す点が主な注意事項です。Chrome/Edge 138とSafari 26.2で安定版としてリリースされており、Firefoxの実装が進行中です。
CSS Layoutに欠けているもの：2025 State of CSS SurveyのPain Point
TAG: CSSレイアウト
Patrick Brossetは、2025年State of CSS調査のレイアウトに関する問題点と、MastodonやBluesky、LinkedInで実施した独自のミニアンケート結果を統合し、開発者がCSSレイアウトに本当に必要としているものを明らかにします。Gridは冗長な構文、justify-*とalign-*の命名の混乱、トラックサイズのアニメーション不可、最終行の孤立要素の検出不可などで最も多くの批判を受けています。Flexboxへの不満は、flex-grow / flex-shrink / flex-basisの予測しにくい相互作用と、折り返された各行の個別制御の欠如に集中しています。コミュニティで最も要望が多かった機能（約12件の回答）は、純粋CSSでのoverflowとwrap検出で、JavaScriptなしでレスポンシブな折りたたみや'+3'バッジを実装できます。その他には、ボックス間のテキストフローのためのCSS Regions（InDesignのリンクテキストフレームに相当）、非矩形テキスト折り返しのためのCSS Exclusions、レスポンシブな並べ替えのためのDOM非依存の要素移動、コンテンツ認識型gridスパニングなどが頻繁に要望されています。
CSS Values and Units Level 5は、sibling-index()とsibling-count()という2つの整数を返す関数を導入します。これにより、JavaScriptやハードコードされた:nth-child()ルールなしに、スタイルシートから直接兄弟要素の中での位置にアクセスできます。sibling-index()は1始まりの位置を返し、sibling-count()は兄弟要素の総数を返します。どちらもcalc()、min()、max()、sin()、cos()などの数学関数で使用できる整数として解決されるため、staggeredアニメーションディレイ、自動均等幅タブ、均一な色相分布、純粋CSSのradialメニュー、z-indexスタッキングを1行で実装できます。display:none要素はDOMスロットを占有してカウントに影響し、親で評価されたcustom propertyは各子のインデックスではなく親のインデックスを取得し、shadow DOMスコーピングは外部CSSがコンポーネント内部を探索する際に0を返す点が主な注意事項です。Chrome/Edge 138とSafari 26.2で安定版としてリリースされており、Firefoxの実装が進行中です。
CSS Layoutに欠けているもの：2025 State of CSS SurveyのPain Point
Patrick Brossetは、2025年State of CSS調査のレイアウトに関する問題点と、MastodonやBluesky、LinkedInで実施した独自のミニアンケート結果を統合し、開発者がCSSレイアウトに本当に必要としているものを明らかにします。Gridは冗長な構文、justify-*とalign-*の命名の混乱、トラックサイズのアニメーション不可、最終行の孤立要素の検出不可などで最も多くの批判を受けています。Flexboxへの不満は、flex-grow / flex-shrink / flex-basisの予測しにくい相互作用と、折り返された各行の個別制御の欠如に集中しています。コミュニティで最も要望が多かった機能（約12件の回答）は、純粋CSSでのoverflowとwrap検出で、JavaScriptなしでレスポンシブな折りたたみや'+3'バッジを実装できます。その他には、ボックス間のテキストフローのためのCSS Regions（InDesignのリンクテキストフレームに相当）、非矩形テキスト折り返しのためのCSS Exclusions、レスポンシブな並べ替えのためのDOM非依存の要素移動、コンテンツ認識型gridスパニングなどが頻繁に要望されています。
今週のCSSは、重要な新しいレイアウト機能を獲得しました。ネイティブgapデコレーション提案は、column-ruleの拡張と新しいrow-ruleプロパティにより、余分なマークアップなしでgrid・flexのgap内にスタイル付きラインを描画できるようにします。rule-break・rule-inset・rule-visibility-items・rule-overlapで細かな制御が可能で、widthとcolorはともにアニメーション対応です。さらにCSS Values and Units Level 5のsibling-index()とsibling-count()関数がChrome/Edge 138とSafari 26.2の安定版に登場し、単一のCSS宣言でstaggeredアニメーション・radialメニュー・z-indexスタッキングが実現できます。Firefoxのサポートも進行中です。
