CSS Auto Prefixer Tool

Start typing in the CSS Without Prefix to get prefixed version of the code.

Copy the code and use it in your css to make sure old browsers get all the rich CSS features.

Vendor Prefixing

Major browser vendors implement CSS features at their own pace and use vendor prefixes to add experimental or non-standard CSS properties. Here is a list of the main prefixes: Following are a list of major prefixes:

Android:             -webkit-
Chrome:              -webkit-
Firefox:             -moz-
Internet Explorer:   -ms-
iOS:                 -webkit-
Opera:               -o-
Safari:              -webkit-

Which Properties are still prefixed?

Most of the browsers are removing prefixes to maintain single property and be less complex.

Here are list of the properties that still requires prefinxing

Animations: Complex method of animating certain properties of an element

Background-image-options: New properties to affect background images, including background-clip, background-origin, and background-size

Box-reflection: Method of displaying a reflection of an element

Filters: Method of applying filter effects to elements, previously only possible by using SVG.

Flexbox: Method of positioning elements in horizontal or vertical stacks. But really cool ;)

Font-feature-settings: Method of applying advanced typographic and language-specific font features to supported OpenType fonts. Ligatures e.t.m!

Grids: Method of using a grid concept to layout content, providing a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Grids!

Hyphens: Method of controlling when words at the end of lines should be hyphenated using the "hyphens" property.

Masks: Method of displaying part of an element, using a selected image as a mask

Multicolumn: Method of flowing information in multiple columns

Object-fit: The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Regions: Method of flowing content into multiple elements.

Transforms: Method of transforming an element including rotating, scaling, etc.

Appearance: The appearance property defines how elements (particularly form controls) appear by default. By setting the value to none the default appearance can be entirely redefined using other CSS properties.

Vendor prefixes are a way to extend browser support until these prefixed properties are implemented, but they have not been implemented before. The latest CSS has moved from vendor prefixes to feature queries. Function queries can conditionally format and provide fallback styles for unsupported elements.

If you have already created a vendor prefix, consider setting an automatic prefix as the manual vendor prefix cannot be extended properly. Keeping track of which properties need to be added for which browser version can be painful, tedious, and error-prone to the human eye.

Automatic prefixing

Since auto prefixing is small and dying problem now a days, best way is to use postcss or autoprefixer tools. The one you're seeing here is the online tool that can do the same for you.