Soporte de CSS3 en navegadores: tabla de prefijos

# Soporte de funciones CSS3 en navegadores modernos: Tabla de compatibilidad

Las propiedades CSS3 se implementan parcialmente en las versiones actuales de los navegadores, incluso sin una estandarización completa del W3C. Los desarrolladores deben considerar los prefijos de proveedores y las versiones mínimas para garantizar la compatibilidad entre navegadores. La tabla a continuación detalla el estado de las propiedades clave, incluyendo los requisitos de prefijos (-ms-, -moz-, -webkit-, -o-) y las versiones de navegador. Esto te ayuda a planificar el uso de funciones en tus proyectos con precisión.

Leyenda de la tabla:

• Los iconos indican soporte en IE, Firefox, Chrome, Safari, Opera.
• Los números muestran la versión mínima del navegador.
• Las variantes con prefijo se indican por separado.

(Inserta aquí la tabla de referencia rápida de soporte CSS3 como imagen.)

Detalles de soporte en navegadores

Internet Explorer soporta funciones con el prefijo -ms- a partir de la versión 9+, como border-radius y box-shadow. Firefox usó -moz- hasta la versión 16, después de la cual muchas propiedades pasaron a nombres estándar. Chrome y Safari dependen de -webkit-, soportado desde las versiones 4–5, eliminando gradualmente los prefijos para las especificaciones finales.

Opera usa -o- (y raramente -xv-) desde la versión 10.5. La tabla completa cubre propiedades como:

• Animaciones y transformaciones: transition, animation, transform.
• Bordes y sombras: border-radius, box-shadow.
• Fondos y gradientes: background-clip, linear-gradient.
• Fuentes y texto: @font-face, text-shadow.
• Diseños: flexbox (display: flex), multi-column.

| Propiedad | IE (versión) | Firefox (versión) | Chrome (versión) | Safari (versión) | Opera (versión) |

|----------------|--------------|-------------------|------------------|------------------|-----------------|

| border-radius | 9 (-ms-) | 4 (-moz-) | 4 (-webkit-) | 5 (-webkit-) | 10.5 (-o-) |

| box-shadow | 9 (-ms-) | 4 (-moz-) | 10 (-webkit-) | 5.1 (-webkit-) | 10.5 (-o-) |

| transition | 10 | 16 | 26 | 6.1 | 12.5 |

Esta tabla se basa en datos de 2012, pero los principios de prefijos siguen siendo relevantes para proyectos legacy.

Trabajando con prefijos de proveedores

• Automatización: Usa Autoprefixer en herramientas de compilación (Webpack, Gulp) para agregar prefijos basados en datos de Can I Use.
• Polyfills: Para soporte débil, usa librerías JS como Modernizr para detección y fallbacks.
• Post-procesamiento: Herramientas como PostCSS generan prefijos de proveedores dinámicamente.
• Pruebas: Verifica en emuladores y dispositivos reales, enfocándote en Safari/Chrome móviles.
• Degradación elegante: Asegura un renderizado básico sin CSS3 para versiones antiguas de IE.

Ejemplo de código con prefijos para transformaciones:

.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

Actualizaciones y recursos

El soporte ha evolucionado: hoy, la mayoría de las propiedades funcionan sin prefijos en Chrome 111+, Firefox 115+, Safari 17+. Consulta bases de datos de compatibilidad para la información más reciente. La tabla es ideal para auditar código antiguo o migrar a estándares modernos.

Lecciones clave

• Prefijos esenciales para legacy: -webkit- cubre el 80% de navegadores móviles pre-2020.
• Versiones mínimas: Chrome 4+, Firefox 4+, IE 9+ alcanzan el 95% de usuarios en el momento de publicación.
• Automatización simplifica: Autoprefixer elimina el trabajo manual.
• Pruebas son críticas: Diferencias de renderizado en sombras y gradientes entre motores.
• Futuro sin prefijos: La estandarización W3C acelera el abandono de extensiones de proveedores.

— Editorial Team