Vendor Prefixing

CSS Vendor prefixes (or browser prefixes) are a way for browsers to give access to new CSS features not yet considered stable.

By using prefixes, we can use these newer CSS features with the browsers that support them — instead of waiting for all browsers to catch up.

For example, before CSS Transitions were fully supported, you’d have added the prefixes, like so:

.element {
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}

The prefixes used are:

• -webkit- (Chrome, Safari, iOS Safari / iOS WebView, Android)
• -moz- (Firefox)
• -ms- (Edge, Internet Explorer)
• -o- (Opera, Opera Mini)

Writing prefixes has traditionally been a hassle. So projects like Autoprefixer came along to automate the process, by adding any required prefixes automatically. This tool generates prefixes based on the information provided from canIuse.

Many modern frameworks (e.g. create-react-app, the Vue CLI & PostCSS) use autoprefixer out of the box, so remembering to add prefixes has become a thing of the past!

Is prefixing still necessary?

Prefixing is a rapidly declining issue.

Browsers are getting better at supporting new features. And now, the rise of experimental CSS is encouraging client-side testing of new features (via local browser settings), instead of on production websites.

If you’re working without build tools on a project that needs to function on older browsers — it’s worth running your CSS through autoprefixer. Check out the handy online tool: https://autoprefixer.github.io/. Otherwise you can rest assured that your CSS will be supported!

Related Posts:

• CSS Transforms
• CSS Transitions
• Feature Queries