第 6 章用户体验

覆盖光标、命中区、复选框、背景弱化、滚动提示和图片对比控件；用渲染探针、值处理轨迹和渐进增强发布门完成独立复核。

学习目标

能说明“第 6 章用户体验”如何覆盖光标、命中区、复选框、背景弱化、滚动提示和图片对比控件，并明确2015原书技巧、现行规范事实与现代替代之间的时间边界
能先预测“怎样让视觉提示、命中区域、焦点、原生语义和模态状态保持一致，并覆盖键盘与触摸？”的计算值或绘制结果，再沿DOM、声明、层叠、计算、布局与绘制逐阶段核对
能注入“用display:none隐藏原生复选框并用无语义span替代，键盘和读屏无法切换”，用“可点击区域不小于产品基线，原生控件语义保留，焦点可见，背景不可误操作，滚动状态可感知”决定接受、修正或拒绝样式发布

为什么从这个CSS问题开始

用户体验页要求视觉外观服从交互合同；CSS可以扩大或美化控件，但不能删除原生状态和输入路径。 “第 6 章用户体验”使用的贯穿任务是：实现设置弹层，含自定义复选框、扩大命中按钮、背景弱化、滚动列表和图片前后对比。操作前先预测哪个声明、计算值、布局盒或绘制层会变化，渲染后再补理由不算预测。

本页围绕“怎样让视觉提示、命中区域、焦点、原生语义和模态状态保持一致，并覆盖键盘与触摸？”建立正常、反例与恢复路径。只有“第 6 章用户体验”保持“可点击区域不小于产品基线，原生控件语义保留，焦点可见，背景不可误操作，滚动状态可感知”并交付语义控件、label关系、焦点顺序、命中尺寸、cursor、checked状态、模态背景、滚动边界、键盘触摸和读屏记录。，视觉效果才构成CSS证据。

原版47项技巧、57个目录坐标与现代边界

“第 6 章用户体验”以O'Reilly官方目录核对Lea Verou著、2015年6月、388页、ISBN 9781449372736、八章和47个连续编号技巧；作者出版页确认《CSS Secrets》由O'Reilly于2015年出版，中文版书页核对《CSS揭秘》的中文出版信息。原版47项编号技巧分布在第2至第8章；若把八个章标题和第一章两个方法主题一起计算，公开目录共有57个坐标。

“第 6 章用户体验”只依据官方目录限定范围，不逐段改写原文；解释、示例、交互、练习与答案均为独立教学重写。47是编号技巧分母，57是完整目录坐标分母，两者不能混称。

“第 6 章用户体验”另以技术核对 1、技术核对 2、技术核对 3、技术核对 4核对现行技术事实。2015年的技巧保留为历史方案；现行CSS规范用于解释仍成立的层叠、背景、几何、排印、布局与动画机制，或标出现代原生替代。现行语法不能倒填为原书内容，草案特性也不能冒充跨浏览器基线。

公开目录坐标与CSS机制

第6章用户体验

公开坐标 1/8。 在“第 6 章用户体验”的坐标1中，第6章用户体验用于封闭本章问题类型、规范机制与回退证据；先固定DOM和浏览器基线，再用目录坐标、编号技巧、相邻章节和发布结论复核，出现跨章技巧脱离原始约束拼贴时不得提交。

29 选用合适的鼠标光标

公开坐标 2/8。 29 选用合适的鼠标光标进入“第 6 章用户体验”后要回答第2张声明卡：它怎样同步语义控件、视觉状态、焦点、命中区和模态交互、改变哪个计算值或绘制层、由哪些DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试证明，并如何排除自定义外观删除原生输入路径。

30 扩大可点击区域

公开坐标 3/8。 围绕“怎样让视觉提示、命中区域、焦点、原生语义和模态状态保持一致，并覆盖键盘与触摸？”，条目3把30 扩大可点击区域解释为同步语义控件、视觉状态、焦点、命中区和模态交互；复核者先读取DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试再判断截图，不能接受自定义外观删除原生输入路径。

31 自定义复选框

公开坐标 4/8。 对“第 6 章用户体验”而言，31 自定义复选框的最小合同是同步语义控件、视觉状态、焦点、命中区和模态交互，第4次检查保存DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试；若产生自定义外观删除原生输入路径，就回到声明、层叠或布局上游。

32 通过阴影来弱化背景

公开坐标 5/8。 第5个公开目录坐标32 通过阴影来弱化背景服务于覆盖光标、命中区、复选框、背景弱化、滚动提示和图片对比控件，需要以DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试呈现同步语义控件、视觉状态、焦点、命中区和模态交互；自定义外观删除原生输入路径会破坏“可点击区域不小于产品基线，原生控件语义保留，焦点可见，背景不可误操作，滚动状态可感知”。

33 通过模糊来弱化背景

公开坐标 6/8。 学习者在“第 6 章用户体验”中讨论33 通过模糊来弱化背景前预测同步语义控件、视觉状态、焦点、命中区和模态交互会改变哪项值或像素状态，再读取DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试；观察到自定义外观删除原生输入路径时保留失败轨迹。

34 滚动提示

公开坐标 7/8。 实现设置弹层，含自定义复选框、扩大命中按钮、背景弱化、滚动列表和图片前后对比。在条目7处理34 滚动提示时，要把同步语义控件、视觉状态、焦点、命中区和模态交互写进样式合同，把DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试写进运行记录，并把自定义外观删除原生输入路径写进反例。

35 交互式的图片对比控件

公开坐标 8/8。 “可点击区域不小于产品基线，原生控件语义保留，焦点可见，背景不可误操作，滚动状态可感知”限定了35 交互式的图片对比控件的适用域：坐标8只能通过同步语义控件、视觉状态、焦点、命中区和模态交互推进，由DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试复核，而自定义外观删除原生输入路径构成拒绝条件。

先预测，再操作三个CSS实验

分步1 / 3

1. 声明与渲染探针

切换“扩大命中区、自定义复选框、滚动提示”并一次只调整一个控制量，核对声明、回退和实际绘制怎样连接“第 6 章用户体验”。

声明与渲染探针

改一个量，观察真实绘制结果

怎样让视觉提示、命中区域、焦点、原生语义和模态状态保持一致，并覆盖键盘与触摸？

单一控制量：50padding: .75rem 1rem

基线：文本仍可操作

视觉尺寸和实际命中区同时可测

扩大命中区

本页目录坐标：第6章用户体验、29 选用合适的鼠标光标、30 扩大可点击区域、31 自定义复选框、32 通过阴影来弱化背景、33 通过模糊来弱化背景、34 滚动提示、35 交互式的图片对比控件

第 6 章用户体验的可重放CSS协议

阶段	CSS动作	必留证据	拒绝条件
保留语义焦点和命中区	在“第 6 章用户体验”执行保留语义焦点和命中区，一次只改变一个声明或环境条件	DOM、浏览器基线、视口、字体与初始样式	语义或依赖不可追溯
同步模态与背景状态	在“第 6 章用户体验”执行同步模态与背景状态，一次只改变一个声明或环境条件	层叠来源、computed style、布局盒与绘制截图	用display:none隐藏原生复选框并用无语义span替代，键盘和读屏无法切换
验证滚动触摸和图片对比	在“第 6 章用户体验”执行验证滚动触摸和图片对比，一次只改变一个声明或环境条件	回退、输入、偏好、性能与现代边界记录	无法重放或恢复基础样式

unit: "csec-unit-06"
question: "怎样让视觉提示、命中区域、焦点、原生语义和模态状态保持一致，并覆盖键盘与触摸？"
scenario: "实现设置弹层，含自定义复选框、扩大命中按钮、背景弱化、滚动列表和图片前后对比。"
recipes: ["扩大命中区", "自定义复选框", "滚动提示"]
stages: ["保留语义焦点和命中区", "同步模态与背景状态", "验证滚动触摸和图片对比"]
invariant: "可点击区域不小于产品基线，原生控件语义保留，焦点可见，背景不可误操作，滚动状态可感知"
fault: "用display:none隐藏原生复选框并用无语义span替代，键盘和读屏无法切换"
evidence: "语义控件、label关系、焦点顺序、命中尺寸、cursor、checked状态、模态背景、滚动边界、键盘触摸和读屏记录。"
reset: restore_recipe_value_trace_step_gates_and_artifact

该协议要求“第 6 章用户体验”在相同DOM、浏览器、视口、字体、输入和用户偏好下重放。重置后若技巧、控制量、轨迹模式、步骤、发布门或证据显示没有回到基线，交互状态已经污染比较，不能作为CSS证据。

本页回顾

掌握“第 6 章用户体验”不是背诵代码片段，而是能围绕“怎样让视觉提示、命中区域、焦点、原生语义和模态状态保持一致，并覆盖键盘与触摸？”重建值处理与绘制路径，并用“可点击区域不小于产品基线，原生控件语义保留，焦点可见，背景不可误操作，滚动状态可感知”拒绝“用display:none隐藏原生复选框并用无语义span替代，键盘和读屏无法切换”。最终交付为语义控件、label关系、焦点顺序、命中尺寸、cursor、checked状态、模态背景、滚动边界、键盘触摸和读屏记录。

练习与答案

练习

问题 1：CSS合同。 “第 6 章用户体验”为什么必须先声明DOM、浏览器基线、视口、字体、输入与用户偏好？

问题 2：目录逐项覆盖。 怎样证明本页公开目录坐标已经进入机制、交互和练习？

“第 6 章用户体验”的第6章用户体验：以“封闭本章问题类型、规范机制与回退证据”解释CSS作用，用“目录坐标、编号技巧、相邻章节和发布结论”提供复核。
“第 6 章用户体验”的29 选用合适的鼠标光标：以“同步语义控件、视觉状态、焦点、命中区和模态交互”解释CSS作用，用“DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试”提供复核。
“第 6 章用户体验”的30 扩大可点击区域：以“同步语义控件、视觉状态、焦点、命中区和模态交互”解释CSS作用，用“DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试”提供复核。
“第 6 章用户体验”的31 自定义复选框：以“同步语义控件、视觉状态、焦点、命中区和模态交互”解释CSS作用，用“DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试”提供复核。
“第 6 章用户体验”的32 通过阴影来弱化背景：以“同步语义控件、视觉状态、焦点、命中区和模态交互”解释CSS作用，用“DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试”提供复核。
“第 6 章用户体验”的33 通过模糊来弱化背景：以“同步语义控件、视觉状态、焦点、命中区和模态交互”解释CSS作用，用“DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试”提供复核。
“第 6 章用户体验”的34 滚动提示：以“同步语义控件、视觉状态、焦点、命中区和模态交互”解释CSS作用，用“DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试”提供复核。
“第 6 章用户体验”的35 交互式的图片对比控件：以“同步语义控件、视觉状态、焦点、命中区和模态交互”解释CSS作用，用“DOM语义、焦点顺序、命中尺寸、checked、滚动和键盘触摸测试”提供复核。

问题 3：反例恢复。 怎样证明“用display:none隐藏原生复选框并用无语义span替代，键盘和读屏无法切换”已经被修正？

为“第 6 章用户体验”复用同一DOM、浏览器、视口、字体、输入和偏好，重放正常路径后只注入“用display:none隐藏原生复选框并用无语义span替代，键盘和读屏无法切换”；记录最早偏离点，撤销故障并再次运行。只有渲染探针、值处理轨迹、发布门和语义控件、label关系、焦点顺序、命中尺寸、cursor、checked状态、模态背景、滚动边界、键盘触摸和读屏记录。重新满足“可点击区域不小于产品基线，原生控件语义保留，焦点可见，背景不可误操作，滚动状态可感知”，修正才可提交。

名词解释

本章出现的专业名词，用大白话再讲一遍。

用户体验: 对应“第6章用户体验”；在“第 6 章用户体验”中用于封闭本章问题类型、规范机制与回退证据，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
选用合适的鼠标光标: 对应“29 选用合适的鼠标光标”；在“第 6 章用户体验”中用于同步语义控件、视觉状态、焦点、命中区和模态交互，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
扩大可点击区域: 对应“30 扩大可点击区域”；在“第 6 章用户体验”中用于同步语义控件、视觉状态、焦点、命中区和模态交互，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
自定义复选框: 对应“31 自定义复选框”；在“第 6 章用户体验”中用于同步语义控件、视觉状态、焦点、命中区和模态交互，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
通过阴影来弱化背景: 对应“32 通过阴影来弱化背景”；在“第 6 章用户体验”中用于同步语义控件、视觉状态、焦点、命中区和模态交互，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
通过模糊来弱化背景: 对应“33 通过模糊来弱化背景”；在“第 6 章用户体验”中用于同步语义控件、视觉状态、焦点、命中区和模态交互，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
滚动提示: 对应“34 滚动提示”；在“第 6 章用户体验”中用于同步语义控件、视觉状态、焦点、命中区和模态交互，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
交互式的图片对比控件: 对应“35 交互式的图片对比控件”；在“第 6 章用户体验”中用于同步语义控件、视觉状态、焦点、命中区和模态交互，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。

第 6 章 用户体验

学习目标

为什么从这个CSS问题开始

原版47项技巧、57个目录坐标与现代边界

公开目录坐标与CSS机制

第6章 用户体验

29 选用合适的鼠标光标

30 扩大可点击区域

31 自定义复选框

32 通过阴影来弱化背景

33 通过模糊来弱化背景

34 滚动提示

35 交互式的图片对比控件

先预测，再操作三个CSS实验

1. 声明与渲染探针

改一个量，观察真实绘制结果

第 6 章 用户体验的可重放CSS协议

本页回顾

练习与答案

练习

名词解释

名词解释

讨论

第 6 章用户体验

第6章用户体验

第 6 章用户体验的可重放CSS协议