Vendor Prefix
Web developers included prefixed features on production websites, despite their experimental nature. This made it more difficult for browser vendors to ensure compatibility while working on new features. Including prefixed features also harmed smaller browser vendors who ended up having to add other browsers' prefixes in order to render popular websites.
Now, experimental features in browsers are "put behind a flag". This allows developers to change browser configurations to test upcoming features. Browsers now add experimental features behind user-controlled flags or preferences. Flags can be added for smaller specifications enabling reaching a stable state much more quickly.
CSS prefixes
The most common browser CSS prefixes you will see in older code bases include:
-
-webkit-(Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers including Firefox for iOS; basically, any WebKit or Chromium-based browser) -
-moz-(Firefox) -
-o-(old pre-WebKit versions of Opera) -
-ms-(Internet Explorer and Microsoft Edge, before Chromium)
Sample usage:
-webkit-transition
:
all 4s ease;
-moz-transition
:
all 4s ease;
-ms-transition
:
all 4s ease;
-o-transition
:
all 4s ease;
transition
:
all 4s ease;
If you encounter the above code in a code base, you can safely remove all but the last line. All browsers support transitions without vendor prefixes:
transition
:
all 4s ease;
API prefixes
Historically, browser vendors have also used prefixes for experimental APIs. If an entire interface was experimental, then the interface's name was prefixed (but not the properties or methods within). If an experimental property or method was added to a standardized interface, then the individual method or property was prefixed.
Interface prefixes
Prefixes for interface names are upper-cased:
-
WebKit(Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers (including Firefox for iOS); basically, any WebKit and Chromium-based browser) -
Moz(Firefox) -
O(Older, pre-WebKit, versions of Opera) -
MS(Internet Explorer and Microsoft Edge, before Chromium)
Property and method prefixes
The prefixes for properties and methods are lower-case:
-
webkit(Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers (including Firefox for iOS); basically, any WebKit and Chromium-based browser) -
moz(Firefox) -
o(Old, pre-WebKit, versions of Opera) -
ms(Internet Explorer and Microsoft Edge, before Chromium)
Sample usage:
window.
requestAnimationFrame =
window.
requestAnimationFrame ||
window.
mozRequestAnimationFrame ||
window.
webkitRequestAnimationFrame ||
window.
oRequestAnimationFrame ||
window.
msRequestAnimationFrame;
If you encounter the above code in a code base, you can safely remove all but the first line. All browsers support
requestAnimationFrame
without vendor prefixes, and without window
:
requestAnimationFrame
(
callback)
;