We use vendor prefixes in CSS when a property is not fully supported everywhere and write something like:
.div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
instead simply writing display: flex;.
I’ve been writing CSS for a while now and am not able to wrap my head around this; Why do we even have vendor prefixes?!
Wouldn’t it make more sense if the vendor just supported the property without imposing the prefix and if it is not supported in a browser, it just wouldn't work?
Marco Alka
Software Engineer, Technical Consultant & Mentor
Browser prefixes are used in order to force developers to wait for standardization, but still enable them to have an early access. Those features are experimental, the implementation might be buggy or based on different drafts and hence look different in different browsers. It is logical to prefix such dangerous features, which might break a homepage (at least once they are standardized). Keep in mind: the standard might be different from the draft on which the implementation is based!
Further Reading: MDN