Question

Is there a valid reason for the browsers to prefix new CSS features, instead of letting the webmasters use the non-prefixed version?

For example, a sample code for the background gradient looks like:

#arbitrary-stops {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* IE 10 */
  background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

What's the point in forcing webmasters to copy-paste the same code four times to have the same result?


Note: one of the reasons often quoted is that prefixed styles are intended to be temporary while either the browser does not implement the spec correctly, or the spec is not definitive.

IMO, this reason is a nonsense:

  • If the browser engine does not implement the spec correctly, the browser will not be compliant, no matter if it does not implement it in a non-prefixed form or it does not implement it in a prefixed form.
  • If the spec is not definitive, it may matter when there were previous implementations with the same name. For example if CSS2 had linear-gradient, but CSS3 was intended to extend linear-gradient with additional features, it would be clever to temporary prefix the new, draft, implementation by -css3-<style> differentiate between the working CSS2 one, and the experimental CSS3 one. In practice, CSS2 doesn't have linear-gradient or other CSS3 novelties.

I would also understand if different browsers had different implementation formats: for example let's say Firefox required, for text shadow, <weight-of-shadow distance-x distance-y color>, while Chrome required <distance-x distance-y weight-of-shadow color>. But actually, this is not the case; at least all new features of CSS3 I've used so far had the same format.

No correct solution

Licensed under: CC-BY-SA with attribution
scroll top