Minificador de CSS gratis
Desnúdese de los comentarios, el espacio en blanco y optimice las declaraciones para enviar hojas de estilo más pequeñas.
Cargando herramienta…
Cómo minificar CSS antes de publicar una hoja de estilos
Reduzca el espacio en blanco CSS y los comentarios locales. Compara el resultado con su hoja de estilos original, luego copia o descarga.
- Pega su hoja de estilos en la entrada CSS.
- Selecciona Minify.
- Revisa la salida y la reducción de tamaño mostrada.
- Copiar o descargar y probar las páginas afectadas antes de publicar.
Cuándo minificar una hoja de estilo
El CSS legible está lleno de saltos de línea, sangrado y notas para ti mismo. Los navegadores no necesitan nada de eso. Eliminarlo hace que el archivo sea un poco más pequeño, lo que ayuda cuando se envía una hoja de estilo en cada carga de página.
Esta herramienta es útil para un sitio pequeño sin una tubería de compilación, una página de destino que edita a mano, un fragmento de CSS que desea pegar en un campo de sistema de gestión de contenido, o una rápida comprobación de la cantidad de comentarios de espacio y formato ocupan en un archivo.
Ejemplo trabajado con el estilo de botón de muestra
El editor se abre con un ejemplo corto: una línea de comentarios, luego una regla.botón con un fondo de gradiente lineal, color de texto blanco, relleno de 10px 20px y un radio de borde de 8px, repartidos en siete líneas. Esa entrada tiene 141 caracteres de largo.
Selecciona Minify y la salida es una sola línea:.botón { fondo: lineal-gradiente(45deg, #6366f1, #ec4899); color: #fff; relleno: 10px 20px; radio-frontero: 8px; }. El comentario se ha ido y cada carrera de espacios y saltos de línea se ha convertido en un espacio. La salida es de 118 caracteres, por lo que la herramienta reporta un ahorro del 16,3 por ciento, de 141 a 118.
Un archivo con comentarios más largos muestra un mayor ahorro. ¡Una hoja de estilos que comienza con un comentario de licencia escrito como /*! Tema v2 */ mantiene ese comentario, porque la marca de exclamación lo marca como uno para preservar.
¿Cómo funciona este minificador?
La herramienta lee el CSS un carácter a la vez. Se eliminan los comentarios ordinarios. Los comentarios que comienzan con /*! se mantienen. Cualquier secuencia de espacio en blanco, incluyendo pestañas y líneas nuevas, se colapsa en un solo espacio, y se recorta el espacio que conduce y arrastra.
El texto dentro de las comillas se copia exactamente, por lo que los valores de contenido, nombres de fuentes y URLs citadas mantienen su espacio interno. Si un comentario o una cadena citada nunca se cierra, la herramienta muestra un error en lugar de producir una salida rota.
No renombra selectores, fusiona reglas, acorta colores o elimina estilos no utilizados. Eso hace que sea predecible: la salida tiene las mismas reglas en el mismo orden que su fuente, sólo sin comentarios y espacio en blanco extra.
Errores comunes a evitar
No sobrescriba su única copia legible con la versión minificada. Guarda la salida como un archivo separado, como styles.min.css, que es el nombre que uses el botón Descargar.
Fijar comentarios y citas no cerrados antes de minificar, ya que un */ faltante ocultaría todas las reglas después de él. Después de publicar, borrar la caché del navegador o cambiar el nombre del archivo para que los visitantes reciban la nueva versión.
Consejos útiles y limitaciones
- Mantén una fuente legible para futuras ediciones.
- Comprueba las propiedades personalizadas, las cadenas y el diseño en la página real.
- Pon la licencia o el texto de crédito en un /*! */ comentario si debe permanecer en el archivo minificado.
- Comprueba si su servidor ya aplica compresión gzip o Brotli, ya que eso reduce CSS más en la parte superior de la minificación.
Preguntas frecuentes
¿Esto optimiza las imágenes?
No. Cambia el texto CSS, no los archivos de imagen referenciados.
¿Quitará todos los selectores no utilizados?
No. No arrastra tu sitio para descubrir las reglas no utilizadas.
¿Por qué mantener una versión no minada?
La fuente legible facilita los cambios posteriores y la depuración.
¿El minificador guarda algún comentario?
Sí. Los comentarios que comienzan con /*! se conservan, que es una convención común para los avisos de licencia. Se eliminan todos los demás comentarios.
¿Cambiará el espaciado dentro de las cadenas citadas?
No. Cualquier cosa dentro de comillas simples o dobles se copia exactamente, incluyendo espacios repetidos.
¿Por qué tengo un error de comentario no cerrado?
Un comentario abierto con /* no tiene coincidencia */. Añadir el marcador de cierre para que la herramienta sepa dónde termina el comentario.
Su entrada se procesa en tu navegador sin una cuenta ToolWorld Online. Copia o descarga cualquier cosa que quieras guardar antes de salir de la página.
Lee nuestra política de privacidad · Acerca de ToolWorld Online