Minificador de CSS
Pega una hoja de estilos para quitar comentarios, espacios en blanco y caracteres redundantes. La herramienta usa el optimizador csso cuando puede cargarlo y, si no, un cuidadoso minificador integrado, y siempre te indica qué motor se ha usado.
Última actualización:
Cómo usar Minificador de CSS
- Pega tu CSS en el cuadro de entrada o pulsa Subir .css (también puedes soltar un archivo).
- Elige el motor: Auto usa csso cuando puede cargarse; si no, se ejecuta el minificador integrado. La etiqueta bajo los botones siempre muestra qué motor se usó.
- Decide si reestructurar: con csso puedes dejar que fusione y reordene reglas para obtener la salida más pequeña, o desactivarlo para un resultado más seguro que conserva el orden.
- Pulsa Minificar CSS (la salida también se actualiza mientras escribes) y comprueba los bytes ahorrados.
- Copia o descarga la hoja de estilos minificada y enlázala en tu sitio.
Reglas de minificación de CSS con ejemplos
| Regla | Antes | Después |
|---|---|---|
Eliminar comentarios (se conserva /*!) | /* nav */ a{…} | a{…} |
Eliminar espacios en blanco alrededor de { } : ; , > + ~ | .a > b , .c { color : red ; } | .a>b,.c{color:red} |
| Quitar el último punto y coma | {margin:0;padding:0;} | {margin:0;padding:0} |
| Las longitudes cero no necesitan unidad | margin:0px 0em | margin:0 0 |
| Números más cortos | opacity:0.50; line-height:1.0 | opacity:.5;line-height:1 |
| Colores hex cortos | #FFFFFF, #2F6B4F, #aabbccdd | #fff, #2f6b4f, #abcd |
| Eliminar reglas vacías | .unused { } | (eliminada) |
| Conservar los espacios significativos | a :hover, calc(100% - 20px) | (sin cambios) |
Hay dos casos que el motor integrado deja intactos a propósito: las unidades de valores cero dentro de funciones como calc(0px + 1em), donde la unidad es obligatoria, y los ceros de tiempo o porcentaje como 0s y 0%, que no equivalen a un simple 0.
Motor integrado frente a csso
| Minificador integrado | csso 5.0.5 | |
|---|---|---|
| Funciona sin conexión | Sí | Necesita la CDN una vez por visita |
| Espacios en blanco, comentarios, puntos y coma | Sí | Sí |
| Unidades en ceros, números, colores hex | Sí | Sí, además de nombres de colores (p. ej. #f00 → red) |
| Fusionar selectores y declaraciones duplicados | No (conserva el orden de tus reglas) | Sí, con la reestructuración activada |
| Ahorro típico en CSS escrito a mano | 15–25% | 20–35% |
Ejemplo resuelto
Este conjunto de reglas de 78 bytes:
.card > h2 ,
.card + .note {
color : #2F6B4F ;
margin : 0px auto 0.0px ;
}
se convierte en .card>h2,.card+.note{color:#2f6b4f;margin:0 auto 0}: 51 bytes, un ahorro de 27 bytes o aproximadamente un 35% (27 ÷ 78 × 100). El % ahorrado se calcula como (bytes originales − bytes minificados) ÷ bytes originales × 100, usando tamaños en bytes UTF-8.
Preguntas frecuentes
¿Qué hace un minificador de CSS?
Elimina todo lo que el navegador no necesita para aplicar tus estilos, como comentarios, sangrías, saltos de línea, el último punto y coma de cada regla y las reglas vacías, y escribe los valores en su forma más corta. El resultado se muestra exactamente igual, pero se descarga más rápido.
¿Qué es csso y qué significa reestructurar?
csso (CSS Optimizer) es un minificador de código abierto que analiza el CSS en un árbol sintáctico. Con la reestructuración activada, también fusiona selectores y declaraciones duplicados y puede mover reglas, lo que da el archivo más pequeño. Desactiva la reestructuración si tu CSS depende de un orden de reglas muy concreto.
¿Por qué se usó el motor integrado en lugar de csso?
csso se carga desde una CDN pública la primera vez que minificas. Si no tienes conexión, un filtro de red bloquea la CDN o elegiste «Solo minificador integrado», la herramienta usa su propio minificador y lo indica en la etiqueta del motor.
¿Minificar CSS rompe algo?
No debería. Ambos motores mantienen intactos las cadenas, los valores url(), los espacios de calc() y los valores de las propiedades personalizadas, y el motor integrado nunca cambia los selectores ni el orden de las reglas. Prueba la página una vez después de minificar, sobre todo si la reestructuración está activada.
¿Por qué se conservan los comentarios /*! */?
Los comentarios que empiezan por /*! son la convención para avisos de licencia y copyright que deben permanecer en los archivos distribuidos. Desmarca «Conservar comentarios /*! important */» para eliminarlos también.
¿Cuánto más pequeño será mi CSS?
Las hojas de estilo escritas a mano suelen reducirse un 15–30%. Los archivos con muchos comentarios o sangrías largas se reducen más. Sirve el resultado con gzip o Brotli para lograr el mejor tamaño de transferencia.
¿Se envía mi CSS a un servidor?
No. La minificación se ejecuta por completo en tu navegador. Solo se descarga de la CDN la propia biblioteca csso; tu código nunca se sube.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.