# 1. <dialog> showModal 的焦点陷阱（focus trap）、top layer 渲染与 ::backdrop 样式化的协作，以及非模态 show() 的差异 A showModal() 使 dialog 进入 top layer，焦点被限制在对话框内，::backdrop 可样式化遮罩 ✓ 正确答案 B show() 与 showModal() 都会进入 top layer 并锁定焦点 C ::backdrop 是 dialog 的子元素，受 z-index 影响 D 模态 dialog 按 Esc 会直接触发 close 事件，无法阻止关闭
# 2. View Transitions API 的 document.startViewTransition 在 SPA 路由切换时的视觉连续性与 Promise-based 钩子 A updateCallbackDone 在 DOM 更新回调完成后 resolve，finished 在过渡结束时 resolve ✓ 正确答案 B ready 在 DOM 更新回调执行完毕时立即 resolve C updateCallbackDone 在过渡动画结束后才 resolve D 三个 Promise 同时 resolve
# 3. CSS :has() 选择器作为父选择器在折叠菜单、卡片可选状态与表单校验错误展示的工程价值 A :has() 只能匹配直接子元素 B :has() 匹配时无任何性能成本 C :has() 只能用于表单元素 D :has() 可基于后代或兄弟状态反向匹配祖先，适合折叠菜单、选中态与校验联动 ✓ 正确答案
# 4. CSS :focus-visible 与 :focus-within 在键盘可达性、焦点环管理与无障碍的协作 A :focus-visible 通常匹配键盘等非指针输入引起的聚焦，:focus-within 匹配自身或后代聚焦 ✓ 正确答案 B :focus-within 只在键盘聚焦时匹配 C :focus-visible 与 :focus-within 语义完全相同 D 两者都不能用于容器元素
# 5. View Transitions 的 ::view-transition-group/::view-transition-image-pair 伪元素在路由切换的视觉定制 A image-pair 负责元素的位置与尺寸动画 B group 负责新旧快照的混合，image-pair 负责几何变换 C group 负责几何变换，image-pair 负责新旧快照的混合显示 ✓ 正确答案 D 视图过渡只有一层伪元素，无法定制
# 6. :has() 在 CSS-only 的表单联动校验（如确认密码匹配）与 JavaScript 校验的取舍 A 密码匹配等值比较仍需 JS，:has() 适合承担状态级联动样式 ✓ 正确答案 B :has() 无法基于表单控件状态做任何联动 C 纯 CSS 可直接比较两个输入框的值是否相等 D 使用 :has() 后必须完全移除 JavaScript 校验
# 7. CSS 变量与 @property 类型注册在 View Transitions 过渡中的离散动画支持 A 未注册的 CSS 变量也能被 transition 平滑插值 B @property 只影响变量作用域，不影响动画 C @property 注册 syntax 后自定义属性可按数值类型参与插值动画 ✓ 正确答案 D 注册为 custom-ident 的变量同样可以平滑插值
# 8. font-display（block/swap/fallback/optional）各取值对 FOIT/FOUT 的控制行为，以及它们对 LCP 与 CLS 的不同影响 A optional 几乎不阻塞文本渲染，弱网下可能完全放弃自定义字体 ✓ 正确答案 B swap 在字体就绪前使用回退字体，就绪后交换，能避免所有布局偏移 C block 值让文本立即用回退字体显示 D 所有 font-display 取值对 LCP 的影响完全相同
# 9. 可变字体（variable fonts）的注册轴（wght/wdth/ital/opsz）与 font-variation-settings 连续取值能力，相较多个静态字重文件的体积与请求收益 A wght/wdth/ital/opsz 是常见注册轴，font-variation-settings 可连续取值 ✓ 正确答案 B 可变字体每个字重都必须单独请求一个文件 C font-variation-settings 只能取整数 D 可变字体文件体积必然大于多份静态字体之和
# 10. @font-face 的 unicode-range 分包机制与浏览器按需下载子集的行为，如何与 preload 协同避免首屏字体缺字 A unicode-range 会把整个字体文件一次性全量加载 B preload 字体无需与 @font-face 的 crossorigin 保持一致 C 浏览器只下载页面实际字符所覆盖的子集，preload 可提前加载关键子集 ✓ 正确答案 D unicode-range 只影响字体名称
# 11. Popover API（popover 属性、popovertarget、::backdrop）的顶层渲染与点击外部关闭 A popover 元素默认渲染在普通文档流中 B manual 模式同样支持点击外部关闭 C auto 模式弹出层渲染于 top layer，点击外部可自动关闭 ✓ 正确答案 D Popover API 不能使用 ::backdrop 样式
# 12. 关键字体 preload 与 font-display 的协作，以及 preload 跨域字体时 crossorigin 属性缺失导致的重复下载问题 A preload 字体请求无需考虑 CORS 模式 B 跨域字体 preload 必须带 crossorigin，否则可能与 @font-face 请求模式不一致而重复下载 ✓ 正确答案 C font-display 与 preload 不能同时使用 D 同源字体 preload 永远不需要 crossorigin
# 13. CSS Custom Highlight API（::highlight、CSS.highlights） A Custom Highlight 会把高亮文本包裹进 span 标签 B ::highlight 的优先级始终低于普通文本样式 C 通过 CSS.highlights 注册命名高亮，再用 ::highlight() 伪元素设置样式，且不改动 DOM ✓ 正确答案 D Custom Highlight 无法高亮跨节点的文本
# 14. color-scheme 与 light-dark 函数在系统主题跟随与设计令牌响应 A color-scheme 只影响页面背景色 B 设置 color-scheme 后原生控件渲染不会改变 C light-dark() 只能用于根元素 D light-dark() 根据 used color-scheme 从两个参数中返回对应颜色，配合 color-scheme 实现主题化 ✓ 正确答案
# 15. CSS Custom Highlight API 在文本搜索高亮、IME 选区、翻译遮罩的应用 A 搜索高亮必须把命中文本替换为 mark 元素 B Custom Highlight 可反复更新 Range 实现搜索、IME 与翻译遮罩，且不改变 DOM 结构 ✓ 正确答案 C Custom Highlight 的 Range 在文本编辑后自动保持有效 D 同一页面只能注册一个 Highlight
# 16. <details>/<summary> 的原生折叠实现与局限 A details/summary 是零 JS 的折叠方案，但动画、状态持久化与复杂无障碍需增强 ✓ 正确答案 B 原生 details 展开收起自带平滑动画 C details/summary 无法通过键盘操作 D summary 不能自定义任何样式
# 17. scrollbar-gutter: stable 与 scrollbar-color 在布局稳定性与暗色主题的工程价值 A scrollbar-gutter: stable 会移除滚动条占位 B scrollbar-color 与暗色主题无关 C scrollbar-color 只能设置一种颜色 D scrollbar-gutter: stable 固定预留滚动条沟槽，避免出现或消失引发的布局抖动 ✓ 正确答案
# 18. caret-color/accent-color/interactivity: inert 在现代控件原生的样式化 A accent-color 只能影响文本颜色 B inert 元素仍可被 Tab 聚焦 C inert 只能用于表单控件 D caret-color 控制文本插入符颜色，accent-color 控制原生控件强调色，inert 禁用整棵子树的交互 ✓ 正确答案
# 19. command 与 commandfor 属性在键盘可发现的菜单/按钮激活 A commandfor 用于指定命令执行后的跳转地址 B command 属性只能用于 a 标签 C commandfor 指向目标元素、command 声明命令，浏览器自动绑定点击激活，提升键盘可发现性 ✓ 正确答案 D 使用 command 后按钮失去键盘聚焦能力
# 20. CSS font-size-adjust 与 text-decoration-skip-ink 的细节优化 A font-size-adjust 用于设置字体的字重 B font-size-adjust 按 x-height 缩放回退字体以保持视觉字号一致 ✓ 正确答案 C text-decoration-skip-ink: none 会让下划线在字母笔画处断开 D text-decoration-skip-ink 只影响中文文本
# 21. CSS Anchor Positioning 与 Floating UI（JS 库） A Anchor Positioning 依赖 JavaScript 计算位置 B position-try-fallbacks 可在锚点定位溢出时按顺序尝试多个候选位置 ✓ 正确答案 C Floating UI 无法处理视口翻转 D 使用 Anchor Positioning 后必须移除所有 JS
# 22. CSS Container Style Queries（@container style(...)）在父容器主题切换与设计令牌继承的应用 A style() 查询只能针对视口宽度 B 使用 style() 查询必须设置 container-type: size C @container style(--theme: dark) 在祖先 --theme 为 dark 时匹配，可实现容器粒度主题切换 ✓ 正确答案 D style() 查询支持比较任意 CSS 属性值
# 23. Interest Invokers（interestfor/interesttarget）在无 JS 悬停触发（tooltip/preview）的应用与渐进增强 A interesttarget 只支持触摸设备 B 使用 interesttarget 必须同时引入 JS 库 C interesttarget 声明悬停目标后，浏览器可向目标元素派发 interest 事件并进入 interest 状态 ✓ 正确答案 D interest 事件不支持键盘聚焦触发
# 24. CSS 原生轮播（::scroll-button()/::scroll-marker()）的能力边界、浏览器支持与无障碍考量 A ::scroll-button() 生成翻页按钮，::scroll-marker() 生成页码指示器，但能力有限且支持仍属实验性 ✓ 正确答案 B 原生轮播已支持自动播放与无缝循环 C 原生轮播无需滚动容器 D 原生轮播完全解决了无障碍问题
# 25. :has() 选择器在 Safari/Firefox 全量支持后，复杂表单联动与状态化选择器的写法范式 A :has() 无法配合 :checked 使用 B 用状态伪类作为 :has() 参数驱动容器样式是常见范式，但需控制选择器复杂度与性能 ✓ 正确答案 C 使用 :has() 后无需再考虑旧浏览器 D :has() 参数必须是元素选择器，不能是伪类
# 26. Container Queries 与 Style Queries 的边界，哪些场景仍需 JS 介入 A Container Queries 可以查询内容自身决定的 auto 尺寸 B 引入容器查询后应移除所有 ResizeObserver C Style Queries 可以查询任意属性 D 尺寸查询需要容器具有确定尺寸，内容驱动测量与复杂交互仍需 JS ✓ 正确答案
# 27. :scope 与 @scope 在大型应用 CSS 架构中的样式隔离策略 A @scope 会增加选择器特异性 B :scope 只适用于 Shadow DOM C @scope 只能用于页面根元素 D :scope 在 @scope 中匹配作用域根元素，@scope 可将样式限定在指定子树内 ✓ 正确答案
# 28. View Transitions API 的 cross-document 模式在 MPA 站点升级到软 SPA 的工程范式 A cross-document 过渡要求站点必须改造为 SPA B 页面声明 @view-transition { navigation: auto } 后，同源导航可启用跨文档视图过渡 ✓ 正确答案 C 跨文档过渡不支持任何自定义动画 D 跨文档过渡不受同源策略限制
# 29. CSS Nesting 原生支持的工程边界（哪些场景仍需预处理器） A 原生 CSS 嵌套支持任意选择器片段拼接 B 原生嵌套能减少重复书写，但 mixin、运算与自动前缀等仍需预处理器 ✓ 正确答案 C 原生嵌套可替代所有预处理器能力 D 原生嵌套只能用于样式重置
# 30. :where() / :is() 优先级控制与 specificity 调试在大型项目中的工具链 A :where() 特异性恒为 0，适合编写可被覆盖的基线样式 ✓ 正确答案 B :is() 与 :where() 的特异性完全相同 C :is() 的特异性取参数中的最低值 D 特异性问题无法通过工具检测
# 31. Popover API 与顶层渲染的 focus 行为、可访问性陷阱与渐进增强策略 A auto Popover 打开时浏览器会移动焦点，但复杂内容仍需补充语义与焦点管理 ✓ 正确答案 B Popover 关闭后焦点不会恢复 C Popover 打开后背景元素自动 inert，无需处理 D Popover API 在所有浏览器都完全可用
# 32. selectlist 与自定义下拉的浏览器原生方案当前的可用范围 A selectlist 允许定制外观并保留选择语义与键盘交互，但浏览器支持仍有限，需降级方案 ✓ 正确答案 B selectlist 已完全取代原生 select C selectlist 无法用键盘操作 D selectlist 与 div 自研组件完全相同
# 33. text-rendering、font-kerning 与 font-feature-settings（liga/dlig/tnum）在连字、字距调整与等宽数字排版中的各自职责 A font-feature-settings 用于控制渲染速度 B font-kerning 与 OpenType 特性无关 C text-rendering 是渲染级开关，font-kerning 控制字距，font-feature-settings 开关 OpenType 特性 ✓ 正确答案 D 'tnum' 用于开启连字
# 34. font-synthesis 控制浏览器伪粗体/伪斜体的行为，以及字体缺少对应字重轴时的渲染质量取舍 A font-synthesis: none 表示总是合成粗体 B 字体缺粗体时浏览器永远直接报错 C font-synthesis 只影响中文 D 浏览器合成的伪粗体与伪斜体质量较差，font-synthesis 可控制是否允许合成 ✓ 正确答案
# 35. 系统字体栈（system-ui/-apple-system）与 @font-face local() 本地字体回退的工程取舍与一致性风险 A system-ui 在所有平台渲染完全一致 B 使用系统字体栈不需要设置回退字体 C local() 一定能加载到目标字体 D local() 引用本机字体可避免下载，但跨设备不可控，系统栈性能好却存在平台差异 ✓ 正确答案
# 36. @font-face 的 ascent-override/descent-override/line-gap-override 与 size-adjust 在消除备用字体与 Web 字体行高差（防 CLS）的应用 A 度量覆盖属性与 size-adjust 可让备用字体与 Web 字体的度量一致，减少字体交换引发的 CLS ✓ 正确答案 B size-adjust 只能放大不能缩小 C ascent-override 只影响字体颜色 D 这些属性无法解决字体加载期间的行高差异
# 37. font-optical-sizing 与 opsz 轴在响应式排版（小字号增强对比度）的作用 A font-optical-sizing: auto 会按字号自动设置 opsz 轴，小字号时增强笔画对比度 ✓ 正确答案 B font-optical-sizing 只影响字体颜色 C opsz 轴与字号无关 D 所有字体都支持 opsz 轴
# 38. CSS 自定义属性（@property）的注册、动画与类型推导在 design token 体系中的演进 A @property 只能注册颜色变量 B @property 声明 syntax 后自定义属性可参与 calc 与动画，并支持类型校验 ✓ 正确答案 C 自定义属性注册后不能继承 D @property 与普通变量完全等价
# 39. dialog 的 close/cancel 事件、Esc 关闭行为与 form method="dialog" 的取值回传 A cancel 事件在对话框关闭后触发 B close 事件可以 preventDefault 阻止关闭 C Esc 不会触发 cancel 事件 D form method="dialog" 提交后对话框关闭，returnValue 保存回传值 ✓ 正确答案
# 40. CSS Fonts Level 4 的 font-palette 与 @font-palette-values 在 COLRv1 彩色字体主题化的工程价值 A font-palette 用于设置字重 B @font-palette-values 可重定义 COLRv1 字体的调色板，font-palette 选择应用哪套 ✓ 正确答案 C COLRv1 字体不支持任何主题化 D 彩色字体无法参与 design token
# 41. document.fonts（Font Loading API）的 load/check/ready 在字体加载编排与首屏文字渲染控制的应用 A check() 会阻塞页面直到字体加载完成 B document.fonts 只能加载系统字体 C load() 返回 Promise 可主动加载指定字体，check() 查询可用性，ready 在所有字体就绪后 resolve ✓ 正确答案 D ready 在每加载一个字体时就 resolve
# 42. 字体文件长缓存（immutable）与字体更新时的版本化命名策略 A 字体文件应设置短缓存以便每次更新 B immutable 会导致字体永远无法更新 C 字体更新不需要改变文件名 D immutable 长缓存配合内容哈希命名可实现不变即缓存、更新即换 URL ✓ 正确答案
