Minifica CSS eliminando comentarios y espacios innecesarios y fusionando reglas duplicadas, o hace lo contrario y lo reformatea con una declaración por línea. Ambas direcciones usan analizadores reales (csso y js-beautify), de modo que el texto que parece un comentario dentro de una cadena content:, los espacios en calc() y los URI data: se conservan intactos.
Minificar vs. Embellecer
Minificar elimina comentarios y espacios en blanco innecesarios y fusiona de forma segura reglas duplicadas para producir el CSS más pequeño posible — útil para reducir una hoja de estilos antes de publicarla. Embellecer hace lo contrario: vuelve a aplicar sangría con una declaración por línea para que un archivo minificado o desordenado sea legible de nuevo. Ambos funcionan con analizadores de CSS reales (csso y js-beautify), así que el contenido delicado como texto que parece un comentario dentro de una cadena content:, los espacios dentro de calc() y las URIs data: se conservan en lugar de romperse con una simple sustitución de texto.
Cómo usar el Minificador de CSS
- Pega — pega el CSS que quieres minificar o embellecer en el cuadro de entrada de arriba.
- Elige la sangría — escoge entre 2 espacios, 4 espacios o tabulador (solo se aplica al resultado de embellecer, no afecta a la minificación).
- Ejecuta — pulsa el botón "Minificar" o "Embellecer" y el proceso se realiza al instante dentro de tu navegador.
- Copia — comprueba el indicador de tamaño reducido y usa el botón "Copiar" para llevar el resultado al portapapeles.
¿Hay riesgo de que la minificación cambie los estilos?
No. Esta herramienta no hace una búsqueda y sustitución ciega de texto, sino que usa un analizador de CSS real (csso) que entiende la hoja de estilos como un árbol sintáctico antes de optimizarla de forma segura. Por eso se conservan tal cual el texto que parece un comentario dentro de content:, los espacios significativos dentro de calc(), las URIs data: y los prefijos de proveedor, y el resultado renderizado no cambia.
¿Cuánto se reduce el tamaño?
Depende del original, pero un CSS legible con muchos comentarios y sangría suele reducirse entre un 30 % y un 60 %. Si el archivo ya está minificado, la reducción será pequeña. Al terminar la conversión, el indicador de tamaño muestra al instante cuántos bytes y qué porcentaje se ha ahorrado respecto al original. Si a eso le sumas la compresión gzip o brotli al enviarlo desde el servidor, el volumen real transferido se reduce aún más.
¿Cuándo conviene usar Embellecer?
Embellecer es útil cuando necesitas leer o editar un CSS ya comprimido en una sola línea o con una sangría desordenada. Vuelve a colocar cada declaración con una sangría coherente, lo que facilita depurar una hoja de estilos publicada o entender código ajeno. Cuando vayas a publicar de nuevo, basta con volver a "Minificar".
¿Se sube mi CSS a algún sitio?
No. Tanto el minificador como el embellecedor se ejecutan por completo dentro de tu navegador usando bibliotecas alojadas en el propio servidor — tu CSS nunca se envía ni se almacena en ningún servidor. Tras convertir, el indicador de tamaño muestra cuántos bytes ha ahorrado la minificación, y el botón Copiar coloca el resultado directamente en tu portapapeles.