CSS VENDOR PREFIXES

CSS Vendor Prefixes are also known as CSS Browser Prefixes, they are a way in which browsers can have access to new features before they are fully supported by the various browsers. This is usually done during the testing and experimentation period when the browse manufacturers are trying to determine how these new CSS features will be implemented.

CSS Prefixes became popular with the rise of CSS3, a few years ago. When CSS3 was first introduced, the webkit-powered browsers were the first to introduce some of the animation styles properties like transform and transition. Enabling web Developers to use them in their work with the comfort that it would be displayed on browsers that support them instead of waiting for all other browsers to catch up.

COMMON CSS PREFIXES

Browser Prefixes are used to add new CSS features to a website so that the browser would support these styles. This is helpful as different browser manufacturers implement properties in slightly different ways or with different syntax.

Some Common CSS Browser Prefixes are:

-webkit-: Used for Chrome, Safari, Android and IOS.

-moz-: Used for Firefox Browsers.

-ms-: Used for Microsoft Browsers (Internet Explorer).

-o-: Used for Opera Browsers.

You would encounter these prefixes in CSS code as they are used to ensure browser compatibility, try out new CSS features, etc.

WHY USE CSS PREFIXES

CSS Prefixes are essential for ensuring consistent rendering of styles across different browsers, they are primarily used to address browser compatibility issues, especially when browsers have non-standard or experimental CSS property implementation.

CSS Prefixes are valuable for progressive enhancement, enabling developers to enhance styles and effects for browsers that support certain features while maintaining functionality in older ones. As web standards evolve, developers can gradually remove unnecessary prefixes from their code as browser support improves.

Some CSS Properties that often require Prefixes are:

Transform Properties

Transition Property

Box Shadow Property

Flexbox Property

Gradient Property, etc.

ADDING A PREFIX

In most cases, when adding a prefix to a CSS Property you would add it by writing the prefix before the property name:

-Webkit-transition: all 3s ease-in-out;

Note that the prefixed versions usually come first while the normal CSS property comes last. The reason is that when a browser supports the standard property, it overrides the prefixed version of that property and implements the standard property. Remember how CSS is read. Later rules take precedence over earlier ones.

It is also important to note that some browsers have different syntax for certain properties, so don't assume that the prefixed version of a property is the same as the standard property. A popular example is the linear-gradient property, Opera, Firefox and Modern versions of Chrome use the same syntax with the appropriate prefix (-webkit-linear-gradient: ), while Safari and the Older Version of Chrome use the prefixed property: -webkit-gradient.

In Conclusion, CSS prefixes are a vital tool in the web developer's toolkit, ensuring that websites and web applications display and function as intended across diverse browsing environments. The use of CSS prefixes contributes to a more consistent rendering of styles and enables progressive enhancement, enhancing the user experience in modern browsers while maintaining functionality in older ones

Reference:

https://www.thoughtco.com/css-vendor-prefixes-3466867

https://itnext.io/css-fundamentals-vendor-prefixing-b339d3c9859a