CSS Vendor Prefix Generator
Input your CSS properties below to automatically add vendor prefixes. This tool helps ensure cross-browser compatibility for modern CSS features.
CSS Properties
Enter one CSS property per line or separate with semicolons
WebKit
(Safari, Chrome)
Mozilla
(Firefox)
Microsoft
(IE, Edge)
Opera
• Modern browsers may not need all prefixes, but they ensure compatibility with older versions
• Consider using a build tool like Autoprefixer for production code
• Some properties like 'display: flex' need prefixing for older browsers but not for newer ones
Cómo usar Generador de Prefijos de Proveedor CSS
- 1
Pega tu CSS
Coloca en el cuadro de entrada de código tus reglas CSS, como una declaración de flex o de transition.
- 2
Selecciona los prefijos
Elige qué prefijos de proveedor añadir, incluidos -webkit-, -moz-, -ms- y -o-, según los navegadores que necesites admitir.
- 3
Genera el CSS con prefijos
Haz clic en Generar prefijos para producir una versión de tu código con las propiedades prefijadas correspondientes añadidas.
- 4
Copia el resultado
Copia el CSS con prefijos de la salida y pégalo de nuevo en tu hoja de estilos.
Los prefijos de proveedor de CSS explicados
Qué es realmente un prefijo de proveedor
Un prefijo de proveedor es una cadena corta que el fabricante de un navegador colocaba delante del nombre de una propiedad o de un valor para lanzar una característica antes de que estuviera finalizada. Los cuatro que te encontrarás son -webkit- para el motor que está detrás de Chrome, Safari y el Edge moderno, -moz- para Firefox, -ms- para el antiguo Internet Explorer y el Edge original, y -o- para el antiguo Opera basado en Presto. Así que, durante los años de transición, podías escribir tanto transition-property como -webkit-transition-property: la versión con prefijo para los navegadores que la adoptaron pronto y la versión sin prefijo para los navegadores que siguen el estándar final.
A nivel técnico, un navegador ignora cualquier propiedad que no reconoce, y eso es justo lo que hace que los prefijos sean seguros de apilar. Puedes enumerar primero las variantes con prefijo y la propiedad estándar al final, y cada motor simplemente toma la línea que entiende y omite el resto.
Por qué existieron los prefijos en un principio
Los prefijos fueron una respuesta pragmática a un problema difícil. Cuando una característica nueva como los degradados, las transformaciones o flexbox aún se estaba diseñando, los proveedores de navegadores querían dejar que los desarrolladores experimentaran sin fijar una sintaxis que la especificación podría llegar a cambiar. Lanzar la característica detrás de un prefijo era una forma de decir que esto es experimental y puede cambiar. Si el estándar final difería, la propiedad sin prefijo podía adoptar el comportamiento corregido mientras que la versión con prefijo conservaba el antiguo, de modo que las páginas existentes no se rompieran de forma silenciosa.
En la práctica, el sistema resultó contraproducente. Los sitios acabaron dependiendo tanto de las características -webkit- que, con el tiempo, otros motores tuvieron que implementar ellos mismos algunas propiedades con prefijo -webkit- solo para renderizar la web correctamente. Ese desenlace es exactamente la razón por la que se ha abandonado en gran medida todo este enfoque en favor de los indicadores de característica para el trabajo experimental.
Cómo escribir juntas la versión con prefijo y la estándar
La regla es sencilla y el orden importa: escribe todas las versiones con prefijo que necesites y, después, escribe al final la propiedad estándar, sin prefijo. Como las declaraciones posteriores ganan cuando todas se entienden, poner la línea estándar al final significa que un navegador totalmente moderno usa el comportamiento final y correcto, mientras que uno más antiguo recurre a la línea con prefijo que sí entiende. Esta herramienta sigue esa convención, emitiendo las variantes con prefijo que selecciones junto con la declaración estándar original para que la cascada se resuelva como esperas.
La misma idea se aplica a veces a los valores, no solo a los nombres de propiedad, ya que algunas características también llevaban prefijo en el lado del valor. El hábito seguro es idéntico: proporciona la antigua forma con prefijo y deja que la forma estándar la sobrescriba en los navegadores que se han puesto al día.
La mayoría del CSS moderno ya no necesita prefijos
Esta es la parte que conviene interiorizar: la gran mayoría de las propiedades que antes requerían prefijos ya no los necesitan. Las transiciones, las transformaciones, las animaciones, box-shadow, border-radius, los degradados y la sintaxis moderna de flexbox son compatibles sin prefijo en los navegadores actuales. Añadirles hoy -webkit-, -moz-, -ms- y -o- produce código muerto que infla tu hoja de estilos, puede confundir a quienes lo lean en el futuro y, en casos raros, incluso activa comportamientos antiguos con errores. Si tu proyecto solo apunta a navegadores actuales, lo más probable es que no necesites ningún prefijo en absoluto.
Por eso un flujo de trabajo bien pensado no pone prefijos a todo por reflejo. Solo añade prefijos a lo que requieren los navegadores que realmente son tu objetivo, lo que mantiene la salida ligera y honesta en lugar de rellenarla con líneas que nadie ejecutará jamás.
Dónde los prefijos todavía importan de verdad
Un puñado de características siguen siendo exclusivas de prefijo o de prefijo primero en los navegadores actuales, y ahí es donde un prefijo no es un resto heredado, sino un requisito vigente. El prefijo -webkit- en particular aún aparece para cosas como la técnica de line-clamp que se usa para truncar el texto a un número fijo de líneas, ciertos comportamientos de backdrop y de appearance, y algunos ajustes de barras de desplazamiento y de resaltado al tocar en el Safari móvil. Para estos, omitir el prefijo significa que la característica simplemente no funciona, así que ese es justo el momento en que recurrir a un prefijo es lo correcto.
Si das soporte a versiones de navegador más antiguas pero todavía reales para un público concreto, los prefijos también vuelven a entrar en escena para propiedades que se estandarizaron solo hace poco. La pregunta decisiva nunca es cómo se siente la propiedad, sino qué contiene en realidad tu matriz de compatibilidad.
Autoprefixer y el enfoque de compilación moderno
La mejor práctica actual es dejar de escribir prefijos a mano y dejar que una herramienta los añada a partir de datos reales. Autoprefixer, ejecutado como parte de un paso de compilación, lee la lista de compatibilidad de navegadores declarada de tu proyecto e inserta exactamente los prefijos que esos navegadores requieren, ni más ni menos, usando datos de compatibilidad actualizados. Tú escribes CSS estándar y limpio, y los prefijos correctos se generan automáticamente en el momento de la compilación, y se vuelven a eliminar en cuanto tu lista de compatibilidad ya no los necesita.
Este convertidor es la contrapartida manual de ese flujo de trabajo, ideal cuando no estás ejecutando un proceso de compilación, cuando quieres añadir rápidamente un prefijo concreto a un fragmento, o cuando estás aprendiendo cómo se relacionan las formas con prefijo y estándar. Para una base de código grande, configurar Autoprefixer significa que no vuelves a pensar en esto nunca más.
Comprueba la compatibilidad antes de poner prefijos
Antes de añadir cualquier prefijo, confirma si de verdad hace falta consultando una referencia de compatibilidad actual como caniuse, que muestra, propiedad por propiedad, qué versiones de navegador admiten la forma estándar y cuáles todavía exigen un prefijo. Combinar esa consulta con una lista explícita de los navegadores que tu proyecto admite convierte el uso de prefijos de una conjetura en una decisión que puedes defender. El coste de mantenimiento de los prefijos obsoletos es real, así que borrar los que ya no necesitas es tan valioso como añadir los que sí.
Preguntas frecuentes
¿Para qué sirven los prefijos de proveedor en CSS?
¿Qué prefijos puede añadir esta herramienta?
¿Aplica prefijos a todas las propiedades que pego?
¿Sigo necesitando prefijos de proveedor hoy en día?
¿Se envía mi CSS a algún sitio?
Herramientas relacionadas
Sigue trabajando con estas prácticas herramientas