プロンプトとコンテキスト
横スクロールの商品カードカルーセルが必要で、ブラウザに「前へ／次へ」のスクロールボタンと位置マーカーを生成させたいと考えています。CSS Overflow Module Level 5、非対応ブラウザのフォールバック、アクセシビリティ、およびリリース基準について説明してください。
CSS Overflow 5 は、スクロールコンテナによって生成される ::scroll-button() および ::scroll-marker コントロールと、それらをグループ化するための scroll-marker-group を定義しています。ブラウザのサポートは現在も発展途上であるため、面接ではこの機能を普遍的なベースラインとして扱うのではなく、機能の境界とプログレッシブエンハンスメントが問われます。
面接官が評価するポイント
面接官は、スクロールコンテナ、スクロールボタン、およびマーカーグループを明確に区別できるか；軸の選択、無効状態、およびスクロール動作を説明できるか；ネイティブなリンクとキーボードパスを保持できるか；実用的なフォールバックを提供できるか；ピクセルの確認だけでなく、実機や支援技術を用いて検証できるかを評価します。
明確化のための質問
コンテンツとレイアウト
ページ分割されたカードカルーセル、連続的なギャラリー、タブリストのいずれであるか；1ページあたりに表示されるアイテム数；アイテムの幅が固定されているか；自由なスクロールが許可されているかを確認します。
ブラウザの対象範囲
対象ブラウザ、サポートバージョンの範囲、JavaScriptポリシー、およびサポートのないブラウザで実験的な拡張を非表示にできるかどうかを確認します。
インタラクションとアクセシビリティ
キーボードのフォーカス順序、スクリーンリーダーによる現在のアイテムの読み上げ、タッチおよびホイールの動作、reduced-motionの設定、およびボタンが利用不可の場合のフィードバックを確認します。
30秒の回答
「ベースラインとしてフォーカス可能なカードを持つ通常の横スクロールコンテナを構築し、CSS Overflow 5 がサポートされている環境で scroll-marker-group および ::scroll-button() を有効にします。ボタンはスクロールをトリガーしますが、カード自体は独自のセマンティクスとキーボードパスを維持します。拡張は @supports selector(::scroll-button(*)) で制御します。非対応ブラウザではネイティブスクロールまたは小さなJavaScriptコントロールを維持し、キーボード、スクリーンリーダー、タッチ、および reduced-motion のテストをリリースゲートとします。」
ステップバイステップの解決策
ステップ1: 実用的なベースラインを確立する
通常のレイアウト、overflow-x: auto、明示的な scroll-snap ポリシー、および可視フォーカススタイルから始めます。すべてのカードに見出し、リンク、またはボタンを持たせることで、生成されたマーカーがなくてもコンテンツに到達できるようにします。
ステップ2: ネイティブコントロールを有効にする
サポートされているブラウザでは、マーカーグループを設定し、前後のコントロールに ::scroll-button(left) と ::scroll-button(right) を使用します。仕様ではこれらのボタンを元のスクロールコンテナに関連付けます。利用可能かどうかはスクロール可能な残りコンテンツに追従するため、単なる装飾用の疑似要素ではありません。
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-marker-group: after;
}
.carousel::scroll-button(left),
.carousel::scroll-button(right) {
inline-size: 2.5rem;
block-size: 2.5rem;
}ステップ3: 機能を検出する
@supports またはセレクタ機能検出で拡張スタイルを制御します。検出に失敗した場合は、スクロールバー、カード、または手動構築したフォールバックを非表示にしないでください。成功した場合は、生成されたコントロールによって表示コンテンツの範囲が予期せず変更されないよう、安定した寸法を維持します。
ステップ4: セマンティクスとキーボードパスを維持する
生成された疑似要素ボタンが唯一の操作パスであってはなりません。一貫したフォーカス移動、Home/End、矢印キー、およびタッチ動作を定義し、フォーカスが到達したときにカードをスクロールして表示領域に入れます。スクリーンリーダーは単に「次へ」だけでなく、カルーセルの名前、現在のカード、およびアクションを読み上げる必要があります。
ステップ5: 軸とRTLを処理する
ボタンの引数はスクロール軸に関連するため、物理的な left と right は自動的に論理的な開始・終了にはなりません。RTL、縦書きモード、およびその他の書字方向を個別にテストします。論理寸法と論理スペーシングを優先し、視覚的な方向とキーボードの方向を検証します。
ステップ6: フォールバックを設計する
サポートがない場合は、ネイティブの横スクロールを維持します。明示的なボタンが必要な場合は、小さなJavaScriptレイヤーがスクロール位置を監視し、disabled、current-item、および aria の状態を更新できます。2つのコンテンツツリーを維持するのではなく、両方のパスでカードのデータとセマンティクスを共有する必要があります。
ステップ7: リリース基準を設定する
対応ブラウザおよび非対応ブラウザ、キーボード、タッチ、ホイール、200%ズーム、ハイコントラスト、スクリーンリーダー、および prefers-reduced-motion をテストします。初回描画時の表示カード数、誤操作、フォーカスの喪失、スクロールの遅延、およびフォールバックのカバレッジを追跡します。スクリーンショットだけではコントロールが実用的であることを証明できません。
模範回答
通常の横スクロールとカードのセマンティクスをベースラインとして扱い、その上に CSS Overflow 5 のコントロールを重ねます。機能検出により、利用可能な環境で scroll-marker-group および ::scroll-button() を有効にします。それ以外の場所ではスクロールがそのまま機能し、明示的なコントロールが要件である場合にのみ小さなJavaScriptフォールバックを使用します。生成されたボタンがリンク、フォーカス、またはスクリーンリーダーのセマンティクスに取って代わることはありません。RTL、縦書き、利用不可状態、可視フォーカス、タッチ、および reduced motion をテストし、ブラウザマトリクスと実際の支援技術を使用して、すべてのカードにアクセス可能であることを確認します。
よくある間違い
- 間違い:
::scroll-button()をどこでも利用できる通常のボタンとして扱う。 → なぜ失敗するか: CSS Overflow 5 のサポートはまだ発展途上です。 → 修正方法: 機能を検出し、ネイティブスクロールを維持します。 - 間違い: スクロールバーとカードリンクを非表示にして、ドットのみを残す。 → なぜ失敗するか: キーボードや支援技術のユーザーがコンテンツへの経路を見失う可能性があります。 → 修正方法: カードのセマンティクスを単独で機能させます。マーカーは追加のナビゲーションです。
- 間違い: 物理的な左右をRTLロジックに直接マッピングする。 → なぜ失敗するか: 視覚的な方向、書字方向、および論理的な方向が異なる場合があります。 → 修正方法: RTLおよび縦書きにおいて、ボタン、フォーカス、およびスクロール結果を個別にテストします。
- 間違い: クリックのみをテストする。 → なぜ失敗するか: フォーカスの喪失、ズームによるオーバーフロー、および reduced-motion の問題が見逃されます。 → 修正方法: キーボード、タッチ、スクリーンリーダー、および200%ズームのチェックをリリース基準とします。
フォローアップ質問と回答
::scroll-button() と通常のボタンの境界は何ですか？
スクロールコンテナによって生成され、スクロールコンテキストに紐づいており、それがスタイルと利用可能性を決定します。プロダクト固有のアクション、アナリティクス、または確認フローには、依然として実際のボタンやJavaScriptが必要になる場合があります。
なぜネイティブスクロールを維持するのですか？
エンハンスメントが利用できない場合の実行可能なパスであり、タッチ、ホイール、およびユーザー設定をカバーします。エンハンスメントが失敗しても、ユーザーはコンテンツに到達できます。
生成されたコントロールによるレイアウトシフトを回避するにはどうすればよいですか？
コントロール用のスペースを確保し、安定したコンテナ寸法と論理スペーシングを使用し、機能ブランチ間で初回描画時のカード数とスナップ位置を比較します。
この機能を避けるべきなのはどのような場合ですか？
対象ブラウザにサポートが不足している場合、カルーセルの状態が複雑な場合、またはチームが信頼性の高いフォールバックを維持できない場合は、成熟したコントロールを備えた通常のスクロールを使用します。JavaScriptを削減するためにアクセシビリティを損なう価値はありません。