Cum se folosește

Lipiți CSS în caseta de introducere, deschideți un fișier .css sau încercați exemplul.
Alegeți Formatare pentru cod lizibil sau Minificare pentru cel mai mic rezultat.
La formatare, alegeți 2 spații, 4 spații sau taburi.
Copiați rezultatul sau descărcați-l ca fișier .css. Dacă acoladele sau ghilimelele sunt dezechilibrate, eroarea indică linia și coloana.

Cum funcționează

Formatorul împarte mai întâi foaia de stil în tokenuri: șiruri între ghilimele simple sau duble, valori url(…), comentarii, acolade și puncte și virgulă. Deoarece șirurile și url() sunt tokenuri unice, un punct și virgulă dintr-un URI de date sau o acoladă din content: "{ }" nu încurcă niciodată structura, iar conținutul lor este copiat exact.

Beautify pune fiecare selector dintr-o listă de selectori pe linia lui, adaugă spații în jurul combinatorilor de copil, frate și adiacent (>, ~, +) și scrie fiecare declarație ca „proprietate: valoare;” pe linia ei. Blocurile din @media, @supports, @layer, @container și din imbricarea nativă CSS sunt indentate cu un nivel pentru fiecare adâncime. Un punct și virgulă lipsă după ultima declarație a unui bloc este adăugat. Comentariile sunt păstrate acolo unde sunt.

Minify elimină comentariile (cu excepția notelor de licență /*! … */), reduce spațiile albe, elimină spațiile din jurul acoladelor, al semnelor două puncte, al punctelor și virgulă, al virgulelor și al combinatorilor de selectori și elimină punctul și virgulă dinaintea fiecărei acolade de închidere. Spațiile care schimbă sensul sunt păstrate: combinatorul descendent din „.a .b”, spațiul din „a :focus” și spațiile din valori precum calc(100% - 2px). „! important” este normalizat la „!important”.

Instrumentul nu rescrie valorile: culorile, unitățile și zerourile rămân așa cum au fost scrise, iar regulile nu sunt comasate sau reordonate. Fișierele SCSS sau Less cu imbricare simplă funcționează de obicei, dar sintaxa proprie, cum ar fi comentariile // sau mixinurile, nu este înțeleasă.

Exemple

Citirea unui fișier de framework minificat

Lipește un fragment bootstrap.min.css pe un singur rând și alege Beautify cu 2 spații pentru a vedea fiecare regulă, interogările media și regulile lor imbricate pe linii separate, indentate.

Publicarea unei foi de stil scrise manual

Minifică o foaie de stil de 12 KB cu comentarii și indentare înainte de a o adăuga inline într-un șablon de e-mail sau în head-ul unei pagini. Rezumatul arată numărul de caractere înainte și după.

Găsirea unei acolade lipsă

O foaie de stil nu se mai aplică de la jumătate în jos. Formatorul raportează „Acest { nu este niciodată închis cu un } corespunzător” împreună cu linia regulii căreia îi lipsește acolada de închidere.

Întrebări frecvente

Este sigur să folosiți în producție CSS-ul minificat cu acest instrument?

Elimină doar comentariile și spațiile albe pe care CSS le ignoră, astfel încât regulile se comportă la fel. Nu face optimizările mai profunde ale instrumentelor de build, cum ar fi combinarea regulilor sau scurtarea culorilor, așa că rezultatul poate fi puțin mai mare decât al acestora.

De ce se păstrează un spațiu în „a :focus”?

Într-un selector, un spațiu este combinatorul de descendență. „a :focus” înseamnă un element focalizat în interiorul unui link, în timp ce „a:focus” înseamnă un link focalizat. Eliminarea acelui spațiu ar schimba elementele care se potrivesc.

Poate formata SCSS sau Less?

Regulile imbricate simple sunt formatate corect. Sintaxa specifică preprocesoarelor, cum ar fi comentariile //, mixinurile cu argumente sau blocurile @if, nu este recunoscută și poate fi formatată neobișnuit, așa că verificați rezultatul.

Sunt eliminate comentariile de licență la minificare?

Comentariile care încep cu /*! sunt păstrate, fiind convenția obișnuită pentru notițele de licență și de drepturi de autor. Toate celelalte comentarii sunt eliminate.

Confidențialitate

CSS-ul este procesat doar în browserul dvs. Nimic nu este încărcat, stocat sau inclus în statistici.