Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the purpose of CSS prefixes? [duplicate]

I know that if we want to make sure some CSS3 features work everywhere we need to use the prefixed versions of the W3C recommended one like:

transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;

I know that the prefixes are used for experimental features, but why are they necessary? Why don't they test them on the original W3C one? Does every CSS3 feature has or had a prefix for every browser or they just create a prefixed version if they think they should?

like image 670
totymedli Avatar asked Feb 11 '13 12:02

totymedli


People also ask

Do I still need to use vendor prefixes?

Yes, and there will always be, as it's kind of an industry standard that vendors use their prefix on newly drafted properties/methods until those become a standard.

How do you add a prefix in CSS?

Autoprefixer. The autoprefixer is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It allows you to write your CSS rules without vendor prefixes, it takes care of doing that based on current browser popularity and property support.

What prefix is used for most websites?

The most common browser CSS prefixes you will see in older code bases include: -webkit- (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers including Firefox for iOS; basically, any WebKit or Chromium-based browser) -moz- (Firefox)

What is CSS Autoprefixer?

What is Autoprefixer. Autoprefixer is a CSS post processor. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code against caniuse.com. The data on caniuse.com is the most accurate data source on browser support on the internet, be it HTML5, CSS or Javascript.


2 Answers

The original purpose of vendor prefixes was to give vendors the ability to add their own non-standard features for use in their CSS implementations. However, most of them are used for experimental versions of things that eventually become standards.

If an experimental property is unprefixed, it implies that it's the correct, standard version of a property. If every browser renders it differently, then there isn't much of a standard. Instead, a browser avoids implementing an unprefixed property until it's sure that it's done so according to the standard, then it starts supporting the unprefixed property as a way of saying it supports this particular standard correctly.

Not every feature has a prefix; indeed, a vendor creates a prefix only if it deems it necessary.

like image 81
BoltClock Avatar answered Oct 11 '22 07:10

BoltClock


People who use experimental functions already know that a standard, cross browser behaviour should not be expected at all.

In my opinion there is no need to prefix new features. It makes it harder to use them as you have to write the standard property, chrome's prefixed property, firefox, opera... it also makes stylesheets bigger (who is going to delete all those prefixed properties in the future, when they are not needed anymore?).

I don't see any advantages, but it is just my opinion.

like image 24
Salvatorelab Avatar answered Oct 11 '22 07:10

Salvatorelab