现代 UI 与排版渲染

• showModal 进入 top layer 并启用焦点陷阱，show 仅按普通文档流渲染
• ::backdrop 伪元素提供模态遮罩的样式入口
• Esc 关闭、cancel 事件与焦点恢复的行为

dialog 的 showModal() 会把元素放入 top layer（顶层渲染层），浮于文档之上，不受 z-index 与祖先 overflow 裁剪影响，同时启用焦点陷阱，Tab 焦点在对话框内循环，避免逃逸到背景。::backdrop 伪元素代表对话框背后的全屏遮罩，可设置背景色、模糊或动画。非模态 show() 只是普通渲染，不进入 top layer、不锁焦点、不屏蔽背景交互，适合非阻塞提示。模态对话框按 Esc 先触发 cancel 事件，可阻止关闭，关闭后触发 close 事件并通过 returnValue 获取结果。

考察原生 dialog 的模态机制：showModal 与 show 的核心差异在于 top layer 与焦点陷阱，::backdrop 是配套遮罩样式入口；掌握三者协作关系，才能正确实现无障碍模态交互，避免自造焦点管理。

• startViewTransition(callback) 捕获新旧状态快照并生成过渡
• updateCallbackDone/ready/finished 三个 Promise 的时序
• 与 React/Vue 路由更新时机的配合

document.startViewTransition(callback) 先截取当前页面快照，再执行回调更新 DOM，随后截取新状态快照，浏览器自动为共享元素生成交叉淡入淡出。返回的 ViewTransition 暴露三个 Promise：updateCallbackDone 在 DOM 更新完成后 resolve；ready 在新旧快照就绪后 resolve；finished 在过渡结束时 resolve。SPA 中把路由更新函数包进回调，例如在 React 的 startTransition 或 Vue Router 导航完成后调用，实现页面切换的连续滑动与缩放。

考察 View Transitions 的异步时序模型：三个 Promise 分别标记 DOM 更新完成、快照就绪与过渡结束；理解其 resolve 时机，才能在正确阶段注入自定义动画或做错误处理。

• :has() 按后代或兄弟关系反向匹配祖先
• 折叠菜单箭头旋转与面板显隐的联动
• 表单校验错误样式与选中态的纯 CSS 表达

:has() 允许基于子元素、兄弟或后续元素的状态反推匹配祖先，被称为父选择器，例如 .card:has(img) 匹配含图片的卡片。折叠菜单可用 summary 容器配合 :has(+ .panel[open]) 切换箭头方向；卡片选中态可用 .card:has(input:checked) 加边框阴影，替代 JS 切换 class；表单校验可用 .field:has(:user-invalid) 展示错误边框。工程价值是把依赖子状态的样式收敛到 CSS 层，减少 JS 监听与 class 管理；但 :has() 在大型 DOM 上求值代价较高，应避免在热路径频繁使用。

考察 :has() 的核心能力：通过结构关系实现祖先匹配，把折叠菜单、选中态与校验反馈等联动样式从 JS 迁移到 CSS；同时要求认识其性能成本与渐进增强边界。

• :focus-visible 仅在键盘等非指针输入聚焦时匹配
• :focus-within 匹配自身或后代聚焦的元素
• 焦点环显隐策略与 WCAG 焦点可见性要求

:focus-visible 在焦点来自键盘、屏幕阅读器等非指针输入时匹配，鼠标点击聚焦时通常不匹配，适合只在键盘导航时显示焦点环；:focus-within 匹配自身或任意后代聚焦的情况，常用于包裹组件在内部聚焦时显示高亮边框或展开状态。协作模式：用 :focus-within 控制容器级联状态，用 :focus-visible 控制焦点环 outline 的显示，避免鼠标点击产生冗余环；可先全局重置 outline 再按需恢复，保证键盘用户有清晰焦点指示，满足 WCAG 2.4.7 焦点可见性要求。

考察两组焦点选择器的语义差异：:focus-visible 过滤输入方式，:focus-within 表达祖先级聚焦状态；正确协作可兼顾无障碍焦点可见性与鼠标操作的清爽体验。

• 视图过渡伪元素树的层级结构
• group 负责几何变换，image-pair 负责新旧快照混合
• 用 animation 定制路由切换效果

视图过渡的伪元素树中，group 负责位置与尺寸等几何动画，image-pair 承载新旧两张快照的混合（默认交叉淡化），old 与 new 分别是新旧状态快照。开发者可通过 view-transition-name 命名共享元素，或覆盖这些伪元素的 animation 定制效果：对 group 施加 transform 实现滑动或缩放切换，对 image-pair 调整 opacity 实现融合。定制时需显式设置动画时长、transform-origin 与缓动函数，才能获得连贯可控的路由转场。

考察视图过渡伪元素树的分工：group 管几何、image-pair 管新旧快照混合；理解该层级才能在路由切换中精确控制位移、缩放与淡入淡出，而非只能使用默认动画。

• :has() 配合表单状态伪类表达联动规则
• 密码一致性无法用纯 CSS 比较的边界
• JS 校验在逻辑判断与提示上的优势

:has() 可基于表单控件状态表达联动规则，例如 .form:has(input:user-invalid) 给表单加错误底色，或 .group:has(input:checked) 联动显隐子项；但确认密码一致这类需要比较两个输入值的校验，纯 CSS 无法读取并比较输入内容，只能表达非空或格式错误。实践常用混合方案：:has() 承担状态联动（错误边框、区块显隐、必填标记），JS 承担值级校验（密码匹配、强度、远程唯一性），失败时给元素添加 aria-invalid 或 data 属性让 :has() 展示错误。CSS-only 零脚本但表达力弱，JS 完整可控但需管理事件与状态。

考察 :has() 的能力边界：它能基于控件状态联动样式，却无法比较输入值，密码一致性必须由 JS 完成；理解该边界有助于设计 CSS 状态联动加 JS 值校验的分层方案。

• 未注册 CSS 变量被视为字符串，无法插值
• @property 声明 syntax 与 initial-value 使变量可动画
• 与 View Transitions 组合实现更细粒度动画

普通 CSS 自定义属性未注册时被浏览器当作不透明字符串，无法得知数值含义，因此 transition 或关键帧动画只能离散跳变。通过 @property 注册并声明 syntax（如 length、color 等）与 initial-value 后，浏览器才能对变量值做数值插值；例如注册 --progress 为 percentage 后即可让进度条渐变。在 View Transitions 中可把位移、角度、透明度等参数放入已注册变量，用动画驱动其连续变化，弥补默认粒度不足。注意 syntax 须与实际赋值兼容并提前注册，custom-ident 等离散类型仍不能插值。

考察 CSS 变量动画化的机制：未注册变量无法插值，@property 通过声明 syntax 赋予其数值语义，从而支持过渡与关键帧，并与 View Transitions 结合实现更细粒度的自定义动画。

• 各取值的阻塞期与交换期行为
• FOIT/FOUT 的产生机制
• 与 LCP、CLS 的权衡

font-display 通过阻塞期、交换期与失败期控制字体加载时的渲染策略。block 用不可见字体占位（FOIT），最多阻塞约 3 秒后交换，易拖慢 LCP；swap 立即用回退字体渲染，就绪后交换（FOUT），利于 LCP 但可能引发 CLS；fallback 阻塞期很短（约 100ms），之后短暂使用回退字体，3 秒内未加载完成则放弃；optional 几乎不等待，极短窗口内未就绪则完全放弃，适合弱网。工程上常用 swap 或 fallback 平衡 LCP 与 CLS，并配合 font-size-adjust、size-adjust 减少布局偏移。

考察 font-display 四档策略的渲染时序：block 产生 FOIT 拖累 LCP，swap 产生 FOUT 可能引发 CLS，fallback 与 optional 在可见性和稳定性间折中，需要按场景权衡。

• wght/wdth/ital/opsz 等注册轴
• font-variation-settings 与 font-weight 等属性的映射
• 体积与请求数收益及兼容回退

可变字体把多个静态字重与字宽打包进单一字体文件，通过注册轴提供连续取值。常见注册轴包括 wght（字重）、wdth（字宽）、ital（斜体）、opsz（光学尺寸）、slnt（倾斜）及厂商自定义轴。可用 font-variation-settings: 'wght' 375 指定任意浮点值，也可用 font-weight 范围值映射到 wght 轴；opsz 轴随字号调整笔画细节，小字号加粗、大字号细化以提升可读性。收益：一个可变字体替代多个静态字重，减少请求数与总体积（CJK 按需子集后收益明显），支持任意字重与平滑动画；旧浏览器需回退静态字体。

考察可变字体的轴模型与使用方式：注册轴提供连续取值，font-variation-settings 是底层控制入口；理解其体积、请求数与排版灵活性收益，同时注意兼容回退。

• unicode-range 声明子集覆盖的码点区间
• 浏览器仅按页面实际用到的字符下载对应子集
• preload 与 crossorigin 协同避免首屏缺字

unicode-range 允许在 @font-face 中声明字体文件覆盖的 Unicode 码点区间，同一 font-family 可声明多个分段，浏览器根据页面实际用到的字符，仅下载覆盖所需码点的子集。中文场景常按常用字表拆分成多个 woff2 子集，首屏只请求命中字符对应的子集。但按需下载存在延迟，首屏可能缺字闪烁，因此需与 preload 协同：对首屏关键子集用 preload 提前加载，并保持与 @font-face 相同的 url 与 crossorigin 属性，否则请求模式不一致会重复下载，反而拖慢首屏。

考察 unicode-range 分包与按需加载机制：浏览器按码点命中决定下载哪个子集；与 preload 配合可消除首屏缺字，但 crossorigin 不一致会导致重复下载，是性能优化的关键细节。

• popover/popovertarget/popovertargetaction 属性
• 顶层渲染与 light dismiss 机制
• ::backdrop 样式与无障碍适配

Popover API 提供声明式弹出层方案：目标元素设置 popover 属性成为弹出层，触发元素用 popovertarget 指向其 id，popovertargetaction 可取 toggle/show/hide 控制行为；auto 模式渲染在 top layer，点击外部或按 Esc 自动关闭，同组内互斥，manual 模式需手动关闭。可用 ::backdrop 添加遮罩背景，配合过渡动画增强体验。相比传统 absolute 浮层，Popover 不依赖 z-index 与祖先 overflow 裁剪，且内置基础焦点管理；复杂浮层仍需补充 aria 关系与初始焦点处理。

考察 Popover API 的声明式弹出机制：popover 与 popovertarget 组合实现显示隐藏，auto 模式提供顶层渲染与点击外部关闭；同时要求关注其无障碍适配与渐进增强策略。

• preload 提前发起字体请求缩短等待
• crossorigin 缺失导致请求模式不一致引发二次下载
• font-display 控制加载期文本渲染策略

preload 让浏览器在解析到 @font-face 之前提前发起字体请求，缩短首屏关键字体等待；与 font-display: swap 协作时，文本先用回退字体渲染再交换，兼顾可见性与 FOIT 控制。关键陷阱在 crossorigin：@font-face 字体请求默认以 CORS 匿名模式发起，而 preload 请求不带 crossorigin 时会以 no-cors 模式发送，二者请求模式不一致，导致同一字体被下载两次。因此 preload 必须带 crossorigin 且与 @font-face 的 src url 一致，并只 preload 首屏关键子集。

考察字体加载优化的协作关系：preload 提前请求加 font-display 控制渲染策略；crossorigin 缺失会使 preload 与 @font-face 请求模式不一致而重复下载，是常见性能坑点。

• Highlight 对象与 Range 集合
• CSS.highlights.register 注册命名高亮
• ::highlight(name) 伪元素的应用样式

CSS Custom Highlight API 允许用 JavaScript 创建文本范围集合，并像伪元素一样为其应用样式。用法：创建 Highlight 对象并添加 Range，用 CSS.highlights.register 注册命名高亮，CSS 中通过 ::highlight(name) 伪元素设置背景、下划线等样式。相比在 DOM 中包裹 mark 或 span，它不改变 DOM 结构，不影响复制粘贴，对搜索、编辑器、标注场景友好，且支持跨节点范围。注意 DOM 变更会使 Range 失效需重建；API 主要在 Chromium 系可用，需检测降级。

考察 Custom Highlight API 的模型：Highlight 集合与 CSS.highlights 注册、::highlight 伪元素样式，核心价值是不改 DOM 即可高亮任意文本，需注意 Range 失效与浏览器兼容问题。

• color-scheme 声明支持的配色方案
• light-dark() 双值函数按当前方案取值
• 与 prefers-color-scheme 的分工

color-scheme 声明页面支持的配色方案，浏览器据此把表单控件、滚动条等原生 UI 切换为深色或浅色渲染，无需逐项覆盖。light-dark() 接受浅色与深色两个参数，浏览器按当前 used color-scheme 返回其一，使设计令牌声明式表达主题差异，例如 --surface: light-dark(#fff, #1a1a1a)。与 prefers-color-scheme 的分工：媒体查询按系统偏好判断；light-dark() 依据元素实际配色取值，适合令牌化颜色定义，二者结合降低主题维护成本。

考察 color-scheme 与 light-dark() 的协作：前者让 UA 控件跟随主题，后者让自定义颜色令牌按 used color-scheme 双值取值，简化深色模式实现，需区分与 prefers-color-scheme 的职责。

• 搜索命中范围的高亮渲染
• IME 选区与翻译遮罩的范围管理
• 与 DOM 结构解耦的收益

搜索高亮中，可收集命中位置生成 Range 加入 Highlight，搜索词变化时重建范围，样式由 ::highlight(search) 统一控制，复制粘贴不受影响。IME 选区场景，可在 composition 事件期间跟踪编辑选区生成范围，高亮显示拼音候选对应的文本区域。翻译遮罩场景，可对翻译结果对应的原文片段应用半透明背景或模糊样式，同时保留原文 DOM 供读屏与复制。共同点：范围随操作频繁变化，Custom Highlight 只更新 JS 侧 Range 而不触碰 DOM；注意 Range 会随文本编辑失效，需在输入后重建并批量提交。

考察 Custom Highlight 在交互场景的工程应用：搜索、IME、翻译都需要频繁更新的文本范围，其不改 DOM 的优势显著，同时需处理范围失效与批量更新的性能问题。

• open 属性与 toggle 事件
• 展开收起动画的缺失与 interpolate-size 方案
• 无障碍语义与键盘支持

details 配合 summary 提供零 JS 的原生折叠：summary 作为可点击标题，open 属性控制内容区显隐，点击切换并触发 toggle 事件，键盘可聚焦、Enter/Space 切换。局限：展开收起无过渡动画，需 interpolate-size 与 calc-size() 或 @starting-style 才能做高度动画；内容区是普通块级区域，无法做遮罩类交互；marker 在不同浏览器表现不一；状态不自动持久化，需 JS 配合存储。无障碍上，summary 可被读屏识别，但复杂需求（如 aria 关系、状态播报）仍需增强或改用自研组件。

考察原生折叠组件的价值与边界：details/summary 提供语义、键盘与零 JS 的折叠基础，但动画、状态持久化与复杂无障碍需求仍需 CSS 或 JS 增强，需按场景取舍。

• 滚动条占位导致的布局抖动
• scrollbar-gutter: stable/auto 的行为
• scrollbar-color 双色值设置 thumb/track

传统滚动条内容溢出时出现、不溢出时消失，占位变化会引起内容宽度跳变。scrollbar-gutter: stable 为容器预留固定宽度沟槽，即使不溢出也保持占位，配合 stable both-edges 可对称预留，避免布局抖动。scrollbar-color 以滑块与轨道两个颜色设置滚动条配色，随 color-scheme 或主题联动，适合暗色主题；相比 ::-webkit-scrollbar，它是标准化属性、实现简单，但圆角、宽度、hover 等自定义能力有限，复杂样式仍需 WebKit 伪元素。工程上常组合：stable 防抖动加 scrollbar-color 做主题化。

考察滚动条标准化的两个属性：scrollbar-gutter: stable 固定占位防止布局抖动，scrollbar-color 提供跨浏览器的基础主题化能力，理解其与 WebKit 伪元素方案的取舍，以选择合适方案。

• caret-color 控制文本插入符颜色
• accent-color 控制复选框/单选/进度条等强调色
• inert 禁用整个子树交互与可访问性

caret-color 设置输入框、文本域中文本插入符的颜色，配合暗色主题或品牌色提升可见性；accent-color 统一控制复选框、单选、range、progress 等原生控件的强调色，让表单控件快速贴合主题。inert 属性使元素及其整棵子树对交互惰性：不可点击、不可聚焦、不响应选区与辅助技术导航，视觉上可配合样式弱化；相比 disabled 只作用于表单控件，inert 适用于任意容器（如弹层背后的页面、未激活面板），是管理交互与无障碍焦点边界的利器。三者结合可在不改 DOM 结构的前提下完成原生控件主题化与交互治理。

考察现代控件样式化与交互治理的三个入口：accent-color 与 caret-color 覆盖控件颜色，inert 提供子树级交互禁用；理解其分工可减少自定义控件重造，并提升无障碍一致性。

• command 定义可触发命令，commandfor 指向目标元素
• 无 JS 的按钮命令绑定
• 键盘与读屏的可发现性

command 与 commandfor（Invoker Commands）提供声明式的按钮触发命令机制：按钮用 commandfor 指向目标元素 id，command 声明要执行的命令（如 show-modal、toggle-popover 等），浏览器自动把点击映射为目标元素的内置命令。对键盘与读屏的价值：命令关系是语义化元数据，用户可通过可访问名称与命令描述理解其功能，按钮天然可聚焦、可 Enter/Space 激活；浏览器还可自动维护 pressed、disabled 状态反射，减少 ARIA 手写。渐进增强上，可用特性检测判断支持情况，不支持时回退到传统 click 处理。

考察 Invoker Commands 的声明式交互模型：command 与 commandfor 把按钮与目标命令绑定，提升键盘与读屏的可发现性，并减少状态管理代码，是控件无障碍化的新范式。

• font-size-adjust 按 x-height 统一视觉字号
• 不同字体的高度差异与回退
• text-decoration-skip-ink 跳过笔画的下划线

font-size-adjust 用于调整字体渲染尺寸，使不同字体的 x-height 保持一致：字体回退时若 x-height 差异大，正文视觉大小会突变；设置数值（如 0.5）即按主字体 x-height 比例缩放回退字体，新版还支持 from-font。text-decoration-skip-ink 控制下划线遇到笔画下降部（如 g、j、y）时是否断开：auto 默认断开，提升可读性；none 强制连续下划线，视觉更实但可能与笔画重叠。两者都是排版细节优化：前者稳定多字体回退的视觉度量，后者改善装饰线阅读体验，可作为全局排版基线。

考察两个排版细节属性：font-size-adjust 按 x-height 统一回退字体的视觉尺寸，text-decoration-skip-ink 控制下划线跳过笔画缺口；理解其作用可提升多字体场景的排版稳定性与可读性。

• anchor-name/anchor 与 position-area/inset-area
• 溢出回退与 position-try
• 与 JS 浮层库的对比

CSS Anchor Positioning 让元素相对锚点定位：目标元素设置 anchor-name，浮层用 position-anchor 指定锚点，再用 position-area 声明方位，浏览器自动计算位置，无需 JS 测量；配合 position-try-fallbacks 与 @position-try 可在视口溢出时自动回退候选位置。与 Floating UI 相比：原生方案零 JS，但支持有限，复杂场景（箭头、动态尺寸等）仍需库的成熟算法；Floating UI 兼容性好，提供 shift/flip 等中间件。工程上可特性检测后渐进增强：支持时用原生，否则回退 JS 库。

考察锚点定位的两种方案：原生 Anchor Positioning 提供声明式定位与溢出回退，Floating UI 提供成熟算法与兼容性；理解其边界与渐进增强策略是浮层工程的关键，需按项目选型。

• @container style(--var: value) 按容器属性值查询
• 主题令牌按容器粒度切换
• 与容器尺寸查询的分工

@container style() 允许根据容器或祖先元素的样式值做条件渲染：@container style(--theme: dark) 在祖先自定义属性为 dark 时生效，实现容器粒度主题切换。它与媒体查询的区别：style() 针对元素属性值而非视口，粒度更细；与尺寸查询的区别：不受容器类型限制，且无需显式 container-type。在设计令牌体系中，可在根或局部容器设置主题、密度等令牌，子组件用 style() 查询选择对应样式分支；当前主要支持自定义属性比较，常规属性查询能力有限，需配合 @supports 降级。

考察容器样式查询的机制：@container style() 按祖先自定义属性值切换样式，实现容器粒度主题与令牌继承，是对媒体查询与尺寸查询的补充，需注意浏览器支持与兼容降级。

• interest 事件与 interesttarget 属性
• 无 JS 的 tooltip/preview 触发
• 悬停延迟、焦点触达与降级

Interest Invokers 为 HTML 增加声明式悬停交互：元素设置 interesttarget 指向目标后，浏览器在指针悬停或键盘聚焦并保持短暂延迟后，向目标派发 interest 事件并进入 interest 状态，可用于无 JS 触发 tooltip、预览卡片、菜单展开等；interestfor 是反向声明目标关系。规范还定义触发与取消时机（悬停进入、离开、聚焦），统一 tooltip 类交互的行为与无障碍语义。渐进增强：先用 JS 实现悬停逻辑保证全浏览器可用，再在特性检测支持的环境下切换原生声明；同时注意触屏无悬停，需保留点击或聚焦触发路径，并控制悬停延迟避免误触。

考察声明式悬停交互的演进：interesttarget 把指针悬停与目标元素状态绑定，减少 tooltip 类交互的 JS 代码；需结合特性检测、点击路径与触屏场景做渐进增强。

• scroll snap 驱动的原生轮播
• ::scroll-button() 前后翻页按钮
• ::scroll-marker() 页码指示器与无障碍

基于 CSS Scroll Snap 的原生轮播正在标准化：滚动容器配合 scroll-snap 实现逐项吸附，浏览器新增 ::scroll-button() 伪元素生成前后翻页按钮，::scroll-marker() 生成页码指示器，滚动到对应项时标记自动激活，形成无 JS 的轮播骨架。能力边界：目前仅支持横向或纵向吸附滚动，缺少自动播放、循环无缝、手势惯性定制、懒加载等商业轮播常见能力，复杂场景仍需 JS 补充；浏览器支持处于实验阶段，生产使用需特性检测。无障碍方面：需为按钮提供可访问名称，指示器应表达当前项与可操作语义，焦点管理要保证键盘用户可操作且焦点不被截获。

考察原生轮播的构成：scroll snap 提供吸附滚动，::scroll-button 与 ::scroll-marker 提供翻页与指示器；理解其能力边界与实验性，才能决定哪些场景用原生、哪些仍需 JS 增强。

• 表单字段状态与区块联动
• 选中态与展开态驱动的容器样式
• 性能与可维护性约束

:has() 全量支持后，可用其表达由子状态驱动父样式的范式：字段校验联动用 .field:has(:user-invalid) 控制错误提示显隐，选中态驱动用 .plan:has(input:checked) 高亮卡片，展开态用容器配合 [open] 切换箭头，还可配合 :not(:has(...)) 表达无子状态分支。范式要点：优先用状态伪类（:checked、:user-invalid、[open]）作为参数，避免依赖 JS 加 class；把 :has() 放在尽量浅的选择器上并控制参数复杂度；对高频变化容器避免大范围查询；并配合 @supports 渐进增强，保证旧浏览器有基础样式。

考察 :has() 成熟后的工程范式：以状态伪类为参数的父子与兄弟联动写法、浅选择器与复杂度控制、渐进增强，帮助把交互样式从 JS 迁移到 CSS 同时守住性能。

• 容器尺寸查询与样式查询的能力
• 内容驱动的尺寸测量（auto 容器）
• JS 仍需介入的场景

Container Queries 让组件按最近容器尺寸（cqw、cqi 等单位与 @container 规则）响应式布局，Style Queries（@container style()）按容器属性值切换样式，解决组件脱离视口上下文的响应式问题。但仍有边界需要 JS：其一，容器尺寸由内容决定（auto）时无法做尺寸查询，需 JS 用 ResizeObserver 测量；其二，复杂交互状态（拖拽排序、虚拟列表渲染）需 JS 管理数据与 DOM；其三，跨容器通信与全局联动仍需 JS 编排。工程上以能用容器查询就用原生，涉及动态测量与状态机逻辑再引入 JS 为原则。

考察容器查询的适用边界：尺寸与样式查询覆盖组件级响应式，但内容驱动的尺寸测量、复杂交互状态与跨容器编排仍需 JavaScript，理解分工才能避免过度原生化并合理选型。

• :scope 匹配当前作用域根
• @scope 划定子树边界与嵌套样式
• 隔离策略与预处理器对比

:scope 伪类匹配当前作用域的根元素：在普通选择器中指代元素自身（如 :scope > .item），在 querySelector 中指代调用上下文元素，适合编写组件内相对选择器。@scope 规则把一组样式限定在指定子树内：@scope (.card) 中 :scope 即 .card 根，子选择器只匹配 .card 内部，避免跨组件泄漏且不增加特异性。大型应用可用 @scope 为组件根定义样式上下文，替代 BEM 前缀的繁重命名与深层嵌套；:scope 常配合 querySelector 做组件内查询。相比预处理器嵌套，@scope 是浏览器原生隔离。

考察原生样式隔离的两种机制：:scope 表达作用域根，@scope 划定子树样式边界；理解其与 BEM、预处理器方案的关系，可显著降低大型应用的样式冲突并提升可维护性。

• 跨文档视图过渡的触发与样式规则
• 同源页面导航的视觉连续性
• MPA 升级的渐进实施路径

cross-document 模式允许同源页面导航时应用视图过渡：新页面样式表声明 @view-transition { navigation: auto; } 即可在整页导航时启用，浏览器为旧页面与下一页快照生成过渡，开发者用 ::view-transition-old(root) 等伪元素定制滑动、缩放效果，甚至可用 view-transition-name 保持跨页元素连续。实施范式：先全局声明 navigation: auto 获得基础过渡，再为公共元素命名实现跨页连续性；用 prefers-reduced-motion 关闭或弱化动画；对不支持浏览器保持普通导航。

考察跨文档视图过渡的机制与工程范式：@view-transition 声明加伪元素定制加共享元素命名，让 MPA 渐进获得类 SPA 体验，需兼顾降级与动效偏好。

• 原生嵌套语法（& 与隐式嵌套）
• 选择器拼接限制
• 仍需预处理器的能力：mixins、计算、自动前缀、构建

原生 CSS Nesting 允许在规则内嵌套选择器，用 & 引用父选择器（如 .card 内写 & .title 或隐式嵌套后代），大幅减少重复书写；但存在明确边界：不能在嵌套中拼接任意选择器片段（如 &__item 无法动态拼接类名），类型选择器嵌套需显式 &，@media 等 at-rule 可嵌套。因此以下场景仍需预处理器：mixins 与函数复用、变量计算与运算（原生只有自定义属性与 calc）、自动前缀与构建优化、老旧浏览器编译降级、BEM 拼接与模块化工程。工程策略：以原生嵌套为主减少编译依赖，同时保留 PostCSS 管道做前缀与兼容，避免嵌套过深影响可读性与特异性。

考察原生嵌套的能力与边界：它消除基础嵌套需求，但 mixin、运算、自动前缀与构建优化等仍需预处理器；合理分工可减少依赖又不牺牲工程能力，同时需控制嵌套深度与可读性。

• :is() 取参数中最高特异性，:where() 恒为零
• 用 :where() 做可覆盖的基线样式
• DevTools 与工具链的特异性调试

:is() 的特异性取参数列表中的最高值，:where() 的特异性恒为 0，二者都接受复杂参数列表，但 :is() 保留参数的最高特异性，:where() 完全让位给后续规则。工程价值：用 :where() 编写天然可覆盖的基线与重置样式，组件库可把重置、占位样式放入 :where()，让使用者无需提升优先级即可覆盖；用 :is() 合并冗余选择器，保持特异性可预期。调试方面：DevTools 的 Styles 面板显示每条规则的特异性，可定位覆盖失败点；工具链上用 stylelint 的规则限制最大特异性，必要时用 @layer 进一步划分优先级来源。

考察 :is() 与 :where() 的优先级语义和工程应用：:where() 零特异性便于覆盖，:is() 取最高特异性用于合并；结合 DevTools 与 lint 规则可系统化治理特异性问题。

• 弹出层打开时的焦点移动与关闭后焦点恢复
• 可访问性陷阱：读屏语义、焦点逃逸、自动聚焦
• 特性检测与降级

auto 模式 Popover 打开时，浏览器会把焦点移到弹出层内第一个可聚焦元素，关闭后焦点恢复到触发元素；但规范对首个可聚焦元素的选取与复杂内容（含多个控件、表单）的焦点管理并不完备。常见可访问性陷阱：弹出层内无聚焦元素时焦点行为不确定；背景可聚焦元素未 inert，Tab 可能逃逸到背景；纯装饰内容被读屏读出。因此需：为弹出层补充 role 语义与 aria-expanded 关联触发元素；对背景加 inert 或用焦点守卫；按内容类型选择初始焦点；用特性检测渐进增强，不支持时回退到 details 或自研浮层。

考察 Popover 的可访问性细节：焦点移动与恢复、背景 inert、语义关联与特性检测降级；正确补齐这些点才能把原生便利转化为真正的无障碍体验，避免焦点迷失。

• selectlist 的结构（button/listbox/option）
• 与 select 的语义和样式差异
• 当前浏览器支持与降级

selectlist 是浏览器提出的可样式化下拉方案：结构上由 selectlist 根元素、button（触发器，显示当前值）、listbox（弹出列表）与 option 组成，允许开发者像普通元素一样定制外观，同时保留原生下拉的语义与键盘交互（方向键选择与 Enter 确认）。相比原生 select，selectlist 可完全定制触发器与列表样式，但仍保持选择语义；相比完全自研组件，它内置弹出层、焦点管理与无障碍关系，减少大量 JS。当前状态：该方案仍处于实验或推进阶段，生产使用需降级：用原生 select 作为基础交互，检测到支持时渐进增强为定制外观，并保证键盘与读屏在两种形态下一致。

考察可定制下拉原生方案的现状：selectlist 提供结构与内置交互，解决 select 难样式化问题，但支持未普及，工程上需以原生 select 降级并渐进增强，兼顾键盘与读屏。

• text-rendering 的优化模式（optimizeLegibility 等）
• font-kerning 控制字距微调
• font-feature-settings 开关 OpenType 特性

三者处理不同层级的排版细节。text-rendering 是渲染引擎级的性能与质量开关：optimizeLegibility 启用精细连字。font-kerning 单独控制字距微调：auto 依据字体 kerning 数据微调字符间距，none 关闭。font-feature-settings 是 OpenType 特性的底层开关：liga 标准连字、dlig 自由连字、tnum 等宽数字等。现代实践优先用 font-kerning: normal 与 font-variant-numeric: tabular-nums 等高阶属性，font-feature-settings 仅作底层兜底。

考察排版属性分层：text-rendering 控制渲染优化策略，font-kerning 控制字距，font-feature-settings 开关 OpenType 特性；理解职责才能正确组合，且应优先使用语义化高阶属性。

• font-synthesis 的 none/weight/style/small-caps 取值
• 伪粗体与伪斜体的合成机制
• 字体缺失时的渲染质量与回退

当请求的字重或样式在字体中不存在时，浏览器会合成：伪粗体由字形拉伸加粗生成，伪斜体将字形倾斜变换得到。font-synthesis 控制是否允许这类合成：none 禁止一切合成，weight 只允许伪粗体，style 只允许伪斜体，small-caps 控制小型大写字母合成，也可组合声明。关闭合成后，浏览器会回退到系统其他字体或保持原样式，可能造成平台差异。取舍：伪粗体与伪斜体虽然保证有粗有斜，但质量低——伪粗体笔画叠加不均匀、伪斜体变形生硬且行高不稳，对 CJK 更明显；工程上更优做法是选用包含完整字重与样式的字体集，设置 font-synthesis: none 强制使用真实字形。

考察字体合成的机制与取舍：font-synthesis 控制伪粗伪斜开关，合成保底但质量差；高质量排版应提供真实字重并关闭合成，理解缺失时的回退路径，兼顾平台差异。

• system-ui 等系统字体栈的语义
• local() 引用本机字体的机制与坑
• 跨平台一致性风险与缓解

system-ui 字体族让浏览器按平台默认 UI 字体渲染，-apple-system 与 BlinkMacSystemFont 是厂商私有别名；系统字体栈加载快、零网络成本，适合正文与 UI 文本，但不同系统字体不同，字形度量、行高与风格存在差异。@font-face 的 local() 直接引用用户本机已安装字体，可避免下载，但混用时若本机字体版本过旧或缺失会悄悄回退，且无法跨设备保证可用。工程取舍：关键品牌文本用 Web 字体保证一致性，正文可用系统栈提升性能；统一 line-height、font-size-adjust 等度量修正缓解差异，并按平台顺序声明字体列表。

考察字体来源的工程权衡：系统栈性能好但跨平台不一致，local() 省流量但不可控；需按文本角色混用，并通过度量修正与平台测试矩阵控制一致性，确保关键场景一致。

• 字体度量覆盖属性的作用
• size-adjust 的缩放能力
• 与 font-display 配合防 CLS

Web 字体未加载而使用备用字体时，度量差异会造成行高突变与 CLS。@font-face 提供度量覆盖：ascent-override、descent-override、line-gap-override 以百分比覆盖上升、下降与行距度量，使备用字体与目标字体的行盒度量对齐；size-adjust 按百分比缩放字形渲染尺寸。工程做法：先按基准字体计算目标度量，把三个 override 与 size-adjust 同步写到 Web 字体与备用字体的 @font-face 上；此技术常配合 font-display 与 preload 使用，降低字体加载期 CLS。

考察字体度量对齐技术：ascent/descent/line-gap-override 统一行盒度量，size-adjust 统一字形尺寸，与 font-display 配合可将字体交换时的布局偏移降到最低，尤其适合标题按钮等场景。

• font-optical-sizing 的 auto/none 取值
• opsz 轴随字号调整笔画细节
• 小字号对比度增强与可读性

font-optical-sizing 控制是否根据字号自动调整光学尺寸：auto 时浏览器依据元素 font-size 设置 opsz 轴的值，none 则固定使用默认光学尺寸。在可变字体中，opsz 轴让字形按光学尺寸优化：小字号时加粗笔画、增大 x-height 与字距以增强对比度与可读性，大字号时细化笔画细节、收紧间距。响应式排版中，标题与正文字号差异大，开启 font-optical-sizing: auto 可让同一字体在不同字号下自动呈现更合适的笔画粗细与字面形态。使用前提是字体提供 opsz 轴，否则该属性不产生效果；旧浏览器不支持时回退到默认渲染，不影响可用性。

考察光学尺寸轴的排版机制：font-optical-sizing 按字号自动映射 opsz 轴，小字号增强笔画对比度、大字号细化细节，是可变字体响应式排版的重要能力，需字体支持。

• @property 的 syntax/inherits/initial-value
• 类型化变量的计算与动画
• 设计令牌的类型约束与工具链

@property 规则声明自定义属性的类型语义：以 syntax 声明类型（如 length）、inherits 声明继承性、initial-value 声明初始值；注册后自定义属性从字符串升级为类型化属性，可参与 calc 计算、transition 插值与关键帧动画。在设计令牌体系中的价值：类型约束（颜色、长度、数字等）让令牌值在声明期可校验，减少非法值；令牌可被动画化；提供初始值语义，未赋值时不致失效；工具链可按 syntax 生成文档与校验。演进方向是 CSS 变量从纯替换到类型化，形成更完整的令牌基础设施，但需注意注册后初始值继承行为与浏览器兼容。

考察 @property 对自定义属性的类型化升级：syntax 声明使变量可计算、可动画、可校验，推动 design token 从字符串约定走向类型化、可验证的工程体系，并提升工具链支持。

• close 与 cancel 的触发时机与 preventDefault 差异
• Esc 关闭与 cancel 的关系
• form method="dialog" 与 returnValue

cancel 事件在用户按 Esc 请求关闭模态对话框时触发，且可 preventDefault 取消关闭；close 事件在对话框真正关闭后触发，不可取消，此时 dialog.returnValue 保存返回值。Esc 关闭流程：按 Esc 触发 cancel，未取消则关闭并触发 close。form method="dialog" 让表单提交时直接关闭父级对话框，并把提交按钮的 value 写入 returnValue，父页面监听 close 读取即可获知结果。工程上常用该方法实现确认框与表单弹窗的取值回传，注意 returnValue 默认值为空字符串，需统一读取与校验。

考察 dialog 事件模型与取值回传：cancel 可阻止、close 不可阻止，form method="dialog" 把提交值写入 returnValue；掌握该流程即可零 JS 状态地完成弹窗结果传递。

• COLRv1 彩色字体的多层调色板
• @font-palette-values 覆盖调色板
• font-palette 选择与主题切换

COLRv1 是新一代彩色字体格式，字形由多个颜色层构成，且每个字体可内置多套调色板。CSS Fonts Level 4 提供 @font-palette-values 规则重定义调色板：声明 font-family、base-palette 与 override-colors 覆盖指定颜色，再用 font-palette 把命名调色板应用到元素，即可不改字体文件换一套颜色。工程价值：彩色表情、图标、品牌字体可通过同一字体文件按主题换色；调色板与设计令牌联动可实现运行时主题切换，且文字仍可复制、可无障碍读取。注意 COLRv1 支持需检测，回退时用单色字体或图标系统。

考察彩色字体的主题化能力：@font-palette-values 覆盖 COLRv1 调色板、font-palette 选择应用，让彩色字形按品牌与暗色模式换色，兼顾矢量清晰与文本语义，并做好兼容回退。

• load() 主动加载指定字体
• check() 查询字体是否可用
• ready 与字体事件编排

Font Loading API 通过 document.fonts 暴露字体加载编排能力：load(font, text) 主动请求指定字体并返回 Promise，适合预加载首屏关键文本所用字体；check(font, text) 同步查询字体是否已可用，用于分支判断；document.fonts.ready 在文档所有字体加载完成或失败后 resolve，适合等待字体就绪再执行依赖字形度量的布局。工程应用：首屏用 load() 预取关键字体子集，用 ready 后重测文本宽度，修正 canvas 与图表测量；监听 loadingdone 做回退与上报。

考察 Font Loading API 的三类接口：load 主动加载、check 查询状态、ready 等待全部完成；正确编排可在首屏预取关键字体、避免缺字并修正依赖字体的测量，提升渲染稳定性。

• 字体文件 immutable 长缓存的收益
• 内容哈希或版本号命名
• 更新与回退的工程策略

字体文件通常体积大且变动少，适合长期缓存：服务器对字体响应设置 Cache-Control: public, max-age=31536000, immutable，让浏览器与 CDN 长期复用，减少重复下载、加快二次访问。但长缓存与更新冲突：字体内容更新而 URL 不变时，客户端仍命中旧缓存。因此采用内容寻址命名：构建时对字体内容计算哈希，哈希变化即生成新 URL，配合 immutable 实现内容不变永远缓存、内容更新自然换新。工程策略：更新时保留旧版本数天供回退；注意 preload 与 @font-face 的 URL 必须与最终文件名一致。

考察字体缓存策略：immutable 长缓存提升性能，哈希版本化命名解决长缓存与更新的矛盾；理解内容寻址命名与 CDN 协作是前端资源工程的基础能力，避免缓存错位。