プロンプトとコンテキスト
デザインシステムにおいて、スタイル、メディア、または機能の条件に基づき、CSSプロパティ内のカラー、スペーシング、レイアウトの値を決定したいと考えています。単にCSSコードを示すだけでなく、if()の評価方法、フォールバック、サポート検知、アクセシビリティへの影響、およびプログレッシブエンハンスメントについて説明してください。
面接官が評価するポイント
- if()が値レベルの条件分岐ロジックであり、ソースコードの記述順で最初に一致した真の条件を返すことへの理解。
- elseの正しい使用法、およびどの条件にも一致しない場合のguaranteed-invalid（無効であることが保証された値）結果の処理。
- ブラウザサポートの確認、@supports、サーバーレンダリング、クリティカルレイアウトのフォールバック。
- テーマ変更、印刷、視覚効果の抑制（reduced motion）、アクセシビリティ検証への配慮。
確認すべき明確化のための質問
- 条件はメディアクエリ、コンテナ/スタイルクエリ、機能クエリのどれですか？複数一致した場合はどれが優先されますか？
- 有効な値が生成されない場合、プロパティはレガシーブラウザ向けにどの値を使用すべきですか？
- これは装飾的なカラーですか、それともサイズ、視認性、タップ/クリックターゲット（hit targets）に影響を与えるクリティカルなレイアウトですか？
- どのブラウザやWebViewがサポート対象ですか？また、ビルド時のCSSフォールバックは利用可能ですか？
30秒の回答フレームワーク
安全なフォールバックを備えたプロパティに限定してif()を採用し、条件の順序とelse値を定義します。条件は記述順に評価され、最初に真となった値が採用されます。一致がなくelseもない場合、結果が無効になりプロパティはフォールバックします。静的な宣言を提供し、@supportsの配下でエンハンスメントを有効にした上で、テーマ、印刷、コントラスト、視覚効果の抑制、レガシーブラウザをテストします。クリティカルなレイアウトを実験的な構文に依存させることはしません。
ステップごとの詳細解説
1. 値レベルの境界を設定する
CSSが監視可能な条件下で単一プロパティの値を選択するためにif()を使用します。セレクタ、DOM状態マシン、ビジネスロジックを置き換えるために使用しないでください。JavaScript専用のデータはCSS条件に含めないようにします。
2. 順序とフォールバックの設計
条件はソース順に評価されるため、最も具体的または重要なルールを先頭に配置し、安全な値のためにelseを使用します。一致するものがない場合、結果はguaranteed-invalidになる可能性があり、ブラウザは継承、初期値、または宣言なしを適用することがあります。クリティカルなプロパティには、明示的なレガシー用デフォルト値が必要です。
3. プログレッシブエンハンスメントと互換性
MDNでは、この関数をサポートが限定的な実験的技術としてマークしています。まず静的な値を宣言し、その上で@supportsまたはレイヤードスタイルシート内でif()を有効にします。ユーザーエージェント文字列のみに依存しないでください。サーバーレンダリングが構造を提供し、クライアントがスタイルの対応状況を検証します。
4. エクスペリエンスとアクセシビリティの検証
実際のテーマ、ビューポート、印刷、機能の組み合わせをテストします。コントラスト、フォーカスの視認性、ヒットターゲット、prefers-reduced-motionを確認します。未サポート率やフォールバック率を追跡し、クリティカルなレイアウトに崩れが生じた場合はエンハンスメントを無効化します。
模範解答
if()を値レベルのプログレッシブエンハンスメントとして扱います。スタイル、メディア、または機能の条件を特定し、意図的に順序付けを行い、明示的なelseの安全値を指定します。一致しない無効な結果をブラウザの推測に委ねてはなりません。クリティカルなレイアウトには静的な宣言を設け、@supports内でのみif()を使用し、実際のブラウザやWebView全体で検証します。テーマ、印刷、コントラスト、フォーカス、視覚効果の抑制、および各種組み合わせをテストし、フォールバックやレイアウトの差異を監視して、ベースラインを損なう場合はエンハンスメントを削除します。
よくある間違い
- if()をJavaScriptのビジネスロジックやセレクタの代替として扱うこと。
- ソース順を無視し、広範な条件が意図せず早期に適用されてしまうこと。
- elseや静的なデフォルト値を省略し、古いブラウザで重要なスタイルが欠落すること。
- フォールバックなしに寸法、ナビゲーション、ヒットターゲットへ実験的構文を使用すること。
- 最新のブラウザのみでテストし、WebView、印刷、テーマをスキップすること。
- コントラスト、フォーカス、視覚効果の抑制の確認を怠ること。
フォローアップ質問と回答
どの条件にも一致しない場合は何が起こりますか？
elseがない場合、結果はguaranteed-invalidになる可能性があり、その後、継承、初期値、またはunset値が適用されます。クリティカルなプロパティには、許容可能な静的フォールバックが必要です。
なぜ@supportsだけでは不十分なのですか？
宣言のパース可否を検証するだけであり、すべての条件の組み合わせと結果として得られる値がデザインを満たしているかを保証するわけではないためです。対象ブラウザ、テーマ、支援技術における動作検証が依然として必要です。
カスタムプロパティや複数の宣言を維持するのはどのような場合ですか？
ブラウザのカバレッジ要件が厳格な場合、条件が少ない場合、または監査時にフォールバックが明確である必要がある場合にそれらを維持します。互換性マトリクスによってその簡潔な表現に価値があると判断できる場合にのみif()を使用します。