Com minifico CSS en línia sense instal·lar res?

Enganxa el teu CSS a CSS d'entrada, o deixa anar un fitxer .css, i fes clic a Minifica el CSS. S'eliminen els comentaris i els espais en blanc sobrers, i pots Copiar el resultat o Baixar-lo com a styles.min.css.

El minificador de CSS conserva els comentaris de llicència i els URI de dades intactes?

Sí. Els comentaris normals s'eliminen, però els comentaris /*! license */ es conserven. Les cadenes entre cometes, els valors url() i els URI de dades es tokenitzen per separat, de manera que les regles d'espais en blanc no els alteren.

Com torno a convertir CSS minificat en codi llegible?

Fes clic a Embelleix el CSS en lloc de Minifica el CSS. El codi es torna a sagnar amb dos espais per nivell, i els dos punts dels selectors com a:hover es distingeixen dels de les propietats. Baixa el desa com a styles.css.

Què vol dir el número de gzip al costat de la reducció?

És una estimació de la mida de la sortida després de la compressió gzip, mesurada amb l'API CompressionStream del navegador. Si el teu navegador no té aquesta API, no es mostra la mida amb gzip.

S'envia el meu CSS a un servidor quan el minifico?

No. La minificació la fa un tokenitzador de JavaScript que s'executa al navegador, sense cap biblioteca externa. No es puja res, així que el pots fer servir amb fulls d'estil privats.

És realment gratuït?

Sí. Totes les eines són gratuïtes, sense compte ni targeta de crèdit. El treball s'executa al teu dispositiu en lloc dels nostres servidors, i això és el que permet que sigui gratuït.

Sí. Funciona als navegadors mòbils actuals d'iOS i Android, sense instal·lar res.

🗜️

Minificador i embellidor de CSS de franc

Minifica CSS per reduir la mida del fitxer o embelleix CSS minificat per a la seva llegibilitat. Instantani, al teu navegador.

S'executa al teu navegadorSense registre, sense finestres emergentsNo cal iniciar sessióGratuït per sempre

Funciona sense connexió un cop carregat

o deixa anar un fitxer .css a sota

Deixa anar un fitxer .css aquí o fes clic per examinar

CSS · processat al teu dispositiu

o premeu Ctrl+V per enganxar des del porta-retalls

Navegar pels fitxers

CSS d'entrada

CSS de sortida

La sortida apareixerà aquí…

Usos habituals

Minifiqueu CSS per al desplegament en produccióReduïu la mida del fitxer CSS abans de desplegar a producció — carregaments de pàgina més ràpids i costos de banda ampla més baixos.
Embelliu CSS minificat per a depuracióFormateu CSS comprimit o minificat en codi llegible perquè pugueu inspeccionar i depurar els estils.
Minifiqueu CSS per a plantilles de correu electrònicCompacteu CSS per a plantilles de correu electrònic HTML on la mida del fitxer i la inflació d'estils integrats són importants.
Minifiqueu CSS per a temes de WordPressReduïu la mida dels CSS personalitzats del tema de WordPress per a millors puntuacions de PageSpeed.
Embelliu CSS per a la revisió del codiFormateu qualsevol fitxer CSS en codi net, sagnat i llegible, llestos per a revisió i col·laboració.

Com funciona

Aquesta eina utilitza un tokenitzador de CSS escrit a mà i sense dependències, construït completament en JavaScript — sense biblioteques externes, sense crides al servidor. El tokenitzador classifica cada caràcter com a codi, comentari, cadena entre cometes, o valor url() abans d'aplicar qualsevol transformació, cosa que evita que les regles d'espais en blanc corrompin el contingut de cadenes, URI de dades, o expressions calc().

1
Pas de tokenització
El CSS d'entrada s'escaneja caràcter per caràcter i es divideix en tokens tipats: segments de codi bruts, comentaris /* ... */, cadenes entre cometes (preservant seqüències d'escapament), i blocs url(...). Això assegura que les transformacions del pas següent només toquin la sintaxi CSS real — mai el contingut d'un literal de cadena o un URI de dades.
2
Minificació o embelliment
En mode minifica, els comentaris normals es descarten (els comentaris /*! llicència */ es conserven), les seqüències d'espais en blanc en tokens de codi es col·lapsen a un sol espai, i els espais en blanc adjacents a puntuació al voltant de { } : ; , > ~ s'eliminen. Els espais al voltant de + i - es deixen deliberadament intactes per no trencar les expressions calc(). En mode embelleix, el codi es minifica primer fins a una base neta, i després es torna a tokenitzar i a sagnar amb un seguiment de profunditat de dos espais i detecció de dos punts de declaració per distingir els dos punts propietat: valor dels dos punts de selector com a:hover.
3
Estimació de mida amb gzip
Després de produir la sortida, l'API nativa CompressionStream del navegador s'utilitza per comprimir el resultat amb gzip i mesurar el recompte de bytes resultant. Això dona una estimació realista de la mida de transferència que coincideix amb el que enviaria per la xarxa un servidor web amb compressió gzip.
4
Copia o descarrega
El CSS processat s'escriu al porta-retalls a través de l'API Clipboard, o es descarrega com a styles.min.css (mode minifica) o styles.css (mode embelleix) utilitzant un Blob amb tipus MIME text/css. El percentatge de reducció de mida es mostra en directe mentre escrius.

Eines relacionades

✨

Optimitzador i minificador SVG

Elimina metadades, comprimeix espais en blanc i arrodoneix decimals per reduir dràsticament la mida del fitxer SVG — reduccions típiques del 30-70%. La previsualització visual verifica que res es trenqui.

Prova-hoEls fitxers es queden en local

🎨

Embellidor de CSS

Formata CSS minimitzat amb una sagnia coherent, o minimitza’l. Ordenació alfabètica opcional de les propietats per obtenir diferències previsibles.

Prova-ho

📋

Formatador JSON

Formata, valida, minimitza i explora dades JSON. Vista d'arbre, ressaltat de sintaxi i còpia amb un sol clic.