CSS Vendor Prefixes

By  on  

What are the Vendor Prefixes?

Vendor prefixes are small strings prepended to CSS properties that will ensure that the property will only be valid and rendered within the given browser engine.  Chrome and Safari both use the WebKit rendering engine, Firefox uses Gecko, Internet Explorer uses Trident, and Opera uses Presto.  Browser vendors generally don't implement other vendor prefixes but due to the popularity of the WebKit-based mobile browser, vendors like Opera and Firefox have also implemented WebKit's vendor prefixes on their mobile offerings.

Vendors use the following prefixes:

  • WebKit:  -webkit
  • Firefox:  -moz
  • Opera:  -o
  • Internet Explorer:  -ms

Why Vendor Prefixes?

There are a few reasons browser vendors use prefixes:

  • To implement proprietary CSS properties that have no working standard and may never become standard
  • To provide early implementations of standard properties
  • To provide an alternate syntax than the standard

Other reasons may apply but these are the main reasons.

Which Properties Use, or Have Used, Vendor Prefixes?

Prominent vendor-prefixed properties include:

  • @keyframes
  • transition and transform properties   (transition-property, transition-duration, transition-timing-function, transition-delay)
  • animation properties (animation-name, animation-duration, animation-timing-function, animation-delay)
  • border-radius
  • box-shadow
  • backface-visibility
  • column properties
  • flex properties
  • perspective properties

There have been and will be many more prefixed CSS properties!

How are Vendor Prefixes Used?

When using browser-prefixed properties, it's best to place the browser-prefixed properties first, then the standard property name and value.  For example:

/* use of keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

/* use of basic properties */
.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	animation-name: fadeIn;
}

If the standard is known, that rule is used; if unknown the rule is tossed out and the vendor-prefixed property is used!

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

  • By
    PHP Woot Checker – Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

Discussion

  1. oh i hate those things
    can’t just every browser unite under one vendor prefix

    shoot !

  2. Kaylea

    Hi David!

    I used the flip card code on a project and I love it.

    There is a pronounced stutter in Firefox, chrome, Safari and ie even after I used the ie adapted code. Do you know why this could be happening? I cleared the cache and went through with a fine tooth comb.

    My other option would be to use a flip on click animation, but yours is easier in the long run. Thank you for your help.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!