Ir al contenido

Minificador CSS

Reduce el tamaño de tu hoja de estilos sin cambiar cómo funciona.

Opciones
Funciona en tu navegador: tu CSS no se sube.

Cómo se usa

  1. Pega tu CSS en el editor de entrada.
  2. Deja activada la opción Eliminar comentarios para borrar los comentarios. Con Conservar los comentarios /*! */ se mantienen los de licencia.
  3. Activa Acortar valores si quieres acortar los colores hexadecimales y los números.
  4. Revisa el porcentaje de ahorro junto al resultado.
  5. Copia el CSS minificado del editor de salida.

Ejemplos

Conservar la licencia de una hoja de estilos

Entrada
/*! MIT */
/* Estilos de la tienda */
.producto {
  color: #FFFFFF;
  padding: 16px;
}
Salida
/*! MIT */
.producto{color:#FFFFFF;padding:16px}

Acortar valores y conservar el punto y coma final

Entrada
.oferta {
  color: #AABBCC;
  margin: 0px 0.50em 10.0px;
  opacity: 0.80;
  flex: 1 1 0px;
}
Salida
.oferta{color:#abc;margin:0 .5em 10px;opacity:.8;flex:1 1 0px;}

Minificar estilos adaptables con calc()

Entrada
@media screen and ( min-width : 600px ) {
  .catalogo > .tarjeta {
    width: calc(100% - 2px);
    content: "Oferta del mes";
  }
}
Salida
@media screen and (min-width:600px){.catalogo>.tarjeta{width:calc(100% - 2px);content:"Oferta del mes"}}

Consejos

Preguntas frecuentes

¿Se sube mi CSS a un servidor?

El CSS se minifica en tu navegador y no se envía al servidor. La herramienta no guarda el CSS. Solo guarda tus opciones en localStorage.

¿El minificador combina reglas CSS repetidas?

No combina selectores duplicados ni elimina declaraciones sobrescritas. Conserva el orden de las reglas y las declaraciones repetidas, incluidas las usadas como alternativas de compatibilidad.

¿Qué tamaño de archivo puedo minificar?

Puedes subir archivos .css y .txt de hasta 10 MB. La minificación automática funciona hasta 200 KB de entrada. Por encima de ese tamaño, pulsa Minificar CSS o usa Ctrl+Enter o Cmd+Enter.

¿Puedo minificar SCSS o LESS?

La herramienta no compila SCSS ni LESS: primero conviértelos a CSS. Si encuentra un error de sintaxis, indica la línea y la columna y deja vacío el resultado.

¿Por qué el ahorro es del 0 %?

Si el resultado no es más pequeño que la entrada, aparece un aviso de que el CSS ya está minificado. El resultado sigue disponible aunque no haya reducción de tamaño.