CSS de entrada

CSS con prefijos

¿Qué es un Prefijador CSS?

Los navegadores añaden funciones CSS experimentales utilizando prefijos como -webkit-, -moz-, -ms- y -o-. Sin estos prefijos, tu CSS moderno no funcionará en navegadores más antiguos. Este prefijador CSS agrega automáticamente todos los prefijos de proveedor necesarios para que tu CSS (Hojas de Estilo en Cascada) funcione en diferentes navegadores y versiones.

Según MDN Web Docs, los prefijos de proveedor son fundamentales para la compatibilidad entre navegadores. Nuestra herramienta sigue la base de datos de Can I Use para determinar qué propiedades necesitan prefijos, garantizando que tus estilos funcionen en Chrome, Firefox, Safari, Edge y versiones anteriores.

Todo se ejecuta localmente en tu navegador. Sin cargas, sin servidores: simplemente pega tu CSS y obtén la salida con prefijos al instante.

Cómo usar el Prefijador CSS

Sigue estos pasos para añadir prefijos de proveedor a tu CSS. Cada paso utiliza los botones y paneles de esta página.

Pegar, Subir o Cargar Ejemplo

Pega CSS en el panel izquierdo CSS de entrada, o haz clic en Subir para cargar un archivo .css. Haz clic en Ejemplo para ver estilos de muestra con propiedades que necesitan prefijos. Ejemplo:

.subscriber-card {
  display: flex;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

Ver la salida con prefijos

El panel derecho CSS con prefijos muestra la salida con prefijos -webkit-, -moz-, -ms- y -o- donde sea necesario. Propiedades como flex, transform y transition reciben todas las versiones prefijadas necesarias para compatibilidad entre navegadores.

Copiar o Descargar

Haz clic en Copiar para copiar al portapapeles, o en Descargar para guardar como .css. Usa Limpiar para empezar de nuevo. Todo el procesamiento ocurre en tu navegador.

Cuándo usar esta herramienta

Compatibilidad entre navegadores

¿Estás construyendo un sitio que necesita funcionar en navegadores más antiguos? Agrega prefijos de proveedor para garantizar que funciones CSS modernas como Flexbox y Grid funcionen en todas partes. Esencial para proyectos empresariales con soporte de navegadores heredados.

Prototipado rápido

¿Probando animaciones o transformaciones CSS en diferentes navegadores? Prefixa tu código primero para evitar problemas específicos del navegador. Ahorra tiempo cuando estás iterando rápidamente en diseños.

Proyectos heredados

¿Manteniendo proyectos más antiguos que aún soportan IE11 o versiones antiguas de Chrome? Agrega prefijos a las nuevas funciones CSS antes de desplegar. Evita romper el soporte de navegadores existente.

Aprender CSS

¿Quieres entender qué propiedades CSS necesitan prefijos de proveedor? Usa esta herramienta para ver qué características requieren prefijos. Educativo para desarrolladores que aprenden sobre compatibilidad entre navegadores.

Preguntas frecuentes

¿Qué son los prefijos de proveedor?

Los prefijos de proveedor son prefijos de propiedades CSS específicos del navegador, como -webkit-, -moz-, -ms- y -o-. Los navegadores los utilizan para implementar características CSS experimentales o no estándar antes de que se conviertan en estándares oficiales.

¿Todavía necesito prefijos en los navegadores modernos?

Para funciones de última generación, sí. Aunque los navegadores modernos admiten la mayoría de los CSS estándar, algunas propiedades más nuevas y las versiones más antiguas de los navegadores aún requieren prefijos. Consulta Can I Use para soporte específico de propiedades.

¿Qué propiedades necesitan prefijos?

Las más comunes incluyen transform, transition, animation, propiedades flex, border-radius (en navegadores más antiguos), box-shadow y muchas otras. Nuestra herramienta las detecta automáticamente según los estándares de MDN.

¿Cuál es el orden de las propiedades prefijadas?

Las propiedades con prefijo deben ir antes de la propiedad estándar. Nuestra herramienta sigue esta convención: primero los prefijos de proveedor (-webkit-, -moz-, -ms-, -o-), y luego la propiedad estándar sin prefijo al final.

¿Esto hará mi archivo CSS más grande?

Sí, agregar prefijos de proveedor aumenta el tamaño del archivo. Sin embargo, el beneficio es la compatibilidad con los navegadores. Para producción, úsalo con minificación y considera utilizar Autoprefixer en tu proceso de compilación.

¿Están seguros mis datos CSS?

Por supuesto. Todo el procesamiento ocurre en tu navegador usando JavaScript. Tu CSS nunca abandona tu computadora: sin cargas al servidor, sin almacenamiento de datos, completamente privado.

Herramientas CSS relacionadas

Agregar prefijos es solo una parte del desarrollo CSS. Aquí hay otras herramientas que pueden ayudarte: