Como minimizo CSS en liña sen instalar nada?

Pega o teu CSS en Input CSS, ou solta un ficheiro .css, e preme Minify CSS. Elimínanse os comentarios e os espazos sobrantes, e podes usar Copy co resultado ou Download como styles.min.css.

O minimizador de CSS mantén intactos os comentarios de licenza e os data URI?

Si. Os comentarios normais elimínanse, pero os comentarios /*! license */ consérvanse. As cadeas entre aspas, os valores url() e os data URI tokenízanse por separado, así que as regras sobre espazos non os alteran.

Como volvo converter CSS minimizado en código lexible?

Preme Beautify CSS en vez de Minify CSS. O código sangra de novo con dous espazos por nivel, e os dous puntos dos selectores como a:hover distínguense dos das propiedades. Download gárdao como styles.css.

Que significa o número gzipped xunto á redución?

É unha estimación do tamaño da saída despois da compresión gzip, medida coa API CompressionStream do navegador. Se o teu navegador non ten esa API, non se amosa o tamaño gzipped.

O meu CSS envíase a un servidor cando o minimizo?

Non. A minimización faina un tokenizador de JavaScript que se executa no teu navegador, sen biblioteca externa. Non se sube nada, así que podes usalo con follas de estilo privadas.

Si. Todas as ferramentas son de uso gratuíto, sen conta nin tarxeta de crédito. O traballo execútase no teu dispositivo en lugar de nos nosos servidores, o que permite que sexa gratuíto.

Si. Funciona nos navegadores móbiles actuais en iOS e Android, sen instalar nada.

🗜️

Minificador e embellecedor de CSS de balde

Minifica CSS para reducir o tamaño do ficheiro ou embellece CSS minificado para a súa lexibilidade. Instantáneo, no teu navegador.

Execútase no teu navegadorSen rexistro, sen ventás emerxentesNon é necesario iniciar sesiónDe balde para sempre

Funciona sen conexión unha vez cargado

ou solta un ficheiro .css abaixo

Solta aquí un ficheiro .css ou fai clic para buscalo

CSS · procesado no teu dispositivo

ou preme Ctrl+V para pegar desde o portapapeis

Explorar ficheiros

CSS de entrada

CSS de saída

A saída aparecerá aquí…

Usos habituais

Minificar CSS para Implementación de ProduciónReducir o tamaño do ficheiro CSS antes de implementar en produción — cargas de páxina máis rápidas e custos de ancho de banda máis baixos.
Embelesar CSS Minificado para DepuraciónFormatar CSS comprimido ou minificado en código lexible para que poida inspeccionar e depurar estilos.
Minificar CSS para Modelos de Correo ElectrónicoCompactar CSS para modelos de correo electrónico HTML onde o tamaño do ficheiro e a inchazón de estilos en liña importan.
Minificar CSS para Temas WordPressReducir o tamaño das follas de estilos de temas WordPress personalizados para obter mellores puntuacións de PageSpeed.
Embelesar CSS para Revisión de CódigoFormatar calquera ficheiro CSS en código limpo, sangrado e lexible listo para revisión e colaboración.

Como funciona

Esta ferramenta usa un tokenizador de CSS escrito a man e sen dependencias, construído enteiramente en JavaScript — sen bibliotecas externas, sen chamadas a servidor. O tokenizador clasifica cada carácter como código, comentario, cadea entre comiñas ou valor url() antes de aplicar calquera transformación, o que evita que as regras de espazo en branco corrompan o contido de cadeas, URIs de datos ou expresións calc().

1
Pasada de tokenización
O CSS de entrada escanéase carácter a carácter e divídese en tokens tipados: segmentos de código en bruto, comentarios /* ... */, cadeas entre comiñas (preservando as secuencias de escape) e bloques url(...). Isto garante que as transformacións do seguinte paso só toquen a sintaxe CSS real — nunca o contido dun literal de cadea ou dun URI de datos.
2
Minificación ou embelecemento
No modo minificar, elimínanse os comentarios normais (os comentarios /*! license */ consérvanse), as secuencias de espazo en branco nos tokens de código redúcense a espazos simples, e o espazo en branco adxacente á puntuación arredor de { } : ; , > ~ elimínase. Os espazos arredor de + e - déixanse intencionadamente para non romper as expresións calc(). No modo embelecer, o código primeiro minifícase a unha base limpa, e despois retokeniza e resangraise cun rastrexo de profundidade de dous espazos e detección de dous puntos de declaración para distinguir os dous puntos de propiedade: valor dos dous puntos de selector como a:hover.
3
Estimación do tamaño gzip
Despois de producir a saída, úsase a API nativa CompressionStream do navegador para comprimir o resultado con gzip e medir o reconto de bytes resultante. Isto ofrece unha estimación realista do tamaño de transferencia que coincide co que enviaría un servidor web con compresión gzip a través da rede.
4
Copiar ou descargar
O CSS procesado escríbese ao portapapeis mediante a API Clipboard, ou descárgase como styles.min.css (modo minificar) ou styles.css (modo embelecer) usando un Blob co tipo MIME text/css. A porcentaxe de redución de tamaño móstrase en directo mentres escribes.

Ferramentas relacionadas

✨

Optimizador e minificador de SVG

Elimina metadatos, colapsa espazos en branco e redondea decimais para reducir drásticamente o tamaño do ficheiro SVG — reducións típicas do 30-70%. A previsualización visual verifica que nada se rompe.

PróbaoOs ficheiros permanecen locais

🎨

Embellecedor de CSS

Formata CSS minimizado cunha sangría coherente, ou minimízao. Ordenación alfabética opcional das propiedades para obter diferenzas previsibles.

Próbao

📋

Formateador JSON

Formatear, validar, minimizar e explorar datos JSON. Vista en árbore, resaltado de sintaxe e copia cun só clic.