プロンプトと適用範囲
CMSによってレスポンシブなカードリストへの追加・削除が行われます。各カードは、実際のアクセシブルな位置を維持しながら、兄弟要素の数から幅を計算し、自身の位置に応じてアニメーションを遅延させる必要があります。sibling-index()とsibling-count()のセマンティクス、境界、フォールバック、および検証について説明してください。
面接官がテストしていること
- 両関数がフラットツリー上で1始まりのインデックスを持つ整数を返すことを理解しているか。
- 視覚的なCSSの順序を、DOMおよび支援技術の順序と区別して扱えているか。
- Limited availability、
@supports、静的フォールバック、およびパフォーマンスを考慮しているか。 - Shadow DOM、疑似要素、非表示ノード、および動的リストを網羅できているか。
質問すべき明確化のための質問
- 目的は視覚的な幅、アニメーションのタイミング、またはユーザーが音声で聞く必要のある位置情報のどれですか？それぞれフォールバックが異なります。
- 非表示ノード、templateノード、または仮想化ノードが存在しますか？また、それらはフラットツリーの直接の子要素ですか？
- 適用すべきブラウザサポート範囲とJavaScriptフォールバック方針は何ですか？
- Shadow DOM、スロット、またはCSSカウンターは関係していますか？
30秒の回答フレームワーク
sibling-count()は直接の子要素の総数を返し、sibling-index()は要素の1始まりの位置を返します。仕様ではフラットツリーが使用されます。これらはcalc()、グリッド幅、アニメーション遅延などを駆動できますが、アクセシブルなテキストの信頼できるソースではありません。まず固定のCSSフォールバックを提供し、次に@supportsで拡張します。位置情報にはセマンティックなHTMLまたはテスト済みのカウンターを使用します。要素の挿入、削除、スロット、非表示ノード、未対応ブラウザ、およびprefers-reduced-motionをテストします。
ステップごとの詳細解説
1. 返り値の確認
両関数とも整数を返します。sibling-count()は要素自身を含み、sibling-index()は1から始まります。これらはフラットツリーにおける親の直接の子要素をカウントします。任意の低階層の子孫や視覚的な順序とは異なる概念です。
2. サイズとアニメーションへの利用
カードは兄弟要素の数で利用可能な幅を分割でき、アニメーションの遅延時間は位置に応じて増加させることができます：
.card {
--count: sibling-count();
--index: sibling-index();
flex-basis: calc(100% / var(--count));
animation-delay: calc((var(--index) - 1) * 60ms);
}これは視覚的な計算であり、DOMの順序やビジネス識別子の代替ではありません。空のリスト、単一アイテム、および非常に大きなカウントに対する境界を定義して、ゼロ除算や過剰な遅延を防ぎます。
3. サポート状況とフォールバックの処理
MDNではこれらの関数をLimited availabilityと表記しているため、本番環境のCSSでサポートを前提とすることはできません。固定レイアウトまたはflexレイアウトを提供し、@supports (width: calc(100% / sibling-count()))で拡張します。実際の製品要件で動的な値が必要な場合はJavaScriptでカスタムプロパティを更新することもできますが、初回描画（first paint）とコンテンツはスクリプトなしで機能する必要があります。
4. フラットツリー、スロット、および非表示ノード
仕様では兄弟関係をフラットツリー上で定義しています。したがって、Shadow DOMのスロット割り当てによってテストすべき内容が変わります。display: none、templateノード、仮想リストのプレースホルダーが実際のDOMにおいて直接の子要素であるかどうかを確認します。視覚的なorderから関数のインデックスを推測してはいけません。
5. アクセシビリティとセマンティクス
視覚的な幅や遅延は、音声で読み上げられる位置を作成しません。olとli、または明示的なaria-posinsetとaria-setsizeを使用し、スクリーンリーダーの順序をDOMと一致させます。装飾的なCSSによって、アニメーションや新機能が無効化された際にコンテンツが理解不能になってはなりません。
6. 動的な更新とパフォーマンス
兄弟要素の挿入や削除は計算値を変更し、スタイルの再計算をトリガーする可能性があります。小規模なデモを過信するのではなく、何千ものノードに対するスタイル、レイアウト、アニメーションのコストを測定します。仮想化リストはDOMサイズを制限しますが、その場合、関数はデータセット全体ではなく表示ウィンドウのみを参照します。
質の高い模範解答
私はsibling-index()とsibling-count()を視覚計算機能として扱います。前者はフラットツリーにおける1始まりの位置であり、後者は直接の子要素の数です。これらはカードの幅やアニメーション遅延を向上させることができますが、セマンティックな位置はol、li、またはARIAから取得します。固定レイアウトのフォールバックを提供し、@supportsで機能強化を制御します。Shadow DOM、スロット、非表示ノード、仮想化について実際のDOMの挙動をテストします。動的かつ大規模なリストに対してスタイルの再計算とレイアウトを測定し、サポートがない場合でもコンテンツを使用可能に保ち、prefers-reduced-motionを尊重します。
よくある間違い
- 全ブラウザでのサポートを前提とする → レガシーブラウザでスタイルが崩れる → 固定レイアウトと
@supportsによるフォールバックを提供する。 - 視覚的な
orderからインデックスを推測する → CSSの順序とフラットツリーの順序が異なる → DOMとスロット割り当てをテストする。 - CSSの計算をアクセシブルな位置として使用する → スクリーンリーダーが位置を取得できない → HTMLセマンティクスまたはARIAを維持する。
- 仮想ウィンドウを全体のカウントとして扱う → 関数は現在のDOMのみを参照する → データから全体のカウントを提供する。
- アニメーション遅延を際限なく増加させる → 待ち時間と再計算のコストが過大になる → 上限を設定し、reduced motionでは無効化する。
フォローアップの質問と回答
sibling-count()には子孫要素が含まれますか？
いいえ。親の直接の子要素をカウントし、現在の要素自身を含みます。さらに下層の子孫要素は含まれません。
スロットされた要素はどのようにテストすべきですか？
Shadow DOMのlight tree、スロット割り当て後のflat tree、およびアクセシビリティツリーをインスペクトします。ソースの順序単体よりも、ブラウザレベルでの検証の方が信頼性が高くなります。
未対応ブラウザに対するフォールバックとしてJavaScriptのみを使用することはできますか？
プログレッシブエンハンスメントとしては可能ですが、基本的なレイアウトとコンテンツはスクリプトなしで機能する必要があります。カスタムプロパティを更新するスクリプトの場合、挿入、SSR、スクリプト無効時、およびreduced-motionの処理も必要です。