CSS基础用户界面模块4级

1. 引言

本模块描述了 CSS 属性，使作者能够为与用户界面相关的属性和值设置样式。

CSS1 第 2.1 节 [CSS1] 和 CSS2 第 18 章 [CSS21] 引入了若干与用户界面相关的属性和值。CSS3 用户界面（2000 年 2 月 16 日） 引入了若干新的与用户界面相关的特性。

[CSS-UI-3] 随后被引入，用于整合、扩展并取代上述特性。 本规范继续该工作，并取代 [CSS-UI-3]。

1.1. 目的

本规范的目的如下：

• 扩展 [CSS21] 和 [CSS-UI-3] 中的用户界面特性
• 提供额外的 CSS 机制，以增强或替代 HTML 中的其他动态呈现相关特性
• 引入方向性导航属性，以辅助构建使用方向性导航模型的用户界面

2. 模块交互

本文档定义了早期规范中不存在的新特性。 此外，它取代并超越了 [CSS-UI-3]， 而 [CSS-UI-3] 本身取代并超越了以下内容：

• 第 18.1 节、第 18.4 节， 以及在 附录 E 中定义的轮廓堆叠信息，属于 Cascading Style Sheets Level 2 Revision 1 [CSS21]
• CSS3 用户界面（2000 年 2 月 16 日） [CSS-UI-3]

注： box-sizing 属性之前定义在本节中， 现已移至 CSS Sizing 3 § 3.3 盒子尺寸边缘：box-sizing 属性。

注： text-overflow 属性之前定义在本节中， 现已移至 CSS Overflow 3 § 5.1 溢出省略：text-overflow 属性。

2.1. 值定义

本规范遵循 CSS 属性定义约定，来自 [CSS21]，并使用 CSS 值定义语法 来自 [CSS-VALUES-3]。 本规范未定义的值类型，在 CSS Values & Units [CSS-VALUES-3] 中定义。 与其他 CSS 模块结合可能会扩展这些值类型的定义。

除属性特定值外， 本规范定义的所有属性 也接受 CSS-wide 关键字 作为其属性值。 为了可读性，这些关键字未重复列出。

3. 轮廓属性

有时，样式表作者可能希望在视觉对象周围（如按钮、活动表单字段、图像映射等）创建轮廓，以使其突出显示。轮廓与边框的区别如下：

1. 轮廓不占用空间。
2. 轮廓计入元素的 墨水溢出区域。
3. 轮廓可能是非矩形的。
4. 用户代理通常在元素的 :focus-visible 状态下渲染轮廓。

轮廓属性控制这些动态轮廓的样式。

这些轮廓的渲染堆叠顺序明确由实现决定，以便在各个平台上提供更好的用户体验。 这取代了 CSS 2.1 附录 E [CSS21] 中定义的轮廓堆叠规则。

键盘用户，尤其是可能无法以其他方式与页面交互的残障人士， 依赖于元素在 :focus-visible 状态下轮廓的可见性， 因此作者不得在这些元素上使轮廓不可见， 除非提供了替代的高亮机制。

应用变换到轮廓的渲染行为明确未定义。

3.1. 轮廓简写属性：outline 属性

outline 属性是简写属性， 设置 outline-style、outline-width 和 outline-color 三个属性。 在存在歧义的情况下，如果仅指定了 auto 值， 或 auto 与 <'outline-width'> 值一起指定， 但未明确指定 <'outline-style'> 或 <'outline-color'> 值， 则 outline-style 和 outline-color 都被设置为 auto。

注： 简写属性故意省略了 outline-offset 属性， 因为该属性决定的是轮廓的位置而非外观， 可以独立级联，并且考虑到向后兼容性。

使用轮廓属性创建的轮廓是“覆盖”在盒子上绘制的， 即轮廓总是在顶部， 不影响盒子或其他盒子的大小或位置。 因此，显示或隐藏轮廓不会导致重排（reflow）。

轮廓可能是非矩形的。 例如，如果元素跨越多行， 轮廓应是包围所有元素盒子的轮廓或最小轮廓集合。

轮廓的各部分应完全相连，而不是在某些边缘开放（如行内元素在换行时的边框）。

轮廓的各部分不必是矩形。 轮廓沿 边框边缘 绘制时， 应遵循 border-radius 曲线， 以及 corner-shape。

轮廓的位置可能会受子元素盒子的影响。

绘制轮廓的尺寸计入元素的 墨水溢出区域。

用户代理应使用适当的算法确定轮廓，以向用户传达焦点概念。

注： 本规范未定义轮廓的精确位置或形状，但通常绘制在边框盒的外侧。

注： 轮廓在各边相同。 与边框不同， 没有 outline-top、outline-left 等属性。

本规范未定义如何绘制多个重叠轮廓，也未定义如何为部分被其他元素遮挡的盒子绘制轮廓。

button { outline: thick solid }

图形用户界面可使用元素周围的轮廓告知用户页面上哪个元素获得了焦点。 这些轮廓是对边框的补充， 打开或关闭轮廓不会引起文档重排。 焦点是文档中用户交互的对象（例如输入文本或选择按钮）。

:focus-visible  { outline: thick solid black }
:active { outline: thick solid red }

注： 由于轮廓不影响格式（即盒模型中不为其保留空间）， 它可能会与页面上的其他元素重叠。

3.2. 轮廓厚度：outline-width 属性

outline-width 属性接受与 border-width 相同的值（CSS Backgrounds 3 § 3.3 线条厚度：border-width 属性）， 含义相同。

3.3. 轮廓样式：outline-style 属性

<outline-line-style> 接受与 <line-style> 相同的值（CSS Backgrounds 3 § 3.2 线条样式：border-style 属性）， 含义相同， 但 hidden 不是合法的轮廓样式。 此外， outline-style 属性 可以使用 auto 值。

auto 值允许用户代理 渲染自定义轮廓样式， 通常为平台的用户界面默认样式， 或可能是 CSS 无法详细描述的更丰富样式， 例如具有半透明外像素并呈现发光效果的圆角轮廓。 用户代理可以通过 outline-color 属性让作者影响 auto 样式轮廓的渲染， 但本规范未定义渲染会如何受到影响（如果有）。 当 outline-style 为 auto 时， outline-width 属性将被忽略。 用户代理可将 auto 视为 solid。

3.4. 轮廓颜色：outline-color 属性

outline-color 属性 接受 <'border-top-color'> 的所有值， 以及以下关键字：

auto

当 outline-style 为 auto 时， outline-color: auto 计算结果为 auto，表示 强调色。

否则，outline-color: auto 计算结果为 currentColor。

关于 <color> 值的计算值，请参见 CSS Color 4 § 14. 解析 <color> 值，以及 CSS Images 4 § 4 一维图像值：<image-1D> 类型和 stripes() 表示法 用于 <image-1D> 值。

3.5. 轮廓偏移：outline-offset 属性

默认情况下，轮廓从 边框边缘 外侧开始绘制。 但是，可以对轮廓进行偏移，使其绘制在 边框边缘 之外。

如果 outline-offset 的计算值不为 0， 则轮廓会从 边框边缘 外延伸该数值。

:focus,:active  { outline-offset: 2px }

负值必须使轮廓收缩到边框盒内。 绘制轮廓形状外部的高度和宽度 不应小于 outline-width 属性计算值的两倍， 以确保即使在较大负值下也能渲染轮廓。 用户代理应在每个维度独立应用此约束。 如果轮廓绘制为多个不相连的形状， 则每个形状应单独应用此约束。

4. 尺寸调整

CSS2.1 提供了一种机制来控制块容器元素上滚动机制（例如滚动条）的显示。 本规范在此基础上增加了控制元素用户可调整大小的机制，以及指定文本溢出行为的能力。

4.1. 调整框大小：resize 属性

resize 属性允许作者指定元素是否可由用户调整大小，以及可沿哪个轴/哪些轴进行调整。

none

用户代理不会在元素上显示调整大小的机制，用户无法直接操作调整元素大小。

both

用户代理提供双向调整大小机制，允许用户同时调整元素的宽度和高度。

horizontal

用户代理提供单向水平调整机制，仅允许用户调整元素宽度。

vertical

用户代理提供单向垂直调整机制，仅允许用户调整元素高度。

block

用户代理提供单向块轴(block-axis)调整机制，仅允许用户调整元素的块方向大小(block size)。

inline

用户代理提供单向行内轴(inline-axis)调整机制，仅允许用户调整元素的行内大小(inline size)。

目前可以使用 overflow 属性控制元素上滚动机制（如果有）的显示，例如 overflow: scroll 与 overflow: hidden 等。 resize 属性的目的是允许控制元素上调整大小机制的外观和功能（例如调整框或控件）。

注意：调整大小机制与滚动机制不同，也与任何 UA 缩放机制无关。滚动机制允许用户确定元素内容显示的部分，而调整大小机制允许用户确定元素的大小。

resize 属性适用于滚动容器元素 scroll containers。 用户代理也可以将其应用于：

• 表示图像或视频的替换元素，例如 img、 video、 picture、 svg、 object或 canvas。
• iframe 元素。

resize 属性对生成内容的效果未定义。实现不应将 resize 属性应用于生成内容。

注意：如果未来实现了 CSSPseudoElement 接口，resize 属性可能会应用于生成内容。

当元素被用户调整大小时，用户代理将设置元素的 width 和 height 属性为用户指示的像素长度值，并在元素的 style attribute DOM 中替换现有声明（如果有），且不使用 !important。

如果元素仅在一个维度上被调整，则仅设置对应属性，而不是同时设置两者。

调整大小的具体方向（例如调整元素左上角还是右下角）可能依赖于多个 CSS 布局因素，包括元素是否绝对定位，是否使用 right 和 bottom 属性定位，元素语言是否为从右向左等。用户代理在决定如何向用户显示调整大小机制时，应考虑 CSS 布局确定的调整方向以及平台约定和限制。

用户代理必须允许用户调整元素大小，唯一的约束是 min-width、max-width、min-height 和 max-height 所施加的约束。

注意：在某些情况下，用户尝试调整元素大小可能会被覆盖或忽略，例如由于 !important 级联声明覆盖了该元素在 DOM 中 style attribute 的 width 和 height 属性。

对元素 resize 属性计算值的更改，不会重置由于用户调整该元素大小而对 style attribute 所做的更改。

iframe,object[type^="text/"],
object[type$="+xml"],object[type="application/xml"]
{
  overflow:auto;
  resize:both;
}

5. 指针设备与键盘

5.1. 指针交互

5.1.1. 光标样式：cursor 属性

此属性指定当光标热点位于元素的 边框边缘 内时，指针设备应显示的光标类型。

注意： 根据 CSS Backgrounds 3 § 4.1 曲率半径：border-radius 属性，边框边缘 会受到 border-radius 的影响。

对于重叠元素，决定光标类型的元素取决于命中测试： 决定光标的元素是从该位置发起点击时将接收事件的元素。

注意： 命中测试的具体细节不在本规范范围内。 命中测试有望在未来的 CSS 或 HTML 修订中定义。

用户代理可能会在本地用户代理控件（例如滚动条、调整大小控件或其他本地 UI 小部件）上忽略 cursor 属性， 例如在某些用户代理特定的表单元素实现中使用的控件。 用户代理也可能忽略 cursor 属性，并显示其选择的光标以指示 UA 用户界面的各种状态， 例如页面无响应时显示忙碌光标，或用户进行文本选择时显示文本光标。

注意： [HTML] 定义了 图像映射的特殊处理，适用于 cursor 属性。

各值的含义如下：

<cursor-image>

<cursor-image> 是 cursor 属性的第一个（可选）组件， 它是基于图像的光标列表。如果用户代理无法处理列表中的第一个光标， 必须尝试处理第二个，依此类推。 如果用户代理无法处理作者定义的任何光标， 必须使用列表末尾的关键字光标。

<cursor-image> 的语法如下：

<cursor-image> = [ <url> | <url-set> ] <number>{2}?

用户代理从 <url> 或 <url-set> 指定的资源中获取光标。 符合规范的用户代理也可以支持 <image>，它是上述类型的超集。

<url-set> 是 image-set() 的受限版本， 其中 <image> 子产生式仅限于 <url>。

用户代理必须支持以下图像文件格式：

• PNG，[PNG] 规范定义
• SVG，[SVG11] 与 [SVG2] 安全静态模式（具有 natural size）
• 任何其他非动画图像格式，用户代理在其他属性（如 background-image）中支持

此外，用户代理应支持以下格式：

• SVG 安全动画模式（具有 natural size）
• 任何其他动画图像格式，用户代理在其他属性（如 background-image）中支持

用户代理还可以支持其他文件格式，包括 SVG（安全静态或动画模式），即使没有 natural size。

注意： CSS 工作组最初打算支持所有 SVG，无论是否有自然尺寸，但由于缺少实现，非自然尺寸 SVG 的支持由强制改为可选。

注意： 多年来，常用桌面浏览器仅支持 .ico 和 .cur 光标文件格式。尽管现在 PNG 和 SVG 已得到广泛支持，为兼容旧内容，仍鼓励支持这些格式。

光标图像的 默认对象大小 由用户代理定义，应基于操作系统典型光标大小。

具体对象大小通过 默认尺寸算法 确定。 如果操作系统无法渲染超过某尺寸的光标，则必须缩小至 OS 支持的尺寸，同时保持 自然宽高比。

可选的 <number> 对给出图像中的 X 和 Y 坐标，即指针位置（热点），以左/上偏移表示。

注意： 本规范未定义各种 <image> 坐标系的建立方式，交由 [CSS4-IMAGES] 定义。

如果省略这些值，则使用图像资源本身定义的自然热点；如果没有，则使用左上角（0 0）。

如果热点坐标超出图像范围，则必须独立限制在图像内。

<cursor-predefined>

必须的 <cursor-predefined> 关键字 指定要使用的预定义光标，或在提供的 <url> 无法使用时使用的 回退 光标。

完整的 <cursor-predefined> 关键字及其含义，请参见 § 5.1.1.1 预定义光标。

:link,:visited {
  cursor: url(example.svg),
    url(hyper.cur),
    url(hyper.png) 2 3,
    pointer
}

5.1.1.1. 预定义光标

<cursor-predefined> 生成式包含了操作系统上常见的多种预定义光标。 其语法为：

<cursor-predefined> = auto | default | none |
                context-menu | help | pointer | progress | wait |
                cell | crosshair | text | vertical-text |
                alias | copy | move | no-drop | not-allowed | grab | grabbing |
                e-resize | n-resize | ne-resize | nw-resize |
                s-resize | se-resize | sw-resize | w-resize |
                ew-resize | ns-resize | nesw-resize | nwse-resize |
                col-resize | row-resize |
                all-scroll |
                zoom-in | zoom-out

<cursor-predefined> 关键字的含义及常见显示如下：

通用光标

auto

用户代理根据当前上下文决定显示哪种光标：auto 在可选文本或可编辑元素上表现为 text，其他情况表现为 default。

default

平台相关的默认光标。通常显示为箭头。

none

不为元素显示光标。

链接和状态光标

context-menu

光标下的对象可使用上下文菜单。通常显示为带有小菜单图标的箭头。

help

光标下的对象可使用帮助。通常显示为问号或气泡图标。

pointer

光标为指针，表示链接。

progress

进度指示器。程序正在处理，但用户仍可与程序交互。通常显示为旋转的沙滩球，或带有时钟/沙漏的箭头。

wait

表示程序繁忙，用户应等待。通常显示为时钟或沙漏。

选择光标

cell

表示可以选择单元格或一组单元格。通常显示为带点的粗十字。

crosshair

简单十字光标（如 "+"）。常用于二维位图选择模式。

text

表示可选文本。通常显示为垂直 I 型光标。用户代理可能在纵向文本上自动显示水平 I 型光标（如 vertical-text）。

vertical-text

表示可选纵向文本。通常显示为水平 I 型光标。

拖放光标

alias

表示要创建别名或快捷方式。通常显示为带小弯箭头的箭头。

copy

表示要复制某物。通常显示为带小加号的箭头。

move

表示要移动某物。

no-drop

表示拖动项不能放置在当前光标位置。通常显示为带圆圈加斜杠的手或指针。

not-allowed

表示请求的操作不会执行。通常显示为带斜杠的圆圈。

grab

表示可以抓取（拖动以移动）。通常显示为张开的手背。

grabbing

表示正在抓取（拖动以移动）。通常显示为手背闭合的手指。

调整大小和滚动光标

e-resize

n-resize

ne-resize

nw-resize

s-resize

se-resize

sw-resize

w-resize

表示应移动某条边。例如，当从盒子的东南角开始移动时，使用 se-resize 光标。

ew-resize

ns-resize

nesw-resize

nwse-resize

表示双向调整大小的光标。

col-resize

表示该项/列可以水平调整大小。 通常显示为左右箭头，中间由一条垂直线分隔。

row-resize

表示该项/行可以垂直调整大小。 通常显示为上下箭头，中间由一条水平线分隔。

all-scroll

表示内容可以向任意方向滚动。 通常显示为上下左右箭头，中间带一个点。

缩放光标

zoom-in

zoom-out

表示内容可放大或缩小，通常显示为带 "+" 或 "-" 的放大镜，分别对应 zoom-in 和 zoom-out。

5.1.1.2. 画布的光标

文档的 canvas 是文档渲染的无限表面 [CSS21]。 由于没有元素对应画布， 为了允许在未覆盖任何元素时对光标进行样式设置， 画布光标重用根元素的光标。 但是，如果根元素没有生成盒子 （例如，根元素的 display: none）， 则画布光标为平台相关的默认光标。

注意： 元素可能不可见 但仍生成盒子。例如， 如果元素设置了 visibility: hidden 而非 display: none， 那么它及其子元素仍会生成盒子，其光标用于画布。

5.2. 插入符号（Caret）

插入符号（简称“caret”） 是在可接受文本输入的元素中，指示文本插入点的可见标记， 用户可以在此插入文本（或其他内容）。 caret-color、caret-animation 和 caret-shape 属性 允许作者在一定程度上控制 插入符号 的外观。

如果文本或元素是 可接受文本输入， 则意味着它们是 可编辑元素 或其后代， 不包括 user-select 的 used value 为 none 的元素， 以及 contentEditable 属性设置为 false 的 HTML 元素子树。

某些用户代理还有其他界面机制，外观类似，也有时被称为“caret”。 例如，某些 UA 可以显示“导航插入符号”， 功能类似于 插入符号，但可以在不可编辑文本中移动。 caret-color、caret-animation 和 caret-shape 属性 不适用于这些机制或不可编辑元素，但 UA 可以选择考虑它们。 是否应用及应用程度由 UA 决定。

注意： 当 cursor 属性为 auto 时悬停在文本上显示的光标， 或悬停在 cursor 属性为 text 或 vertical-text 的元素上， 虽然有时类似 caret，但它是光标，而非插入符号。

5.2.1. 插入符号颜色：caret-color 属性

此属性控制 插入符号 的颜色。

auto

UA 应使用 currentColor。 UA 可自动调整 插入符号 的颜色，以确保与周围内容有良好可见性和对比度， 可能基于 currentColor、背景、阴影等。

注意： 当 caret-shape 为 block 时， 最佳的可见性和对比度通常通过 UA 决定的非 currentColor 颜色实现。

<color>

插入符号使用指定颜色显示。

5.2.2. 插入符号动画：caret-animation

在大多数平台和 UA 中，插入符号 会闪烁。 此属性允许作者控制 插入符号 的动画方式。

auto

UA 决定插入符号是否以及如何动画，以及动画速度。 应遵循平台约定和设置，并可根据上下文进行调整。

注意： 通常呈现为闪烁的插入符号。 有些环境中也可能使用渐隐渐显而非闪烁的变体。

manual

UA 不应对 插入符号 进行动画。

注意： 此设置仅针对 UA 驱动的插入符号动画。 使用 CSS 动画更改 插入符号 颜色时仍可正常应用。

注意： 建议作者在使用 插入符号 的自定义动画时， 通过 caret-animation: manual 停止闪烁或渐隐， 以避免 UA 动画与 CSS 动画冲突。

注意： 参见 指南 2.3：避免导致癫痫发作的设计 [WCAG20]。

/* 防止插入符号闪烁 */
:read-write { caret-animation: manual !important; }

/* 防止 caret-color 变化，包括动画 */
:read-write { caret-color: auto !important; } 

没有可编辑用户样式表的 UA 应提供禁用 闪烁、 闪光 和动画插入符号的设置。 有可编辑用户样式表的 UA 也可提供该设置。 参见 [WCAG] 指南 2.2 和 指南 2.3 了解详情。

textarea {
  caret-animation: manual;
  caret-color: blue;
  animation: caret-alternate 2s step-end infinite;
}
@keyframes caret-alternate {
  50% { caret-color: red; }
}

5.2.3. 插入符号形状：caret-shape

此属性允许作者指定 插入符号 的期望形状。

在此定义的上下文中，字符应理解为 扩展字形簇，如 [UAX29] 中定义，可见字符 指具有非零前进度量的字符。

auto

UA 决定 插入符号 的形状。 它应符合平台约定，并可根据上下文进行调整。 例如，当用户按键盘的 insert 键切换插入模式和覆盖模式时， UA 可能在插入模式下显示 bar 形插入符号， 在覆盖模式下显示 block 形插入符号。

bar

UA 必须将 插入符号 渲染为位于插入点的细竖线。 它位于字符之间、字符之前或字符之后，而不是覆盖字符。 它应垂直于行内进程方向，但 UA 在插入斜体或倾斜文本时可选择渲染为倾斜。

block

UA 必须将 插入符号 渲染为覆盖插入点后第一个 可见字符 的矩形。 如果插入点之后没有可见字符，则 UA 必须在最后一个可见字符之后渲染插入符号。 UA 在插入斜体或倾斜文本时可选择渲染为倾斜矩形。

underscore

UA 必须将 插入符号 渲染为位于插入点后第一个 可见字符 下方的细线（参见 under 定义）。 如果插入点之后没有可见字符，则 UA 必须在最后一个可见字符之后渲染插入符号。

对于 block 和 underscore 插入符号， 宽度应为插入点之后第一个 可见字符 的前进度量， 如果没有下一个可见字符或无法确定，则使用 1ch。

在确定 插入符号 的方向和外观时， UA 必须考虑 书写模式 并应用变换。 如果编辑的文本位于路径上，例如使用 SVG textPath， UA 也应考虑该情况。

对于 bar 和 underscore 插入符号— 以及类似 auto 的渲染—其厚度由用户代理决定。 当可行时，用户代理应选择确保插入符号可见的厚度，即使通过变换等方式缩放。

如果行尾空间不足以显示插入符号， UA 仍应显示它， 即使需要超出 可滚动溢出区域； UA 可根据需要限制并裁剪。 UA 也可为了显示插入符号而在视觉上重新定位它，使其在 滚动视口内可见。

插入符号的堆叠位置在以下约束内未定义：

• 插入符号不得被元素背景遮挡。
• UA 必须渲染 block 插入符号时， 不遮挡被其覆盖的字符。

.console {
  caret-shape: underscore;
  background: black;
  color: white;
  font-family: monospace;
  padding: 1ex;
}

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $  

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $ 

5.2.4. 插入符号简写：caret

此属性是用于同时设置 caret-color、caret-animation 和 caret-shape 的简写。 省略的值将使用初始值。

#old-screen { caret: block manual; animation: old-caret 2s infinite; /*屏幕样式省略 */ } @keyframes old-caret {
from, 50% { caret-color: green; } 75%, to { caret-color: transparent; } } 

5.3. 键盘控制

5.3.1. 方向性焦点导航：nav-up、nav-right、nav-down、nav-left 属性

auto

用户代理自动决定在方向性导航输入时焦点应移动到哪个元素。

<id>

<id> 值是一个 ID 选择器 [SELECT]。 当响应与该属性对应的方向性导航输入时， 焦点会移动到文档树中第一个匹配该选择器的元素。

如果该 ID 指向当前已聚焦元素， 则相应的方向导航输入将被忽略——无需重新聚焦同一元素。

如果没有元素匹配选择器， 用户代理将自动决定焦点移动到哪个元素。

如果焦点移动到一个原本不可聚焦的元素， 该元素只因方向性导航而临时可聚焦， 且在此期间 :focus 伪类会匹配该元素。

注: 对于原本不可聚焦的元素，还曾考虑过其他选项， 包括将焦点移动到文档树中下一个可聚焦元素（包括该不可聚焦元素的子孙元素）。 欢迎提供关于实现经验和作者使用方向性导航属性的反馈。

<target-name>

<target-name> 参数表示焦点导航的目标框架。 它是一个 <string>， 且不能以下划线 "_" 开头。 错误处理：若以 "_" 开头，则 "_parent" 导航到父框架， "_root" 被视为 root， 其他值若存在对应名称的框架，则导航至该框架。 若指定框架不存在，则该参数作为关键字 current 处理， 表示使用元素所在的框架。 关键字 root 表示用户代理应以整个窗口为目标。

具备方向性导航键的设备用户代理 根据四个 nav-* 方向导航属性（nav-up、nav-right、nav-down、nav-left）移动焦点。 本规范不定义设备上哪些键属于方向性导航键。

注: 典型个人电脑键盘有四个方向键。 一种可能的实现是使用这四个方向键进行方向性导航。 为了可访问性和用户便利，用户代理应允许配置哪些键用于方向性导航。

button { position:absolute }

button#b1 { top:0; left:50%; nav-right:#b2; nav-left:#b4; nav-down:#b2; nav-up:#b4; }

button#b2 { top:50%; left:100%; nav-right:#b3; nav-left:#b1; nav-down:#b3; nav-up:#b1; }

button#b3 { top:100%; left:50%; nav-right:#b4; nav-left:#b2; nav-down:#b4; nav-up:#b2; }

button#b4 { top:50%; left:0; nav-right:#b1; nav-left:#b3; nav-down:#b1; nav-up:#b3; } 

button#foo { nav-left: #bar "sidebar"; } 

5.3.2. 已废弃：ime-mode 属性

ime-mode 是一些浏览器部分实现的属性，但存在问题， 已被本规范及其前身 [CSS-UI-3] 正式废弃。

用户代理不应支持 ime-mode 属性。

作者不得使用 ime-mode 属性。

用户仅可在修复场景下使用 ime-mode，例如针对不良网站或遗留实现的兼容性处理， 可使用用户样式表规则，例如：

input[type=password] {  ime-mode: auto !important; } 

此示例 CSS 可放入用户样式表文件，以强制密码输入框采用默认行为。

本规范刻意不尝试记录遗留 ime-mode 实现的功能及支持内容，因为追求或推荐此路径不合适。

6. 用户交互

6.1. 控制内容选择

user-select 属性允许作者指定文档中哪些元素可以被用户选择以及选择的方式。 当并非所有元素都同样适合被选择时，这可以让交互更容易， 避免意外选择到相邻的内容。

用户代理不得将 user-select 属性应用于 ::first-line 和 ::first-letter 伪元素。

注意: 用户代理可以将此属性应用于 ::before 和 ::after 伪元素。 如果应用，auto 值在这些伪元素上映射为 使用值 为 none， 但其他值仍可指定。 这保留了生成内容不可选择或复制的传统行为， 当这些伪元素用于装饰性目的时是合适的。 然而，此属性允许它们可以被选择和复制， 当它们用于生成内容的一部分时，用户会有这样的期望， 例如本文档中的期号。在可能的范围内，作者应避免将生成内容用于非装饰性用途，并应优先将所有内容包含在 DOM 中。 此功能存在风险。

如果我们允许 user-select 改为 none 以外的值， 我们需要明确这对可复制性和 DOM API 意味着什么。

当伪元素中的生成内容通过此机制变得可选择时， 用户代理也应该使这些内容可通过搜索功能找到。

它是否也应适用于 ::marker？适用于 页面边距盒？ 使用值 的 auto 是否也应为 none， 还是 text 更合适？

使用值 与 计算值 相同， 除非：

1. 对 可编辑元素 来说，使用值 始终为 contain，无论 计算值 为何
2. 当 计算值 为 auto 时， 使用值 为下文定义的其他值之一

在本规范中， 可编辑元素 是指 编辑宿主 或 可变 的表单控件，包含文本内容， 例如 textarea。

对于作为编辑宿主子孙的可编辑元素， 使用值应受到怎样的限制？语义并不明显。 也许 none 应映射为 text， 或者所有值都应映射为 text。

auto

使用值 的确定方式如下：

• 对 ::before 和 ::after 伪元素， 使用值为 none
• 如果元素是 可编辑元素， 使用值 为 contain
• 否则， 如果该元素的父元素的 user-select 的 使用值 为 all， 则 使用值 为 all
• 否则， 如果该元素的父元素的 user-select 的 使用值 为 none， 则 使用值 为 none
• 否则，使用值 为 text

注意: 这个非继承属性与初始值为 auto 且其使用值依赖父元素的组合， 实现了类似选择性继承的效果。 该行为最初由 Microsoft 在 IE 中提出，模仿继承行为， 但 contain 值不继承。

text

元素对选择不施加任何限制。

none

用户代理不得允许在此元素中开始选择。

从外部开始的选择不得在此元素中结束。 如果用户尝试创建这样的选择， UA 必须在元素边界结束选择范围。

注意: 截至撰写本文时，实验性实现并不完全一致。 Firefox 符合规范。 Chrome 和 Safari 大体符合：从元素之后开始选择向回延伸到元素时符合规范， 但从元素之前开始选择进入元素时，会表现为元素具有 all 并全部选中。 IE 则不允许从元素外开始的选择进入此元素。 另一个差异是，在 Chrome 和 Safari 中， 如果用户尝试在 user-select: none 的元素内开始选择， 并在外部结束选择，将会从元素边界开始创建选择。 Firefox 和 IE 按规范不创建选择。

然而，如果此元素有子元素的 使用值 的 user-select 不是 none， 则在这些子元素内开始和结束的选择是允许的。

UA 必须允许跨此元素的选择，但必须排除此元素。 不支持多范围选择的 UA 可包括此元素。 如果子元素的 使用值 的 user-select 不是 none， 则这些子元素必须被包含在跨元素的选择中。规范不对剪贴板行为提出强制要求，但 UA 应保持视觉选择与复制一致。

尝试在 user-select 为 none 的元素内开始选择， 不得影响已有选择。

由于 user-select 是 UI 便利机制，而非复制保护机制， UA 可以为用户提供方法以选择文本，即便 user-select 为 none。

注意: none 并非复制保护机制， 将其用于保护文本无效： UA 可以提供绕过方式， 不支持的旧 UA 不会生效， 用户可通过样式表等方式禁用。 none 旨在让用户更容易选择内容， 作者可禁用不必要选择的 UI 元素。 工具如 CSS 验证器、lint 或浏览器开发者工具 可使用启发式检测并警告错误或滥用行为， 以维护可用性和用户预期。

作者应谨慎，不要不必要地限制用户。 例如，在根元素设置 user-select: none，只在部分认为有用的元素上放宽， 可能会让用户感到沮丧：

• 点击空白区域以取消选择将无效

• 作者可能忽略了应可选择的区域

• 后续添加的页面区域可能未设置为可选择

• 用户可能想选择主内容以外的文本，例如查询字典、翻译或搜索错误提示

更好的做法是，仅在容易被意外选择且会干扰主要操作的元素上应用 user-select: none。 留下不影响操作的内容可选择，用户体验会更好。

contain

UA 不得允许在此元素内开始的选择延伸到外部。

从外部开始的选择不得在此元素中结束， 尝试创建时，UA 应在元素边界结束。

UA 必须允许跨此元素的选择，并包含元素内容。

注意: 实验实现对跨入和跨出选择的行为不同。 即便在不支持 contain 的浏览器中也可观察到，如尝试选择 textarea 或 contenteditable 元素。

注意: 此值最初在 IE 中作为实验特性引入，名为 user-select: element。

all

元素内容必须整体选中： 如果选择只包含部分元素，则必须包含整个元素及其所有子元素。 如果元素被选中，且其父元素的 使用值 的 user-select 为 all， 则递归包含父元素。

如果此元素有子元素的 使用值 的 user-select 不是 all，且选择完全包含在这些子元素中， 则选择不扩展到整个元素。

注意: 选择不仅限于文本，还可以扩展到图像、表格、视频等。 复制和粘贴此类选择的行为不在本规范的范围内。

HTML 的 UA 样式表增加如下内容：

button, meter, progress, select { user-select: none; }

上述列表不完整， 至少需要包含各种类似按钮的 input 变体。

为兼容旧内容，支持 user-select 的 UA 也必须支持 -webkit-user-select 作为别名。

注意: 别名机制的具体实现留给 UA 自行决定。 将 -webkit-user-select 作为 user-select 的简写属性是一种有效方法， 新实现者应考虑此方案。 然而，也存在通过其他方式支持 -webkit-user-select 作为 user-select 别名的 UA，且对兼容性无不良影响， 因此本规范允许灵活实现。

6.2. 从命中测试中排除: pointer-events 属性

虽然该属性修改命中测试的正常行为， 当前的正常 命中测试 尚未被规范化。 对这一问题的显而易见部分有广泛互操作性， 但存在无数细节和边缘情况，如果有详细规范会大有裨益。 CSS-WG 将非常感激任何撰写此类规范的帮助。

pointer-events 属性定义元素的盒子是否可以被指针事件命中。 各值含义如下：

auto

命中测试 正常进行。

none

命中测试 就像该元素生成的盒子不存在， 有效地使该元素背后的元素成为事件的目标。

上述描述需加以限定； 对某些用途，命中测试仍会考虑该元素。 例如，点击并拖动以开始文本选择将照常工作。 对于 pointer-events 影响命中测试的精确范围仍需明确。

pointer-events: none 不会阻止 顺序焦点导航。

注意: pointer-events: none 仅排除元素自身的 命中测试， 并不排除整个子树。 虽然该属性通过继承传递给后代，但在 pointer-events: none 元素的后代中仍可指定 pointer-events: auto， 此类后代元素会正常参与 命中测试。

注意: 事件可在 pointer-events: auto 的后代元素上触发， 仍可在事件冒泡或捕获阶段被 pointer-events: none 的祖先捕获 (参见 DOM § 2 事件)。

注意: SVG 2 § 15.6 ‘pointer-events’ 属性 为 SVG 元素定义了此属性的变体，具有更多可选值。 此类值在 SVG 之外的效果目前未定义。

6.3. 防止所有交互: interactivity 属性

interactivity 属性指定一个元素及其 平面树 后代 （包括 文本节点） 是否为 inert 状态。

auto

元素的 inert 状态由 宿主语言 决定。(这通常意味着元素不是 inert 状态。)

inert

元素处于 inert 状态。

注意: 该属性允许作者强制使元素 inert， 但不能使元素 *非* inert， 只能将 inert 状态的决定权交给宿主语言。 例如，在 HTML 中，当显示模态对话框时， 页面其余部分会自动被强制 inert， 与该属性值无关。 通常，宿主语言可以利用比 CSS 更丰富的文档信息， 决定最适合用户的 inert 行为。

注意: Inert 节点通常不能获取焦点， 用户代理不会将 inert 节点暴露给无障碍 API 或辅助技术。 一个 inert 子树不应包含对理解或使用非 inert 状态下页面内容至关重要的内容或控件。 inert 子树中的内容对用户不可感知或不可交互。 作者不应将元素指定为 inert，除非这些内容在视觉上也被以某种方式隐藏。 在大多数情况下， 作者不应对单个表单控件指定 inert 属性。 此类情况，disabled 属性可能更合适。

[inert] {
  interactivity: inert;
}
dialog:modal {
  interactivity: auto;
}

6.4. 用户兴趣延迟: interest-delay-* 属性

一些 宿主语言 功能 可在用户“显示对元素的兴趣”时被激活。 “显示兴趣”的具体含义由 宿主语言 和 用户代理 决定 （例如 HTML 的 interestfor 属性）， 但这些功能的共同特性是“兴趣”不应立即获得或消失。

例如，如果“兴趣”可以通过将光标悬停在元素上显示， 当光标在页面上移动时短暂经过该元素 不应（至少默认情况下）被视为“显示兴趣”——​否则可能导致 UI 弹出和消失， 并干扰用户的其他操作。

同样，一旦显示了兴趣， 它也不应（至少默认情况下）立即消失。 再举例，如果用户通过悬停在链接上显示“兴趣”， 导致旁边的子弹出列表出现， 从链接移动到弹出列表的过程中 可能会短暂离开链接和列表， 但不应导致列表“失去兴趣”而关闭弹出列表。

interest-delay 简写属性， 以及其 interest-delay-start 和 interest-delay-end 长手属性， 允许控制这些功能在给定元素上的 兴趣开始延迟 和 兴趣结束延迟。 可选值如下：

normal

兴趣开始延迟 和/或 兴趣结束延迟 由用户代理定义。 可根据平台惯例选择。

这些延迟 不应为零。 它们 可能彼此不同， 并可能根据用户显示兴趣的方式而变化。 （例如，“悬停”和“长按” 可能使用不同的延迟来表示兴趣。）

<time>

指定 兴趣开始延迟 和/或 兴趣结束延迟 为指定的持续时间。

interest-delay 简写 将 interest-delay-start 设置为第一个值， 并将 interest-delay-end 设置为第二个值 （如果只提供一个值，则两者相同）。

注意: 将来，这些属性的语法可能会扩展， 以便根据功能和用户显示兴趣的方式自定义延迟。 （例如，为悬停和长按提供不同的延迟。）

7. 控件样式化

7.1. 控件强调色：accent-color 属性

在任何平台上，用户界面控件通常被设计为一套统一的视觉样式。 在许多平台上（但不是全部）， 这种视觉样式包含使用 强调色， 一种通常明亮且与更实用的背景和前景色形成鲜明对比的颜色。 并非每个控件在每种状态下都使用 强调色， 但它仍然是控件配色方案的核心部分。

accent-color CSS 属性允许作者为元素生成的用户界面控件指定 强调色。 各个取值的含义如下：

auto

表示由 UA 选择的颜色， 如果平台有强调色，应与平台的 强调色相匹配。

<color>

指定用作 强调色的颜色。

UA 应使用指定的 accent-color 来绘制元素控件中原本会使用 强调色 的部分。 UA 必须保持控件的可读性对比， 为此可以调整颜色的亮度或明度， 或在控件的其他部分进行颜色替换 （例如将叠加的图标从使用 color 改为使用 background-color）。 UA 还可以生成颜色渐变等变体， 以使控件的强调色使用符合平台约定。

单选按钮通常由一个圆组成， 可能叠加一个表示选中状态的“点”。 某些视觉样式在选中状态下使用 强调色： 有的用于圆的背景， 有的用于前景。

在这两种情况下，accent-color 属性会样式化控件中受影响的部分。 对于不使用 强调色 的单选按钮，accent-color 不会生效。

以下是所有使用蓝色 accent-color 的单选按钮示例：

平台	示例	说明
Firefox 79 / Win		未使用 强调色。
Chrome 81 / Win		未使用 强调色。
Safari / Snow Leopard		强调色用于生成选中状态“背景”渐变。
Safari 13 / Mac / Light		强调色作为选中状态“前景”。
Safari 13 / Mac / Dark		强调色作为选中状态“前景”。
Chrome 83 / Win / Light		强调色作为选中状态“前景”。
Chrome 83 / Win / Dark		强调色作为选中状态“前景”，针对深色模式背景调整对比度。

如果提供的颜色部分或完全透明， UA 必须先将其与 Canvas 系统颜色进行预合成， 并使用生成的（现在不透明的）颜色作为强调色。

注意： 虽然可能因用户设置而异，Canvas 通常在 浅色配色方案 下为白色，在 深色配色方案 下为黑色。

7.2. 外观切换：appearance 属性

虽然文档中大多数元素的外观可以完全由 CSS 控制，但 控件（widgets） 通常由用户代理使用宿主操作系统的本地 UI 控件渲染， 这些控件既无法被复刻，也无法通过 CSS 样式化。

本规范中术语 控件（widget） 指 替换元素（replaced elements），它们可以具有 本地外观（native appearance）， 意味着它们的渲染方式类似于宿主操作系统或平台的原生控件，或者具有 CSS 无法表达的外观。 由宿主语言（例如 HTML [HTML]）定义哪些元素可以具有 本地外观。

本规范引入了 appearance 属性，以提供对该行为的部分控制。 特别是，使用 appearance: none 允许作者 抑制 控件的本地外观， 从而获得 原始外观（primitive appearance），可以使用 CSS 对其重新样式化。

使用 appearance: base 会赋予 控件 基础外观（base appearance）。基础外观的控件 会抑制其 本地外观， 可以使用 CSS 重新样式化它们，就像 原始外观， 但也具有可用且可互操作的默认样式。这与 原始外观 不同，原始外观可能会导致某些 控件 完全消失。

控件可以关联一些样式表，这些样式可能会根据控件是否具有 基础外观 而变化。本地外观 与 原始外观 应具有相同的样式。

appearance:base 在其样式表完全在 HTML 规范中定义并在所有 HTML 表单控件上实现之前，尚未准备好发布。

input { appearance: none; }
input[type=checkbox] { appearance: checkbox; }

none

元素按照常规 CSS 规则渲染。除了 控件（widgets） 之外的替换元素不受此影响，仍保持替换元素的特性。控件 不应具有其 本地外观， 而应使用其 原始外观。详细信息请参见 § 7.2.2 外观对元素装饰性方面的影响 和 § 7.2.3 外观对元素语义性方面的影响。

auto

元素的盒模型布局如同普通的替换元素。

在该盒内，表示 控件 的元素应具有该控件的 本地外观。

宿主语言负责定义哪些元素表示哪些 控件。

除了 控件 之外的元素必须按照 none 渲染。

base

base 的效果取决于其应用的元素：

非 控件（widgets） 元素

非 控件 元素必须按照 none 渲染。

支持基础外观（base appearance）的控件

与 none 类似，元素按照常规 CSS 规则渲染。控件 不应具有其 本地外观，而应使用其 基础外观。

不支持基础外观的控件

不支持基础外观的控件 必须按照 auto 渲染。宿主语言负责定义哪些 控件 具有 基础外观。

base-select

base-select 的效果取决于其应用的元素：

select 元素或 ::picker(select)

元素按照 base 渲染。

其他所有元素

元素按照 auto 渲染。

<compat-auto>

这些值用于兼容早期非标准版本的内容。它们的效果与 auto 相同。

<compat-auto> =  searchfield | textarea | checkbox | radio | menulist | listbox | meter | progress-bar | button 

当 auto 广泛支持时，推荐使用它。

如果这些值中有任何不再用于 Web 兼容，应从列表中移除；相反，任何需要用于兼容但未包含的值应添加。

出于兼容性原因，可能需要将这些值中的某些提升为完整值，以对任意元素生效，或对某些 控件 产生副作用。

<compat-special>

这些值用于兼容早期非标准版本的内容。对于本规范，它们的效果与 auto 相同。但宿主语言在定义元素的 本地外观 时，可能会考虑这些值。

<compat-special> =  textfield | menulist-button 

例如，在 [HTML] 中：

• 当 input 元素的 "search" type 属性被设置时，其本地外观会更改为与 "text" 类型的 input 元素一致，当 appearance 为 textfield 时。

• 下拉框 select 元素的本地外观在 appearance 为 menulist-button 时，会更改为与其 降级状态（devolved） 相匹配。

input[type=checkbox] {
  all: unset; /* 此简写包括将 appearance 重置为 none */
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input[type=checkbox]:checked {
  border-radius: 50%;
  background: green;
}
input[type=checkbox]:focus-visible {
  outline: auto;
}

用户代理可能会 忽略 用于设置和绘制 控件 的一些 CSS 属性，以保持其 本地外观 的预期效果，或因为这些属性对于所选外观可能没有意义。

忽略（Disregarding） 某属性意味着用户代理会将其视为未 应用于相关控件。 尽管如此， 除非有明确例外（出于兼容性原因）， 用户代理仍必须根据常规规则确定任何 被忽略 属性的 计算值。

更具体地，对于 本地渲染 控件，忽略属性的规则如下：

• 影响控件盒子尺寸或位置的 CSS 属性（如 尺寸属性），或盒子外部视觉效果的属性（如 transform、filter 或 box-shadow）必须应用于具有 控件 的 本地外观。控件盒子像其他替换元素一样参与布局。
• 影响控件内部盒模型尺寸的属性（如 box-sizing、padding、border 或 margin）在必要时可能会被忽略。
• 其他影响绘制的属性（如 background-color）在必要时可能会被忽略。
• 用户代理在可能的情况下应考虑影响书写模式或字体相关的 CSS 属性，以在控件内渲染文本。
• object-fit 属性不适用。

控件的本地渲染可能会超过其盒子的大小，如果其内在尺寸超过该大小。

为了兼容旧内容，用户代理还必须支持 -webkit-appearance，作为 旧名称别名 对应 appearance。

7.2.1. 禁用本地外观的属性

在 作者来源（Author Origin） 中声明的某些属性， 会禁用某些 控件（widgets） 的 本地外观。 具体来说，如果所有与该 控件 相关的 作者来源 声明已层叠， 并且在回滚任意数量的 revert 或 revert-layer 值之后，存在某个 禁用控件本地外观的属性 的 层叠值，那么该 控件 将以 退化控件（devolved widget） 的形式渲染。 退化控件 的渲染方式与该 控件 的 原始外观（primitive appearance） 相同， 除非宿主语言另有规定。

宿主语言定义哪些元素表示 可退化控件（devolvable widgets）。 无论是否应用 禁用控件本地外观的属性， 外观仍保持本地的控件称为 不可退化控件（non-devolvable widgets）。

下列属性属于 禁用控件本地外观的属性：

• background-color
• border-top-color
• border-top-style
• border-top-width
• border-right-color
• border-right-style
• border-right-width
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-left-color
• border-left-style
• border-left-width
• border-block-start-color
• border-block-end-color
• border-inline-start-color
• border-inline-end-color
• border-block-start-style
• border-block-end-style
• border-inline-start-style
• border-inline-end-style
• border-block-start-width
• border-block-end-width
• border-inline-start-width
• border-inline-end-width
• background-image
• background-attachment
• background-position
• background-clip
• background-origin
• background-size
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

7.2.2. appearance 对元素装饰性外观的影响

当使用 appearance 将 控件 的外观 从 本地外观 改为 原始外观 时， 所有未由 CSS 样式规则产生的装饰性视觉元素必须被抑制， 即使 UA 内部使用多个元素或伪元素组合构建该控件。

当 appearance 为 none 时， UA 应在其用户代理样式表中包含样式规则，为 控件 提供可识别的形状。

注：因此，作者可能需要覆盖这些 UA 样式规则，以获得他们预期的样式。

7.2.3. appearance 属性对元素语义方面的影响

当显示 控件的原始外观 或其 降级状态 时， 用户代理必须保留 控件 的那些方面，以确保可以按照原始语义操作 控件。 不过，用户代理可以赋予它们不同的外观和体验， 只要仍然可以操作 控件。 仅用于显示 控件 当前状态而不影响操作的方面， 当相同信息可以通过普通 CSS 表达时，应予以抑制。 文档语言应为其定义的每个 控件 指明哪些方面必须保留。

元素的行为和语义仍由文档语言定义， 并不受该属性影响。

相反，更改元素的 appearance 不应使其获得所模拟元素的语义、伪类、事件处理程序等特性。

7.3. 控件特定规则

本节部分或全部内容可能 在某个时候应移至 [HTML] 规范。

在某些元素上，设置某些属性会禁止 appearance: auto。 例如，即使 appearance 为 auto， 当设置 border 时，按钮会失去本地外观。 这并不与 auto 的定义矛盾， 因为 appearance: auto 仅表示 UA 可以使用本地外观， 但为了更好的互操作性， 记录哪些元素的哪些属性具有此效果是有益的。

记录 UA 样式表中需要包含的内容会很有帮助。

7.3.1. 单行文本输入控件

当 appearance 为 auto 时， 单行文本输入控件 （例如 [HTML] <input type=text>） 必须按以下方式渲染：

• 内容在行内方向上裁剪至 内容边缘

• 内容在块方向上裁剪至 内边距边缘

• 内容垂直居中

• 内容不换行

• 无论 text-overflow 属性值如何，均应用该属性， 并且仍然受 overflow 属性控制

附录 A. 致谢

本附录为 参考性。

本规范基于 [CSS-UI-3] 编写和编辑， 主要由 Tantek Çelik 从 1999 年至今完成， 最初代表微软，其后作为受邀专家， 最近则代表 Mozilla。

感谢以下人员的反馈和贡献：Rossen Atanassov, Tab Atkins, L. David Baron, Bert Bos, Matthew Brealey, Rick Byers, Ada Chan, James Craig, Michael Cooper, Axel Dahmen, Michael Day, Micah Dubinko, Elika E., Steve Falkenburg, Andrew Fedoniouk, Al Gilman, Ian Hickson, Bjoern Hoehrmann, Alan Hogan, David Hyatt, Richard Ishida, Sho Kuwamoto, Yves Lafon, Stuart Langridge, Susan Lesch, Peter Linss, Kang-Hao Lu, Masayuki Nakano, Mats Palmgren, Brad Pettit, Chris Rebert, François Remy, Andrey Rybka, Simon Sapin, Alexander Savenkov, Sebastian Schnitzenbaumer, Lea Verou, Etan Wexler, David Woolley, Frank Yan, Boris Zbarsky, 以及 Domel。

附录 B. 变更记录

本附录为 参考性。

自 2021 年 3 月 16 日工作草案 的变更

除了若干编辑性调整外，还进行了以下规范性变更：

• 引入了 pointer-events 属性的定义。
• 扩展了 cursor 属性需要支持的图像类型， 从仅支持 <url> 扩展至 <url> 和 <url-set>。 （对更广泛的 <image> 类型的支持仍然允许但为可选。）
• 如果作者来源仍有值，则在使用 revert-layer 后禁用本地外观。
• 参考 滚动容器，而非 overflow 值（除 visible 之外），因此 clip 被包含在内。
• 使 outline-width 的计算值为 按边框宽度捕捉。
• 从 <compat-auto> 中移除了 slider-horizontal、square-button 和 push-button 关键字。
• 弃用 outline-color 的 invert 值。
• 添加了 auto 值至 outline-color。
• 移除了 outline-width 可能影响 outline-style: auto 渲染的说法。 （参见 Issue 9201）
• 澄清了 outline 对元素 墨水溢出区域 的贡献。
• 重新引入了 caret-animation 属性。
• 定义了 忽略属性 的含义。
• 定义了（半）透明强调色的行为。
• 添加了说明，指出 outline-offset 不属于 outline 简写属性。
• 为 appearance 属性添加了 base 关键字。
• 添加了 interactivity 属性。
• 澄清了即使溢出也应显示行尾插入点。
• 定义了 appearance: auto 的盒子渲染。
• 澄清了 outline 遵循角形状。
• 澄清了 caret-* 属性的适用性。
• 为 cursor 属性重新排列了语法以提高可读性。
• 添加了 interest-delay 属性及其长手属性 interest-delay-start 和 interest-delay-end。
• 使 outline-color 可参考 <'border-top-color'>，因此对该属性值的扩展也适用。
• 移除了 outline-width 在 outline-style 为 none 或 hidden 时计算值为 0 的特殊情况。 （参见 Issue 11494）

来自 2020 年 1 月 24 日工作草案的变更

除了若干编辑性调整外，还进行了以下规范性更改：

• 将 appearance: button 更改为仅适用于按钮。
• 如果 outline-style 为 auto，则 outline-width 可能会被忽略。
• 确保在变换（transform）下插入符可见。
• 将 resize: block 和 resize: inline 从 css-logical-1 移至本规范。
• 引入 accent-color 属性。

来自 2020 年 1 月 2 日工作草案的变更

除了若干编辑性调整外，还进行了以下规范性更改：

• 定义 user-select 为可离散动画，而非不可动画。
• 限制 appearance: button 的适用范围，使其不再赋予非按钮控件按钮外观。
• 增加一条条款，以确保即使通过变换缩放，插入符的可见性仍然保持。

来自 2017 年 12 月 22 日工作草案的变更

除了若干编辑性调整外，还进行了以下规范性更改：

• 添加了关于表单控件特定渲染规则的详细信息
• 澄清 text-overflow 与匿名块容器的交互
• 要求在所有文档格式中，超链接使用 pointer 光标
• 将 box-sizing 和 text-overflow 属性分别移至 [CSS-SIZING-3] 和 [CSS-OVERFLOW-4]
• 将 text 光标与书写模式匹配的要求从 MAY 改为 MUST
• appearance 属性的定义已被重大重构，以确保设计与现有 Web 内容兼容
• 将 user-select: auto 的映射逻辑从计算值时间改为使用值时间
• 澄清作者对 cursor: pointer 的要求

来自 2015 年 9 月 22 日首个公开工作草案的变更

除了若干编辑性调整外，还进行了以下规范性更改：

• 引入 user-select 属性
• caret-animation 属性已移除，因为没有已知的使用案例
• resize 属性现在也适用于表示图像或视频的替换元素，以及 iframe
• 将 text-overflow 属性的字符串值和双值从三级规范移动到本规范
• 将方向焦点导航属性从三级规范移至四级规范
• 已合并来自现已稳定的 [CSS-UI-3] 的内容

来自 CSS UI Level 3 的变更

• 引入 user-select 属性
• 添加方向焦点导航属性 nav-up、nav-down、nav-left 和 nav-right
• 添加 appearance 属性
• 将 resize: block 和 resize: inline 从 [CSS-LOGICAL-1] 移至本规范
• 添加 accent-color 属性
• 添加 interest-delay 属性及其长手属性 interest-delay-start 和 interest-delay-end
• 添加 pointer-events 属性
• 扩展 cursor 属性所需支持的图像类型，从仅 <url> 扩展为 <url> 和 <url-set> （对更广泛的 <image> 类型仍允许，但为可选）
• 废弃 outline-color 的 invert 值
• 为 outline-color 添加 auto 值
• 添加 caret-animation 属性
• 添加 interactivity 属性
• 添加 interest-delay 属性及其长手属性 interest-delay-start 和 interest-delay-end
• 让 outline-color 引用 <'border-top-color'>，因此对该属性值的扩展也同样适用

附录 C：隐私考虑

本附录为 参考性。

W3C TAG 正在开发一份 自我评审问卷：安全与隐私，供规范编辑者参考性填写。

根据 需考虑的问题

本规范是否涉及个人可识别信息？

否。

本规范是否涉及高价值数据？

否。

本规范是否为一个源引入跨浏览会话持久的新状态？

否。

本规范是否向网络暴露持久的跨源状态？

否。

本规范是否向一个源暴露其当前无法访问的其他数据？

否。

本规范是否允许一个源访问用户的位置？

否。

本规范是否允许一个源访问用户设备上的传感器？

是。

方向焦点导航属性间接允许访问设备的键盘导航输入机制，例如箭头键。

本规范是否允许一个源访问用户本地计算环境的某些方面？

否。

本规范是否允许一个源访问其他设备？

否。

本规范是否向网络暴露临时标识符？

否。

本规范是否区分第一方和第三方环境下的行为？

否。

在用户代理的“隐身”模式下，本规范应如何工作？

无差异。

本规范是否将数据持久化到用户的本地设备？

否。

附录 D：安全考虑

本附录为 参考性。

W3C TAG 正在开发一份 自我评审问卷：安全与隐私，供规范编辑者参考性填写。

根据 需考虑的问题

本规范是否启用新的脚本执行/加载机制？

允许加载，但不允许执行。

cursor 属性接受 <image> 值，这些值可能包含要加载的 URL。这些可能是包含脚本的 SVG 文档，但本规范要求脚本不得执行。

本规范是否允许一个源对用户代理的原生 UI 进行某种程度的控制？

是。

cursor 和 caret 属性及其 子属性 可使页面改变用户代理原生 UI 的光标和文本插入符显示。 此外，outline-style 属性的 auto 值（以及 outline 简写）可使页面在任何元素周围显示原生聚焦元素轮廓。

appearance 属性也允许作者关闭原生样式并用 CSS 样式替代。

本规范是否允许降低默认安全特性？

否。

附录 E：HTML 默认样式表补充

本附录为 参考性。

可能对基础样式表的补充，用于表示 HTML 表单控件及一些动态呈现属性：

:enabled:focus {
  outline: 2px inset;
}

button,
input[type=button],
input[type=reset],
input[type=submit],
input[type=checkbox],
input[type=radio],
textarea,
input,
input[type=text],
input[type=password],
input[type=image] {
  display: inline-block;
}

input[type=button],
input[type=reset],
input[type=submit],
input[type=checkbox],
input[type=radio],
input,
input[type=text],
input[type=password],
input[type=image] {
  white-space: nowrap;
}

button {
  /* white space handling of BUTTON tags in particular */
  white-space:normal;
}

input[type=reset]:lang(en) {
  /* default content of HTML input type=reset button, per language */
  content: "Reset";
}

input[type=submit]:lang(en) {
  /* default content of HTML input type=submit button, per language */
  content: "Submit";
}

/* UAs should use language-specific Reset/Submit rules for others. */

input[type=button],
input[type=reset][value],
input[type=submit][value] {
  /* text content/labels of HTML "input" buttons */
  content: attr(value);
}

textarea {
  /* white space handling of TEXTAREA tags in particular */
  white-space:pre-wrap;
  resize: both;
}

input[type=hidden] {
  /* appearance of the HTML hidden text field in particular */
  display: none !important;
}

input[type=image] {
  content: attr(src,url);
  border: none;
}

select[size] {
  /* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */
  display: inline-block;
  height: attr(size,em);
}

select,select[size=1] {
  /* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

select[size]:active {
  /* active HTML <select> w/ size more than 1 - appearance of active list */
  display: inline-block;
}

optgroup, option {
  display: block;
  white-space: nowrap;
}

optgroup[label],option[label] {
  content: attr(label);
}

option[selected]::before {
  display: inline;
  content: check;
}

/* Though FRAME resizing is not directly addressed by this specification,
   the following rules may provide an approximation of reasonable behavior. */

/*

frame { resize:both }
frame[noresize] { resize:none }

*/