CSS 基本用户界面模块 3（CSS3 UI）

1. 引言

本模块描述了使作者能够为用户界面相关特性设定样式的 CSS 属性。

CSS1 第 2.1 节 [CSS1] 和 CSS2 第 18 章 [CSS2] 引入了若干用户界面相关的属性和值。 User Interface for CSS3 (16 February 2000) 引入了若干新的用户界面相关特性。

本规范将这些内容合并、扩展并取代之。

1.1. 目的

本规范的目的在于实现以下目标：

• 扩展 CSS2.1 中的用户界面特性。
• 提供额外的 CSS 机制，用于增强或替代 HTML 中其它与动态呈现相关的特性。

2. 模块交互

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

• 第 18.1 节、 第 18.4 节， 以及层叠轮廓相关信息（定义于 层叠样式表第 2 级修订版 附录 E 中） [CSS2]
• User Interface for CSS3 (16 February 2000)

2.1. 取值定义

本规范遵循 CSS 属性定义约定（见 [CSS2]）， 并使用 取值定义语法（见 [CSS-VALUES-3]）。 未在本规范中定义的值类型由 CSS Values & Units [CSS-VALUES-3] 定义。 与其它 CSS 模块的组合可能会扩展这些值类型的定义。

除各属性定义中列出的特定取值外， 本规范定义的所有属性都可以将 CSS 全局关键字 作为属性值。 为了可读性，这些关键字未在每个属性定义中显式重复。

3. 盒模型补充

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

content-box

这是 CSS2.1 指定的 width 和 height 的行为。 指定的 width 和 height（以及相应的 min/max 属性） 分别应用于元素内容盒 (content box) 的宽度和高度。 元素的 padding 和 border 在指定的 width 和 height 之外进行布局与绘制。

border-box

应用于该元素时，width 与 height（以及相应的 min/max 属性）的长度与百分比值 决定元素的边框盒 (border box)。 即：在该元素上指定的任何 padding 和 border 都在该指定的 width 和 height 内进行布局与绘制。 内容宽度与高度通过 从指定的 width 与 height 属性中，分别减去各侧的 border 和 padding 宽度计算得出。 由于内容宽度与高度 不能为负值（见 [CSS2] 第 10.2 节）， 因此该计算向下限定为 0。 例如通过 getComputedStyle() 暴露的使用值 (used value) 也指向边框盒。

Note: 这是旧版 HTML 用户代理在替换元素与 input 元素上 常见实现的 width 与 height 行为。

Note: 与长度和百分比值不同， auto 这一 width 与 height 的取值（以及后续规范引入的其它关键字值，除非另有说明） 不受 box-sizing 属性影响， 且始终设置内容盒的尺寸。

引入如下术语，其定义依赖于 box-sizing 的计算值而变化：

CSS2 视觉格式化模型细节 [CSS2] 是在假定 box-sizing: content-box 的前提下撰写的。 为澄清在 box-sizing 所有取值下的行为，对文中内容做如下消除歧义说明：

1. 在 10.3.3 中，下面语句中的第二个 width 应理解为 内容宽度 (content width)： 若 width 非 auto 且 border-left-width + padding-left + width + [...]
2. 在 10.3.7 中，下式里的 width 应理解为 内容宽度 (content width)：left + margin-left + border-left-width + padding-left + width + [...]
3. 在 10.4 中， width、height、min-width、max-width、min-height 与 max-height 分别应理解为 内容宽度、 内容高度、min inner width、max inner width、min inner height 与 max inner 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 应理解为 内容高度 (content height)：top + margin-top + border-top-width + padding-top + height + [...]
5. 在 10.7 中， width、height、min-height 与 max-height 分别应理解为 内容宽度、内容高度、 min inner height 与 max inner 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 中，对变换 (transform) 应用于轮廓时应如何渲染未作规定。

4.1. 轮廓简写：outline 属性

4.2. 轮廓粗细：outline-width 属性

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

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

由轮廓属性创建的轮廓绘制在盒子“之上”， 即轮廓始终在最上层， 且不影响盒子的尺寸或位置、 以及其它任何盒子的尺寸或位置。 因此，显示或隐藏轮廓不会导致回流 (reflow)。

轮廓可以是非矩形的。 例如，当元素被分割到多行时， 轮廓应为一个或最少数量的一组轮廓， 以包围该元素的所有盒子。

轮廓的各部分应完整封闭， 而非某些边敞开 （如内联元素在多行断行时边框的表现）。

轮廓各部分不要求是矩形。 在轮廓沿着 边框边缘 (border edge) 绘制的范围内， 应跟随 border-radius 的曲线。

轮廓的位置可能受到后代盒子的影响。

用户代理应使用一种算法来确定 能恰当表现“焦点”概念的包围区域轮廓。

Note: 本规范并未定义轮廓的精确位置与形状， 但通常是紧挨着边框盒之外绘制。

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

outline-style 属性接受与 border-style 相同的取值 （参见 CSS Backgrounds 3 § 3.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 三个属性。

Note: 轮廓在四边保持一致。 与边框不同， 没有 outline-top 或 outline-left 等属性。

本规范未定义多条重叠轮廓如何绘制， 或当盒子部分被其它元素遮盖时轮廓如何绘制。

button { outline: thick solid }

图形用户界面可在元素周围使用轮廓， 告知用户页面上哪个元素拥有焦点。 这些轮廓是对边框的补充， 开启或关闭轮廓不应导致文档回流。 焦点是文档中用户交互的对象 （例如输入文本或选择按钮）。

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

Note: 由于轮廓不会影响格式化 （即在盒模型中不会为其预留空间）， 因此它可能与页面上的其它元素发生重叠。

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 与 overflow: hidden 等）。 resize 属性的目的在于允许控制 元素上调整大小机制的外观与功能 （例如某个调整控件或小组件）。

Note: 调整大小机制不同于滚动机制， 也与任何用户代理的缩放机制无关。 滚动机制允许用户决定显示元素内容的哪一部分。 调整大小机制允许用户决定元素本身的尺寸。

resize 属性适用于 其计算的 overflow 值 不为 visible 的元素。 为 滚动容器 的元素。 用户代理还可以在不考虑 overflow 属性取值的情况下， 对以下对象应用该属性：

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

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

Note: 若将来实现了 CSSPseudoElement 接口（参见 [css-pseudo-4]）， resize 属性在将来可能适用于生成内容。

当元素被用户调整大小时， 用户代理在该元素的 style 属性 DOM 中 将 width 与 height 属性 设置为表示用户指定尺寸的 px 单位长度值， 替换其中现有的（若有）不带 !important 的属性声明。

若元素仅在一个维度上被调整大小， 则仅设置对应的属性，而不会同时设置两个属性。

具体的调整方向 （即改变元素左上角还是右下角）可能取决于 多种 CSS 布局因素， 包括元素是否绝对定位、 是否使用 right 与 bottom 属性进行定位、 元素语言是否为从右到左等。 用户代理在决定如何向用户展示调整大小机制时， 应同时考虑由 CSS 布局决定的调整方向、 以及平台约定与限制。

用户代理在允许用户调整元素大小时， 必须不施加除 min-width、max-width、min-height 与 max-height 所带来的限制以外的额外限制。

Note: 在某些情况下，用户尝试调整元素大小 似乎会被覆盖或忽略，例如由于带有 !important 的级联声明 覆盖了 DOM 中该元素 style 属性 里的 width 与 height 属性。

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

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) 呈现被裁剪的内联内容。 实现可以根据语言、书写系统或书写模式选择更合适的 省略号字符， 或在省略号字符不可用时使用三个点 "..."。

为提高可读性，本属性定义中使用了“字符”一词， 在实现时其含义为“字素簇 (grapheme cluster)” [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>

Note: 省略号放置在行的哪一侧取决于块的 direction。 例如，一个 overflow hidden 的自右向左 （direction: rtl） 块会在 左 侧裁剪内联内容， 因此放置 text-overflow 省略号时应在 左 侧标识被裁剪内容。

省略号与滚动接口的交互

本节适用于 text-overflow 取值非 text-overflow:clip（即非 clip）的元素， 且其 overflow:scroll。

当某元素在文本内联进程方向上 同时具有非 clip 的 text-overflow 与 overflow:scroll， 且浏览器为其提供了滚动机制（例如元素上的滚动条、 触控滑动等）， 为了更好的用户体验，还需要一些额外实现细节：

当元素发生滚动时（如由用户或 DOM 操作触发）， 会显示更多内容。 text-overflow 的取值不应影响是否显示更多内容。 若设置了非 clip 的 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 属性

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

Note: 如 CSS Backgrounds 3 § 4.1 Curve Radii: the border-radius properties 所述， 边框边缘 会受到 border-radius 的影响。

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

Note: 命中测试的具体细节不在本规范的讨论范围内。 命中测试有望在未来版本的 CSS 或 HTML 中定义。

用户代理可以在本机 UI 控件（如滚动条、调节手柄或其它原生小部件， 例如用于某些 UA 特定实现的表单控件内部）上忽略 cursor 属性。 用户代理也可以忽略 cursor 属性， 并根据其 UI 状态显示自选光标， 例如页面无响应时显示忙碌光标， 或在进行文本选择时显示文本光标。

Note: [HTML] 对 图像映射上的 cursor 属性 规定了特殊处理。

各取值含义如下：

<cursor-image>

cursor 属性 的第一个（可选）部分是光标图像列表。 若用户代理无法处理列表中的第一个光标， 必须尝试处理第二个，依此类推。 若用户代理无法处理任何作者定义的光标， 必须使用列表末尾的关键字光标作为回退光标。

<cursor-image> 语法如下：

<cursor-image> = <url> <number>{2}?

用户代理从 URL 指定的资源中获取光标。 符合规范的用户代理可以在 <url> 之外， 额外支持 <image>，后者是其超集。

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

• PNG，见 [PNG]
• SVG，见 [SVG11]，以 secure static mode [SVG2] 运行，且具有 自然尺寸 (natural size)。
• 任何其它非动画图像文件格式，只要用户代理在其它属性中的 <image> 类型中支持该格式， 如 background-image 属性

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

• SVG，见 [SVG11]，以 secure animated mode [SVG2] 运行，且具有 自然尺寸。
• 任何其它动画图像文件格式，只要用户代理在其它属性中的 <image> 类型中支持该格式， 如 background-image 属性

用户代理还可以支持额外的文件格式，包括在 [SVG11] 中定义并以 secure static mode 或 secure animated mode 运行的 SVG [SVG2]， 即便该图像没有 自然尺寸。

Note: CSS 工作组起初希望 支持所有 SVG，不论是否具有自然尺寸。 由于缺少实现，对无自然尺寸 SVG 的要求 从“必须”降为“可选”。

Note: 在撰写本规范时 （2015 年春）， 常见桌面浏览器中用于光标的唯一文件格式 是微软设计的 .ico 与 .cur 文件。 出于与旧内容兼容的考虑， 鼓励用户代理支持这些格式， 即便由于缺乏公开规范而无法对其作出规范性要求。 关于这些格式的一些信息可以参考 维基百科。

光标图像的默认对象尺寸 为用户代理定义的某个尺寸， 应基于用户代理操作系统中 典型光标的尺寸。

具体对象尺寸 使用 默认尺寸算法确定。 若操作系统 无法 渲染超过某一尺寸的光标， 则必须将超出该尺寸的光标缩小到 系统支持的尺寸范围内， 同时保持光标图像的 自然纵横比（若有）。

该可选的两个 <number> 值给出 图像内部作为指针位置（即“热点”）的精确 X、Y 坐标， 以自图像左上角的偏移量表示。

Note: 本规范不定义 各类 <image> 的坐标系如何建立， 而将这些定义留给 [CSS4-IMAGES]。

若省略该坐标， 则使用图像资源自身定义的自然热点。 若不存在自然热点， 则使用图像左上角， 即相当于指定 0 0。

若热点的 X 或 Y 坐标 （无论是明确给出还是由图像决定） 超出光标图像范围， 则必须在各自维度上进行截断以适配图像。

<cursor-predefined>

必选的 <cursor-predefined> 关键字 指定要使用的预定义光标， 或当提供了 <url> 且均无法成功使用时， 所使用的“回退”光标。

完整的 § 6.1.1.1 预定义光标 列出了所有 <cursor-predefined> 关键字及其含义。

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

6.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 不同之处在于用户仍可与程序交互。 通常呈现为彩色转圈、 或者箭头旁带手表/沙漏。

wait

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

选择光标

cell

表示可选择某个单元或一组单元。 通常呈现为中心带点的粗十字。

crosshair

简单的十字光标（例如短线段组成的 “+” 号）。 通常用于表示二维位图选区模式。

text

表示可选择的文本。通常呈现为垂直 I 形光标。 用户代理可以在垂直文本上自动显示水平 I 形光标 （例如与 vertical-text 关键字使用同一光标）， 或对于任意角度的文本， 显示任意角度的 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。

6.1.1.2. 画布的光标

文档的 画布 (canvas) 是渲染文档的无限平面 [CSS2]。 由于没有元素对应该画布， 为了允许在不位于任何元素上时设置光标样式， 画布光标会复用根元素的光标。 然而，若根元素不生成任何盒子 （例如根元素设置了 display: none）， 则画布光标应为平台相关的默认光标。

Note: 某个元素也可能不可见， 但依然生成盒子。例如， 若该元素设置为 visibility: hidden 而非 display: none， 则依然会为其生成盒子，且其光标将用于画布。

6.2. 插入光标

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

auto

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

<color>

使用指定颜色绘制插入光标。

插入光标是一个可见指示符， 用于表示在某元素中插入文本（及可能其他内容）的位置。 本属性控制该可见指示符的颜色。

Note: 光标形状与闪烁行为不在本特性范围内，因此未作规定。

Note: 用户代理可能存在额外被视为“光标”的内容。 例如，有些用户代理会显示“导航光标”， 类似插入光标但可以在不可编辑文本中移动， 在功能上也属于光标。 另一方面，当 cursor 属性为 auto， 或当指向元素且其 cursor 属性为 text 或 vertical-text 时， 所显示的光标图像尽管有时看起来像光标，但其本质是“光标 (cursor)”，而非“插入光标 (caret)”。

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： 致谢

本附录为非规范性内容。

本规范的大部分编辑与撰写工作 自 1999 年起由 Tantek Çelik 完成， 最初代表微软，之后作为受邀专家， 最近则代表 Mozilla。

感谢 Florian Rivoal（代表 Bloomberg 参与本规范）， 他近期的工作包括整理 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：变更

本附录为非规范性内容。

来自 2018 年 6 月 21 日推荐标准 (REC) 的变更

• 候选更正 1： 改为引用 滚动容器， 而非 overflow 取值不为 visible 的情况， 从而将 clip 包含在内。
• 候选更正 2： 令 outline-width 的计算值为 按边框宽度对齐 (snapped as a border width)。
• 候选更正 3： 更新并澄清了计算值与动画类型定义。
• 候选更正 4： 移除基于 outline-style: none 而令 outline-width 计算值为 0 的特殊情况。
• 将相关术语从“intrinsic width/height/aspect ratio/size” 更新为 “natural”， 以与其它规范保持一致。
• 从属性定义中移除 “Media” 项。其含义从未被正确定义，且无实质帮助。
• 新增 “取值定义” 一节， 以与其它 CSS 规范保持一致。
• 重排 cursor 属性语法说明， 以提高可读性。
• 补充 Web Platform Tests 覆盖。
• 将隐私与安全注意事项拆分为两个独立章节。
• 更新到其它 CSS 模块的引用至较新的版本。
• 若干其它编辑性改进。

来自 2017 年 3 月 2 日候选推荐标准 (CR) 的变更

• 更新引用到最新版本
• 关于 resize 属性的编辑性澄清
• 将（处于风险中的）方向性焦点导航属性从第 3 级移至第 4 级
• 添加到 HTML 的说明性链接，说明在图像映射上 对 cursor 的特殊处理
• 将 text-overflow 对指针事件的影响澄清为 SHOULD， 以捕获实现者共识（参见 对应测试）。
• 澄清用户代理可忽略 cursor 属性以反映自身 UI 状态
• 允许但不再要求对不具自然尺寸的 SVG 图像 作为光标给予支持（参见 对应测试更新）。
• 与实现保持一致，并使 cursor: auto 在可选文本以及可编辑元素上 表现为 text（参见 对应测试）。

附录 C：隐私注意事项

W3C TAG 正在制定一份 安全与隐私自我审查问卷， 用于规范编辑者填写说明性回答。

根据 “需要考虑的问题”

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

   否。

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

   否。

3. 本规范是否为某个源引入跨浏览会话持久存在的新状态？

   否。

4. 本规范是否将任何持久的跨源状态暴露给 Web？

   否。

5. 本规范是否向某个源暴露了其当前无法访问的任何其它数据？

   否。

6. 本规范是否允许某个源访问用户位置？

   否。

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

   否。

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

   否。

9. 本规范是否允许某个源访问其它设备？

   否。

10. 本规范是否向 Web 暴露临时标识符？

    否。

11. 本规范在第一方与第三方上下文中是否有所区分？

    否。

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

    无差别。

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

    否。

附录 D：安全注意事项

本附录为非规范性内容。

W3C TAG 正在制定一份 安全与隐私自我审查问卷， 用于规范编辑者填写说明性回答。

根据 “需要考虑的问题”

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

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

2. 本规范是否允许某个源在一定程度上控制用户代理的原生 UI？

   是。cursor 与 caret-color 属性 允许页面改变用户代理原生 UI 中光标与文本插入光标的显示。 此外，outline-style 属性的 auto 取值 （以及 outline 简写） 允许页面在任意元素周围展示潜在的原生焦点轮廓样式。

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

   否。

附录 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 {
  /* 特别是对 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";
}

/* 用户代理应为其它语言使用相应的 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 中 size 大于 1 的 <select> —— 列表外观 */
  display: inline-block;
  height: attr(size,em);
}

select, select[size=1] {
/* HTML4/XHTML1 中无 size 或 size=1 的 <select> —— 下拉菜单外观 */
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

select[size]:active {
/* 处于活动状态的 size 大于 1 的 HTML <select> —— 活动列表外观 */
  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
}

*/