Minificar y embellecer CSS
Pega una hoja de estilos para comprimirla para producción o darle un formato legible, y ve cuántos bytes ahorras.
Funciona completamente en tu navegador
- Entrada
- 0
- Salida
- 0
- Cambio
- 0%
Entrada de hasta unos 10 MB. Solo quita espacios en blanco y comentarios; no combina reglas, no reescribe valores ni elimina CSS sin usar.
Cómo minificar o embellecer CSS
- Pega tu CSS en el cuadro o presiona Insertar un ejemplo.
- Elige Minificar para comprimirlo o Embellecer para darle formato con tu sangría. Al minificar, marca o desmarca la opción de comentarios de licencia.
- Revisa el tamaño ahorrado y luego copia el resultado o descárgalo como archivo
.css.
Minificar CSS sin romperlo
Minificar una hoja de estilos significa quitar todo lo que el navegador ignora: comentarios, sangría, saltos de línea y los espacios alrededor de la puntuación. Los archivos más pequeños se descargan y se analizan más rápido, y en una hoja de estilos grande el ahorro suele ser de un cuarto a la mitad de su tamaño antes de la compresión. Las reglas y su orden se mantienen exactamente como están escritos.
Lo difícil es saber qué espacios ignora el navegador. Un espacio entre dos selectores, como en nav a, es un combinador que significa "cualquier descendiente", así que nav a y nava son cosas distintas. Dentro de calc(1rem + 2px) los espacios alrededor de + son obligatorios, y calc(1rem+2px) no es válido. El texto entre comillas y dentro de url() son datos, no sintaxis. Un minificador hecho con expresiones regulares suele equivocarse en alguno de estos casos; este lee la hoja de estilos como una secuencia de tokens y solo quita los espacios donde la gramática los hace opcionales.
Embellecer es la dirección contraria: una declaración por línea, con sangría dentro de las llaves, para que un archivo minificado de un CDN se convierta en algo que puedas leer y comparar.
Consejos
- ¿Quieres ordenar una página completa y no solo su hoja de estilos? Usa Formatear y embellecer HTML.
- ¿Eliges colores para la hoja de estilos? El Convertidor de colores y contraste convierte hexadecimal a RGB, HSL y más.
- Revisa qué cambió realmente al minificar comparando ambas versiones en Comparar textos.
Preguntas frecuentes
¿Se sube mi CSS?
No. La minificación se hace en tu navegador, y la biblioteca para embellecer se carga desde este sitio solo si eliges Embellecer. Tu hoja de estilos nunca se envía a ningún lado.
¿Qué cambia exactamente Minificar?
Quita los comentarios y los espacios en blanco alrededor de llaves, puntos y coma, comas y combinadores (>, ~, +), y elimina el último punto y coma de cada bloque. Conserva el espacio en a b (el combinador de descendientes), en and (min-width: ...) y alrededor de + y - dentro de calc(), clamp(), min() y max(), donde quitarlo rompería el valor.
¿Toca las cadenas y url()?
No. Todo lo que está entre comillas, incluido texto que parece un comentario o una llave, y el contenido de url() se copian carácter por carácter.
¿Acorta colores o números?
No. Valores como #336699, 0.5em y 0px se dejan como están escritos. Esas reescrituras ahorran poco y tienen cierto riesgo, así que solo se quitan espacios en blanco y comentarios.
¿Cómo sé que el CSS minificado es seguro?
Después de cada ejecución, la página analiza tu original y el resultado con el propio analizador de CSS del navegador y compara lo que lee. Si hay diferencias, aparece un aviso sobre el resultado. Si coinciden, el navegador ve las mismas reglas.
¿Qué son los comentarios de licencia?
Los comentarios que empiezan con /*! los conservan por convención los minificadores, porque llevan texto de derechos de autor o de licencia que una licencia puede obligarte a mantener. Desactiva la opción para quitarlos también.