Prefijador CSS
Añade prefijos de vendor a tu CSS automáticamente
CSS de entrada
CSS con prefijos
Ejemplos de prefijado CSS
Los prefijos de vendor aseguran soporte cross-browser. Ejemplo:
Flexbox y transforms
Entrada (sin prefijos):
Salida con prefijos:
Usa Ejemplo de arriba para cargar más datos de ejemplo.
¿Qué es un prefijador CSS?
Los navegadores a veces implementan características CSS con prefijos de vendor antes de estandarizarlas: -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (IE/Edge legacy). Un prefijador CSS añade estos prefijos automáticamente para que tus estilos funcionen en todos los navegadores. Las especificaciones W3C CSS definen el lenguaje; Can I Use rastrea el soporte de navegador.
Esta herramienta analiza tu CSS y añade prefijos de vendor donde hace falta. Se ejecuta completamente en tu navegador. No se envía nada a ningún servidor. Los navegadores modernos necesitan menos prefijos que antes, pero algunas propiedades (p. ej. user-select, display: flex en Safari antiguo) aún se benefician. Para formatear, usa el Formateador CSS. Para minificar, el Minificador CSS.
Cómo usar esta herramienta
Pegar o subir CSS
Copia tu CSS y pégalo en el editor izquierdo. También puedes hacer clic en Subir para cargar un archivo .css. El botón Ejemplo carga datos de ejemplo. El CSS inválido mostrará un error.
Ver la salida con prefijos
El panel derecho muestra CSS con prefijos de vendor añadidos. Propiedades como display: flex, user-select y transform obtienen los prefijos apropiados para navegadores antiguos.
Copiar o descargar
Usa Copiar o Descargar. Para SCSS o Less, compila primero con SCSS a CSS o Less a CSS, luego prefija. Para validar, el Validador CSS.
Cuándo ayuda el prefijado CSS
Al soportar navegadores antiguos (Safari, Chrome antiguo, IE legacy) o usar características CSS nuevas que no están totalmente estandarizadas, el prefijado asegura compatibilidad. Herramientas de build como Autoprefixer o PostCSS suelen manejar esto en producción, pero esta herramienta es útil para archivos puntuales, comprobaciones rápidas o cuando no hay un paso de build.
El CSS de email, estilos embebidos o CSS alojado en CDN puede necesitar prefijado manual. Pasar tu hoja de estilos por aquí te da salida lista para navegador. Para convertir a estilos inline (p. ej. email), usa CSS a inline después de prefijar.
Preguntas frecuentes
¿Sigo necesitando prefijos en 2024?
Muchas propiedades ya tienen soporte sin prefijo. Para Safari antiguo, iOS o navegadores legacy, algunas propiedades (p. ej. -webkit-backdrop-filter) aún necesitan prefijos. Comprueba Can I Use para tus navegadores objetivo.
¿Mis datos son privados?
Sí. El prefijado se ejecuta completamente en tu navegador. No se envía ningún dato a ningún servidor.
¿Por qué esto en lugar de Autoprefixer?
Autoprefixer corre en una pipeline de build. Esta herramienta corre en el navegador—sin Node.js ni paso de build. Úsala para comprobaciones rápidas, archivos puntuales o cuando no puedes ejecutar un build.
¿Soporta todas las propiedades?
La herramienta añade prefijos para propiedades comunes. Para cobertura completa, usa Autoprefixer con tu build. Para la mayoría de casos, esta herramienta cubre lo esencial.
¿Qué pasa con @keyframes?
Los nombres de keyframe pueden necesitar prefijos en algunos contextos. La herramienta maneja casos comunes. Para animaciones complejas, verifica en tus navegadores objetivo.
Herramientas relacionadas
Para la especificación CSS: W3C CSS. MDN CSS es la referencia. Can I Use para soporte de navegador. Autoprefixer para pipelines de build.