CSS vendor prefixes reviewed

CSS vendor prefixes like -webkit, -ms, -moz and -o are constantly being dropped as people updates their browsers and as browsers adopt the standard unprefixed properties. A post about today's recommended prefixes would probably be outdated in a few months. I'll just add caniuse.com frames showing updated compatibility tables for the most important CSS properties that still may need prefixes to make it easier for you to decide by yourself.

Properties not listed here, like box-shadow and text-shadow do not need prefixing. This doesn't mean they are fully supported. Internet Explorer 9 and below, for example, don't support text-shadow, prefixed or not. Border-radius is not supported by IE8 and below.

Use the buttons to switch to the different tables. CSS vendor prefixes are shown in the table cells, for the browser versions that require them. Remember to always use the unprefixed version of the property after the prefixed one. This way the standard version overrides the experimental (prefixed) ones and is always used in browsers that support it.

CSS transforms

CSS 2D and 3D transforms have different vendor prefix support, though both use the same transform property. For example: transform: rotate(90deg) is 2D while transform: perspective(500px) is 3D.

2D transforms

CSS functions: matrix, translate, translateX, translateY, scale, scaleX, scaleY, rotate, skew, skewX, skewY

3D transforms

CSS functions: matrix3d, translate3d, translateZ, scale3d, scaleZ, rotate3d, rotateX, rotateY, rotateZ, perspective

CSS Box-shadow

CSS property: box-shadow

CSS Gradients

CSS properties: linear-gradient, radial-gradient

CSS user-select:none

CSS3 Box-Sizing

CSS property: box-sizing

CSS3 Multiple Columns

CSS properties: column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, columns

Other more specific CSS properties/functions that may require vendor prefixes are:

There are a couple of webkit-only features that are available only with the -webkit prefix like the canvas backgrounds with -webkit-canvas (for using an HTML5 canvas as background), element reflections with -webkit-box-reflect, text stroke with -webkit-text-stroke, and filter effects with -webkit-filters.

Prefixing the easy way

If you find yourself dealing with prefixes more often than it's safe, you can almost forget about CSS vendor prefixes by using tools like Prefixr.

Prefixr CSS auto-prefixing tool

Just paste your unprefixed code into the tool, click a button, and it will automatically add the recommended prefixed properties.

To completely forget about prefixes, use a tool like prefix-free, which adds the current browser’s prefix to any CSS code, only when it’s needed. Sounds great, but it obviously adds another script to your <head> (its very lightweight though) and may cause flashes of unstyled content.

2 comments

  1. Very good tool for prefixes. When I started using new CSS features like rounded corners and shadows, I faced with some troubles, I knew nothing about prefixes, I didn't understand when to use them and when not. I read this one: what are vendor prefixes in CSS? which clarified for me what they are. If I knew about such tool, I would save a lot of time. It was helpful anyway as it explained what these vendor prefixes are.

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>