Preskoči na glavni sadržaj
LibraTool logoLibraTool

CSS uljepšivač — besplatno

Formatirajte minificirani CSS s dosljednim uvlačenjem ili ga minificirajte. Izborno abecedno sortiranje svojstava za predvidljive razlike.

Radi offline nakon učitavanja

Ispustite datoteku ovdje ili kliknite za odabir

CSS · obrađuje se na vašem uređaju

ili pritisnite Ctrl+V za lijepljenje iz međuspremnika

Pregledaj datoteke
Uljepšani CSS
Izlaz će se prikazati ovdje…

Uobičajene namjene

  • Otklonite greške CSS-a proizvodnjePregledajte smanjeni CSS sa proizvodnih web-sajtova u čitljivom formatu kako biste pronašli i obrnuli inženjer stilova.
  • Nametnite konzistentnost CSS timaPokrenite CSS predložen od tima kroz konzistentan ljepotnik kako bi razlike bile o sadržaju, ne o formatiranju.
  • Format CSS-a s prefiksom dobavljačaCSS s prefiksom dobavljača (Autoprefixer izlaz) često ima mnogo -webkit-, -moz-, -ms- varijanti. Formazirajte ga kako biste provjerili.
  • Učite od Pro CSS-aProučite CSS od poznatih sustava dizajna formatiranjem njihovog kompajliranog izlaza.
  • Format CSS-a za izvještaje o greškamaPri podnošenju CSS grešaka, formatiran CSS je puno lakši čitati i razumijevati za recenzente.

Kako funkcionira

Ovaj alat formatira CSS koristeći ručno napisani rekurzivni parser ugrađen izravno u stranicu — bez biblioteke treće strane, bez poziva poslužitelju. Parser prolazi kroz vaš CSS znak po znak, ispravno obrađujući citirane nizove, url() vrijednosti, ugniježđena at-pravila i komentare koji bi zbunili jednostavnije pristupe temeljene na regexu.

  1. 1
    Tokenizacija na razini znakova
    Funkcija walkCss skenira sirovi unos jedan znak po jedan, prateći stanje citata i dubinu zagrada tako da točke-zarez ili vitičaste zagrade unutar url(), vrijednosti niza ili komentara nikad ne budu pogrešno protumačeni kao strukturni razdjelnici.
  2. 2
    Odvajanje bloka i deklaracije
    Kada skener pronađe vitičastu zagradu otvaranja na vrhovnoj razini, izvlači predtekst (selektor ili ključnu riječ at-pravila) i rekurzivno obrađuje tijelo bloka — koje samo može sadržavati ugniježđena pravila (@media, @supports, izvorno CSS ugniježđivanje) obrađena na dubljoj razini rekurzije.
  3. 3
    Sortiranje svojstava i uvlačenje
    Deklaracije unutar svakog bloka prikupljaju se u niz, zatim se opcionalno abecedno sortiraju po nazivu svojstva prije zapisivanja s odabranom širinom uvlačenja (2 ili 4 razmaka). Način minify potpuno preskače bjeline i uklanja komentare.
  4. 4
    Trenutačan izlaz u pregledniku
    Rezultati se pojavljuju dok tipkate putem useMemo kuke — ništa se nikamo ne šalje. Formatirani ili minificirani CSS može se kopirati u međuspremnik ili preuzeti kao .css datoteka, a panel prikazuje razliku veličine u odnosu na izvornik.

Srodni alati

🌐

HTML uljepšivač i minifikator

Lijepo ispišite ili minificirajte HTML s pravilnim uvlačenjem ugniježđivanja. Čuva sadržaj unutar <pre>, <script>, <style> blokova.

Isprobajte
🗄️

SQL formater i uljepšivač

Lijepo ispišite SQL upite s odgovarajućim uvlačenjem, konfigurabilnim slučajem ključnih riječi i prijelomima redaka na glavnim klauzulama. Radi s bilo kojim SQL dijalektom.

Isprobajte
🗜️

CSS minifikator i uljepšivač

Minificirajte CSS za smanjenje veličine datoteke ili uljepšajte minirani CSS radi čitljivosti. Trenutno, u vašem pregledniku.

Isprobajte

Često postavljana pitanja