como funciona
El minificador elimina /* comentarios */, contrae espacios en blanco en un solo espacio, elimina espacios alrededor de la puntuación estructural como { } : ; , >, y quita el último punto y coma antes de una llave de cierre. No cambia el nombre de los selectores, no fusiona reglas ni reordena la cascada.
- Un minificador conservador: no elimina reglas no utilizadas ni reescribe valores. Siempre vuelva a probar la hoja de estilo después.
Por qué es importante
Cada kilobyte de CSS que bloquea el renderizado retrasa la primera pintura. La minificación es la ganancia más barata disponible después de eliminar las reglas no utilizadas, y se puede confiar en una herramienta que solo toca caracteres demostrablemente redundantes en un paso de construcción sin redefinir su hoja de estilo.
Un ejemplo trabajado
Una regla escrita como .card { color: red; relleno: 10px 20px; } se convierte en .card{color:red;padding:10px 20px}, lo que ahorra unas pocas docenas de bytes por regla y mucho más en una hoja de estilo real.
Errores comunes
- Eliminando espacios alrededor de + y - dentro de calc(), que requiere la especificación.
- Minimizar SCSS o LESS en lugar de CSS compilado.
- Saltarse la verificación visual después de minimizar.
Consejos prácticos
Mantenga la fuente no minificada en el control de versiones y minimícela como resultado de la compilación. Si utiliza propiedades personalizadas con alternativas, compare los estilos calculados en DevTools antes y después: la cascada se conserva, pero un único espacio perdido puede cambiar la forma en que se analiza un valor.
como usarlo
- Abra la herramienta. Todo se ejecuta en la pestaña de su navegador.
- Pegue o escriba su entrada, luego elija la acción que necesita.
- Comprueba el resultado y cópialo con un clic.
Preguntas comunes
¿Elimina las reglas CSS no utilizadas?
No. Elimina comentarios y espacios en blanco redundantes. La detección de reglas no utilizadas necesita una auditoría de página completa.
¿Por qué calc() dejó de funcionar después de minimizar?
La especificación CSS requiere espacios alrededor de + y - dentro de calc(). Vuelva a probar la hoja de estilo después de minimizarla.
¿Puede minimizar SCSS o MENOS?
No. Espera CSS simple; Los preprocesadores tienen sus propios pasos de construcción.
¿Esta herramienta es realmente gratuita?
Sí. No hay cuenta, muro de pago ni límite de uso. La aplicación Tools está financiada por aumenso, el estudio detrás de ella.
¿Se ha subido algo de lo que ingreso?
No. La herramienta se ejecuta en la pestaña de su navegador; lo que usted ingresa nunca se nos envía ni se almacena.