フロントエンド面接：堅牢なポップオーバー配置のために CSS Anchor Positioning をどう活用するか？

プロンプトとコンテキスト

データテーブルのアクションボタンがメニューまたはヘルプバブルを開きます。フローティングパネルはスクロール中もボタンに追従し、ビューポートの端から離れ、祖先要素によるクリッピングを回避する必要があります。また、モバイル、キーボードユーザー、および新しい CSS をサポートしていないブラウザへの対応も維持しなければなりません。これを CSS Anchor Positioning で設計し、スクリプトまたは Popover API をいつ残すべきかを説明してください。

この質問は、フロントエンド、デザインシステム、コンポーネントプラットフォームの職種に適しています。重要なのは、幾何学的な配置、オーバーフローのフォールバック、インタラクションセマンティクス、および互換性の制約を組み合わせることです。

面接官が評価するポイント

優れた回答では、アンカー要素とアンカー配置された要素を区別し、anchor-name、position-anchor、anchor()、または position-area がどのように関係を作成するかを説明します。また、position-try の順序、オーバーフローの決定、非表示の動作、スクロールコンテナ、スタッキングコンテキスト、キーボードフォーカス、およびフォールバックもカバーします。

最初に確認すべき明確化事項

• パネルはメニュー、ツールチップ、ピッカー、または非インタラクティブな説明のどれですか？Popover または dialog セマンティクスが必要ですか？
• 優先される位置と許可される代替位置、最小の可読サイズ、安全なビューポートインセットは何ですか？
• トリガーはスクロールやクリッピングコンテナの中、または変形された（transformed）要素の中にありますか？
• コンテンツが増加した場合、反転、縮小、内部スクロール、または全画面サーフェスへの切り替えのどれを行うべきですか？
• どのブラウザが対象で、古いブラウザ向けの安定した配置フォールバックは何ですか？

30秒での回答

「トリガーをアンカーにし、パネルを絶対配置または固定配置の要素にします。anchor() または position-area で配置し、position-try で上部および側面の代替位置を宣言します。コンポーネントには依然としてサイズ制限、ビューポートインセット、フォーカスおよび閉じるセマンティクスが必要です。サポートされていないブラウザでは、既存の Popover または計測ベースのフォールバックを使用します。拡張モードとフォールバックモードの両方で、スクロール、ズーム、長いコンテンツ、キーボードナビゲーション、およびビューポートの端をテストします。」

ステップバイステップの解決策

ステップ 1: アンカー関係を作成する

トリガーから anchor-name で名前を公開し、パネルから position-anchor でそれを選択します。暗黙的な関連付けの場合は、繰り返される行が別のボタンにバインドされないように、DOM スコープと重複名のルールを確認します。

ステップ 2: 配置の式を選択する

anchor() は inset プロパティ内でアンカーのエッジまたは中央を読み取ります。position-area は block-start や inline-end などの論理領域を表現します。どちらも、ハードコードされた1つのピクセルオフセットではなく、明示的な位置、サイズ制限、およびギャップが必要です。

.action {
  anchor-name: --action;
}

.menu {
  position: absolute;
  position-anchor: --action;
  top: anchor(bottom);
  inset-inline-start: anchor(start);
  margin-block-start: 0.5rem;
}

ステップ 3: フォールバックの順序を宣言する

デフォルトはボタンの下です。スペースが不十分な場合、position-try は上部および inline-end 側をテストできます。順序はプロダクトの優先順位を反映し、左横書き（LTR）と右横書き（RTL）の両方のロケールに対して論理方向を使用する必要があります。

.menu {
  position-try: flip-block, flip-inline;
  max-inline-size: min(90vw, 24rem);
  max-block-size: min(70vh, 32rem);
  overflow: auto;
}

ステップ 4: 配置不可能な状態を定義する

すべての候補がオーバーフローする場合は、意図的に選択します：縮小してスクロールする、重要でないヒントを非表示にする、または全画面サーフェスに切り替える。メニューの半分をビューポートの外側に残したり、オーバーフローと非表示化（dismissal）を混同したりしないでください。

ステップ 5: コンテナとスタッキングを考慮する

overflow: hidden、クリッピングレイヤー、transform、contain、および z-index は、可視境界または包含ブロック（containing block）を変更する可能性があります。実際の配置コンテキストを検証してください。必要に応じて、トリガーとパネルの関係を維持しながら適切な top layer にレンダリングします。

ステップ 6: インタラクションとアクセシビリティのセマンティクスを維持する

Anchor Positioning は幾何学的な位置を提供するものであり、メニュー、ツールチップ、またはポップアップのセマンティクスを提供するものではありません。インタラクティブなコンポーネントには、適切なロールと名前、キーボードナビゲーション、Escape による終了、およびフォーカスの復帰が依然として必要です。非インタラクティブなヒントをホバーのみに依存させてはなりません。

ステップ 7: 互換性フォールバックを計画する

MDN は Anchor Positioning の一部を新しい機能としてマークしています。使用可能なデフォルトスタイルを維持し、サポート検出後に機能拡張を有効にします。古いブラウザでは、Popover API、既存のコンポーネント配置ユーティリティ、または小さな計測フォールバックを使用できます。スクリプトをゼロにするためにメニューの到達可能性を犠牲にしないでください。

ステップ 8: 再現可能な検証を構築する

ビューポートのすべての四隅、スクロールコンテナ、ズーム、動的なテキストサイズ、長いラベル、RTL、仮想キーボード、キーボードナビゲーション、およびスクリーンリーダーをカバーします。サポート環境とフォールバック環境の両方で、候補位置、クリッピング、フォーカス、スクロールロック、およびレイアウトシフトを記録します。

トレードオフと境界

Anchor Positioning は、一般的な連結および反転ルールを CSS に移行し、フレームごとの計測処理を削減できます。ただし、ブラウザの実装、配置コンテキスト、およびコンポーネントセマンティクスによる制約が残ります。複雑な衝突ルール、top layer をまたぐ配置、またはビジネス固有の計測には、依然としてスクリプトが必要になる場合があります。

position-try は候補の中から選択するだけであり、コンテンツの可読性を保証するものではありません。サイズ制限、スクロール、フォーカス、および閉じる処理は、引き続きコンポーネント側の責任です。Popover は一部のインタラクション動作を提供しますが、すべてのメニューやダイアログの設計を置き換えるわけではありません。

ロールアウト計画とエビデンス

優先位置、3つのフォールバック、最大サイズ、およびビューポートインセットを持つ1つのアクションメニューでパイロットテストを実施します。ブラウザサポートマトリックスを記録し、サポートされていない環境向けに安定したデフォルト配置を維持します。

アンカーの命名、フォールバック順序、論理方向、クリッピング境界、ロール、フォーカス、およびテストケースを文書化します。静的なスクリーンショットに頼るのではなく、実際のスクロールや長いコンテンツを使用して位置の変化を検証します。

よくある間違いとフォローアップ

フォールバックなしで anchor() を記述する

パネルが端でクリッピングされる可能性があります。候補の優先順位を宣言し、すべての候補が適合しない場合のスクロール可能なサーフェスまたは代替サーフェスを定義してください。

配置をインタラクションセマンティクスとして扱う

CSS はパネルをメニューやツールチップに変えるわけではありません。ロール、名前、キーボードパス、Escape 処理、およびフォーカス復帰を追加してください。

スクロールおよびクリッピング祖先を無視する

z-index を大きくしても、誤った包含ブロックから脱出することはできません。レンダリングレイヤーを変更する前に、overflow、transform、contain、およびスクロールコンテキストを検査してください。

Chromium のみでテストする

サポートマトリックスは進化します。拡張モードとフォールバックモードの両方で、同じエッジケース、キーボード、RTL、および長いコンテンツのテストを実行してください。

パネルがまだ読みにくい場合はどうすればよいか？

まず候補位置と最大サイズを確認し、次に内部スクロール、縮小、全画面サーフェス、または重要でないコンテンツの非表示を選択します。単に z-index を上げたり、オーバーフローチェックを無効にしたりしないでください。