Preskoči na glavno vsebino
LibraTool logoLibraTool

Ulepševalnik CSS — brezplačno

Oblikujte minimiziran CSS z dosledno zamikanjem ali ga minimizirajte. Izbirno abecedno razvrščanje lastnosti za predvidljive razlike.

Deluje brez povezave po nalaganju

Spustite datoteko sem ali kliknite za izbiro

CSS · obdelano na vaši napravi

ali pritisnite Ctrl+V za lepljenje iz odložišča

Brskanje po datotekah
Oblikovan CSS
Izhod se bo prikazal tukaj…

Pogosta področja uporabe

  • Odpravljanje napak CSS proizvodnjePregledajte minificirani CSS s proizvodnih spletnih mest v berljivi obliki, da poiščete in obrnete inženirja oblikovanja.
  • Uveljavitev konsistentnosti CSS ekipeZaženite CSS, ki ga je predlagala ekipa, s skladnim lepotanjem, tako da so razlike v vsebini, ne oblikovanju.
  • Oblikovanje CSS-ja s prefiksom prodajalcaCSS s prefiksom prodajalca (autoprefixer izhod) ima pogosto veliko -webkit-, -moz-, -ms- različice. Oblikovanje za pregled.
  • Učite se od Pro CSS-jaPreučiti CSS od znanih sistemov oblikovanja z oblikovanjem njihovega prevzamega izhoda.
  • Oblikovanje CSS za poročila o napakahPri oddaji poročil o napakah CSS je formatirani CSS veliko lažje brati in razumeti za pregledovalce.

Kako deluje

To orodje oblikuje CSS z uporabo ročno napisanega rekurzivnega razčlenjevalnika, vgrajenega neposredno v stran — brez knjižnice tretje osebe, brez klica strežnika. Razčlenjevalnik pregleda vaš CSS znak za znakom, pravilno obravnava nize v narekovajih, vrednosti url(), gnezdena at-pravila in komentarje, ki bi zmedli enostavnejše pristope na osnovi regularnih izrazov.

  1. 1
    Tokenizacija na ravni znakov
    Funkcija walkCss pregleduje surov vnos po en znak naenkrat, sledi stanju narekovajev in globini oklepajev, tako da podpičja ali zaviti oklepaji znotraj url(), niznih vrednosti ali komentarjev nikoli niso zamenjani za strukturna ločila.
  2. 2
    Ločevanje blokov in deklaracij
    Ko skener najde odpirajoč zaviti oklepaj na najvišji ravni, izvleče uvod (selektor ali ključno besedo at-pravila) in rekurzivno obdela telo bloka — ki lahko samo vsebuje gnezdena pravila (@media, @supports, nativno gnezdenje CSS), obravnavana na globlji ravni rekurzije.
  3. 3
    Razvrščanje lastnosti in zamikanje
    Deklaracije znotraj vsakega bloka se zberejo v niz, nato izbirno abecedno razvrstijo po imenu lastnosti, preden se zapišejo z izbrano širino zamika (2 ali 4 presledka). Način minifikacije v celoti preskoči presledke in odstrani komentarje.
  4. 4
    Takojšen izpis v brskalniku
    Rezultati se pojavijo med tipkanjem prek kljuke useMemo — nič se ne pošlje nikamor. Oblikovan ali minificiran CSS lahko kopirate v odložišče ali prenesete kot datoteko .css, panel pa prikazuje razliko v velikosti v primerjavi z izvirnikom.

Sorodna orodja

🌐

Ulepševalnik in minifikator HTML

Lepo natisnite ali minimizirajte HTML z ustreznim zamakanjem gnezdenja. Ohrani vsebino znotraj blokov <pre>, <script>, <style>.

Poskusite
🗄️

Oblikovalnik in ulepševalnik SQL

Lepo natisnite poizvedbe SQL z ustrezno zamakanjem, nastavljivo velikostjo ključnih besed in prelomi vrstic na glavnih klavzulah. Deluje s katerim koli narečjem SQL.

Poskusite
🗜️

Minifikator in ulepševalnik CSS

Minimizirajte CSS za zmanjšanje velikosti datoteke ali ulepšajte minificirani CSS za berljivost. Takojšnje, v vašem brskalniku.

Poskusite

Pogosto zastavljena vprašanja