兼容性

1. 简介

现在有越来越多的网页内容依赖于浏览器支持一些特定的厂商CSS属性和DOM API，以实现功能或布局。 这一点在针对移动优化的网页内容中尤为突出，其高度依赖于 -webkit- 前缀属性。

本规范旨在描述用户代理为实现网页兼容性所需支持的最小集合的 -webkit- 前缀CSS属性和DOM API，这些内容未被其他规范涵盖。

同时还描述了目前主流浏览器中的HTTP User-Agent 头字段。

2. 符合性

本文件中的关键词 "MUST"、"MUST NOT"、"REQUIRED"、"SHALL"、"SHALL NOT"、 "SHOULD"、"SHOULD NOT"、"RECOMMENDED"、"NOT RECOMMENDED"、"MAY" 以及 "OPTIONAL" 应按照 RFC 2119 中的说明进行解释。 为了便于阅读，这些词在本规范中未全部采用大写形式。[RFC2119]

在算法中以祈使句表述的要求（如“去除所有前导空格字符”或“返回 false 并终止这些步骤”）， 应按照引入算法时所用关键词（“must”、“should”、“may”等）的含义进行解释。

以算法或具体步骤方式表述的符合性要求可以以任何方式实现，只要最终结果等效即可。 （尤其是，本规范中的算法旨在便于理解，并不以性能为目标。）

3. CSS 兼容性

3.1. CSS At 规则

以下 -webkit- 厂商前缀 At 规则 必须作为对应的无前缀 At 规则 的别名支持：

3.2. CSS 媒体查询

3.2.1. -webkit-device-pixel-ratio

-webkit-device-pixel-ratio 必须作为 resolution 区间类型 媒体特性 的别名处理，其值以 dppx 单位解释。

区间特性上的 min- 或 max- 前缀不能应用于 -webkit-device-pixel-ratio， 而必须使用如下别名：

3.2.2. -webkit-transform-3d

-webkit-transform-3d 媒体特性 用于查询用户代理是否支持 CSS 3D 变换。[css-transforms-1]

如果用户代理支持 3D 变换，则值为 1。否则值为 0。

3.3. CSS 渐变函数

3.3.1. -webkit-linear-gradient()

-webkit-linear-gradient() 渐变函数 必须作为 linear-gradient 的别名处理，相关定义见 [css3-images-20110217]。

3.3.2. -webkit-radial-gradient()

-webkit-radial-gradient() 渐变函数 必须作为 radial-gradient 的别名处理，相关定义见 [css3-images-20110217]。

3.3.3. -webkit-repeating-linear-gradient()

-webkit-repeating-linear-gradient() 渐变函数 必须作为 repeating-linear-gradient 的别名处理，相关定义见 [css3-images-20110217]。

3.3.4. -webkit-repeating-radial-gradient()

-webkit-repeating-radial-gradient() 渐变函数 必须作为 repeating-radial-gradient 的别名处理，相关定义见 [css3-images-20110217]。

3.4. CSS 属性

3.4.1. 历史名称别名

以下 -webkit- 厂商前缀 属性必须作为对应无前缀属性的 历史名称别名 支持：

3.4.2. 带前缀的历史名称别名

以下 -webkit- 厂商前缀 属性必须作为对应无前缀属性的 历史名称别名 支持。如果 用户代理未实现无前缀等效属性，则 -webkit- 前缀属性必须作为用户代理自身厂商前缀属性的别名处理。

注意: 一旦某属性可以去前缀，就可定义为 历史名称别名。

3.4.3. 未别名的厂商前缀属性

注意: 本节曾规定 -webkit-appearance 属性。 现已在 CSS 基本用户界面模块中定义。

3.4.4. 属性映射

以下 -webkit- 厂商前缀 属性必须作为对应无前缀属性的映射支持：

这些 -webkit-box-* 的定义已知与 Web 兼容性不符。[问题 #87]

3.4.5. 关键字映射

以下 -webkit- 厂商前缀 关键字必须作为对应无前缀关键字的映射支持：

这个 -webkit-box 的定义已知与 Web 兼容性不符。[问题 #87]

3.4.6. 文本填充与描边

3.4.6.1. 前景文本颜色： -webkit-text-fill-color 属性

-webkit-text-fill-color 属性用于定义元素文本内容的前景填充颜色。

.one {
  color: blue;
  /* 以下可省略，因为是初始值：
  -webkit-text-fill-color: currentcolor; */
}

.two {
  color: red;
  -webkit-text-fill-color: blue;
}

3.4.6.2. 文本描边颜色： -webkit-text-stroke-color 属性

-webkit-text-stroke-color 属性用于指定元素文本的描边颜色。

3.4.6.3. 文本描边粗细： -webkit-text-stroke-width 属性

-webkit-text-stroke-width 属性用于指定在每个字形边缘绘制的描边宽度。值为零时不绘制描边。负值为无效。

3.4.6.4. 文本描边简写： -webkit-text-stroke 属性

-webkit-text-stroke 属性是-webkit-text-stroke-width 和 -webkit-text-stroke-color 属性的简写， 用于同时设置元素文本的描边宽度和描边颜色。

.stroked-text-longhand {
  color: #fff;
  -webkit-text-stroke-color: #000;
  -webkit-text-stroke-width: 1px;
}

.stroked-text-shorthand {
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: thin #000;
}

<p class="stroked-text-longhand">Serious typography</p>

3.5. CSS 属性值

3.5.1. 附加 touch-action 值

本节补充了 touch-action 的定义，见 [pointerevents2]，以 添加 pinch-zoom 值。

当指定 pinch-zoom 标记时，可启用页面的多指平移和缩放。要发生缩放，所有手指必须从启用了 pinch-zoom 行为的元素开始（通过其自身或祖先上的 pinch-zoom、manipulation 或 auto 值启用）。

manipulation 是 "pan-x pan-y pinch-zoom" 的别名。

4. DOM 兼容性

4.1. WebKitCSSMatrix 接口

注意: WebKitCSSMatrix 现已在 DOM Geometry 规范中定义。[geometry-1]。

4.2. window.orientation API

partial interface Window {
    readonly attribute short orientation;
    attribute EventHandler onorientationchange;
};

partial interface HTMLBodyElement {
    attribute EventHandler onorientationchange;
};

获取 orientation 属性时，用户代理必须执行以下步骤：

1. 令 document 为 this 的 相关全局对象的 关联 Document。

2. 返回 document 当前的 window.orientation 角度。

每当视口绘制角度与设备自然方向不同，用户代理必须执行以下步骤：

1. 触发名为 orientationchange 的事件， 并在 Window 对象上（即 活动文档）。

实现 window.orientation 属性及其相关 orientationchange 事件的用户代理，不得在非移动平台暴露这些属性。

4.2.1. window.orientation 角度

window.orientation 角度可能的整数值有：-90、0、90、180。用户代理必须支持 -90、0 和 90，可选支持 180。

0 表示自然方向。-90 表示从自然方向顺时针旋转 90 度。90 表示从自然方向逆时针旋转 90 度。180 表示从自然方向旋转 180 度。

要确定当前 window.orientation 角度，用户代理必须执行以下步骤：

1. 令 orientationAngle 为 当前方向角。
   1. 如果 orientationAngle 小于 180，则返回 orientationAngle。
   2. 如果 orientationAngle 等于 180，且 用户代理 支持该值，则返回 orientationAngle，否则返回 0。
   3. 如果 orientationAngle 大于 180，则返回 orientationAngle - 360。

4.2.2. 事件处理器（Window 对象和 body 元素）

以下事件处理器及其对应的事件类型，必须作为属性在所有 Window 对象和 body 元素上支持：

5. User-Agent 字符串

User-Agent 头字段语法由 [HTTP-SEMANTICS] 正式定义， 并对其值给出 SHOULD 级别的指导。本节作为主流网页浏览器中 User-Agent 模式的描述性记录，但许多内容也适用于有共同血统的其他浏览器（如分支和嵌入式浏览器）以及任何 用户代理（更广义上指发送 User-Agent 头的任何实现）。

5.1. User-Agent 标记

User-Agent 标记 是一个字符串，表示 User-Agent 字符串中的语义单元抽象。本文档将 标记形式化为以左尖括号“<”开头、右尖括号“>”结尾的字符串，如 <version>。一个 标记也可以包含其他标记。

User-Agent 常量是字符串，其值不会变化。

当一个 标记的值由一个或多个 标记以及可选的 常量组成时，称其分解为这些标记和常量。

5.1.1. User-Agent 标记参考

以下是常见 User-Agent 标记的非详尽列表。

5.2. 元结构

下列 User-Agent 字符串具有共同的元结构：

"Mozilla/5.0 (a) b"

其中 a 是一个或多个标记，表示设备信息；b 是一个或多个标记，表示浏览器信息。

5.3. Chrome

5.3.1. Chrome User-Agent 模式

"Mozilla/5.0 (<unifiedPlatform>) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/<majorVersion>.0.0.0 <deviceCompat>Safari/537.36"

5.3.2. Chrome 专用标记

5.4. Firefox

5.4.1. Firefox User-Agent 模式

"Mozilla/5.0 (<firefoxPlatform>; rv: <firefoxVersion>) Gecko/<geckoVersion> Firefox/<firefoxVersion>"

5.4.2. Firefox 专用标记

<firefoxVersion> 分解为如下内容：

"<majorVersion>.0"

在桌面平台（Windows、macOS、Linux 等）的 Firefox 中， <geckoVersion> 是固定的构建日期 "20100101"。在 Android 版 Firefox 中， <geckoVersion> 与 <firefoxVersion> 相同。

<firefoxPlatform> 分解为如下内容：

在桌面平台上， "<platform>; <oscpu>"。

在 Android 版 Firefox 上， "<platform>; <deviceCompat>"。

5.5. Safari

5.5.1. Safari User-Agent 模式

"Mozilla/5.0 (<safariPlatform>) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/<safariVersion><deviceCompat>Safari/<webkitVersion>"

5.5.2. Safari 专用标记

<safariVersion> 分解为如下内容：

"<majorVersion>.<minorVersion>", 其中 <minorVersion> 为单个数字。

<safariPlatform> 分解为如下内容：

在桌面及较大尺寸 iPad 设备上，取常量 "Macintosh; Intel Mac OS X 10_15_7"。

在移动平台（包括较小尺寸 iPad） "<appleProduct>; CPU <mobileOSName> <iOSVersion> like Mac OS X"。

致谢

感谢 Mounir Lamouri 和 Marcos Cáceres 定义了 ScreenOrientation 接口。 [screen-orientation]

特别感谢 Apple 和 WebKit.org 博客作者为本规范内容的初步描述作出的贡献。

本标准由 Mike Taylor (Google, miketaylr@google.com) 编写。

知识产权

版权所有 © WHATWG (Apple, Google, Mozilla, Microsoft)。本作品依据 知识共享署名 4.0 国际许可协议 许可。若部分内容被纳入源代码，则该部分源代码依据 BSD 3-Clause 许可证 许可。

本规范为现行标准。有意了解专利审查版本的请参见 现行标准审查草案。