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
|
---
title: Vendor Prefix
slug: Glossary/Vendor_Prefix
translation_of: Glossary/Vendor_Prefix
original_slug: Глоссарий/Vendor_Prefix
---
<p>Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process. Developers should wait to include the unprefixed property until browser behavior is standardized.</p>
<div class="note">
<p>Browser vendors are working to stop using vendor prefixes for experimental features. Web developers have been using them on production Web sites, despite their experimental nature. This has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites.</p>
<p>Lately, the trend is to add experimental features behind user-controlled flags or preferences, and to create smaller specifications which can reach a stable state much more quickly.</p>
</div>
<h2 id="CSS_prefixes">CSS prefixes</h2>
<p>The major browsers use the following prefixes:</p>
<ul>
<li><code>-webkit-</code> (Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; basically, any WebKit based browser)</li>
<li><code>-moz-</code> (Firefox)</li>
<li><code>-o-</code> (old pre-WebKit versions of Opera)</li>
<li><code>-ms-</code> (Internet Explorer and Microsoft Edge)</li>
</ul>
<p>Sample usage:</p>
<pre><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_prefixes">API prefixes</h2>
<p>Historically, vendors have also used prefixes for experimental APIs. If an entire interface is experimental, then the interface's name is prefixed (but not the properties or methods within). If an experimental property or method is added to a standardized interface, then the individual method or property is prefixed.</p>
<h3 id="Interface_prefixes">Interface prefixes</h3>
<p>Prefixes for interface names are upper-cased:</p>
<ul>
<li><code>WebKit</code> (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)</li>
<li><code>Moz</code> (Firefox)</li>
<li><code>O</code> (Older, pre-WebKit, versions of Opera)</li>
<li><code>MS</code> (Internet Explorer and Microsoft Edge)</li>
</ul>
<h3 id="Property_and_method_prefixes">Property and method prefixes</h3>
<p>The prefixes for properties and methods are lower-case:</p>
<ul>
<li><code>webkit</code> (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)</li>
<li><code>moz</code> (Firefox)</li>
<li><code>o</code> (Old, pre-WebKit, versions of Opera)</li>
<li><code>ms</code> (Internet Explorer and Microsoft Edge)</li>
</ul>
<p>Sample usage:</p>
<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame;</pre>
<h2 id="Learn_more">Learn more</h2>
<h3 id="General_knowledge">General knowledge</h3>
<ul>
<li><span>{{Interwiki("wikipedia", "CSS_hack#Browser_prefixes", "Vendor prefix")}} on Wikipedia</span></li>
</ul>
<div>{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}</div>
|
