Formatador i minimitzador de CSS

Com formatar o minimitzar CSS

1. Enganxa el teu full d’estils, o fes clic a Obre un fitxer per carregar un fitxer .css (fins a 10 MB).
2. Tria la Sagnia (2 espais, 4 espais o un tabulador) i si vols una Línia en blanc entre regles.
3. Fes clic a Formata (embelleix) per obtenir codi llegible, o a Minimitza per obtenir la versió més petita.
4. Per minimitzar, deixa marcada Combina regles en minimitzar per obtenir el millor resultat, i Conserva els /*! comentaris */ per preservar les capçaleres de llicència.
5. Copia o baixa el resultat. La línia d’estat mostra la mida abans i després, en bytes, i el percentatge estalviat.

Si falta una clau, l’eina s’atura i t’indica a quina línia hi ha el { sense tancar o el } de sobra, en lloc de produir un resultat trencat.

Embellir: CSS llegible i coherent

Formata (embelleix) fa servir js-beautify, el formatador que hi ha a molts editors de codi. Posa cada declaració en una línia pròpia, sagna el contingut de cada regla i de les regles @ com @media i @supports, escriu cada selector d’un grup en una línia pròpia i afegeix un espai després dels dos punts de cada declaració. Les línies en blanc existents es conserven (com a màxim una de seguida), de manera que les seccions lògiques del fitxer continuen sent visibles. El formatador no canvia mai els valors, l’ordre de les regles ni el significat dels selectors: només canvia els espais en blanc.

Això és útil per llegir el CSS minimitzat d’un lloc web, per revisar un full d’estils generat per una eina o per netejar un fitxer editat per diverses persones amb costums diferents.

Minimitzar: CSS més petit amb csso

Minimitza fa servir csso (CSS Optimizer), un minimitzador estructural. A més d’eliminar els espais en blanc i els comentaris, reescriu el full d’estils en una forma equivalent i més curta:

• els colors s’abreugen (#ff0000 es converteix en red, #ffffff en #fff);
• les unitats i els zeros se simplifiquen (0px es converteix en 0, 0.5em en .5em);
• les declaracions duplicades s’eliminen i les propietats abreviades es combinen quan és segur;
• amb Combina regles en minimitzar, les regles amb declaracions idèntiques s’agrupen (a{color:red} b{color:red} es converteix en a,b{color:red}) i les declaracions sobreescrites s’eliminen.

La reestructuració és segura per als fulls d’estils normals, però mou declaracions. Si el teu CSS depèn d’un ordre de cascada molt concret, per exemple per a trucs de navegador, desmarca l’opció: csso només comprimirà cada regla al seu lloc.

Els comentaris s’eliminen, excepte els comentaris «importants» que comencen per /*!, que se solen usar per a les llicències. Desmarca Conserva els /*! comentaris */ per eliminar-los també.

Mida abans i després

La línia d’estat compara la mida de l’entrada i la del resultat en bytes UTF-8. El codi embellit sol ser més gran que l’original; el codi minimitzat sol estalviar entre un 20 i un 50 % en CSS escrit a mà. Recorda que els servidors també comprimeixen els fitxers amb gzip o Brotli, de manera que l’estalvi en la transferència és menor que la xifra en brut, però la minimització continua reduint el temps d’anàlisi i la mida dels fitxers a la memòria cau.