In many browsers, browser compatibility prefixes are added to CSS attributes. Example:
.exemplo {
-webkit-background-size: 50% 50%;
-moz-background-size: 50% 50%;
-o-background-size: 50% 50%;
background-size: 50% 50%;
}
But if you leave only the attribute, without a prefix, it works normally. Example:
.exemplo-2 {
background-size: 50% 50%;
}
Are these prefixes ( -webkit- , -moz- , -o- ) important? Should I still place them?
The prefixes -webkit- , -moz- etc are called vendor prefixes . They are adopted by browser with these prefixes properties in trial period .
Generally, the justification for this type of support is the implementation of a specification not yet finalized, or the implementation of a resource that is not yet part of a formal specification ( -webkit- , for example, has many specific experimental properties ), simply. When the property behaves in a stable way, prefixes become unnecessary.
Can I Use? is an essential source for check the support status of properties in different versions of different browsers. Indicates browser versions where the property is prefix-dependent or simply not supported in any way.
Contrary to what has been said, "use of the prefix" is by no means a good practice - not a bad one at all. In fact, that kind of statement does not make sense. There are different views on vendor prefixes in discussion a>. Therefore, it is best to view it as something just needed at the moment.
It all depends on how compatible your project should be.
To say that text-shadow or border-radius no longer needs prefixes is a coherent recommendation and I do it myself, but that's all. Most important of all is to be aware that, while one must be attentive to the support of properties ** to avoid incompatibilities, one must also avoid vendor prefixes when its use is unnecessary .
When the browser is implementing a new standard property, it makes it available with the prefix at the first moment. This prefix (called vendor prefix ) is only removed when the property behavior is exactly the same as the one specified. In many cases there will be differences between the "official" behavior and the one exhibited by the prefixed property. But often you have no choice.
Include a property variation for each browser only when you want to use a new CSS feature that does not exist in the unprefixed version in the versions you plan to support. And never forget to have the unprivileged version underneath everything to ensure it takes precedence where supported.
There is no need to prefix all properties however. It was the time when border-radius needed them.
Using prefixes is necessary if you want to support the attribute for versions of browsers where this attribute was still being implemented. To better understand this you can see the compatibility of the background-size property and other this link . Where you can see the prefix in the cell next to the browser version means that it is required to support the attribute.
Some prefixes are already fully implemented as elements of css 3, but not all are supported or are completely defined, so it is important to use the prefixes that depending on the browser version may not be implemented as a css attribute.
To solve this problem you can also use Prefix free, in it you only write in a single way while the prefix free code is responsible for maintaining compatibility between other browsers.
Link: Prefix Free
And a demo can be seen at:
Link: Test Drive - Prefix Free