Autoprefixer online y generador de prefijos CSS
Añade los prefijos CSS necesarios para asegurar la compatibilidad de tu código en distintos navegadores. Esta herramienta ejecuta Autoprefixer online directamente en tu navegador sin necesidad de instalar paquetes npm ni configurar un entorno de compilación. Todo el procesamiento es local y el resultado se actualiza al instante mientras escribes.
Cómo utilizar esta herramienta de prefijos CSS
Para transformar tus estilos CSS y añadir la compatibilidad necesaria, sigue estos pasos sencillos:
- Pega o escribe tu código CSS en el cuadro de entrada.
- El resultado procesado se actualiza automáticamente un momento después de que dejes de escribir, sin necesidad de pulsar ningún botón.
- Haz clic en el botón Copiar situado sobre el resultado para guardar el código en el portapapeles.
Si introduces una regla con un error de sintaxis, aparecerá un aviso discreto y se mantendrá en pantalla la última versión válida hasta que corrijas el código.
Configuración de objetivos con Autoprefixer CSS online
Por defecto, el motor utiliza la consulta de compatibilidad estándar > 0.5%, last 2 versions. Si tu proyecto requiere dar soporte a un conjunto diferente de navegadores, puedes personalizar este criterio en el campo correspondiente.
Puedes introducir consultas idénticas a las utilizadas en archivos .browserslistrc o en el archivo package.json, como por ejemplo last 2 versions, > 1%, Safari >= 9 o defaults.
Uso como CSS vendor prefixes generator
Como generador de prefijos de motor (vendor prefixes), esta utilidad identifica qué propiedades requieren etiquetas específicas basándose en los datos actualizados de soporte de Can I Use.
El sistema aplica únicamente los prefijos necesarios (como -webkit-, -moz-, -ms- o -o-) para propiedades que los siguen requiriendo, tales como user-select o backdrop-filter, evitando añadir código innecesario cuando una regla ya es estándar.
Procesamiento local sin servidor
Esta herramienta funciona mediante JavaScript ejecutado de forma 100 % local en el cliente. El código que pegas no se sube a ningún servidor externo ni se almacena en bases de datos.
Esto permite trabajar con hojas de estilo privadas directamente desde el navegador, combinando la potencia de PostCSS con una interfaz rápida e inmediata.
Preguntas frecuentes
¿Qué son los prefijos CSS y para qué sirven?
Los prefijos CSS o vendor prefixes son etiquetas cortas que los navegadores añaden a propiedades experimentales antes de que se estandaricen por completo. Sirven para garantizar que reglas como user-select o backdrop-filter se muestren correctamente en distintas plataformas. Autoprefixer los añade de forma automática basándose en datos reales de uso en lugar de suposiciones.
¿Qué navegadores corresponden a cada prefijo como -webkit- o -moz-?
El prefijo -webkit- corresponde a Chrome, Safari, versiones recientes de Edge y navegadores basados en WebKit o Chromium. El prefijo -moz- identifica a Mozilla Firefox, mientras que -ms- pertenece a Internet Explorer y versiones antiguas de Edge. Por último, -o- se utilizaba en versiones antiguas del navegador Opera.
¿Sigue siendo necesario añadir prefijos al código CSS?
Sí, para un conjunto reducido pero real de propiedades CSS. Aunque la mayoría de reglas modernas ya no requieren prefijos, algunas propiedades aún presentan diferencias de renderizado sin ellos en determinados navegadores. La herramienta solo añade los prefijos que realmente necesita el código según los navegadores objetivo que hayas configurado.
¿Qué es una consulta de browserslist y cómo se redacta?
Una consulta de browserslist es una cadena de texto breve que define qué versiones de navegadores debe admitir tu proyecto. Se redacta mediante reglas como '> 1%', 'last 2 versions' o 'Safari >= 9'. El motor de Autoprefixer lee esta instrucción para determinar exactamente qué prefijos añadir o ignorar.
¿Es seguro pegar código CSS privado en esta herramienta online?
Sí, es completamente seguro porque todo el procesamiento se realiza en tu propio navegador mediante JavaScript local. El código CSS que introduces nunca se envía a servidores externos ni se guarda en ningún registro. Puedes procesar estilos de proyectos privados sin ningún riesgo para la confidencialidad.
¿Qué diferencia hay entre esta web y la demo oficial o el paquete de npm?
Esta herramienta ejecuta exactamente el mismo motor de PostCSS y Autoprefixer que el paquete de npm o la demo oficial. La diferencia radica en una interfaz optimizada para dispositivos móviles, actualización en vivo al escribir sin botones y la opción de copiar el resultado con un solo toque.
¿Por qué algunas propiedades CSS ya no añaden prefijos al procesarse?
Cuando una propiedad CSS se estandariza y todos los navegadores principales la admiten de forma nativa, los prefijos dejan de ser necesarios. Autoprefixer elimina automáticamente el código obsoleto para no sobrecargar las hojas de estilo con reglas muertas. Si una propiedad no genera prefijos, significa que los navegadores objetivo ya la soportan sin ellos.
Recomendado
-
CSS Pocket Reference (Eric Meyer)Todas las propiedades y selectores en un libro pequeño, prefijos incluidos.
-
CSS: The Definitive Guide (Meyer y Weyl)La referencia completa de CSS: grid, flexbox, animaciones y por qué cambian los navegadores.
-
Tablet Amazon Fire HD 10Prueba tu maquetación en una pantalla táctil real, no en una ventana redimensionada.
Ayuda a mantener las herramientas gratis. ✨
Imágenes meramente ilustrativas. En calidad de Afiliado de Amazon, obtengo ingresos por las compras adscritas que cumplen los requisitos aplicables.
