Why do browsers create vendor prefixes for CSS properties?

by

It’s because the features were implemented by vendors before the specification reached its final release stage.

The vendor prefixes ensure that there are no clashes with changing functionality etc.

Originally, the point of vendor prefixes was to allow browser makers
to start supporting experimental CSS declarations.

Let’s say a W3C working group is discussing a grid declaration (which,
incidentally, wouldn’t be such a bad idea). Let’s furthermore say that
some people create a draft specification, but others disagree with
some of the details. As we know, this process may take ages.

Let’s furthermore say that Microsoft as an experiment decides to
implement the proposed grid. At this point in time, Microsoft cannot
be certain that the specification will not change. Therefore, instead
of adding grid to its CSS, it adds -ms-grid.

The vendor prefix kind of says “this is the Microsoft interpretation
of an ongoing proposal.” Thus, if the final definition of grid is
different, Microsoft can add a new CSS property grid without breaking
pages that depend on -ms-grid

Source.

More Related Contents:

  1. List of CSS vendor prefixes?
  2. How to validate vendor prefixes in CSS like -webkit- and -moz-?
  3. Ordering of vendor-specific CSS declarations
  4. Using variables in property names in LESS (dynamic properties / property name interpolation)
  5. Why doesn’t [CSS feature] work in [browser] but works in others?
  6. How do I apply vendor prefixes to inline styles in reactjs?
  7. What CSS3 features still need vendor prefixes?
  8. What is the difference between visibility:hidden and display:none?
  9. What does the “+” (plus sign) CSS selector mean?
  10. How does flex-wrap work with align-self, align-items and align-content?
  11. How to make button look like a link?
  12. Making an iframe responsive
  13. Child with max-height: 100% overflows parent
  14. Center a position:fixed element
  15. Is there a way to interpolate CSS variables with url()?
  16. Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
  17. My position: sticky element isn’t sticky when using flexbox
  18. CSS margin-top of affects parent’s margin
  19. HTML not loading CSS file
  20. Add ellipses to overflowing text in SVG?
  21. Less lists as a mixin argument(s)
  22. Using attr to set css variable inline that work with CSP
  23. How to show the first N elements of a block and hide the others in css?
  24. Width equal to content [duplicate]
  25. How do I make text bold in HTML?
  26. How to skip first child?
  27. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  28. Two css files defining same class
  29. How to use variable in CSS? [duplicate]
  30. Latest on CSS parent selector [duplicate]

Leave a Comment