Minificadores de código

CSS Minifier

Minifica CSS mediante un árbol sintáctico que comprende cadenas, calc() y propiedades personalizadas.

Pulsa Ctrl / ⌘ + Enter para ejecutar
Resultado de solo lectura

Minifica CSS mediante un árbol sintáctico que comprende cadenas, calc() y propiedades personalizadas.

Qué hace esta herramienta

CSS Minifier primero analiza CSS en un árbol de sintaxis y luego limpia, comprime y optimiza la estructura. No reemplaza peligrosamente las expresiones regulares de espacios en blanco de todo el archivo, por lo que puede distinguir entre selectores, declaraciones, cadenas y contextos de funciones.

  • /*! Los comentarios en el formulario de licencia se conservan.
  • Admite selectores modernos, consultas de medios, calc() y atributos personalizados.
  • Se muestran errores de análisis, los resultados de errores antiguos no se muestran.

Cómo utilizarla

  1. Pega el CSS.
  2. Haga clic en "Comprimir CSS".
  3. Ver los resultados de la compresión y la tasa de ahorro.
  4. Copie o descargue minified.css y realice pruebas de regresión visual.

Usos habituales

  • Optimice el tamaño de la hoja de estilo del entorno de producción.
  • Elimine los espacios en blanco sin sentido y los comentarios simples.
  • Consolide declaraciones y valores que sean seguros de optimizar.

Funciones de CSS Minifier

Comprima CSS utilizando árboles de sintaxis CSSO, comprendiendo cadenas, cálculos y contexto de propiedades personalizadas. Es adecuado para escenarios diarios de desarrollo, depuración, clasificación de datos y optimización de código. Los resultados del procesamiento se pueden ver, copiar o descargar directamente.

FAQ

¿Qué optimizaciones hará CSSO?

Limpia la redundancia, acorta los valores que pueden expresarse en formas más cortas y reestructura algunas declaraciones según reglas de seguridad.

¿Se conservarán los atributos personalizados?

Sí. El analizador procesa las propiedades personalizadas de CSS, aunque en proyectos complejos conviene probar la hoja de estilos final en los navegadores de destino.

¿Por qué mantener /*! comentarios?

Este tipo de comentario se utiliza a menudo para avisos de licencia o derechos de autor, y se selecciona la configuración actual para conservarla.

Volver a Herramientas para desarrolladores