blob: cdf72cc791d121b617fa4b94b0f2ee5bc05cb797 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
---
title: 浏览器引擎前缀
slug: Glossary/Vendor_Prefix
tags:
- 术语
translation_of: Glossary/Vendor_Prefix
---
<p>浏览器厂商们有时会给实验性的或者非标准的 CSS 属性和 JavaScript API 添加前缀，这样开发者就可以用这些新的特性进行试验，同时（理论上）防止他们的试验代码被依赖，从而在标准化过程中破坏 web 开发者的代码。开发者应该等到浏览器行为标准化之后再使用未加前缀的属性。</p>
<div class="note">
<p>浏览器厂商们正在努力停止使用前缀来表示实验性质的代码的行为。Web开发者一直在生产环境的网站上使用这些实验性代码，这使得浏览器厂商更难保证浏览器兼容性和处理新特性；这也伤害了更小众的浏览器，它们被迫添加其他浏览器前缀以加载热门网站。</p>
<p>现在的趋势是将实验性功能添加在需要用户自行设置偏好或标记（flag）的地方，同时编写一个更小规模的规范，以更快达到稳定状态。</p>
</div>
<h2 id="CSS_前缀">CSS 前缀</h2>
<p>主流浏览器引擎前缀:</p>
<ul>
<li><code>-webkit-</code> （谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器）</li>
<li><code>-moz-</code> （火狐浏览器）</li>
<li><code>-o-</code> （旧版Opera浏览器）</li>
<li><code>-ms-</code> （IE浏览器 和 Edge浏览器）</li>
</ul>
<p>示例:</p>
<pre class="notranslate"><em>-webkit-</em>transition: all 4s ease;
<em>-moz-</em>transition: all 4s ease;
<em>-ms-</em>transition: all 4s ease;
<em>-o-</em>transition: all 4s ease;
transition: all 4s ease; </pre>
<h2 id="API_前缀">API 前缀</h2>
<p>过去，浏览器引擎也使用前缀修饰实验性质的API。如果整个接口都是实验性的，前缀修饰的就是接口名（但不包括其中的属性或者方法）。如果将一个实验性的接口或者方法添加到一个标准化的接口中，这个新增的接口或者方法被前缀修饰。 </p>
<h3 id="接口前缀">接口前缀</h3>
<p>需要使用大写的前缀修饰接口名：</p>
<ul>
<li><code>WebKit</code> (谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说，所有基于WebKit 内核的浏览器)</li>
<li><code>Moz</code> (火狐浏览器)</li>
<li><code>O</code> (旧版Opera浏览器)</li>
<li><code>MS</code> (IE浏览器 和 Edge浏览器)</li>
</ul>
<h3 id="属性和方法前缀">属性和方法前缀</h3>
<p>需要使用小写的前缀修饰属性或者方法</p>
<ul>
<li><code>webkit</code> (谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说，所有基于WebKit 内核的浏览器)</li>
<li><code>moz</code> (火狐浏览器)</li>
<li><code>o</code> (旧版Opera浏览器等</li>
<li><code>ms</code> (IE浏览器 和 Edge浏览器)</li>
</ul>
<p>示例:</p>
<pre class="brush: js notranslate">var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame;</pre>
<h2 id="了解更多">了解更多</h2>
<h3 id="基础知识">基础知识</h3>
<ul>
<li><span>维基百科{{Interwiki("wikipedia", "CSS_hack#Browser_prefixes", "浏览器引擎前缀（</span>Vendor prefix<span>）")}} </span></li>
</ul>
<p>{{QuickLinksWithSubpages("/zh-CN/docs/Glossary")}}</p>
|
