Quita comentarios y espacios superfluos del CSS

Los desarrolladores web usan Minificador CSS al preparar código compacto para una entrega o una comparación controlada.

Quita los comentarios y los espacios superfluos del CSS y obtén código compacto para el siguiente paso. Úsalo gratis en el navegador, sin cuenta.

Cómo usar

Suelta tu hoja de estilos en el área de entrada, o importa el archivo que quieres comprimir en lugar de pegarlo a mano.
Ejecuta el minificador: los comentarios desaparecen y se eliminan los espacios en blanco sin función sintáctica.
Compara el tamaño de la salida con tu archivo original para ver cuánto ha ahorrado realmente la pasada.
Copia el código compacto en tu proyecto y recarga la página para confirmar que el diseño no se ha desplazado.
Guarda la versión legible en un lugar seguro, porque el archivo empaquetado está pensado para la entrega más que para editarlo.

Ejemplo

La muestra contiene dos reglas escritas en varias líneas, con márgenes, un fondo y relleno repartidos. Después de la pasada, compara ambos textos lado a lado y comprueba que todos los selectores, propiedades y valores sigan apareciendo en la versión compacta.

Entrada

body {
    color: #17211d;
    margin: 0;
}

.card {
    padding: 12px;
    background: #ffffff;
}

Resultado

body{color:#17211d;margin:0} .card{padding:12px;background:#ffffff}

Límites y formatos

Los comentarios se eliminan, así que cualquier nota que hayas dejado dentro de ellos no volverá en la salida.
El código compacto es difícil de leer y incómodo de corregir, así que conserva el original para futuras ediciones.
Las reglas no utilizadas no se detectan y los valores no se reescriben, así que el ahorro proviene principalmente de espacios en blanco y comentarios.
Prueba el resultado en los navegadores que soportas, sobre todo si la hoja usa selectores poco habituales o un comentario que nunca se cerró.

Dónde se procesa

El trabajo ocurre dentro de tu navegador: el CSS que pegas se queda ahí, no se envía a ningún sitio y desaparece cuando se cierra la pestaña. Eso significa que puedes comprimir la hoja de estilos de un cliente sin que salga de tu ordenador.

Preguntas frecuentes

¿Un archivo minificado cargará más rápido?

Pesa menos porque los comentarios y los espacios sobrantes se han eliminado, y un archivo más pequeño se descarga antes. Cuánto lo notes depende del tamaño de la hoja de estilos y de todo lo demás que la página tenga que cargar.

¿Puedo deshacer la minificación después?

No desde esta página. Los comentarios y la sangría original se pierden en la pasada, así que el diseño legible no se puede reconstruir. Trabaja sobre una copia, o guarda tu archivo formateado en control de versiones antes de reemplazarlo.

¿Por qué la salida todavía contiene espacios?

Los espacios que separan dos valores, dos selectores o las palabras dentro de una propiedad forman parte de la sintaxis. Solo se eliminan los espacios en blanco sin función gramatical, por eso el resultado comprimido sigue analizándose como CSS válido.