Minificador y embellecedor de CSS gratis
Minifica CSS para reducir el tamaño del archivo o embellece CSS minificado para facilitar la lectura. Instantáneo, en tu navegador.
Suelta aquí un archivo .css o haz clic para elegirlo
CSS · procesado en tu dispositivo
o pulsa Ctrl+V para pegar desde el portapapeles
Usos habituales
- Minificar CSS para despliegue en producciónReduce el tamaño del archivo CSS antes de desplegar en producción — cargas de página más rápidas y menores costos de ancho de banda.
- Embellecer CSS minificado para depuraciónFormatea CSS comprimido o minificado en código legible para que puedas inspeccionar y depurar estilos.
- Minificar CSS para plantillas de correoCompacta CSS para plantillas de correo HTML donde importan el tamaño del archivo y la hinchazón de estilos en línea.
- Minificar CSS para temas de WordPressReduce el tamaño de hojas de estilo de temas de WordPress personalizados para mejores puntuaciones de PageSpeed.
- Embellecer CSS para revisión de códigoFormatea cualquier archivo CSS en código limpio, indentado y legible listo para revisión y colaboración.
Cómo funciona
Esta herramienta usa un tokenizador CSS escrito a mano y sin dependencias, construido enteramente en JavaScript: sin bibliotecas externas, sin llamadas al servidor. El tokenizador clasifica cada carácter como código, comentario, cadena entre comillas o valor url() antes de aplicar cualquier transformación, lo que evita que las reglas de espacio en blanco corrompan el contenido de cadenas, URI de datos, o expresiones calc().
- 1Pasada de tokenizaciónEl CSS de entrada se escanea carácter por carácter y se divide en tokens tipados: segmentos de código en bruto, comentarios /* ... */, cadenas entre comillas (preservando secuencias de escape), y bloques url(...). Esto garantiza que las transformaciones del siguiente paso solo toquen la sintaxis CSS real, nunca el contenido de un literal de cadena o una URI de datos.
- 2Minificación o embellecimientoEn modo minificar, se eliminan los comentarios normales (los comentarios /*! license */ se conservan), las series de espacios en blanco en los tokens de código se colapsan a espacios simples, y se elimina el espacio en blanco adyacente a la puntuación alrededor de { } : ; , > ~. Los espacios alrededor de + y - se dejan intencionalmente intactos para no romper las expresiones calc(). En modo embellecer, el código se minifica primero a una base limpia, y luego se vuelve a tokenizar y a sangrar con seguimiento de profundidad de dos espacios y detección de dos puntos de declaración para distinguir los dos puntos de propiedad: valor de los dos puntos de selector como a:hover.
- 3Estimación del tamaño gzipDespués de producir la salida, se usa la API nativa CompressionStream del navegador para comprimir el resultado con gzip y medir el recuento de bytes resultante. Esto da una estimación realista del tamaño de transferencia, igualando lo que enviaría por red un servidor web con compresión gzip.
- 4Copiar o descargarEl CSS procesado se escribe en el portapapeles mediante la Clipboard API, o se descarga como styles.min.css (modo minificar) o styles.css (modo embellecer) usando un Blob con tipo MIME text/css. El porcentaje de reducción de tamaño se muestra en vivo mientras escribes.
Herramientas relacionadas
Optimizador y minificador de SVG
Elimine metadatos, contraiga espacios en blanco y redondee decimales para reducir drásticamente el tamaño del archivo SVG: reducciones típicas del 30 al 70 %. La vista previa visual verifica que nada se rompa.
Embellecedor de CSS
Da formato legible al CSS minificado con una sangría uniforme, o minifícalo. Ordenación alfabética opcional de las propiedades para obtener diferencias predecibles.
Formateador JSON
Formatea, valida, minifica y explora datos JSON. Vista de árbol, resaltado de sintaxis y copia con un clic.