Minificador CSS
Hojas de estilo más pequeñas, el mismo diseño
Este minificador CSS gratis funciona en línea, quita los comentarios y los espacios de tu hoja de estilos y te devuelve un archivo más pequeño. Primero, pega tu CSS o suelta tus archivos. Luego pulsa un botón. Por último, copia el resultado, porque todo el trabajo ocurre en esta pestaña.
- GratisPrecio
- No hace faltaCuenta
- NingunaSubidas
- En cada pasadaVerificado
Minificador de CSS
Pega una hoja de estilos o suelta tus archivos — sin subir nada
Resultado minificado
- Original
- —
- Minificado
- —
- Ahorrado
- —
- Con gzip
- —
- Reglas
- —
- Tardó
- —
Listo. Pega tu CSS y pulsa Minificar o Embellecer.
¿Qué es un minificador CSS?
Un minificador CSS reescribe una hoja de estilos escrita para personas en otra que el navegador descarga más rápido. Elimina tus comentarios, tu sangría y los huecos que solo ayudan a quien lee. Sin embargo, conserva cada regla que escribiste, así que la página se ve exactamente igual.
El ahorro importa porque una hoja de estilos bloquea el renderizado. Un navegador no pinta ni un píxel hasta tener tu CSS, así que cada byte que recortas llega antes de la primera pintura y no después. Por lo tanto, una hoja que baja de 60 KB a 42 KB muestra antes tu diseño.
A veces se llama a este trabajo compresor CSS. Ambos términos describen lo mismo: menos caracteres y el mismo comportamiento. En resumen, publicas el archivo pequeño y te quedas con el legible.
Minificar con seguridad exige saber qué necesita el analizador. La referencia de MDN sobre la sintaxis CSS es la descripción honesta más breve de eso.
Dónde la mayoría de las herramientas rompen tu CSS en silencio
Tres trampas causan casi todo el daño, y una herramienta basada en buscar y reemplazar cae en todas. Primero, `calc(100% - 20px)` necesita los espacios alrededor de ese signo menos. Si los quitas, el navegador descarta toda la declaración, así que tu diseño se desmorona sin ningún error visible.
Segundo, `.card .title` y `.card.title` seleccionan elementos distintos. Ese hueco es el combinador descendiente, y tiene significado. Tercero, un data URI dentro de `url()` contiene puntos y comas y comas que no son separadores en absoluto.
Esta herramienta lee tu hoja de estilos carácter a carácter, así que sabe qué hueco está mirando. Como resultado, quita los espacios que no significan nada y deja los que sí significan algo.
Cuándo minificar CSS
Minifica al final, después de tu compilación y de tus pruebas. Mantén la hoja legible en tu editor y publica la pequeña, porque nadie debería editar a mano un archivo minificado.
Compensa sobre todo en la hoja que carga cada página. Por ejemplo, una hoja compartida que descarga cada visitante merece mucha más atención que un archivo específico de una página.
¿Qué pasa con las reglas CSS que no se usan?
Eliminar reglas que nada usa es otro trabajo, y arriesgado. Una clase que tu JavaScript añade después parece sin usar para un escáner, así que esta herramienta nunca adivina. En cambio, acorta lo que tienes.
En esta página
- La herramienta
- ¿Qué es un minificador CSS?
- Minifica CSS en cuatro pasos
- Un minificador CSS que revisa su propio trabajo
- Sacar el máximo partido a este compresor CSS
- Errores que rompen una hoja minificada
- Preguntas frecuentes sobre el minificador CSS
- Otras herramientas que puedes usar ya
Sigue leyendo
Minifica CSS en cuatro pasos
Ni programas, ni alta, ni colas. Basta con esta misma pestaña del navegador.
- 1
Pega o carga tu archivo CSS
Pega tu CSS en el editor o suelta tus archivos .css en la pestaña de subida. Ambas vías hacen el mismo trabajo.
- 2
Elige qué se va
Los comentarios se van por defecto. Además, puedes acortar colores y quitar reglas cuyo cuerpo no contiene nada.
- 3
Pulsa minificar
La herramienta recorre cada carácter, reescribe la hoja y luego vuelve a leer su propia respuesta antes de mostrarte nada.
- 4
Copia o descarga
Llévate el resultado como texto o guárdalo como archivo .min.css. Mientras tanto, tu original se queda exactamente como lo dejaste.
Un minificador CSS que revisa su propio trabajo
Los navegadores fallan en silencio con un CSS roto. Descartan la declaración y siguen, así que nadie te avisa de que algo salió mal.
Protege calc()
Dentro de calc, clamp, min y max, un más o un menos con espacios conserva sus espacios. Por lo tanto, tu aritmética sobrevive, justo donde la mayoría de los minificadores fallan en silencio.
Verifica cada pasada
La herramienta vuelve a leer su propia salida y la compara con lo que pretendía escribir. Si algo difiere, te lo dice en lugar de callar.
Conoce tus selectores
Un espacio entre dos selectores significa "descendiente", así que se queda. Alrededor de un combinador de hijo o hermano no significa nada, así que se va.
Deja pasar url() intacto
Un data URI puede contener puntos y comas, comas y paréntesis. Esta herramienta trata todo el url() como una sola pieza y lo copia byte a byte.
Las imágenes nunca salen de esta pestaña de Denwix
Tu hoja de estilos nunca viaja a ningún sitio. No hay petición, ni almacenamiento, ni registro, así que incluso el trabajo de clientes se puede pegar aquí con seguridad.
Muestra la cifra real
Ves el tamaño con gzip junto al tamaño bruto, porque gzip es lo que realmente llega a tu visitante.
Sacar el máximo partido a este compresor CSS
Unos pocos hábitos mantienen predecible una hoja minificada.
- Conserva el original. Edita siempre la hoja legible. Así, la copia minificada es algo que generas, nunca algo que mantienes.
- Minifica al final. Ejecútalo después de Sass, de PostCSS y de tus pruebas. De lo contrario, pruebas un archivo y publicas otro.
- Sírvelo con gzip. Minificar y comprimir suman ahorros distintos. Como resultado, el tamaño transferido queda muy por debajo de lo que ocupa el archivo en disco.
- Cuida los avisos de licencia. Deja ese interruptor activado cuando un framework que usas exige que su comentario de atribución viaje con el código.
- Revisa el interruptor de reglas vacías. Viene desactivado por defecto, porque una regla vacía a veces documenta una intención. Actívalo cuando sepas que no es así.
- Fíjate en la marca de verificado. Si una pasada dice alguna vez que no pudo verificar, no publiques ese archivo. En cambio, envíanos el caso y conserva tu original.
Errores que rompen una hoja minificada
Casi todas las historias de "el minificador rompió mi diseño" son una de estas tres.
Perder los espacios de calc
Una herramienta que los quita convierte una longitud válida en nada. Entonces tu diseño se desmorona sin un solo error en la consola.
Editar el archivo minificado
Tus cambios desaparecen la próxima vez que compilas. Así que el arreglo siempre va en la hoja de estilos de origen.
Minificar dos veces
Pasar otra vez una hoja ya minificada no ahorra nada, y solo hace más difícil de leer la siguiente comparación.
Preguntas frecuentes sobre el minificador CSS
¿Este minificador CSS romperá mi diseño?
No debería, y lo comprueba en lugar de suponerlo. La herramienta vuelve a leer cada resultado y lo compara con lo que pretendía escribir, así que detecta una llave perdida o un url() estropeado y te lo dice, en lugar de entregarte una hoja rota.
¿Sigue funcionando calc()?
Sí, y pesa más de lo que aparenta. Dentro de calc, clamp, min y max, los espacios alrededor de un más o un menos se quedan exactamente donde los pusiste, porque quitarlos convierte una longitud válida en una declaración que el navegador descarta.
¿Cuánto más pequeña será mi hoja de estilos?
Una hoja legible suele bajar entre un 20 y un 40 por ciento, y la herramienta muestra la cifra exacta de tu archivo. Sin embargo, una hoja que ya viene compacta ahorra mucho menos, ya que hay menos espacios que quitar.
¿Elimina el CSS que no uso?
No, y lo hemos decidido así adrede. Una clase que tu JavaScript añade más tarde parece sin usar para cualquier escáner, así que adivinar ahí rompería páginas reales. Por eso esta herramienta acorta lo que escribiste y te deja las decisiones a ti.
¿Mi CSS viaja a algún servidor?
No. Todo el minificador funciona dentro de la pestaña de tu navegador. No hay petición, ni almacenamiento, ni registro, así que puedes pegar sin riesgo trabajo que no puedes compartir.
¿Acepta más de un archivo por tanda?
Sí. Abre la pestaña de subida y suelta tantos archivos .css como quieras. La herramienta minifica cada uno por separado, y puedes descargarlos uno a uno.
Otras herramientas que puedes usar ya
Todas funcionan en tu navegador y no te piden nada.
Minificador JavaScript
Reduce un script de la misma forma, con la misma comprobación de que el resultado sigue coincidiendo con tu código.
Abrir herramienta →Compresor SVG
Reduce archivos SVG o marcado pegado, y elimina cualquier script escondido dentro.
Abrir herramienta →Tus PNG convertidos en WebP
Convierte un lote de imágenes a un formato más ligero sin perder la transparencia.
Abrir herramienta →
Reduce tu próxima hoja de estilos en segundos
Pega tu CSS, pulsa un botón y comprueba tú mismo el ahorro. Nada viaja a ningún sitio y nada se queda guardado.