Minificar CSS online, al instante y en tu navegador
Minificar CSS aquí es tan simple como pegar tu hoja de estilos: la herramienta quita los comentarios, los saltos de línea y cada espacio que el navegador no necesita. La versión comprimida aparece debajo en una fracción de segundo, con los bytes exactos que te ahorras. No instalas nada, no hay paso de compilación y nada de lo que pegas se sube a ningún sitio: todo ocurre online, en tu navegador.
Cómo minificar CSS paso a paso
- Pega o escribe tu CSS en el cuadro CSS original.
- Un momento después de dejar de escribir, el CSS minificado aparece debajo, junto al tamaño original, el tamaño nuevo y el porcentaje ahorrado. No hay ningún botón que pulsar.
- Toca Copiar al portapapeles para pegarlo en tu proyecto, o Descargar .min.css para guardarlo como archivo.
Un CSS mal formado no bloquea la herramienta: se minifica hasta donde se puede leer, así que puedes pegar código a medio terminar y corregirlo después.
Qué quita este minificador CSS
Cada regla sigue funcionando exactamente igual; solo desaparece lo que está ahí para ojos humanos. Se van los comentarios, los espacios en blanco se reducen, desaparecen los espacios alrededor de llaves, dos puntos y comas, y se elimina el último punto y coma antes de cerrar una llave. Las cadenas entre comillas, los valores url() y los caracteres escapados se copian sin tocar, así que algo como "a b" conserva su espacio.
Antes: /* Buttons */ .btn { color: #fff; margin: 0 auto; }
Después: .btn{color:#fff;margin:0 auto}
Comprimir CSS y reducir su tamaño
Cuánto se reduce el CSS depende de cuántos comentarios y cuánto espacio en blanco tenga. Las hojas de estilo muy comentadas y bien sangradas suelen encogerse entre una cuarta parte y la mitad. Bajo el resultado ves el tamaño original, el tamaño minificado y el porcentaje exacto de ahorro.
Un archivo más pequeño se descarga antes y la página se muestra antes. Si quieres transferir aún menos, tu servidor web puede además servir el archivo minificado con gzip o Brotli.
Conservar o quitar los comentarios de licencia
Los comentarios que empiezan por /*! suelen ser el aviso de licencia o de copyright de una librería. Se conservan por defecto, porque muchas licencias exigen que ese aviso viaje con el código.
Desmarca Conservar comentarios de licencia, debajo del cuadro de entrada, para eliminarlos también y obtener el archivo más pequeño posible.
Minimizar CSS para producción sin riesgos
El CSS minificado es seguro en un sitio en producción: solo faltan caracteres que no cambian cómo el navegador lee la hoja de estilos. Guarda tu archivo legible como fuente y publica la versión .min.css, por ejemplo style.css junto a style.min.css.
Preguntas frecuentes
¿Qué hace un CSS minifier?
Un minificador de CSS elimina todo lo que el navegador no necesita para leer tus estilos: comentarios, saltos de línea, sangrías, los espacios alrededor de llaves, dos puntos y comas, y el último punto y coma de cada regla. El resultado funciona exactamente igual que el original, pero pesa menos, así que se descarga más rápido.
¿Cómo minificar CSS online?
Pega tu CSS en el cuadro «CSS original». La versión minificada aparece debajo un momento después, con los bytes que te ahorras. Toca «Copiar al portapapeles» para pegarla en tu proyecto o «Descargar .min.css» para guardarla como archivo.
¿Comprimir CSS es lo mismo que minificarlo?
Sí, en el uso diario significan lo mismo: reducir el texto sin cambiar lo que hace. Pega aquí la hoja de estilos y copia o descarga el resultado comprimido. Para transferir aún menos, tu servidor web puede aplicar gzip o Brotli al archivo minificado.
¿Cómo elimino los comentarios de un CSS?
Pega tu CSS y desmarca «Conservar comentarios de licencia». Así se eliminan todos los comentarios, incluidos los que empiezan por /*!. Si dejas la opción marcada, solo se mantienen esos avisos de licencia.
¿Es seguro usar CSS minificado en producción?
Sí. Minificar solo quita caracteres que no influyen en cómo el navegador lee la hoja de estilos. Las cadenas, los valores url() y los caracteres escapados se copian tal cual. Conserva tu archivo original como fuente y publica la versión .min.css.
¿Qué es un archivo .min.css?
Es la copia minificada de una hoja de estilos, llamada así por convención para que esté junto a la fuente legible, como style.css y style.min.css. Edita el archivo legible y enlaza el .min.css en tu sitio publicado.
¿Puedo volver a pasar un CSS minificado a formato normal?
No exactamente, porque al minificar se pierde el formato original, pero sí puedes hacerlo legible otra vez. Pega el código minificado en el Formateador de código para volver a sangrarlo. Los comentarios eliminados no vuelven, así que guarda siempre tu fuente original.
¿Qué pasa si mi CSS tiene errores?
La herramienta no se bloquea. El CSS se minifica hasta donde se puede leer, así que puedes pegar código incompleto y corregirlo después.
Recomendado
-
Soporte plegable para portátil Amazon BasicsSube la pantalla a la altura de los ojos mientras optimizas tu código.
-
Web Performance Fundamentals (Nadia Makarevich)Un CSS más ligero es solo el principio: aprende a medir y acelerar todo el sitio.
-
Ratón inalámbrico Logitech MX Master 3SPreciso y silencioso para largas jornadas de desarrollo front-end.
Ayuda a mantener las herramientas gratis. ✨
Imágenes meramente ilustrativas. En calidad de Afiliado de Amazon, obtengo ingresos por las compras adscritas que cumplen los requisitos aplicables.
