¿Qué son los prefijos de proveedor?

Estos son prefijos no estándar que los desarrolladores de navegadores utilizan para agregar soporte a nuevas o experimentales propiedades CSS antes de su aprobación oficial e inclusión en los estándares. Permiten introducir gradualmente nuevas capacidades en la web, pero requieren un enfoque cuidadoso.

Prefijos principales:

• -webkit-: Chrome, Safari, Opera (algunas versiones), la mayoría de los navegadores móviles (incluyendo Android y iOS).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (algunas versiones).
• -o-: Opera (versiones antiguas).

Al usar prefijos de proveedor, es importante considerar el orden de escritura: primero los prefijos, luego la propiedad estándar. Esto garantiza que cuando los navegadores comiencen a soportar la propiedad estándar, esta sobrescribirá el prefijo.

.element {
  -webkit-border-radius: 10px; /* Safari versiones 5 y anteriores */
  -moz-border-radius: 10px; /* Firefox versiones 4 y anteriores */
  border-radius: 10px; /* Propiedad estándar */
}

Actualmente, el uso de prefijos de proveedor ha disminuido significativamente gracias a una adopción más activa de nuevas propiedades CSS por todos los navegadores. Sin embargo, pueden ser necesarios para soportar versiones antiguas de navegadores o al trabajar con API experimentales.

Para automatizar la gestión de prefijos de proveedor, a menudo se utiliza PostCSS con el plugin Autoprefixer.

// Ejemplo de configuración de PostCSS con Autoprefixer
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions', '> 1%'] // Configuración de navegadores soportados
    })
  ]
};

Autoprefixer analiza el CSS y añade los prefijos necesarios en función de las configuraciones de compatibilidad con los navegadores. Esto simplifica el desarrollo y reduce la probabilidad de errores relacionados con la adición y gestión manual de prefijos.