プロンプトとコンテキスト
あなたは再利用頻度の高いツールチップコンポーネントを保守しています。CSSアンカーポジショニングによってトリガー要素に関連付けられ、position-tryフォールバックによってオーバーフローが防止されていますが、ポップオーバーが反対側に移動すると、矢印、スクロール領域、パディングが崩れたままになってしまいます。
フォールバックの配置に基づいてスタイルを適用し、複数インスタンスを適切に分離し、アンカーポジショニングが利用できない場合には安全にグレースフルデグラデーションするCSSファーストのソリューションを設計してください。
面接官のチェックポイント
- アンカーポジショニングの関係性とフォールバック選択を理解しているか。
- JavaScriptの状態を同期する代わりに、アンカーコンテナクエリで実際の配置を読み取れるか。
- アクセシビリティ、スクロール境界、スタッキング、繰り返し使用されるコンポーネントの分離に対処できているか。
- 機能検出、静的レイアウト、プログレッシブエンハンスメントが含まれているか。
確認すべき質問
- ツールチップはプレーンテキスト、メニュー、対話型ダイアログのどれですか？
- フォールバックは配置サイドを切り替えるだけですか、それともスクロールコンテナ内に入りますか？
- 対象ブラウザはアンカーポジショニングとコンテナクエリをサポートしていますか？
- JavaScriptで寸法を読み取ってもよいですか、それともCSSのみのソリューションが必須ですか？
30秒の回答
トリガーをアンカーにし、ツールチップを優先順位付きのposition-tryフォールバックを持つアンカー配置コンテナにします。各フォールバックではアンカーコンテナクエリを使用して矢印、パディング、最大高さを変更し、内部スタイルはコンポーネントコンテナのみに依存させます。機能検出には@supportsを使用し、アクセシブルな説明関係（accessible description relationship）を維持したまま静的配置または既存のJavaScriptポジショニングをフォールバックとして使用します。ビューポートの端、ズーム、スクロールコンテナ、長文テキストをテストして、オーバーフローやフォーカスのクリッピングが発生しないことを検証します。
ステップ別の詳細解説
アンカーと候補位置の確立
トリガー要素にanchor-nameを宣言し、position-anchorとinset/anchor()でツールチップを接続します。コンポーネントロジック内に方向をハードコードする代わりに、position-tryフォールバックを使用して候補の優先順位を定義します。
ポップオーバーをクエリコンテナにする
ポップオーバー内部のアンカーコンテナクエリが選択されたフォールバックに適応するように、container-typeを設定します。ビューポート幅から推測するのではなく、アンカー結果に関連付けられたコンテナ条件をクエリします。
矢印とスクロールの同期
配置ごとに異なる矢印の位置、transform-origin、max-block-size、overflowを使用します。長いコンテンツはポップオーバー内部でスクロールさせ、ツールチップがビューポート外にはみ出したり、キーボードフォーカスをクリップしたりしないようにします。
複数インスタンスの分離
リスト項目が別のインスタンスのアンカーに一致しないよう、各インスタンスに独自のアンカー名または命名スコープを割り当てます。スタッキング、position-area、スクリムのルールはローカルに保ちます。
機能検出とデグラデーション
@supports (anchor-name: --x)および必要なコンテナクエリ機能でサポート状況を検出します。フォールバックには隣接する静的コンテンツや既存のJavaScriptポジショナーを使用できますが、aria-describedby、キーボードによる破棄、フォーカス順序は維持します。
境界とアクセシビリティの検証
狭いビューポート、ズーム、RTL、スクロールコンテナ、タッチ、視覚効果の抑制（reduced motion）をテストします。キーボードとスクリーンリーダーを使用して、フォールバックの配置が変わったときにツールチップがフォーカスを奪ったり、切り取られたり、読めなくなったりしないことを確認します。
模範解答
トリガーをアンカーとして宣言し、ツールチップをコンテナにし、優先順位付きのposition-tryフォールバックを提供します。ポップオーバー内のアンカーコンテナクエリにより、矢印、パディング、最大高さ、スクロール方向が実際の配置に適応し、各インスタンスはそのアンカー名とスタッキングルールを分離します。@supportsによってプログレッシブエンハンスメントを提供し、非対応ブラウザでは同じaria-describedby、キーボードによる破棄、フォーカス順序を維持したまま静的配置または既存のJavaScriptポジショニングを使用します。狭いビューポート、ズーム、RTL、スクロールコンテナ、長文テキスト、スクリーンリーダーでテストを実施します。
よくある間違い
- 実際の配置に応答する代わりに、JavaScriptでビューポート幅からフォールバックを推測すること。
- すべてのツールチップで1つのアンカー名を共有し、インスタンス同士を誤って紐付けてしまうこと。
- 矢印、スクロール、transform-originを同期させずにtop/leftのみを変更すること。
@supportsを省略し、非対応ブラウザでポップオーバーを使用不能にしてしまうこと。- 通常のビューポートのみをテストし、RTL、ズーム、スクロールコンテナ、キーボードフォーカスを無視すること。
- 明示的なアクセシブルセマンティクスを持たせずにツールチップをダイアログとして扱うこと。
フォローアップ質問
アンカーコンテナクエリは通常のコンテナクエリとどう異なりますか？
アンカー配置された要素のフォールバック配置に基づいてスタイルを選択します。通常のコンテナクエリは主にコンテナのサイズやスタイルの条件を使用します。
アンカーポジショニングがサポートされていない場合はどうなりますか？
不完全な構文パスに頼るのではなく、同一のアクセシブルな名前、破棄動作、コンテンツ順序を保ったまま、隣接する静的レイアウトや既存のJavaScriptポジショナーを使用します。
ポップオーバーがフォーカスを覆い隠さないようにするにはどうすればよいですか？
サイズを制限して内部でスクロールさせ、Tabキー、Escapeキー、スクリーンリーダー、スクロール親要素をテストして、フォーカスされた要素が常に表示された状態を保ちます。
4方向のメディアクエリを使用しないのはなぜですか？
メディアクエリは実際のアンカーやコンテナのスペースではなくビューポートを表すためです。また、フォールバックはスクロールコンテナ、フォント、コンテンツの長さにも依存します。