题干与适用场景
设计系统希望在 CSS 属性值内根据 style、media 或 feature 条件选择颜色、间距和布局值。请说明 if() 的求值规则、回退、支持检测、无障碍影响和渐进增强策略，不要只展示一段 CSS。
面试官考察点
- 是否理解
if()是值级条件逻辑，按条件书写顺序返回第一个为真的值。 - 是否能正确使用
else，并处理没有匹配条件时的 guaranteed-invalid 结果。 - 是否核对浏览器支持、@supports、服务器渲染和关键布局回退。
- 是否考虑主题切换、打印、减少动效和可访问性验证。
回答前需要澄清的问题
- 条件来自媒体查询、容器/样式查询还是特性查询？多个条件冲突时谁优先？
- 目标属性没有有效值时，组件应使用什么旧浏览器默认值？
- 这是装饰性颜色，还是会影响尺寸、可读性和交互命中区域的关键布局？
- 支持哪些浏览器和 WebView？是否已有构建时 CSS 降级链路？
30 秒回答框架
我会先把 if() 限制在可安全降级的属性，再定义条件顺序和 else 值。它在属性值内依次评估条件，首个为真就返回对应值；无匹配且无 else 时可能产生无效值，属性会回退。上线前用 @supports 或构建降级提供静态默认值，验证主题、打印、对比度、减少动效和旧浏览器渲染，关键布局不依赖实验语法。
分步骤深入解答
1. 划定值级条件边界
if() 适合让同一属性在多个条件下选择值，不能替代选择器树、DOM 状态机或业务逻辑。先确定条件可在 CSS 中观察，避免把需要 JavaScript 数据的判断硬塞进样式。
2. 设计顺序与回退
条件按出现顺序求值，先写最具体或最重要的规则，最后用 else 给出安全值。若没有条件命中，结果可能是 guaranteed-invalid，浏览器会按属性继承或初始值处理，因此必须显式设计旧环境默认值。
3. 渐进增强与兼容
MDN 将该函数标为有限支持的实验技术。为关键属性先提供静态声明，再在 @supports 或分层样式中启用 if()；不要把用户代理字符串当作唯一检测。服务端渲染只输出结构，样式能力由客户端验证。
4. 验证体验与可访问性
用真实主题、视口、打印和特性支持组合测试，检查文字对比度、焦点可见性、命中区域和 prefers-reduced-motion。记录不支持率和回退命中率，发现关键布局漂移就关闭增强层。
高质量示范回答
我会把 if() 当作值级渐进增强。先确定条件属于 style、media 或 feature 查询，再按优先顺序书写条件并提供明确 else 安全值；没有匹配条件时的无效值不能依赖浏览器猜测。关键布局先有静态默认声明，在 @supports 中启用增强，兼容性以真实浏览器和 WebView 矩阵验证。测试主题、打印、对比度、焦点、减少动效和不同条件组合，监控回退命中与布局差异，必要时移除增强层。
常见错误
- 把
if()当成 JavaScript 业务逻辑或选择器替代品。 - 忽略条件按书写顺序求值，导致宽泛条件提前命中。
- 没有
else和静态默认值，旧浏览器出现关键样式缺失。 - 把实验语法直接用于尺寸、导航或交互命中区域。
- 只在最新浏览器测试，不验证 WebView、打印和主题组合。
- 没有检查对比度、焦点和减少动效。
追问及应对
没有条件命中会怎样？
没有 else 时结果可能为 guaranteed-invalid，属性随后按继承、初始值或未指定值处理。关键属性必须提供可接受的静态回退。
为什么不能只用 @supports？
@supports 只能判断声明是否被解析，不能证明每个条件组合和实际值都符合设计。仍需在目标浏览器、主题和辅助技术下进行行为验证。
什么时候继续用自定义属性和多个声明？
当浏览器覆盖面要求高、条件少或回退必须透明时，多个声明更易审计。if() 带来的压缩和集中表达只有在兼容矩阵可接受时才值得采用。