El CSS define el aspecto de una página web. Esta herramienta elimina espacios innecesarios antes de publicar el código o los añade para facilitar la lectura y edición de las reglas.
Minificar tu CSS
Elige
Minificarencima de los editores.Usa Pegar para pegar tu CSS en el editor de entrada o
Importarpara elegir un archivo.cssde tu equipo.Con la opción Procesamiento automático activada, el resultado se actualiza mientras escribes. Si el ajuste está visible, puedes desactivarlo y pulsar Minificar cuando termines de editar. En el teléfono, usa Minificar cada vez que necesites actualizar el resultado.
Usa
Copiarpara copiar el resultado oDescargarpara guardarlo como archivo CSS.
Por ejemplo, el CSS de abajo muestra un título en rojo. Al minificarlo, se obtiene h1{color:red}. El título seguirá siendo rojo.
h1 {
color: red;
}Hacer legible el CSS comprimido
Elige Formatear cuando el CSS resulte difícil de leer porque está todo junto. El resultado coloca las declaraciones en líneas separadas y aplica una sangría de dos o cuatro espacios, según el ajuste elegido.
El formato añade espacios, así que el resultado puede ocupar más que el original. No recupera los comentarios ni el formato original que se hayan eliminado al minificar.
Intercambiar pasa el resultado al editor de entrada y cambia entre Minificar y Formatear. Si la opción Procesamiento automático está desactivada, vuelve a pulsar el botón principal para obtener el nuevo resultado.
Elegir qué puede cambiar el minificador
| Ajuste | Efecto |
|---|---|
| Conservar comentarios importantes | Conserva los comentarios que empiezan por /*!. Los comentarios normales se eliminan. Desactiva esta opción solo si también quieres eliminar los comentarios marcados. |
| Reestructurar y combinar reglas | Permite combinar y reorganizar reglas compatibles. Desactívalo para impedir esos cambios de estructura. |
| Procesamiento automático | Recalcula el resultado cuando cambias la entrada o los ajustes. Si está desactivado, el resultado anterior se borra cuando deja de corresponder a la entrada. Este ajuste no aparece en el teléfono. |
| Sangría del resultado | En el modo Formatear, elige dos o cuatro espacios por nivel de sangría. |
| Ajustar líneas | Ajusta las líneas largas al ancho de los editores. Solo cambia cómo se muestra el código en pantalla, no el archivo descargado. |
Prueba la hoja de estilos resultante en tu sitio antes de reemplazar la original, especialmente si activas la reestructuración. Conserva el archivo original para poder recuperarlo.
Importar, copiar y descargar
La acción Importar acepta un archivo CSS a la vez. También puedes soltar un archivo CSS en la página. Si la entrada ya contiene código, al importar otro archivo se pide confirmación antes de reemplazarlo. Cancelar conserva tu trabajo.
El botón Pegar reemplaza la entrada por el texto del portapapeles. El navegador puede pedir permiso. También puedes hacer clic en el editor y usar el atajo habitual para pegar.
Las acciones Copiar y Descargar usan el editor de salida. Los archivos descargados son CSS y llevan minified o beautified en el nombre. Guarda el resultado antes de salir de la página, porque el contenido de los editores no se restaura al recargar.
En el teléfono, la barra de acciones mantiene a mano la acción principal y Copiar. Abre Más para acceder a las demás acciones y a los ajustes de comentarios, reestructuración o sangría del modo elegido. El ajuste Procesamiento automático no está disponible en esta vista.
Entender los tamaños mostrados
Los tamaños aparecen bajo los editores en ventanas de más de 768 píxeles de ancho. Se ocultan en ventanas más estrechas. Los tamaños de entrada y salida indican los bytes del texto CSS. La reducción compara ambos valores. El formato puede aumentar el tamaño del archivo, aunque el porcentaje de ahorro mostrado no sea negativo.
La cifra gzip estima el tamaño tras comprimir el resultado con gzip en este navegador. Tu servidor web puede comprimirlo de otra forma, así que no mide lo que descargará cada visitante.
Si el resultado no es el esperado
En el modo Minificar, el aviso de sintaxis indica la línea y la posición que debes revisar. Comprueba que haya dos puntos entre cada propiedad y su valor y que los paréntesis, corchetes y llaves estén bien cerrados. El minificador puede generar un resultado a partir de CSS parcialmente incorrecto, por lo que obtenerlo no demuestra que todas las reglas sean válidas.
El modo Formatear organiza el texto para facilitar su lectura y también muestra los problemas de sintaxis detectados por el analizador. Ninguno de los dos modos comprueba que cada declaración funcione como esperas.
Si el resultado desaparece al editar, pulsa Minificar o Formatear de nuevo. Cuando el ajuste Procesamiento automático esté visible, actívalo si quieres actualizar el resultado mientras escribes. La acción Borrar vacía ambos editores después de confirmar. Cancelar mantiene su contenido.
El CSS se procesa en tu navegador. Las estadísticas bajo la herramienta pueden quedar guardadas en este dispositivo, pero no almacenan una copia de tu hoja de estilos. Los totales cuentan los procesamientos iniciados con Minificar o Formatear. Las actualizaciones automáticas no se suman a esos totales.