Salt la conținutul principal
LibraTool logoLibraTool

Înfrumusețător CSS — gratuit

Formatează CSS minimizat cu indentare consecventă sau minimizează-l. Sortare alfabetică opțională a proprietăților pentru diferențe previzibile.

Funcționează offline odată încărcat

Trage un fișier aici sau fă clic pentru a naviga

CSS · procesat pe dispozitivul tău

sau apăsați Ctrl+V pentru a lipi din clipboard

Răsfoiește fișierele
CSS formatat
Ieșirea va apărea aici…

Utilizări frecvente

  • CSS depanare producțieVizualizare CSS minificat din site-uri producție într-un format lizibil pentru a găsi și inginerie inversă styling.
  • Aplicare stil CSS echipăExecutare CSS trimis de echipă printr-un beautifier consistent pentru ca diffs să se ocupe de conținut, nu formatare.
  • Formatare CSS prefixat vânzătorCSS prefixat vânzător (ieșire autoprefixer) adesea are mult -webkit-, -moz-, -ms- variante. Formatare pentru inspecție.
  • Învață de la Pro CSSStudiu CSS din sisteme de design celebre prin formatarea ieșirii compilate a acestora.
  • Formatare CSS pentru rapoarte bugCând trimiteți bug-uri CSS, CSS formatat este mult mai ușor pentru revieweri să citească și să înțeleagă.

Cum funcționează

Această unealtă formatează CSS folosind un parser recursiv scris manual construit direct în pagină — fără bibliotecă terță parte, fără apel de server. Parserul parcurge CSS-ul tău caracter cu caracter, gestionând corect șirurile citate, valorile url(), regulile at imbricate, și comentariile care ar încurca abordările mai simple bazate pe expresii regulate.

  1. 1
    Tokenizare la nivel de caracter
    Funcția walkCss scanează intrarea brută un caracter la un moment dat, urmărind starea ghilimelelor și adâncimea parantezelor astfel încât punctele și virgulele sau acoladele din interiorul url(), valorile șir, sau comentariile nu sunt niciodată confundate cu delimitatori structurali.
  2. 2
    Separarea blocurilor și declarațiilor
    Când scanner-ul găsește o acoladă de deschidere la nivel superior, extrage preludiul (selectorul sau cuvântul cheie at-rule) și procesează recursiv corpul blocului — care el însuși poate conține reguli imbricate (@media, @supports, imbricare CSS nativă) gestionate la o adâncime de recursie mai mare.
  3. 3
    Sortarea proprietăților și indentare
    Declarațiile din fiecare bloc sunt colectate într-o serie, apoi opțional sortate alfabetic după numele proprietății înainte de a fi scrise cu lățimea de indentare aleasă (2 sau 4 spații). Modul minify sare peste spațiile albe complet și elimină comentariile.
  4. 4
    Ieșire instantă în browser
    Rezultatele apar pe măsură ce scrii printr-un hook useMemo — nimic nu este trimis nicăieri. CSS-ul formatat sau minificat poate fi copiat în clipboard sau descărcat ca fișier .css, iar panoul arată diferența de dimensiune comparativ cu originalul.

Instrumente similare

🌐

Înfrumusețător & Minificator HTML

Formatează frumos sau minifică HTML cu indentare corespunzătoare a imbricării. Păstrează conținutul din blocurile <pre>, <script>, <style>.

Încearcă
🗄️

Formatator & Înfrumusețător SQL

Formatează frumos interogările SQL cu indentare corespunzătoare, majuscule configurabile pentru cuvinte cheie și întreruperi de linie la clauze principale. Funcționează cu orice dialect SQL.

Încearcă
🗜️

Minificator & Înfrumusețător CSS

Minifică CSS pentru a reduce dimensiunea fișierului sau înfrumusețează CSS-ul minificat pentru lizibilitate. Instant, în browser.

Încearcă

Întrebări frecvente