Minificar o formatear
El modo Minificar elimina espacios innecesarios y optimiza el CSS. El modo Formatear añade sangría y saltos de línea para facilitar la lectura de una hoja de estilos comprimida.
Minificar y formatear CSS
Reduce el tamaño de un archivo CSS o dale formato para leerlo mejor. Compara el resultado con tu hoja de estilos original.
Modo de procesamiento
Más acciones
Herramientas relacionadas
Tus estadísticas
0
Procesamientos
0
Bytes ahorrados
0%
Compresión media
Sin uso
Modo favorito
0
Copias
100%
Puntuación de actividad
Cómo minificar y formatear CSS
No se ha podido cargar el vídeo. Puedes seguir las instrucciones que aparecen debajo.
El vídeo muestra la interfaz en inglés.
Elige Minificar para obtener CSS compacto o Formatear para leer mejor el CSS comprimido. El modo Formatear no recupera los comentarios que ya se eliminaron. Conserva una copia de la hoja de estilos original antes de reemplazarla.
Opciones de minificación y formato CSS
Optimización de la estructura
CSSO puede acortar valores, eliminar reglas vacías y combinar estructuras repetidas. La reducción depende de tu hoja de estilos y de si la reestructuración de reglas está activada.
Abrir un archivo CSS
Usa Importar para abrir un archivo .css o suéltalo en el área de entrada. Su contenido se procesará según el modo elegido.
Mostrar 3 másMostrar menos
Avisos de sintaxis
El modo Minificar muestra la línea y la columna de los errores detectados por el analizador. Revisa esos mensajes antes de usar el CSS generado.
Comentarios y reestructuración
Conserva los comentarios marcados con /*! si contienen licencias u otras notas importantes. Desactiva la reestructuración para evitar que las reglas se combinen o cambien de orden.
Procesamiento automático
Con la opción Procesamiento automático activada, el resultado se actualiza al editar. Si el ajuste está visible, puedes desactivarlo y procesar el código con Minificar o Formatear. En el teléfono, ambas acciones siguen disponibles, pero no se muestra el ajuste Procesamiento automático.
Preguntas frecuentes
¿Qué es la minificación CSS?
La minificación CSS elimina espacios y comentarios innecesarios. También puede acortar valores, por ejemplo de #ffffff a #fff. Esta herramienta usa CSSO, que además optimiza reglas y declaraciones repetidas cuando la reestructuración está activada.
¿Cuánto se reduce mi archivo CSS al minificarlo?
La reducción depende del código original. Una hoja de estilos con reglas repetidas o muchos comentarios puede reducirse más que una ya comprimida. En ventanas de más de 768 píxeles de ancho, puedes comparar los tamaños bajo los editores. Esas cifras se ocultan en ventanas más estrechas. El tamaño gzip se mide en este navegador, por lo que el servidor puede enviar una cantidad de bytes diferente.
¿Minificar CSS mejora la velocidad de la página o el SEO?
Reducir una hoja de estilos puede disminuir la cantidad de CSS que descargan tus visitantes. El efecto en la carga depende también del resto de la página, la caché y cómo sirve los archivos el servidor. La minificación por sí sola no garantiza mejores Core Web Vitals ni posiciones en los buscadores.
¿Cuál es la diferencia entre minificar y formatear CSS?
El modo Minificar produce CSS compacto para reducir el tamaño del archivo. El modo Formatear añade saltos de línea y sangría para facilitar su lectura y edición. Formatear CSS comprimido no recupera los comentarios ni el formato original que se eliminaron.
Mostrar 4 másMostrar menos
¿Cómo hago que el CSS minificado sea más legible?
Elige Formatear, pega el CSS y selecciona una sangría de 2 o 4 espacios. El código formateado aparece en el editor de salida, listo para copiar o descargar.
¿La minificación puede afectar al funcionamiento de mi CSS?
Revisa y prueba el resultado en tu sitio antes de reemplazar el original. La reestructuración puede combinar o reordenar reglas. Desactívala si su orden importa y revisa los avisos de sintaxis del analizador.
¿Puede detectar errores en mi CSS?
El modo Minificar indica la línea y la columna de los problemas de sintaxis detectados por el analizador. Este puede continuar pese a ciertos errores, y el formato no equivale a una validación completa del CSS. Comprueba el resultado en los navegadores que admite tu sitio.
¿Tengo que enviar mi CSS a un servidor?
No. La acción Importar lee un archivo local en el editor y el CSS se procesa en tu navegador. La hoja de estilos no se envía a un servidor de conversión.
Detalles técnicos
Minificación con CSSO
El modo Minificar carga CSSO y analiza la hoja de estilos con css-tree. El optimizador elimina formato redundante y puede acortar valores, eliminar reglas vacías y combinar estructuras. Los dos ajustes controlan la conservación de comentarios importantes y la reestructuración de reglas.
Procesamiento en el navegador
Los motores de minificación y formato se cargan la primera vez que usas el modo correspondiente. Procesan el CSS en tu navegador. La acción Importar lee el texto de un archivo local sin enviar la hoja de estilos a un servidor de conversión.
Mostrar 4 másMostrar menos
Resultado y comparación de tamaños
Los tamaños de entrada y salida se miden a partir de los bytes del texto. Cuando CompressionStream está disponible, la herramienta también mide el resultado comprimido con gzip en el navegador. La acción Descargar crea un archivo .css cuyo nombre corresponde al modo elegido.
Diagnósticos del analizador
El modo Minificar recoge los errores de css-tree y muestra su línea y columna. El analizador puede continuar pese a un código mal formado, por lo que obtener un resultado no demuestra que cada declaración sea válida o funcione como esperas.
Formato CSS
El modo Formatear usa @projectwallace/format-css con la sangría elegida de 2 o 4 espacios. Ambos modos también muestran los errores de sintaxis detectados por css-tree. El formato no recupera los comentarios eliminados ni confirma que todas las declaraciones CSS sean válidas.
Estadísticas locales de uso
Los totales de procesamiento, los bytes ahorrados y el uso de modos cuentan las operaciones iniciadas con Minificar o Formatear. Las actualizaciones automáticas no se suman a esos totales. Las copias del resultado se cuentan por separado. Estas estadísticas se guardan en IndexedDB si el navegador permite el almacenamiento. La puntuación de actividad combina las tasas de compresión y copia con los modos utilizados. No mide la corrección del CSS ni la velocidad de carga.