CSS 基本用户界面模块级别 3 (CSS3 UI)

1. 简介

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

CSS1的第2.1节 [CSS1] 和 CSS2的第18章 [CSS2] 介绍了几个与用户界面相关的属性和值。CSS3用户界面（2000年2月16日） 介绍了几个新的与用户界面相关的功能。

本工作草案结合了这些内容，进行了扩展，并取代了它们。

1.1. 目的

本规范的目的是实现以下目标：

• 扩展CSS2.1中的用户界面功能。
• 提供额外的CSS机制，以增强或替代HTML中的其他动态呈现相关功能。

2. 模块交互

本文档定义了在早期规范中不存在的新功能。 此外，它还替代并取代了以下内容：

• 第18.1节，第18.4节， 以及级联样式表第2级修订版1 [CSS2] 的附录E中定义的轮廓堆叠信息。
• CSS3用户界面（2000年2月16日）

注意：属性定义表的语义首次在级联样式表第2级修订版1 (CSS 2.1) 规范 §property-defs中引入。 更新的定义可以在[css-transitions-1]、[css-values-3]和[css-cascade-4]中找到。 为方便读者，本规范在相关的地方直接链接到这些术语。

3. 盒模型扩展

3.1. 更改盒模型：box-sizing 属性

content-box

这是CSS2.1中指定的width和height的行为。 指定的宽度和高度（以及各自的最小/最大属性）分别应用于元素的内容框的宽度和高度。 元素的填充和边框布局和绘制在指定宽度和高度之外。

border-box

该元素的宽度和高度的长度值和百分比值（以及各自的最小/最大属性）决定了元素的边框框。 也就是说，元素上指定的任何填充或边框都布局和绘制在指定的宽度和高度之内。 内容宽度和高度通过从指定的width 和height属性中减去各自侧面的边框和填充宽度来计算。 由于内容宽度和高度不能为负 ([CSS2]，第10.2节)， 此计算被截断为0。 使用的值，例如通过getComputedStyle()暴露的值，也指的是边框框。

注意： 这是旧版HTML用户代理对替换元素和输入元素常见的width和height行为。

注意： 与长度和百分比值相比， auto值的width和 height属性 （以及后续规范引入的其他关键字值，除非另有说明） 不受box-sizing属性的影响， 始终设置内容框的大小。

以下术语基于box-sizing的计算值而变化：

CSS2的视觉格式化模型细节是基于box-sizing: content-box编写的。以下澄清了所有box-sizing值的行为：

1. 在10.3.3中，以下短语中的第二个width应解释为内容宽度：如果width不是auto，并且border-left-width + padding-left + width + [...]
2. 在10.3.7中，width应解释为内容宽度，其在以下方程式中：left + margin-left + border-left-width + padding-left + width + [...]
3. 在10.4中，width、height、min-width、max-width、min-height和max-height分别应解释为内容宽度、内容高度、 最小内部宽度、最大内部宽度、最小内部高度和最大内部高度，在以下短语中：
   1. 暂定使用的宽度计算[...]
   2. 如果暂定使用的宽度大于max-width，则再次应用上述规则，但此时使用max-width的计算值作为width的计算值。
   3. 如果结果宽度小于min-width，则再次应用上述规则，但此时使用min-width的计算值作为width的计算值。
   4. 从表格中选择适当约束违规的解决宽度和高度值。将max-width和max-height视为max(min, max)，以确保min ≤ max成立。 在此表中，w和h代表宽度和高度计算的结果[...]
   5. 表中的所有这些词实例
   6. 然后应用上面“计算宽度和边距”下的规则，就像width是按此值计算的一样。
4. 在10.6.4中，height应解释为内容高度，其在以下方程式中：top + margin-top + border-top-width + padding-top + height + [...]
5. 在10.7中，width、height、min-height和max-height分别应解释为内容宽度、内容高度、最小内部高度和最大内部高度，在以下短语中：
   1. 暂定使用的高度计算[...]
   2. 如果此暂定高度大于max-height，则再次应用上述规则，但此时使用max-height的值作为height的计算值。
   3. 如果结果高度小于min-height，则再次应用上述规则，但此时使用min-height的值作为height的计算值。
   4. [...]使用上面的最小和最大宽度算法找到使用的宽度和高度。然后使用所得的宽度和高度，应用上面的“计算高度和边距”规则，就像它们是计算值一样。

div.container {
  width:38em;
  border:1em solid black;
}

div.split {
  box-sizing:border-box;
  width:50%;
  border:1em silver ridge;
  float:left;
}

<div class="container">
<div class="split">This div occupies the left half.</div>
<div class="split">This div occupies the right half.</div>
</div>

4. 轮廓属性

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

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

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

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

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

在CSS3-UI中，对轮廓应用变换的渲染明确未定义。

4.1. 轮廓简写：outline 属性

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

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

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

使用轮廓属性创建的轮廓是在“框”上绘制的， 即轮廓始终位于顶部， 并且不会影响框或任何其他框的位置或大小。 因此，显示或隐藏轮廓不会导致回流。

轮廓可以是非矩形的。 例如，如果元素在多行之间断开， 则轮廓应是包围所有元素框的轮廓或最小轮廓集。

轮廓的每个部分应完全连接， 而不是在某些侧面打开 （如行断开时内联元素上的边框）。

轮廓的各个部分不需要是矩形的。 在轮廓遵循边框边缘的范围内， 它应遵循border-radius曲线。

轮廓的位置可能会受到后代框的影响。

用户代理应使用一种算法来确定包围适当区域的轮廓， 以便向用户传达焦点的概念。

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

outline-width属性接受与border-width相同的值（CSS Backgrounds 3 §4.3 Line Thickness: the border-width properties）。

outline-style属性接受与border-style相同的值（CSS Backgrounds 3 §4.2 Line Patterns: the border-style properties）， 除hidden不是合法的轮廓样式外。 此外，在CSS3中，outline-style接受值auto。 auto值允许用户代理渲染自定义轮廓样式， 通常是平台的用户界面默认样式， 或者可能是比CSS中详细描述的样式更丰富的样式， 例如具有半透明外像素的发光效果的圆边轮廓。 因此，本规范未定义在渲染auto样式轮廓时如何合并或使用outline-color（如果有的话）。 用户代理可以将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 }

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

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

默认情况下，轮廓是从边框边缘外开始绘制的。 然而，可以偏移轮廓并将其绘制到边框边缘之外。

如果outline-offset的计算值不是0， 则轮廓从边框边缘向外偏移相应的距离。

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

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

5. 调整大小和溢出

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

5.1. 调整框的大小：resize 属性

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

none

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

both

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

horizontal

用户代理显示单向水平调整大小的机制， 允许用户仅调整元素的宽度。

vertical

用户代理显示单向垂直调整大小的机制， 允许用户仅调整元素的高度。

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

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

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

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

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

注意： 如果实现了 CSSPseudoElement 接口（参见 [css-pseudo-4]），resize 属性将来可能适用于生成的内容。

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

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

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

用户代理必须允许用户在没有其他约束的情况下调整元素的大小，唯一的约束是min-width、max-width、min-height 和 max-height 强加的约束。

注意： 在某些情况下，用户尝试调整元素大小的操作可能会被覆盖或忽略，例如由于具有 !important 的层叠声明， 它们优先于该元素的样式属性 width 和 height 属性在 DOM 中的值。

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

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

5.2. 溢出省略号：text-overflow 属性

此属性指定了当内联内容在其块容器元素（“块”）的内联进展方向上超出其末端行框边缘时的渲染方式，而该块的 overflow 属性值不为 visible。

例如，当文本被阻止换行时（例如由于 white-space: nowrap 或单词过长无法容纳时），文本可能会溢出。 各个值的含义如下：

clip

剪裁溢出其块容器元素的内联内容。字符可能只会部分渲染。

ellipsis

渲染省略号字符（U+2026） 以表示被剪裁的内联内容。 实现可以替换为更符合语言、脚本或书写模式的省略号字符， 或者如果省略号字符不可用，则使用三个点“...”。

为了便于阅读，该属性定义中使用了“字符”一词，实际上是指“字形簇” [UAX29] 以便于实现。

对于 ellipsis 值，实现必须隐藏字符和原子内联级元素，以适应省略号，并 将省略号紧挨着剩余内联内容的末端边缘放置。 行上的第一个字符或原子内联级元素 必须被剪裁而不是使用省略号。

div {
font-family: monospace;
white-space: pre;
overflow: hidden;
width: 9ch;
text-overflow: ellipsis;
}

省略号详情

• 省略仅影响渲染，不得影响布局或指针事件的分发： 用户代理应将省略号上的任何指针事件分发到省略的元素上， 就像text-overflow 被设置为 none。
• 省略号根据块进行样式设置和基线对齐。
• 省略发生在相对定位和其他图形转换之后。
• 如果没有足够的空间容纳省略号， 那么应剪裁省略号本身的渲染 （与使用 text-overflow:clip 值时 行中中立字符本应被剪裁的侧边一致）。

与省略号的用户交互

• 当用户与内容进行交互时 （例如编辑、选择、滚动）， 用户代理可以将text-overflow: ellipsis 视为text-overflow: clip。
• 选择省略号时应选择被省略的文本。 如果选择了所有被省略的文本， 用户代理应显示省略号的选中状态。 部分选中的省略文本的行为由用户代理决定。

div {  font-family:Helvetica,sans-serif; line-height:1.1;
  width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0;
}

<div>
CSS IS AWESOME, YES
</div>

<div style="text-overflow:clip; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
NESTED
 <p>PARAGRAPH</p>
WON’T ELLIPSE.
</div>

注意： 省略号所在的行的侧边取决于块的方向。 例如，右到左溢出的隐藏块 （direction: rtl） 会在左侧剪裁内联内容， 因此会在左侧放置 text-overflow 省略号 以表示被剪裁的内容。

省略号与滚动接口的交互

本节适用于 text-overflow 非 text-overflow:clip（非剪裁 text-overflow） 和 overflow:scroll 的元素。

当具有非剪裁 text-overflow 的元素在文本的内联进展维度上有滚动溢出时， 并且浏览器提供滚动机制 （例如元素上的滚动条、 或触摸界面上的滑动滚动等）， 有一些额外的实现细节可以提供更好的用户体验：

当元素被滚动时（例如通过用户或 DOM 操作）， 将显示更多的元素内容。 text-overflow 的值不应影响 是否显示更多的元素内容。 如果设置了非剪裁 text-overflow， 那么当更多内容滚动到视图中时， 实现应显示所有适合的额外内容， 仅截断那些本来会被剪裁的内容 （或为省略号/字符串腾出空间）， 直到元素滚动足够远 以显示内容的边缘， 此时应显示该内容而不是省略号/字符串。

div.crawlbar {
  text-overflow: ellipsis;
  height: 2em;
  overflow: scroll;
  white-space: nowrap;
  width: 15em;
  border:1em solid black;
}

<div class="crawlbar">
CSS is awesome, especially when you can scroll
to see extra text instead of just
having it overlap other text by default.
</div>

在内容滚动时，实现可能会调整省略号的渲染方式（例如与框的边缘对齐而不是与行的边缘对齐）。

6. 指针设备和键盘

6.1. 指针交互

6.1.1. 光标样式：cursor 属性

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

注意：根据CSS Backgrounds 3 §5.1 曲线半径：border-radius 属性，边框边缘受border-radius影响。

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

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

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

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

值的含义如下：

图像光标

<url>

用户代理从由 URI 指定的资源中检索光标。如果用户代理无法处理列表中的第一个光标，则必须尝试处理第二个，依此类推。如果用户代理无法处理任何用户定义的光标，则必须使用列表末尾的光标关键字。符合标准的用户代理可以支持 <url>，而不是 <image>，后者是前者的超集。

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

• PNG，定义于 [PNG]
• SVG，定义于 [SVG11]，在 安全静态模式中 [SVG2]，如果它具有内在大小。
• 它们支持的任何其他非动画图像文件格式，用于其他属性中的 <image>，例如 background-image 属性

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

• SVG，如 [SVG11] 中定义，在 安全动画模式下，[SVG2] 中定义，如果它有固有大小。
• 他们支持的任何其他动画图像文件格式，用于 <image> 的其他属性，例如 background-image 属性

用户代理还可以支持其他文件格式，包括 SVG，如 [SVG11] 中定义的，在安全静态模式或安全动画模式下，即使它没有固有大小，[SVG2]。

注意： 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

光标是一个指示链接的指针。

progress

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

wait

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

选择光标

cell

表示可以选择一个或一组单元格。通常渲染为带有一个点的粗加号。

crosshair

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

text

表示可以选择的文本。通常渲染为垂直的 I-beam。用户代理可以自动显示水平的 I-beam/光标（例如，与vertical-text关键字相同），用于垂直文本，或者渲染为与文本呈现角度一致的 I-beam/光标。

vertical-text

表示可以选择的垂直文本。通常渲染为水平的 I-beam。

拖放光标

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
}

6.1.1.1. 画布的光标

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

注意：一个元素可能是不可见的， 但仍然会生成框。例如， 如果该元素设置了visibility: hidden，但没有设置display: none， 那么它会生成框并使用其光标作为画布的光标。

6.2. 插入光标

6.2.1. 插入光标的颜色：caret-color 属性

auto

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

<color>

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

插入光标是元素中显示的用户插入文本（和潜在其他内容）的指示器。此属性控制该可见指示器的颜色。

注意：光标的形状和闪烁超出了此功能的范围，因此未指定。

注意：用户代理可能还有其他被认为是“光标”的内容。 例如，某些用户代理可以显示“导航光标”， 它的行为类似于插入光标， 但可以在不可编辑文本中移动， 并且实际上是一个光标。 另一方面，光标图像显示在悬停在文本上时， 当cursor属性为auto时， 或悬停在元素上时，cursor属性为text或vertical-text， 虽然它有时类似于光标，但不是光标（它是一个光标）。

6.3. 键盘控制

6.3.1. 已废弃：ime-mode 属性

"ime-mode" 是一个在某些浏览器中部分实现的属性，这个属性存在问题并且被本规范正式废弃。

有关这些实现的不兼容性文档可以参考此处。

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

开发者不得使用 ime-mode 属性。

用户可以在某些修复情况下使用 ime-mode 属性，比如他们需要解决某些不良网站和遗留实现问题，例如使用如下用户样式表规则：

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

此示例CSS可以放入用户样式表文件中，强制密码输入字段以默认方式表现。

本规范故意不尝试记录遗留 ime-mode 实现的功能，也不记录它们具体支持什么，因为追求或推荐任何此类路径都没有意义。

附录 A. 致谢

此附录是信息性的。

本规范主要由Tantek Çelik 从1999年到现在编辑和编写， 最初代表微软，然后作为特邀专家， 最近代表Mozilla。

感谢Florian Rivoal，代表彭博社参与本规范工作， 他最近的工作包括记录www-style邮件中的问题， 提出解决方案与更改， 尤其是研究和编写了显著改进的box-sizing属性的详细信息。

感谢以下人员的反馈和贡献：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. 变更

此附录是信息性的。

自建议推荐以来的变更

本部分描述了自2017年12月14日的建议推荐 (PR)以来的变更。

• 更新了对最新版本的引用
• 更新了W3C推荐标准的日期和套话
• 添加了指向勘误文件的链接
• 更新了本变更部分

自候选推荐以来的变更

本部分描述了自2017年3月2日的候选推荐 (CR)以来的变更。

• 更新了对最新版本的引用
• 关于 resize 属性的编辑性澄清
• 将（存在风险的）定向焦点导航属性从第3级移至第4级
• 在 HTML 中添加了有关图像映射上cursor 的特殊处理的说明性链接
• 澄清了 text-overflow 对指针事件的影响（作为一种建议），以捕获实现者的共识 (对应测试)。
• 澄清了用户代理可以忽略 cursor 属性以反映用户代理的UI状态
• 允许但不再要求支持没有内在大小的 SVG 图像作为光标 (对应测试更新)。
• 使规范与实现保持一致，使cursor: auto 在可选择文本和可编辑元素上看起来像text (对应测试)。

附录 C. 安全和隐私注意事项

此附录是信息性的。

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

根据需要考虑的问题:

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

   否。

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

   否。

3. 该规范是否为源引入了跨浏览会话持久化的新状态？

   否。

4. 该规范是否向网页暴露了持久的跨源状态？

   否。

5. 该规范是否向当前无访问权限的源暴露了任何其他数据？

   否。

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

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

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

   否。

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

   否。

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

   否。

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

    否。

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

    是的。cursor和caret-color属性允许页面更改用户代理原生 UI 的光标和文本插入点的显示。此外，outline-style属性的auto值（因此也是outline简写属性）允许页面在任何元素周围显示本地聚焦元素轮廓。

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

    否。

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

    否。

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

    无区别。

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

    否。

16. 该规范是否有“安全注意事项”和“隐私注意事项”部分？

    是的。

17. 该规范是否允许降低默认的安全特性？

    否。

附录 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 input type=reset 按钮的默认内容 */
 content: "Reset";
}

input[type=submit]:lang(en)
{
/* 每种语言的 HTML input type=submit 按钮的默认内容 */
 content: "Submit";
}

/* UA 应为其他语言使用特定于语言的 Reset/Submit 规则。 */

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 hidden 文本字段的外观 */
 display: none !important;
}

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

select[size]
{
/* HTML4/XHTML1 <select> 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> 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 }

*/