Pāriet uz galveno saturu
LibraTool logoLibraTool

CSS pārveidotājs bez maksas

Noformējiet minimizētu CSS ar vienmērīgu atkāpju lietojumu vai minimizējiet to. Pēc izvēles īpašību kārtošana alfabēta secībā paredzamām atšķirībām.

Darbojas bezsaistē pēc ielādes

Nometiet failu šeit vai noklikšķiniet, lai izvēlētos

CSS · apstrādāts jūsu ierīcē

vai nospiediet Ctrl+V, lai ielīmētu no starpliktuves

Pārlūkot failus
Formatēts CSS
Izvade parādīsies šeit…

Biežākie lietojumi

  • Atkļūdojiet ražošanas CSSSkatiet minificētu CSS no ražošanas vietnēm lasāmā formātā, lai atrastu un apgriezt stilu inženiēriju.
  • Piespiest komandas CSS stiluPalaidiet komandas iesniegto CSS caur konsekventi skaistulī, lai atšķirības būtu par saturu, nevis formatējumu.
  • Formatējiet piegādātāja prefiksa CSSPiegādātāja prefiksa CSS (autoprefixer izeja) bieži vien satur daudz -webkit-, -moz-, -ms- variācijas. Formatējiet inspekcijai.
  • Mācieties no Pro CSSPētiet CSS no pazīstamām dizaina sistēmām, formatējot to kompilēto izeja.
  • Formatējiet CSS kļūdu pārskatiemIesniegdami CSS kļūdas, formatēts CSS ir daudz vieglāk lasīt un saprast pārskatītājiem.

Kā tas darbojas

Šis rīks formatē CSS, izmantojot pašrakstītu rekursīvu parsētāju, kas iebūvēts tieši lapā — bez trešās puses bibliotēkas, bez servera izsaukuma. Parsētājs iet cauri jūsu CSS rakstzīmi pa rakstzīmei, pareizi apstrādājot citētas virknes, url() vērtības, ligzdotus at-noteikumus un komentārus, kas sajauktu vienkāršākas regulāro izteiksmju pieejas.

  1. 1
    Rakstzīmju līmeņa tokenizācija
    walkCss funkcija skenē neapstrādāto ievadi pa vienai rakstzīmei, izsekojot citāta stāvoklim un iekavu dziļumam, lai semikoli vai figūriekavas iekš url(), virkņu vērtībās vai komentāros nekad netiktu sajauktas ar strukturāliem atdalītājiem.
  2. 2
    Bloka un deklarācijas atdalīšana
    Kad skeneris atrod augstākā līmeņa atverošo figūriekavu, tas izgūst prologu (selektoru vai at-noteikuma atslēgvārdu) un rekursīvi apstrādā bloka saturu — kas pats var saturēt ligzdotus noteikumus (@media, @supports, vietējo CSS ligzdošanu), apstrādātus dziļākā rekursijas dziļumā.
  3. 3
    Īpašību kārtošana un atkāpes
    Deklarācijas katrā blokā tiek savāktas kopā, tad neobligāti kārtotas alfabētiski pēc īpašības nosaukuma, pirms tiek izrakstītas ar izvēlēto atkāpes platumu (2 vai 4 atstarpes). Minifikācijas režīms pilnībā izlaiž atstarpes un noņem komentārus.
  4. 4
    Tūlītēja izvade pārlūkprogrammā
    Rezultāti parādās, kamēr rakstāt, caur useMemo āķi — nekas nekur netiek sūtīts. Formatēto vai minificēto CSS var kopēt starpliktuvē vai lejupielādēt kā .css failu, un panelis rāda izmēra atšķirību salīdzinājumā ar oriģinālu.

Saistītie rīki

🌐

HTML pārveidotājs un minifikators

Glīti drukā vai minificē HTML ar pareizu ligzdošanas atkāpi. Saglabā saturu <pre>, <script>, <style> blokos.

Izmēģināt
🗄️

SQL formatētājs un pārveidotājs

Glīti drukā SQL vaicājumus ar pareizu atkāpi, konfigurējamu atslēgvārdu reģistru un rindu pārtraukumiem pie galvenajiem klauzuliem. Darbojas ar jebkuru SQL dialektu.

Izmēģināt
🗜️

CSS minifikators un pārveidotājs

Minificē CSS, lai samazinātu faila izmēru, vai pārveidojiet minificētu CSS lasāmībai. Tūlītēji, pārlūkprogrammā.

Izmēģināt

Bieži uzdotie jautājumi