¿Cuál es la razón para poner prefijos en las nuevas características de CSS?

¿Existe una razón válida para que los navegadores prefijan nuevas funciones CSS, en lugar de permitir que los webmasters utilicen la versión sin prefijo?

Por ejemplo, un código de muestra para el gradiente de fondo se ve así:

#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);
}

¿Cuál es el punto de obligar a los webmasters a copiar y pegar el mismo código cuatro veces para obtener el mismo resultado?

Nota: una de las razones a menudo citadas es que los estilos prefijados son temporales mientras que el navegador no implementa la especificación correctamente o la especificación no es definitiva .

OMI, esta razón es una tontería:

• Si el motor del navegador no implementa la especificación correctamente, el navegador no será compatible, sin importar si no lo implementa en una forma no prefijada o si no lo hace en una forma prefijada.
• Si la especificación no es definitiva, puede ser importante cuando hubo implementaciones anteriores con el mismo nombre. Por ejemplo, si CSS2 tenía linear-gradient, pero CSS3 tenía la intención de extenderse linear-gradientcon características adicionales, sería inteligente prefijar temporalmente la implementación nueva, borrador, -css3-<style>diferenciando entre el CSS2 funcional y el CSS3 experimental. En la práctica, CSS2 no tiene linear-gradientu otras novedades de CSS3.

También entendería si diferentes navegadores tuvieran diferentes formatos de implementación : por ejemplo, digamos que Firefox requiere, para sombra de texto <weight-of-shadow distance-x distance-y color>, mientras que Chrome requiere <distance-x distance-y weight-of-shadow color>. Pero en realidad, este no es el caso; al menos todas las nuevas características de CSS3 que he usado hasta ahora tenían el mismo formato.

De acuerdo con esta nota del W3C :

Para evitar conflictos con las características futuras de CSS, la especificación CSS2.1 reserva una sintaxis prefijada para extensiones propietarias y experimentales de CSS.

Antes de que una especificación alcance la etapa de Recomendación del candidato en el proceso W3C, todas las implementaciones de una función CSS se consideran experimentales. El Grupo de trabajo CSS recomienda que las implementaciones utilicen una sintaxis prefijada por el proveedor para tales características, incluidas las de los borradores de trabajo del W3C. Esto evita incompatibilidades con futuros cambios en el borrador.

Puede seguir el estado del CSS aquí y aquí .

También entendería si diferentes navegadores tuvieran diferentes formatos de implementación ... [b] pero en realidad, este no es el caso; al menos todas las nuevas características de CSS3 que he usado hasta ahora tenían el mismo formato.

Esto me dice que no has estado jugando este juego durante el tiempo suficiente.

El problema es que los navegadores web nunca implementan nuevas características de la misma manera. Es común ver un navegador que implementa funciones que no han sido estandarizadas, y el resultado es que todo actúa de manera diferente en diferentes navegadores.

No solo eso, las nuevas funciones a menudo tienen errores (evitaremos llamar a IE por su nombre), y aunque la sintaxis de varios elementos es la misma, el resultado es diferente.

Esto causa un dolor de cabeza a los desarrolladores que intentan utilizar nuevas funciones. Después de terminar de escribir su hoja de estilo, rápidamente se dan cuenta de que se presenta de manera diferente en diferentes navegadores por razones inexplicables.

Antes de que aparecieran los prefijos, los desarrolladores se vieron obligados a confiar en las diferencias detectables entre los navegadores, a menudo explotando los errores en el analizador CSS. Esto resultó en abominaciones como esta:

padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;

Este tipo de hacks fueron el resultado del intento de un desarrollador de personalizar su hoja de estilo para cada navegador, utilizando cualquier tipo de métodos extravagantes que pudieran encontrar.

Al estandarizar los prefijos, permite a los desarrolladores usar funciones que no son estables en diferentes navegadores. Los prefijos -moz-y -webkit-dejan en claro que el autor está tratando de proporcionar un estilo que debe aplicarse solo en ciertos navegadores web.

Una vez que las características se vuelven estables y los navegadores comienzan a actuar de la misma manera, puede eliminar el prefijo y declarar la característica una vez.

Creo que es importante darse cuenta de que los prefijos NO significan que debe declarar estilos una vez para cada navegador. Los prefijos significan que debe declarar estilos adicionales cada vez que encuentre que un navegador web no se ajusta a un estándar. Por ejemplo, en lugar de su código anterior, debe comenzar con:

 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Si de repente te das cuenta de que Microsoft no puede calcular un gradiente lineal correctamente, entonces puedes agregar un prefijo para solucionar el problema en IE:

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

De repente, su página se ve igual en todos los navegadores, a pesar de que uno de ellos hizo las cosas de manera diferente.

Encontrará que esto se ha cubierto de manera muy exhaustiva en este artículo en A List Apart .

Si el motor del navegador no implementa la especificación correctamente, el navegador no será compatible, sin importar si no lo implementa en una forma no prefijada o si no lo hace en una forma prefijada.

La diferencia es que el navegador no se rompa la compatibilidad cuando se hace llegar a cumplir. Si el comportamiento del navegador es diferente a la especificación, entonces no romperán el código antiguo cuando lo cambien, porque aparece bajo un nuevo nombre.