Pređi na glavni sadržaj
LibraTool logoLibraTool

CSS ulepšavač — besplatno

Formatirajte minifikovani CSS sa doslednim uvlačenjem ili ga minifikujte. Opciono abecedno sortiranje svojstava za predvidljive razlike.

Radi van mreže kada se učita

Prevucite datoteku ovde ili kliknite da izaberete

CSS · obrađeno na vašem uređaju

ili pritisnite Ctrl+V da nalepite iz privremene memorije

Pretraži fajlove
Ulepšani CSS
Izlaz će se pojaviti ovde…

Uobičajene upotrebe

  • Otklanjanje grešaka CSS proizvodnogPregledajte umanjen CSS sa veb-sajtova proizvodnje u čitljivom formatu da pronađe i obrnuto-računa stil.
  • Naspram tima CSS stilaPokrenite CSS vezanog tima kroz konzistentan lepišaj kako su razlike o sadržaju, ne formatiranje.
  • Formatiranje prefiksanog CSS dobavljačaPrefiksiran CSS dobavljača (autoprefixer izlaz) često ima mnogo -webkit-, -moz-, -ms- varijanti. Formatirajte to inspektirajte.
  • Učite od Pro CSSProučite CSS od poznatih sistema dizajna formatiranjem njihovog okupljenog izlaza.
  • Formatiranje CSS za izveštaje o greškamaPri prijavi CSS grešaka, formatiran CSS je mnogo lakše čitati i razumeti za recenzente.

Kako funkcioniše

Ova alatka formatira CSS koristeći ručno napisan rekurzivni parser ugrađen direktno u stranicu — bez biblioteke trećih strana, bez poziva serveru. Parser prolazi kroz vaš CSS znak po znak, ispravno rukujući nizovima pod navodnicima, url() vrednostima, ugnežđenim at-pravilima, i komentarima koji bi zbunili jednostavnije pristupe zasnovane na regularnim izrazima.

  1. 1
    Tokenizacija na nivou znakova
    Funkcija walkCss skenira sirovi unos jedan znak u trenutku, prateći stanje navodnika i dubinu zagrada tako da tačke-zarezi ili vitičaste zagrade unutar url(), vrednosti niza, ili komentara nikada ne budu pogrešno protumačeni kao strukturni razdvajači.
  2. 2
    Razdvajanje bloka i deklaracije
    Kada skener pronađe otvarajuću vitičastu zagradu na najvišem nivou, izdvaja uvod (selektor ili ključnu reč at-pravila) i rekurzivno obrađuje telo bloka — koje samo može sadržati ugnežđena pravila (@media, @supports, prirodno ugnežđivanje CSS-a) obrađena na dubljoj rekurzivnoj dubini.
  3. 3
    Sortiranje svojstava i uvlačenje
    Deklaracije unutar svakog bloka se prikupljaju u niz, zatim opciono sortiraju po abecedi po nazivu svojstva pre nego što se ispišu sa izabranom širinom uvlačenja (2 ili 4 razmaka). Režim minifikacije potpuno preskače razmake i uklanja komentare.
  4. 4
    Trenutni izlaz u pregledaču
    Rezultati se pojavljuju dok kucate preko useMemo hook-a — ništa se nigde ne šalje. Formatiran ili minifikovan CSS se može kopirati u privremenu memoriju ili preuzeti kao .css fajl, a panel prikazuje razliku u veličini u odnosu na original.

Slične alatke

Česta pitanja