Pāriet uz galveno saturu

CSS minifikators un pārveidotājs bez maksas

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

Darbojas bezsaistē pēc ielādes
vai nometiet .css failu zemāk

Nometiet .css 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
Ievades CSS
Izvades CSS
Izvade parādīsies šeit…

Biežākie lietojumi

  • Minificējiet CSS ražošanas izvietošanaiSamaziniet CSS faila lielumu pirms ražošanas izvietošanas — ātrāka lapas ielāde un zemākas joslas platuma izmaksas.
  • Skaistojiet minificētu CSS atkļūdošanaiFormatējiet saspiestu vai minificētu CSS nolasāmā kodā, lai varētu pārbaudīt un atkļūdot stiliem.
  • Minificējiet CSS e-pasta veidnēmKompaktajiet CSS HTML e-pasta veidnēm, kur faila lielums un iekļautā stila pūpolums ir svarīgs.
  • Minificējiet CSS WordPress tēmāmSamaziniet pielāgoto WordPress tēmas CSS lielumu labākiem PageSpeed rezultātiem.
  • Skaistojiet CSS koda pārskateiFormatējiet jebkuru CSS failu tīrā, atkāpJuma, nolasāmā kodā, kas ir gatavs pārskatei un sadarbībai.

Kā tas darbojas

Šis rīks izmanto pašrakstītu, bez atkarībām CSS tokenizatoru, kas veidots pilnībā JavaScript — bez ārējām bibliotēkām, bez servera izsaukumiem. Tokenizators klasificē katru rakstzīmi kā kodu, komentāru, citētu virkni vai url() vērtību, pirms tiek pielietoti jebkādi pārveidojumi, kas novērš atstarpju noteikumu bojāšanu virkņu saturam, datu URI vai calc() izteiksmēm.

  1. 1
    Tokenizācijas gājiens
    Ievades CSS tiek skenēts rakstzīmi pa rakstzīmei un sadalīts tipizētos marķieros: neapstrādāti koda segmenti, /* ... */ komentāri, citētas virknes (saglabājot izbēgšanas secības) un url(...) bloki. Tas nodrošina, ka nākamā soļa pārveidojumi skar tikai īstu CSS sintaksi — nekad virknes literāļa vai datu URI saturu.
  2. 2
    Minifikācija vai skaistošana
    Minifikācijas režīmā parastie komentāri tiek nomesti (/*! licence */ komentāri tiek saglabāti), atstarpju sērijas koda marķieros tiek sakļautas vienā atstarpē, un pieturzīmēm blakus esošās atstarpes ap { } : ; , > ~ tiek noņemtas. Atstarpes ap + un - tiek apzināti atstātas neskartas, lai nesabojātu calc() izteiksmes. Skaistošanas režīmā kods vispirms tiek minificēts līdz tīrai bāzei, tad atkārtoti tokenizēts un atkārtoti atkāpts ar divu atstarpju dziļuma izsekošanu un deklarācijas-kola noteikšanu, lai atšķirtu īpašība: vērtība kolus no selektoru koliem, piemēram, a:hover.
  3. 3
    Gzip izmēra novērtējums
    Pēc izvades radīšanas pārlūkprogrammas vietējā CompressionStream API tiek izmantota, lai saspiestu rezultātu ar gzip un izmērītu iegūto baitu skaitu. Tas dod reālistisku pārraides izmēra novērtējumu, kas atbilst tam, ko nosūtītu tīmekļa serveris ar gzip saspiešanu.
  4. 4
    Kopēt vai lejupielādēt
    Apstrādātais CSS tiek ierakstīts starpliktuvē caur Clipboard API vai lejupielādēts kā styles.min.css (minifikācijas režīms) vai styles.css (skaistošanas režīms), izmantojot Blob ar MIME tipu text/css. Izmēra samazinājuma procenti tiek rādīti dzīvajā laikā, kamēr rakstāt.

Saistītie rīki

Bieži uzdotie jautājumi