CSS 基本用户界面模块 第四级

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 节，以及层叠样式表第 2 级，第 1 次修订版 附录 E 中定义的轮廓堆叠信息 [CSS21]
• CSS3 用户界面（2000 年 2 月 16 日） [CSS-UI-3]

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

注意： text-overflow 属性之前在本节规范中定义，但已移至 CSS Overflow 3 §4.1 溢出省略号：text-overflow 属性。

2.1. 值定义

本规范遵循 CSS 属性定义惯例，使用 值定义语法，来自 [CSS-VALUES-3]。 本规范中未定义的值类型在 CSS 值与单位 [CSS-VALUES-3] 中定义。 与其他 CSS 模块的组合可能会扩展这些值类型的定义。

除了其定义中列出的特定属性值外，本规范中定义的所有属性还接受 CSS-wide 关键字 作为其属性值。 为了可读性，它们没有被重复明确列出。

3. 轮廓属性

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

1. 轮廓不占用空间。
2. 轮廓可以是非矩形的。
3. 用户代理通常在元素处于 :focus 状态时渲染轮廓。

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

这些轮廓的渲染堆叠显式留给实现者，以便在每个平台上提供更好的用户体验。这取代了在 CSS 2.1 附录 E [CSS21] 中定义的轮廓堆叠。

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

在 CSS3-UI 中，应用变换到轮廓的渲染显式未定义。

3.1. 轮廓速记：outline 属性

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

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

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

使用轮廓属性创建的轮廓是绘制在盒子“上方”的，也就是说，轮廓始终位于顶部，不影响盒子或其他盒子的位置或大小。因此，显示或隐藏轮廓不会导致页面重排。

轮廓可以是非矩形的。例如，如果元素被分隔到几行，轮廓应为围绕所有元素盒子的最小集合。

轮廓的每个部分应完全连接，而不是在某些边上开放（与当行被分隔时的行内元素的边框不同）。

轮廓的各个部分不必是矩形。到轮廓跟随 边框边缘 的程度，它应遵循 border-radius 曲线。

轮廓的位置可能会受到子孙盒子的影响。

用户代理应使用确定轮廓的算法来包含适合传达焦点概念的区域。

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

outline-width 属性接受与 border-width 相同的值（CSS Backgrounds 3 §3.3 线厚度：边框宽度属性）。

<outline-line-style> 接受与 <line-style>（CSS Backgrounds 3 §3.2 线样式：边框样式属性）相同的值，含义相同，除了 hidden 不是合法的轮廓样式。此外，outline-style 属性接受值 auto。auto 值允许用户代理渲染自定义轮廓样式，通常是平台的用户界面默认样式，或者可能是比 CSS 中详细描述更丰富的样式，例如，具有半透明外部像素的圆边轮廓，看起来像在发光。因此，本规范未定义在渲染 auto 样式轮廓时，如何结合或使用（如果有）outline-color 和 outline-width。用户代理可以将 auto 视为 solid。

outline-color 属性接受所有颜色以及关键字 invert。invert 期望对屏幕上的像素执行颜色反转。这是一种常见的技巧，确保焦点边框可见，无论背景颜色如何。

符合规范的用户代理可以在不支持屏幕上像素颜色反转的平台上忽略 invert 值。

如果用户代理不支持 invert 值，则必须在解析时拒绝该值，并且 outline-color 属性的初始值为 currentColor 关键字。

outline 属性是一个速记属性，设置了 outline-style、outline-width 和 outline-color。

注意： 轮廓在所有边上都是相同的。与边框不同，没有 outline-top、outline-left 等属性。

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

button { outline: thick solid }

图形用户界面可能会在元素周围使用轮廓，以告诉用户页面上哪个元素具有焦点。这些轮廓是边框的补充，打开或关闭轮廓不应导致文档重新布局。焦点是文档中用户交互的对象（例如输入文本或选择按钮）。

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

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

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

用户代理显示单向 块轴 调整大小机制，允许用户仅调整元素的 块大小。

inline

用户代理显示单向 内联轴 调整大小机制，允许用户仅调整元素的 内联大小。

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

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

resize 属性适用于计算的 overflow 值不为 visible 的元素。无论 overflow 属性的值如何，用户代理也可以将其应用于：

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

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

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

当用户调整元素大小时，用户代理在元素的 style 属性 DOM 中将 width 和 height 属性设置为用户指定大小的 px 单位长度值，替换现有的属性声明（如果有），不包括 !important（如果有）。

如果元素仅在一个维度上调整大小，则仅设置相应的属性，而不是同时设置两个。

调整大小的精确方向（即更改元素的左上角或更改右下角）可能取决于多个 CSS 布局因素，包括元素是否绝对定位、是否使用 right 和 bottom 属性定位，以及元素的语言是否从右到左等。用户代理应在决定如何将调整大小机制传达给用户时，考虑调整大小的方向（由 CSS 布局确定）、平台惯例和限制。

用户代理必须允许用户在不受任何其他限制的情况下调整元素的大小，这些限制仅由 min-width、max-width、min-height 和 max-height 强加。

注意：在某些情况下，用户尝试调整元素大小似乎被覆盖或忽略，例如，由于具有 !important 的层叠声明优先于该元素的 style 属性中的 width 和 height 属性。

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

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

5. 指示设备和键盘

5.1. 指针交互

5.1.1. 样式化光标：cursor 属性

此属性指定当光标的热点在元素的 边框边缘内时为指示设备显示的光标类型。

注意： 根据 CSS 背景 3 §4.1 圆角半径：border-radius 属性，边框边缘受 border-radius 影响。

在重叠的元素的情况下，哪个元素决定光标的类型基于命中测试：决定光标的元素是从此位置开始的点击将接收的元素。

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

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

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

值的含义如下：

图像光标

<url>

用户代理从URI指定的资源中检索光标。如果用户代理无法处理光标列表中的第一个光标，它必须尝试处理第二个，依此类推。如果用户代理无法处理任何用户定义的光标，它必须使用列表末尾的光标关键字。符合规范的用户代理可以支持 <url>，或 <image>，该格式是超集。

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

• PNG，定义于[PNG]
• SVG，定义于[SVG11]，并处于安全静态模式 [SVG2]，如果它有一个自然尺寸
• 用户代理支持的其他非动画图像格式，用于 <image> 属性，比如 background-image 属性

此外，用户代理应支持以下图像文件格式：

• SVG，定义于 [SVG11]，并处于安全动画模式 [SVG2]，如果它有一个自然尺寸
• 用户代理支持的其他动画图像格式，用于 <image> 属性，比如 background-image 属性

用户代理还可以支持其他文件格式，包括定义于 [SVG11] 的SVG格式，无论是否具有自然尺寸。

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

注意：在撰写本规范时（2015年春季），常见的桌面浏览器仅支持 .ico 和 .cur 文件格式，这两种格式由微软设计。为了兼容旧内容，建议用户代理支持这些格式，即使缺乏开放的规范也无法对这些格式提出规范要求。关于这些格式的一些信息可以在 维基百科 上找到。

默认对象大小 是一个由用户代理定义的尺寸，应该基于用户代理操作系统中典型光标的大小。

具体对象大小 是使用 默认尺寸算法 确定的。如果操作系统无法渲染超出某个大小的光标，则超过该大小的光标必须缩小到操作系统支持的尺寸范围内，同时保持光标图像的自然宽高比。

可选的 <x> 和 <y> 坐标标识图像中的确切位置，即指针位置（即热点）。

<x>

<y>

每个坐标是 <number>。这些是光标坐标系统中的 x 坐标和 y 坐标（相对于左上角），表示被指向的精确位置。

注意：本规范未定义各种类型的<image>的坐标系统，定义将由 [CSS4-IMAGES] 规范决定。

如果未指定这些值，则使用图像资源内部定义的自然热点。如果这些值未指定且引用的光标没有定义热点，则效果等同于指定“0 0”值。

如果由 <x> 和 <y> 值或图像资源内部定义的热点坐标超出了光标图像的范围，则这些坐标必须分别进行限制以适应图像。

通用光标

auto

用户代理根据当前上下文确定显示的光标。具体来说，auto 在可选择的文本或可编辑元素上表现为 text，而在其他情况下表现为 default。

注意：在可选择的文本或可编辑元素上，用户代理必须根据元素的书写模式使用竖直或水平文本光标，并且可以考虑变换和其他视觉效果。

default

平台依赖的默认光标。通常显示为箭头。

none

该元素没有光标显示。

链接和状态光标

context-menu

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

help

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

pointer

光标是表示链接的指针。通常显示为伸出食指的手背。

除非另有说明，用户代理必须将 cursor: pointer 应用于所有支持的文档格式中的超链接， 通过 用户代理样式表 使用普通声明（即不带 !important）。

作者应在链接上使用 pointer，并可用于其他交互元素。

progress

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

wait

表示程序正在忙碌，用户应等待。通常显示为手表或沙漏。

选择光标

cell

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

crosshair

一个简单的十字线（例如，类似“+”号的短线段）。通常用于表示二维位图选择模式。

text

表示可以选择的文本。通常显示为 I 形光标。用户代理必须在具有水平 书写模式 的元素上自动显示竖直 I 形光标，在具有垂直 书写模式 的元素上显示水平 I 形光标（例如，类似于 vertical-text 关键字的效果）。此外，用户代理可以根据变换（见 [CSS-TRANSFORMS-1]）或其他视觉效果（如路径文本）选择水平或垂直光标，并可以为以特定角度渲染的文本显示任意角度的 I 形光标。

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。

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

5.1.1.1. 画布的光标

文档的 画布 是渲染文档的无限表面 [CSS21]。由于没有元素对应画布，为了在不位于任何元素上时允许设置光标样式，画布光标重用根元素的光标。然而，如果根元素没有生成任何框（例如，如果根元素具有 display: none），那么画布光标是平台相关的默认光标。

注意：一个元素可能是不可见的但仍然生成框。例如，如果元素具有 visibility: hidden 但没有 display: none，则它将生成框并为画布使用其光标。

5.2. 插入光标

5.2.1. 为插入光标着色: caret-color 属性

auto

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

注意： 当 caret-shape 为 块状 时，确保良好可见性和对比度最好通过用户代理确定的颜色来实现，而不是 currentColor。

<color>

插入光标将以指定颜色着色。

插入光标是元素中显示的一个可见指示器，表示用户插入文本（以及可能的其他内容）的插入点。此属性控制该可见指示器的颜色。

注意： 用户代理可能还有其他计作“光标”的事物。例如，一些用户代理可以显示“导航光标”，其行为类似于插入光标，但可以在不可编辑的文本中移动，功能上也是光标。另一方面，当悬停在文本上并且 cursor 属性为 auto，或者当悬停在 cursor 属性为 text 或 vertical-text 的元素上时，尽管有时它看起来像一个光标，但实际上它是一个光标（而不是插入光标）。

5.2.2. 插入光标的形状: caret-shape

此属性允许作者指定文本插入光标的期望形状。

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

auto

用户代理决定光标的形状。它应符合平台惯例，并可能根据上下文进行调整。例如，如果用户代理在用户按下键盘上的 插入 键时在插入模式和改写模式之间切换，则它可能会在插入模式下显示 条形光标，在改写模式下显示块状光标。

条形

用户代理必须将文本插入光标渲染为插入点处的一条细条。这意味着它位于字符之间、之前或之后，而不是覆盖它们。它应垂直于内联进度方向，但在插入斜体或倾斜文本时，用户代理可以将其渲染为倾斜的。

块状

用户代理必须将文本插入光标渲染为与插入点后面的下一个可见字符重叠的矩形。如果插入点后没有可见字符，用户代理必须在最后一个可见字符之后渲染光标。用户代理可以在插入斜体或倾斜文本时将其渲染为倾斜矩形。

下划线

用户代理必须将文本插入光标渲染为在下一个可见字符下方的一条细线。如果插入点后没有可见字符，用户代理必须在最后一个可见字符之后渲染光标。

块状 和 下划线 光标的宽度应为插入点后下一个可见字符的进度度量，或如果没有下一个可见字符，或者此信息难以确定，则为 1ch。

在确定光标的方向和外观时，用户代理必须考虑书写模式[CSS-WRITING-MODES-3]，并必须应用[CSS-TRANSFORMS-1]中的变换。 如果编辑的文本是沿路径布局的，例如使用SVG中的 textPath 元素，用户代理也应考虑这一点。

条形 和 下划线 光标的粗细，以及与它们类似渲染的 auto 光标的粗细，由用户代理确定。用户代理应选择一个厚度，确保即使光标因变换（如 [CSS-TRANSFORMS-1]）被缩小，光标仍保持可见。

光标的堆叠位置在以下约束范围内未定义：

• 光标不应被元素的背景遮挡。
• 用户代理必须渲染 块状 光标，以确保其重叠的字符不会被光标遮挡。

.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.3. 插入光标速记: caret

此属性是设置 caret-color 和 caret-shape 的速记属性。 省略的值将设置为其初始值。

5.3. 键盘控制

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

auto

用户代理自动确定响应方向导航输入时导航焦点到哪个元素。

<id>

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

如果该选择器指向当前已聚焦的元素，相应的 nav- 属性方向导航输入将被忽略——无需重新聚焦同一元素。

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

如果焦点导航到一个本来不可聚焦的元素，则该元素将因该方向导航变为可聚焦，且 :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 伪元素。

注意: UA 可以将此属性应用于::before 和 ::after 伪元素。 如果这样做，auto 值将映射为这些伪元素的 使用值 为 none， 但可以指定其他值。 这保留了生成内容不可选择或复制的传统行为， 这在这些伪元素用于装饰目的时是合适的。 但是，此属性允许它们变得可选择和可复制， 正如用户在它们用于生成内容时所期望的那样， 例如此文档中的问题编号。作者应尽可能避免 使用生成的内容用于非装饰性目的， 并应优先将所有内容包含在DOM中。 此功能存在风险。

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

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

它是否还应适用于 ::marker? 是否适用于 页面边距框？ auto 的 使用值 是否也应该是 text？

用于此规范的 使用值 与 计算值相同， 但有以下例外：

1. 在 可编辑元素 上， 使用值 始终是 contain，无论 计算值 是什么
2. 当 计算值 是 auto 时， 使用值 是如下所定义的其他值之一

为了本规范的目的， 一个 可编辑元素 是 一个 编辑宿主 或者一个 可变的 表单控件，具有文本内容， 例如 textarea。

应该对编辑宿主的可编辑子孙元素的使用值 施加约束吗？ 语义并不明显。 也许 none 应该映射到 text， 或者可能所有值都应该映射到 text。

auto

auto 的 使用值 确定如下：

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

注意： 这种非继承属性与初始值 auto 的不寻常组合，其使用值取决于父元素，从而使创建实际上是选择性继承的行为成为可能。 该行为最初由 Microsoft 在 IE 中提出，以引入一种类似于继承的行为，除了 contain 值不继承。

text

元素对选择不施加限制。

none

UA 不得允许在此元素中开始选择。

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

注意: 在撰写本文时，实验性实现并非全都如此。 Firefox 是这样。 Chrome 和 Safari 几乎是这样：对于在元素之后开始的选择并试图向后进入元素， 它们的行为如本规范所述， 但对于在元素之前开始的选择并试图进入元素， 它们的行为像是该元素具有 all 并完全选中它。 IE 完全不限制从元素外部开始的选择进入该元素。 另一个不同之处是，在 Chrome 和 Safari 中， 如果用户试图在 user-select: none 内部开始选择， 并在它之外结束选择， 将从元素边界到用户指定的终点创建选择。 Firefox 和 Internet Explorer 的行为如本规范所述， 根本不会创建选择。

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

UA 必须允许选择跨越此元素，并且必须将此元素排除在选择之外。 不支持多范围选择的 UA 是个例外，它们可以包括此元素。 如果该元素具有后代，并且这些后代的 使用值的 user-select 不是 none， 则这些后代必须包含在跨越该元素的选择中。 本规范对剪贴板行为没有规范性要求， 但鼓励 UA 保持视觉选择与复制到剪贴板的内容一致。 复制未显示为选择的文本或反之，可能会让用户非常困惑。

试图在 user-select 为 none 的元素中开始选择， 例如点击或在其中拖动，不得导致现有选择被取消选择或受到任何影响。

由于 user-select 是一种用户界面便利机制， 而不是一种复制保护机制， UA 可以为用户提供替代方式， 以便即使 user-select 为 none， 用户仍可显式选择文本。

注意: none 不是一种复制保护机制， 使用它作为复制保护是无效的： 用户代理可以提供绕过该机制的方式， 它对不支持它的旧版用户代理没有影响， 并且用户可以通过用户样式表或类似机制禁用它。 相反，none 旨在 通过让作者禁用不适合选择的 UI 元素上的选择， 使用户更容易选择他们想要的内容。 鼓励工具如 CSS 验证器、代码审查工具或浏览器内开发者工具 使用启发式方法检测并警告不正确或滥用的使用情况， 这些使用会妨碍可用性或违背用户的普遍预期。

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

• 点击空白区域以取消当前选择将不再有效

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

• 稍后可能会向页面添加区域而未记得使其可选择

• 用户可能希望选择除主要内容以外的文本片段， 例如将其查字典或翻译工具中查找， 或在搜索引擎中查找警告和错误消息……

相反，作者的好做法是有选择性地应用 user-select: none 到 可能在无意中被选择且这样做会干扰更可能的预期操作的元素上。 意外地保留页面中不太可能交互的部分仍然可选择， 可能比相反的做法对用户造成的挫折要少得多。

contain

UA 不得允许在此元素中开始的选择扩展到此元素之外。

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

UA 必须允许选择跨越此元素， 并且此类选择必须包括该元素的内容。

注意: 在撰写本文时，实验性实现在 外部开始的选择和进入元素的选择行为方面表现不同。 即使在不显式支持 contain 的浏览器中， 也可以通过尝试选择 textarea 或 contenteditable 元素来观察此行为。

注意: 这是最初在 Internet Explorer 中 作为实验性功能引入的，名称为 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， 且对兼容性没有不利后果， 因此本规范允许灵活性。

7. 小部件的样式化

7.1. 小部件的强调色：accent-color 属性

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

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

auto

代表 UA 选择的颜色， 应该匹配平台的 强调色（如果有）。

<color>

指定用于 强调色 的颜色。

UA 应该使用指定的 accent-color 来绘制控件中本来会使用 强调色 的部分。 UA 必须保持控件的可读性对比度， 为了做到这一点， 可以调整颜色的亮度或明度， 或者在控件的其他部分进行颜色替换 （例如将叠加的符号从使用 color 改为使用 background-color）。 它也可以生成颜色的变体，用于渐变等，以使控件符合平台的强调色使用约定。

单选按钮通常由一个圆组成， 可能还叠加了一个“点”来表示已选中状态。 某些视觉风格使用 强调色 来表示选中状态： 其中一些将其用于圆的背景， 其他则用于前景。

在这两种情况下，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		强调色作为选中状态的“前景”，根据深色模式背景进行了对比度调整。

7.2. 切换外观：appearance 属性

虽然文档中大多数元素的外观可以完全由 CSS 控制，小部件 通常由 UA 使用宿主操作系统的原生 UI 控件进行渲染， 这些控件既不能复制也不能通过 CSS 样式化。

在本规范中，术语 小部件 指代可以具有 原生外观 的元素， 这意味着它们的渲染方式类似于宿主操作系统或平台的原生小部件或控件， 或者具有无法通过 CSS 表达的外观和感觉。 宿主语言（例如 HTML [HTML]）负责定义哪些元素可以具有 原生外观。

本规范引入了 appearance 属性 来对这种行为提供一定的控制。 特别是，使用 appearance: none 允许作者抑制 原生外观， 以便使用 CSS 来重新设计 小部件。

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

none

元素将按照 CSS 的常规规则进行渲染。替换元素（除了小部件）不受此影响并保持其替换元素的特性。小部件不会有其原生外观。参见 "§ 7.2.1 外观对元素装饰性方面的影响" 和 "§ 7.2.2 外观对元素语义方面的影响" 以了解详情。

auto

小部件可以有其原生外观。对于其他非小部件的元素，必须按照指定“none”的效果渲染。

textfield

对于类型为搜索状态的 input 元素，该元素将被渲染为一个常规文本输入小部件，类似于类型为文本状态的 input 元素。对于其他元素，此值与“auto”有相同的效果。

menulist-button

对于 select 元素，元素将被渲染为一个下拉框，包括一个下拉按钮。此类元素的 color、background-color 和 border 等 CSS 属性不应被忽略。

<compat-auto>

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

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

当“auto”得到广泛支持时，建议优先使用它。

input[type=checkbox] {
  all: unset; /* 此速记包括将外观重置为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; 
} 

在计算值为 小部件 的控件中，auto、文本框、菜单列表按钮， 或 <compat-auto> 值之一， 用户代理可能会忽略一些CSS属性， 以确保所需外观得以保留， 或因为这些属性对于选择的外观可能没有意义。 但是，以下属性不得忽略：

• appearance
• display（内部显示类型 可能被忽略）
• visibility
• position
• top
• right
• bottom
• left
• float
• clear
• margin 及相关长短手属性
• unicode-bidi
• direction
• cursor
• z-index

是否应该在此列表中添加更多属性？ 是否应移除某些属性？ 应该列出可以忽略的属性，还是应该列出不能忽略的属性？ 无论如何，用户代理在渲染 小部件 时会忽略某些属性， 因此本规范需要对此做出说明。

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

7.2.1. appearance 对元素装饰性方面的影响

当使用 appearance 更改外观时， 所有不是由CSS样式规则引起的小部件的装饰性视觉方面 必须被抑制， 即使UA内部表示此元素是由多个元素或伪元素组合在一起的。

UA应在其用户代理样式表中包含样式规则， 使当appearance为none时， 小部件具有可识别的形状。

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

7.2.2. appearance 对元素语义方面的影响

UA必须保留小部件的语义方面， 这些语义方面对于以其原始语义操作小部件是必要的。 然而，只要仍然可以操作该小部件， UA可以赋予其不同的外观和感觉。 小部件的方面如果仅用于观察其所处的状态， 而不是操作它所必需的， 当可以使用普通CSS传达相同信息时， 也应该被抑制。 文档语言应为其定义的每个小部件指定需要保留的内容。

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

相反，更改元素的外观不应导致它获得 其外观所代表的元素的语义、伪类、事件处理程序等。

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. 变更

此附录是信息性的。

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

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

• 将 appearance: button 修改为仅适用于按钮。
• 如果 outline-style 为 auto，则可能忽略 outline-width。
• 确保即使进行变换，插入符号仍然可见。
• 将 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]。
• 将文本光标与书写模式匹配的要求从 MAY 改为 MUST
• appearance 属性的定义进行了重大修改，以使设计与现有网页内容兼容
• 将 user-select: auto 在计算值时间映射到各种值的逻辑更改为使用值时间
• 澄清了作者对 cursor: pointer 值的要求

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

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

• 已移除 caret-animation 属性。 未来可能在有足够的使用案例证据的情况下重新引入。
• resize 属性现在也适用于表示图像或视频的替换元素， 以及 iframes。
• text-overflow 属性的字符串值和双重值从第3级移至本规范。
• 将方向性焦点导航属性从第3级移至第4级。
• 已合并来自现已稳定的 [CSS-UI-3] 的内容。

附录 C. 安全和隐私考虑

此附录是信息性的。

W3C TAG 正在开发一个 自我评审问卷：安全和隐私，供规范编辑者参考回答。

根据 需考虑的问题

该规范是否涉及可识别个人身份的信息？

否。

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

否。

该规范是否引入了可跨浏览会话持久化的来源状态？

否。

该规范是否向网页公开了持久的跨来源状态？

否。

该规范是否向不当前有权访问的来源暴露了任何其他数据？

否。

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

是，加载机制是启用的，但执行机制不是。

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

该规范是否允许来源访问用户的位置？

否。

该规范是否允许来源访问用户设备上的传感器？

是。

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

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

否。

该规范是否允许来源访问其他设备？

否。

该规范是否允许来源对用户代理的原生UI进行某种控制？

是。

cursor 和 caret 属性及其 子属性 允许页面更改用户代理的光标和文本插入符的显示。 此外，outline-style 属性的 auto 值 （因此 outline 速记） 允许页面在任何元素周围显示本地聚焦元素的轮廓呈现。

appearance 属性还允许作者关闭本地样式并用基于css的样式替换它。

该规范是否向网页暴露了临时标识符？

否。

该规范是否区分第一方和第三方上下文中的行为？

否。

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

无差异。

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

否。

该规范是否有“安全考虑”和“隐私考虑”部分？

是。

该规范是否允许降级默认安全特性？

否。

附录 D. 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 {
  /* BUTTON标签的特别空白处理 */
  white-space:normal;
}

input[type=reset]:lang(en) {
  /* 根据语言设置的HTML输入type=reset按钮的默认内容 */
  content: "Reset";
}

input[type=submit]:lang(en) {
  /* 根据语言设置的HTML输入type=submit按钮的默认内容 */
  content: "Submit";
}

/* UA应该为其他语言使用语言特定的重置/提交规则。 */

input[type=button],
input[type=reset][value],
input[type=submit][value] {
  /* HTML "input" 按钮的文本内容/标签 */
  content: attr(value);
}

textarea {
  /* 特别是 TEXTAREA 标签的空白处理 */
  white-space:pre-wrap;
  resize: both;
}

input[type=hidden] {
  /* 特别是 HTML 隐藏文本字段的外观 */
  display: none !important;
}

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

select[size] {
  /* HTML4/XHTML1 <select> w/ size 大于 1 - 列表外观 */
  display: inline-block;
  height: attr(size,em);
}

select,select[size=1] {
  /* HTML4/XHTML1 <select> 没有 size，或 size=1 - 弹出菜单 */
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

select[size]:active {
  /* 激活 HTML <select> w/ size 大于 1 - 激活列表的外观 */
  display: inline-block;
}

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

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

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

/* 虽然本规范没有直接解决FRAME的调整大小问题，
   但以下规则可能提供合理行为的近似值。 */

/*

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

*/