Preskoči na vsebino
🛠️
Whiz Tools

Brezplačni CSS Minifikator: Stiskanje in optimizacija CSS kode na spletu

Trenutno stiskanje CSS kode in zmanjšanje velikosti datoteke do 40%. Brezplačni spletni CSS minifikator odstrani presledke, komentarje in optimizira sintakso za hitrejšo spletno zmogljivost.

Minifikator CSS

Trenutno zmanjšajte CSS kodo za do 40% in izboljšajte hitrost nalaganja spletne strani.

0 znakov
0 znakov

O minifikaciji CSS

Minifikacija CSS odstrani nepotrebne znake iz CSS datotek brez spremembe funkcionalnosti, zmanjša velikost datoteke in izboljša zmogljivost spletne strani.

  • Odstrani komentarje, presledke in prelome vrstic
  • Odstranjuje nepotrebne podpičja in ničelne enote
  • Optimizira barvne vrednosti in deklaracije
  • Izboljša hitrost nalaganja strani in SEO uvrstitev
Kalkulator nalaganja...
📚

Dokumentacija

Kaj je pomanjševalnik CSS?

Pomanjševalnik CSS je orodje, ki zmanjša datoteko CSS (kaskadne slogovne predloge) tako, da odstrani znake, ki jih brskalniki ne potrebujejo. Odstrani komentarje, odvečne presledke in prelome vrstic ter skrajša nekaj pogostih vzorcev, ne da bi spremenil videz strani. Rezultat je manjša datoteka, ki jo lahko brskalnik hitreje prenese in razčleni.

Kako deluje pomanjševanje CSS

Spletni razvijalci pišejo CSS s komentarji, zamiki in praznimi vrsticami, ker je tako kodo lažje brati in urejati. Brskalniki vse to oblikovanje prezrejo. Pomanjševalnik ga izbriše skupaj z nekaj drugimi bajti, ki nimajo vizualnega namena, in pusti zgoščeno datoteko, namenjeno uporabi v produkciji, ne urejanju.

To orodje izvede naslednje spremembe:

  • Odstrani komentarje. Vsak blok /* ... */ se izbriše.
  • Zmanjša presledke. Zaporedja presledkov, tabulatorjev in prelomov vrstic med pravili se zmanjšajo na nič ali na en sam presledek, kjer je presledek pomensko pomemben (na primer med .parent in .child v izbirniku potomca).
  • Odstrani presledke ob ločilih. Presledki ob znakih {, }, :, ; in , se odstranijo.
  • Odstrani odvečna podpičja. Zaporedna podpičja se združijo v eno, končno podpičje pred zaključnim znakom } pa se odstrani.
  • Skrajša šestnajstiške barve. Šestmestna barva, kot je #ffffff, postane #fff, kadar se vsak par števk ujema (rdeča, zelena in modra). Osemmestna barva z vrednostjo alfa, kot je #ffaa00cc, se skrajša enako, kadar se ujemajo vsi štirje pari.
  • Odstrani mersko enoto pri vrednostih dolžine nič. 0px, 0em in 0rem postanejo 0. Odstotne vrednosti ostanejo nespremenjene, ker 0% ni vedno zamenljiv z navadnim 0 (na primer pri flex-basis ali koraku @keyframes).
  • Odstrani vodilno ničlo pri decimalnih številih. 0.5 postane .5.

Da ne bi poškodovalo datoteke, orodje pusti nespremenjene tri vrste vsebine: besedilo v narekovajih, vrednost v neomotani funkciji url() in vsebino matematičnih funkcij, kot so calc(), clamp(), min() in max(). Presledki znotraj calc(100% - 20px) so za brskalnik pomembni, zato jih orodje ohrani natančno takšne.

Orodje ne združuje podvojenih izbirnikov, ne briše praznih blokov pravil in ne pretvarja barv rgb() v šestnajstiške zapise. To so veljavne optimizacije, ki jih izvajajo druga orodja, vendar se ta pomanjševalnik osredotoča na zgoraj navedene spremembe.

Formula za odstotek zmanjšanja

Orodje sporoči, za koliko odstotkov se je datoteka zmanjšala:

1reduction % = ((original length − minified length) / original length) × 100
2

Obe dolžini se štejeta v znakih. Rezultat se zaokroži na dve decimalni mesti.

Rešen primer

Izvirni CSS (193 znakov):

1/* Navigation Styles */
2.nav-menu {
3  display: flex;
4  justify-content: space-between;
5  padding: 20px 0px;
6  background-color: #ffffff;
7}
8
9.nav-item {
10  margin-right: 15px;
11  color: #000000;
12}
13

Pomanjšani izhod (129 znakov):

1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2

Z uporabo formule: (193 − 129) / 193 × 100 = 33,16 %. Komentar je odstranjen, zamiki in prelomi vrstic so odstranjeni, 0px je postal 0, #ffffff/#000000 pa sta postala #fff/#000.

Natančen odstotek je odvisen od vhodne datoteke. Strnjeno napisan CSS z malo komentarji se zmanjša manj. CSS z veliko komentarji in globokimi zamiki se lahko zmanjša bolj. Pri običajnih slogovnih predlogah, pomanjšanih s tem orodjem, se velikost zmanjša približno za 20 % do 40 %.

Kako uporabljati to orodje

  1. Prilepite kodo CSS v vnosno polje na levi.
  2. Pomanjšana različica se samodejno prikaže na desni, brez pritiska gumba.
  3. Preverite odstotek zmanjšanja, prikazan nad izhodom.
  4. Izberite »Copy to Clipboard«, da kopirate pomanjšani CSS, nato pa ga prilepite v projektno datoteko.
  5. Izberite »Clear«, da izbrišete obe polji in začnete znova.

Ničesar, kar vnesete v orodje, se ne pošlje strežniku; pomanjševanje se izvede v brskalniku.

Kdaj pomanjšati CSS

Razvojne ekipe CSS pogosto pomanjšajo kot korak v procesu gradnje, pri čemer uporabljajo orodja, kot sta Webpack ali skripte npm, tako da se sprememba samodejno izvede pred vsako namestitvijo. Berljiva datoteka z izvirno kodo in komentarji ostane v sistemu za nadzor različic; pomanjšana je samo produkcijska različica. Pogosta mesta uporabe pomanjšanega CSS so:

  • Velika spletna mesta, na primer spletne trgovine, kjer manjša slogovna predloga pomeni hitrejše nalaganje strani.
  • Enostranske aplikacije, izdelane z ogrodji, kot sta React ali Vue, pri katerih je CSS združen z JavaScriptom.
  • Mobilne spletne strani, pri katerih je verjetneje, da uporabniki uporabljajo počasnejšo povezavo.
  • E-poštna sporočila HTML, za katera pogosto veljajo stroge omejitve velikosti.

Pomanjševanje CSS in hitrost strani

Manjša datoteka CSS se prenese in razčleni hitreje, kar lahko skrajša čas do prikaza strani. Google je navedel, da je hitrost strani eden od signalov, ki se uporabljajo pri razvrščanju v iskalniku, zato je hitrejša stran lahko eden od številnih manjših dejavnikov, ki vplivajo na uspešnost spletnega mesta v rezultatih iskanja. Samo pomanjševanje ne zagotavlja spremembe uvrstitve; je ena od več optimizacij, med katere spadata tudi stiskanje slik in čas odziva strežnika.

Pomanjševalnik CSS v primerjavi z oblikovalnikom CSS

Pomanjševalnik stisne kodo za produkcijo. Oblikovalnik naredi nasprotno: stisnjeni CSS preoblikuje z zamiki in prelomi vrstic, da ga lahko človek znova bere. Oblikovalnik ne more obnoviti komentarjev ali izvirnih imen spremenljivk, odstranjenih med pomanjševanjem, ker so ti podatki po izbrisu izgubljeni.

Pogosta vprašanja

Za koliko se CSS zmanjša po pomanjševanju? S tem orodjem običajno za 20 % do 40 %, odvisno od števila komentarjev, praznih vrstic in zamikov v izvirni datoteki. Datoteka, ki je že na začetku malo oblikovana, se bo zmanjšala manj.

Ali pomanjševanje CSS spremeni videz strani? Ne. Pomanjševanje odstrani samo znake, ki jih brskalniki prezrejo, na primer komentarje in odvečne presledke, ter prepiše nekaj enakovrednih vrednosti (na primer #ffffff v #fff). Izrisana stran ostane enaka.

Ali je treba CSS pomanjšati med razvojem? Ne. Med pisanjem in odpravljanjem napak ohranite berljivo različico s komentarji. Pomanjšajte samo kopijo, ki se pošlje na produkcijski strežnik, običajno kot samodejni korak v procesu gradnje.

Ali je mogoče pomanjšani CSS pretvoriti nazaj v izvirno datoteko? Oblikovalnik lahko pomanjšani CSS preoblikuje z zamiki, vendar ne more obnoviti izbrisanih komentarjev ali opisnih imen, ki v pomanjšani različici nikoli niso bila prisotna. Ohranite izvirno datoteko z izvorno kodo.

Ali to orodje pretvarja barve rgb() v šestnajstiški zapis ali združuje podvojene izbirnike? Ne. Skrajša šestnajstiške barve in odstrani nepotrebne znake, vendar ne prepisuje vrednosti rgb()/hsl() in ne združuje ponovljenih izbirnikov. Nekateri drugi pomanjševalniki izvajajo te dodatne korake.

Ali je pomanjševanje isto kot stiskanje z gzipom? Ne. Pomanjševanje odstrani nepotrebne znake iz same izvorne kode. Stiskanje z gzipom (ali Brotli) izvede spletni strežnik ob pošiljanju datoteke z uporabo ločenega algoritma. Uporaba obojega skupaj ustvari najmanjšo datoteko pri prenosu po omrežju.