CSS vendor prefixes

CSS vendor prefixes allow using experimental or nonstandard CSS features before they are fully supported in all browsers.

Vendor prefixes allow developers to use new features immediately without having to wait for the specification to reach its final release stage.

They are represented by the string of characters relating to specific browser engines:

CSS vendor prefixes can be added to:

• CSS properties:

div {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

• CSS values:

div {
    background: -webkit-linear-gradient(#0f0, #00f);
    background: -moz-linear-gradient(#0f0, #00f);
    background: -o-linear-gradient(#0f0, #00f);
    background: linear-gradient(#0f0, #00f);
}

• CSS at-rules:

@-webkit-keyframes show {
    from { background-color: #f00; }
    to { background-color: #00f; }
}

@-moz-keyframes show {
    from { background-color: #f00; }
    to { background-color: #00f; }
}
@-o-keyframes show {
    from { background-color: #f00; }
    to { background-color: #00f; }
}
@keyframes show {
    from { background-color: #f00; }
    to { background-color: #00f; }
}

Repeating the same CSS rule multiple times can be painful but there are few solutions that can help.

• CSS preprocessors and mixins - one of the benefits of using CSS preprocessors is the possibility to create mixins that can be very helpful with handling vendor prefixes.

SASS:

@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    -moz-transform: $property;
    transform: $property;
}

.box { @include transform(rotate(30deg)); }

LESS:

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius(4px);
}

• autoprefix NPM plugin  - properly configured allows to forget about vendor prefixes and write your CSS rules without them. It works with Webpack, Gulp, and Grunt.

https://github.com/postcss/autoprefixer

• code editor plugin - most popular code editors already have plugin dedicated to handling CSS vendor prefixes

 sublime - https://github.com/sindresorhus/sublime-autoprefixer

Lots of features are already fully supported by major browsers. Before you decide to add vendor prefixes to the given feature check how it is handled by different browsers on https://caniuse.com.