Minificador de CSS

El Minificador de CSS es una herramienta gratuita que elimina los caracteres innecesarios del CSS y devuelve la hoja de estilos minificada, junto con el número de caracteres antes y después del proceso.

¿Qué hace la minificación de CSS?

La minificación de CSS reduce el número de caracteres de una hoja de estilos al eliminar el formato que los navegadores no necesitan. Por lo general, esto incluye la sangría, los saltos de línea, los comentarios y los espacios opcionales alrededor de los signos de puntuación.

El navegador sigue recibiendo las reglas CSS, los selectores y los valores de las declaraciones. El resultado visual previsto debería permanecer sin cambios, mientras que el archivo transferido al navegador es más pequeño. La ventaja práctica de minificar una hoja de estilos CSS depende del archivo original, la compresión HTTP y la caché del navegador. Si la hoja de estilos ya está bien comprimida, la reducción de bytes transferidos puede ser modesta.

La minificación resulta útil antes de una implementación, al revisar CSS de terceros demasiado grande o al comprobar cuánto espacio ocupa el formato utilizado durante el desarrollo. No es lo mismo que una optimización que elimina selectores sin usar, combina reglas equivalentes o reescribe declaraciones. Esta herramienta no pretende realizar esas operaciones más amplias.

¿Cómo se usa el Minificador de CSS?

Pega una hoja de estilos en el campo CSS y ejecuta la herramienta. Después, copia el resultado de CSS minificado en el flujo de compilación o implementación correspondiente. Conserva el archivo fuente legible en lugar de sustituirlo de forma permanente por la copia minificada.

1. Empieza con el CSS fuente que utiliza tu sitio o aplicación.
2. Comprueba que se interpreta correctamente antes de minificarlo.
3. Pégalo en CSS y ejecuta la herramienta.
4. Compara Caracteres del CSS con Caracteres del CSS minificado.
5. Prueba el resultado en una página de preproducción, incluidos los estados de diseño adaptable, los estilos de impresión y los componentes interactivos.

La minificación del CSS se realiza en el servidor. El CSS que envías viaja hasta el servidor mediante HTTPS y no se almacena. Si la hoja de estilos contiene URLs confidenciales, nombres de host internos u otro material sensible, valora si enviarla a una herramienta del lado del servidor cumple la política de tratamiento de datos de tu organización.

¿Cómo se interpreta el resultado?

El resultado incluye el CSS transformado y dos recuentos de caracteres, por lo que puedes revisar la salida y comprobar directamente la reducción. Caracteres del CSS indica la longitud del texto enviado, mientras que Caracteres del CSS minificado muestra la longitud después de minificarlo.

Estos recuentos se calculan con una función de longitud compatible con caracteres multibyte. No deben considerarse una predicción exacta del tamaño transferido por la red. Los caracteres UTF-8 pueden ocupar más de un byte, y la compresión Brotli o gzip puede modificar considerablemente el tamaño enviado mediante HTTP.

Esta herramienta no muestra ningún campo independiente de validación o errores. Por tanto, no debe utilizarse como validador de CSS. Los problemas habituales, como llaves sin pareja, dos puntos ausentes, cadenas sin terminar, comentarios mal formados o anidación no válida, deben comprobarse con las herramientas para desarrolladores del navegador, un linter o un validador que tenga en cuenta los estándares. Un CSS no válido puede generar un resultado aparentemente compacto que no se comporte como esperas.

Ejemplos sencillos de minificación de CSS

Una versión minificada convencional elimina el formato, pero conserva la propia regla.

CSS

p { color: red; }

CSS minificado

p{color:red}

En este ejemplo, la entrada legible contiene 17 caracteres y la versión compacta contiene 12. Los espacios y los signos de puntuación incluidos dentro de cadenas entre comillas deben seguir formando parte del valor.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

CSS minificado

.notice,.warning{color:#c00;margin:0 1rem}

Eliminar todos los espacios sin tener en cuenta la sintaxis no es seguro. Un espacio en blanco puede representar un combinador de descendientes, y los operadores aritméticos de funciones como calc() tienen requisitos de espaciado. Las cadenas, las URLs de datos, los identificadores con secuencias de escape y los valores de propiedades personalizadas también deben procesarse teniendo en cuenta la sintaxis.

Las cadenas pueden incluir caracteres acentuados y de alfabetos no latinos. También pueden aparecer en selectores, siempre que cumplan las reglas de los identificadores CSS. Los números, los puntos decimales, los porcentajes y las unidades forman parte de la sintaxis, no son texto decorativo, por lo que no pueden acortarse sin comprender la declaración. Una hoja de estilos vacía no contiene CSS que minificar. Para hojas de estilos muy grandes, un minificador integrado en el proceso de compilación suele ser más fácil de reutilizar y auditar que copiar texto mediante un formulario en línea.

¿Cuándo no merece la pena minificar CSS?

Por lo general, no merece la pena repetir la minificación si un archivo ya está minificado o se ha generado como un recurso compacto para producción. Una segunda pasada de minificación de CSS puede ahorrar poco o nada, además de añadir otra transformación al proceso de publicación.

• No vuelvas a dar formato y minificar CSS que solo leerá un navegador o sistema de compilación.
• No utilices la minificación como sustituto de eliminar reglas de frameworks sin usar o declaraciones duplicadas.
• No esperes que la reducción de caracteres permita detectar solicitudes que bloquean el renderizado, problemas de caché o una carga lenta de fuentes.
• No descartes el código fuente con formato, sobre todo cuando tengas que depurar la especificidad, las capas de cascada o las consultas de medios.

Si el CSS se agrupa automáticamente, utiliza el minificador dentro de ese flujo para que todas las versiones se publiquen con la misma configuración. Si implementas manualmente recursos relacionados, el Minificador de HTML y el Minificador de JS pueden aplicar la operación equivalente a esos tipos de archivo.

Preguntas frecuentes

¿Minificar CSS cambia la especificidad de los selectores?

Una minificación correcta no cambia la especificidad de los selectores, porque estos deben conservar los mismos componentes y el mismo orden. Aun así, compara con cuidado los selectores complejos si el código fuente utiliza secuencias de escape, pseudoclases recientes o sintaxis generada que un minificador antiguo podría no entender.

¿Se pueden minificar las propiedades personalizadas de CSS?

Sí, las propiedades personalizadas pueden incluirse, pero sus valores podrían conservar tokens y espacios para sustituirlos posteriormente mediante var(). Prueba las declaraciones que contengan cálculos, valores alternativos o cadenas incrustadas en los navegadores compatibles con tu proyecto, en lugar de asumir que todos los espacios que parecen prescindibles son opcionales.

¿La herramienta crea un mapa de código fuente?

No aparece ningún mapa de código fuente entre los resultados. Si para depurar en producción necesitas relacionar el CSS compacto con Sass, Less u otro código fuente, genera el archivo minificado y su mapa de código fuente con el compilador o empaquetador que conozca la estructura del archivo original.

¿Se conservan los comentarios de licencia en el resultado?

No des por hecho que se conservarán los comentarios CSS. Si la licencia de una dependencia exige incluir un aviso junto con el código distribuido, guarda ese aviso por separado o revisa el resultado generado antes de publicarlo.

¿La minificación puede arreglar un CSS que no funciona?

No. La minificación elimina caracteres innecesarios, pero no corrige selectores no válidos, propiedades incompatibles, recursos ausentes ni una cascada incorrecta. Resuelve primero en el código fuente las advertencias de análisis y las regresiones visuales.

Comprobaciones antes de la implementación

Guarda el resultado minificado como un recurso de producción independiente, verifica que las URLs y el contenido entre comillas estén intactos y cárgalo en una página de preproducción con la consola del navegador abierta. Compara páginas representativas con anchos de ventana estrechos y amplios. Después, confirma que el servidor aplica el tipo de contenido, la política de caché y la compresión HTTP previstos.