Vendor Prefixing

CSS vendor prefixes

CSS vendor prefixes (or browser prefixes) are a way for browsers to provide access to new CSS features that aren’t yet considered to be stable.

We can use these newer CSS features with the browsers that support them by using prefixes instead of waiting for all browsers to catch up.

For example, before CSS transitions were fully supported, prefixes were still needed, as shown in the code snippet below:

.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 commonly used prefixes are:

• -webkit- (Chrome, Safari, and Android)
• -moz- (Firefox)
• -ms- (Edge and Internet Explorer)
• -o- (Opera)

Writing prefixes manually has traditionally been a hassle. Because of this, projects like Autoprefixer were designed to expedite the process by automatically adding any required prefixes. This tool generates prefixes based on the information provided from canIuse.

Many modern frameworks (for example, create-react-app, the Vue cli, and postcss frameworks) 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 because browsers are getting better at supporting new features. 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 not using build tools on a project that needs to function on older browsers, it’s worth running CSS through Autoprefixer. Check out the documentation https://autoprefixer.github.io/. Otherwise, you can rest assured that your CSS will be supported!