¿Por qué los navegadores crean prefijos de proveedor para las propiedades de CSS?

Tal vez es una respuesta obvia, pero

¿Por qué diablos los navegadores deciden crear sus propios prefijos de proveedor para border-radius y similares?

Quiero decir: ¿Por qué tengo que escribir?

 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; 

¿Es porque cada plataforma pensó “Estamos bien, vamos a encontrar una mejor manera de hacer las esquinas redondeadas”? Parece totalmente e inexplicablemente redundante escribir tres líneas para una.

Es porque las características fueron implementadas por los proveedores antes de que la especificación alcanzara su etapa de lanzamiento final.

Los prefijos del vendedor garantizan que no haya conflictos con el cambio de funcionalidad, etc.

Originalmente, el punto de los prefijos de los vendedores era permitir a los fabricantes de navegadores comenzar a respaldar las declaraciones experimentales de CSS.

Digamos que un grupo de trabajo del W3C está discutiendo una statement de cuadrícula (que, por cierto, no sería una mala idea). Digamos además que algunas personas crean un borrador de especificación, pero otros no están de acuerdo con algunos de los detalles. Como sabemos, este proceso puede tomar años.

Digamos además que Microsoft como experimento decide implementar la grilla propuesta. En este momento, Microsoft no puede estar seguro de que la especificación no cambie. Por lo tanto, en lugar de agregar una cuadrícula a su CSS, agrega -ms-grid.

El prefijo del vendedor dice “esta es la interpretación de Microsoft de una propuesta en curso”. Por lo tanto, si la definición final de la cuadrícula es diferente, Microsoft puede agregar una nueva cuadrícula de propiedad CSS sin romper las páginas que dependen de -ms-grid

Fuente

ACTUALIZACIÓN AL AÑO 2016

Como esta publicación de hace 3 años, es importante mencionar que ahora la mayoría de los vendedores entienden que estos prefijos solo crean código duplicado innecesario y la situación en la que necesita especificar 3 reglas CSS diferentes para que funcione un efecto en todos los navegadores es una no deseado.

Como se menciona en este glosario sobre la vista de Mozilla sobre el Vendor Prefix el May 3, 2016 ,

Los vendedores de navegadores ahora intentan deshacerse del prefijo del proveedor para funciones experimentales. Se dieron cuenta de que los desarrolladores web los estaban usando en sitios web de producción, contaminando el espacio global y dificultando el desempeño de los de abajo.

Por ejemplo, hace solo unos años, para establecer una esquina redondeada en una caja, tenía que escribir:

 -moz-border-radius: 10px 5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 5px; border-radius: 10px 5px; 

Pero ahora que los navegadores han llegado a ser totalmente compatibles con esta característica, solo necesitas la versión estandarizada:

 border-radius: 10px 5px;