Formateador CSS - Herramienta online gratuita

Características

Alternar entre embellecer y minificar

Ordenar propiedades

Eliminar duplicados

Cómo Usar

1. Pega tu CSS en el cuadro de entrada a la izquierda.

2. Haz clic en Formatear para embellecer, o en Minificar para comprimir.

3. Copia el resultado formateado del panel derecho.

Sobre esta herramienta

El CSS minificado o editado a mano es difícil de revisar: una sola línea larga oculta reglas duplicadas, puntos y comas que faltan y sobrescrituras. Este formateador reconstruye la hoja de estilos con una declaración por línea y una sangría uniforme de dos espacios, cuatro espacios o tabulaciones, conservando intactas las cadenas, los comentarios y los bloques anidados como @media y @supports. Minificar hace lo contrario para producción: elimina comentarios y espacios innecesarios para reducir el tamaño de transferencia. Puedes pegar código o arrastrar un archivo .css, y después copiar o descargar el resultado. Formatear solo cambia la presentación: el orden y el significado de tus reglas siguen exactamente igual, así que la cascada se comporta como antes.

Preguntas Frecuentes

¿Formatear cambiará el comportamiento de mi CSS?

No. El formateador solo cambia espacios y saltos de línea. Los selectores, las declaraciones y su orden se conservan, así que la especificidad y la cascada funcionan exactamente como antes.

¿Cuánto se ahorra minificando CSS?

Quitar comentarios y espacios suele reducir una hoja de estilos escrita a mano entre un 15 y un 30 %. Servirla con compresión gzip o Brotli ahorra mucho más, así que usa ambas cosas en producción.

¿Admite @media, @supports y reglas anidadas?

Sí. Las reglas @ y los bloques anidados se sangran por niveles y su contenido se formatea como cualquier otra regla, así que las media queries siguen siendo fáciles de recorrer.

¿Se conservan los comentarios?

Al formatear se conservan los comentarios de bloque y se colocan en su propia línea. Al minificar se eliminan, ya que el navegador no los necesita.

¿El formateador comprueba si mi CSS tiene errores?

No valida nombres ni valores de propiedades. Formatea lo que recibe, así que una errata como colr: red sigue en el resultado; usa tu editor o un linter como Stylelint para detectar errores.