docs.rodeo

MDN Web Docs mirror

Vendor Prefix

{{GlossarySidebar}} 

Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers’ code during the standardization process.

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:

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:

Property and method prefixes

The prefixes for properties and methods are lower-case:

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);

See also

In this article

View on MDN