Siirry sisältöön
🛠️
Whiz Tools

Ilmainen CSS-minifioija: Pakkaa ja optimoi CSS-koodi verkossa

Minifioi CSS-koodi välittömästi ja pienennä tiedostokokoa jopa 40%. Ilmainen online-CSS-minifioija poistaa välilyönnit, kommentit ja optimoi syntaksin nopeamman verkkosivuston suorituskyvyn saavuttamiseksi.

CSS-minifioija

Minifioi CSS-koodi välittömästi ja pienennä tiedostokokoa jopa 40 % sekä paranna verkkosivuston latausnopeutta.

0 merkkiä
0 merkkiä

CSS-minifioinnista

CSS-minifiointi poistaa tarpeettomat merkit CSS-tiedostoista muuttamatta toiminnallisuutta, pienentäen tiedostokokoa ja parantaen verkkosivuston suorituskykyä.

  • Poistaa kommentit, välilyönnit ja rivinvaihdot
  • Poistaa tarpeettomat puolipisteet ja nollayksikköarvot
  • Optimoi väriarvot ja määrittelyt
  • Parantaa sivun latausnopeutta ja SEO-sijoituksia
Latauslaskuri...
📚

Dokumentaatio

Mikä on CSS:n minimointityökalu?

CSS-minifier on työkalu, joka pienentää CSS-tiedostoa (Cascading Style Sheets) poistamalla merkit, joita selaimet eivät tarvitse. Se poistaa kommentit, ylimääräiset välilyönnit ja rivinvaihdot sekä lyhentää muutamia yleisiä rakenteita muuttamatta sivun ulkoasua. Tuloksena on pienempi tiedosto, jonka selain voi ladata ja jäsentää nopeammin.

Miten CSS:n minimointi toimii

Verkkokehittäjät kirjoittavat CSS:ää kommenttien, sisennysten ja tyhjien rivien kanssa, koska ne helpottavat koodin lukemista ja muokkaamista. Selaimet jättävät kaiken tämän muotoilun huomiotta. Minimointityökalu poistaa kaiken tämän sekä joukon muita tavuja, joilla ei ole vaikutusta ulkoasuun, ja jättää jäljelle tiiviin tiedoston tuotantokäyttöön muokkaamisen sijaan.

Tämä työkalu tekee seuraavat muutokset:

  • Poistaa kommentit. Jokainen /* ... */-lohko poistetaan.
  • Tiivistää tyhjätilan. Sääntöjen väliset välilyöntien, sarkainten ja rivinvaihtojen jaksot poistetaan kokonaan tai korvataan yhdellä välilyönnillä, jos välilyönti on merkityksellinen (esimerkiksi jälkeläisvalitsimen .parent ja .child välillä).
  • Poistaa välilyönnit välimerkkien ympäriltä. Merkkien {, }, :, ; ja , vieressä olevat välilyönnit poistetaan.
  • Poistaa ylimääräiset puolipisteet. Peräkkäiset puolipisteet tiivistetään yhdeksi, ja sulkevaa }-merkkiä edeltävä viimeinen puolipiste poistetaan.
  • Lyhentää heksavärit. Kuusinumeroinen väri, kuten #ffffff, muutetaan muotoon #fff, kun jokaisen numeroparin numerot täsmäävät (punainen, vihreä ja sininen). Alfaa sisältävä kahdeksannumeroinen väri, kuten #ffaa00cc, lyhennetään samalla tavalla, kun kaikki neljä paria täsmäävät.
  • Poistaa yksikön nollan pituisista arvoista. 0px, 0em ja 0rem muuttuvat muotoon 0. Prosenttiarvot jätetään ennalleen, koska 0% ei ole aina vaihdettavissa pelkkään 0-arvoon (esimerkiksi flex-basis-arvossa tai @keyframes-vaiheessa).
  • Poistaa desimaalilukujen alkunollan. 0.5 muuttuu muotoon .5.

Tiedoston vioittumisen välttämiseksi työkalu jättää muuttamatta kolmenlaiset sisällöt: lainausmerkkien sisällä olevan tekstin, lainaamattoman url()-funktion sisällä olevan arvon sekä matemaattisten funktioiden, kuten calc(), clamp(), min() ja max(), sisällön. calc(100% - 20px)-funktion sisäiset välilyönnit ovat selaimelle merkityksellisiä, joten työkalu säilyttää ne täsmälleen.

Työkalu ei yhdistä päällekkäisiä valitsimia, poista tyhjiä sääntölohkoja tai muunna rgb()-värejä heksamuotoon. Nämä ovat kelvollisia optimointeja, joita muut työkalut tekevät, mutta tämä minifier keskittyy edellä lueteltuihin muutoksiin.

Pienennysprosentin kaava

Työkalu ilmoittaa tiedoston pienentymisen prosentteina:

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

Molemmat pituudet lasketaan merkkeinä. Tulos pyöristetään kahden desimaalin tarkkuuteen.

Laskuesimerkki

Alkuperäinen CSS (193 merkkiä):

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

Minimoitu CSS-tuloste (129 merkkiä):

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

Kaavaa soveltaen: (193 − 129) / 193 × 100 = 33,16 %. Kommentti on poistettu, sisennykset ja rivinvaihdot on poistettu, 0px muuttui muotoon 0 ja #ffffff/#000000 muuttuivat muotoon #fff/#000.

Tarkka prosenttiosuus riippuu syötteestä. Tiiviisti kirjoitettu CSS, jossa on vähän kommentteja, pienenee vähemmän. Runsaasti kommentoitu ja syvästi sisennetty CSS voi pienentyä enemmän. Tällä työkalulla minimoidut tyylitiedostot pienenevät yleensä noin 20 %–40 %.

Miten tätä työkalua käytetään

  1. Liitä CSS-koodi vasemmalla olevaan syöttökenttään.
  2. Minimoitu versio tulee automaattisesti näkyviin oikealle ilman painettavaa painiketta.
  3. Tarkista tulosteen yläpuolella näkyvä pienennysprosentti.
  4. Valitse ”Copy to Clipboard” kopioidaksesi minimoidun CSS:n ja liitä se sitten projektin tiedostoon.
  5. Valitse ”Clear” tyhjentääksesi molemmat kentät ja aloittaaksesi alusta.

Mitään työkaluun kirjoitettua ei lähetetä palvelimelle, vaan minimointi suoritetaan selaimessa.

Milloin CSS kannattaa minimoida

Kehitystiimit minimoivat CSS:n yleensä osana koontiprosessia käyttäen esimerkiksi Webpackia tai npm-komentosarjoja, jotta muutos tapahtuu automaattisesti ennen jokaista käyttöönottoa. Helposti luettava ja kommentoitu lähdetiedosto säilytetään versionhallinnassa; vain tuotantokoonti minimoidaan. Minimoitua CSS:ää käytetään yleisesti seuraavissa kohteissa:

  • Suurilla verkkosivustoilla, kuten verkkokaupoissa, joissa pienempi tyylitiedosto tarkoittaa nopeammin latautuvaa sivua.
  • Reactin tai Vuen kaltaisilla kehyksillä toteutetuissa yhden sivun sovelluksissa, joissa CSS niputetaan JavaScriptin rinnalle.
  • Mobiiliverkkosivuilla, joiden käyttäjät ovat todennäköisemmin hitaamman yhteyden varassa.
  • HTML-sähköposteissa, joissa on usein tiukat kokorajoitukset.

CSS:n minimointi ja sivun nopeus

Pienempi CSS-tiedosto latautuu ja jäsennetään nopeammin, mikä voi lyhentää aikaa siihen, että sivu tulee näkyviin. Google on ilmoittanut sivun nopeuden olevan yksi hakutulossijoituksessa käytettävistä signaaleista, joten nopeampi sivu voi olla yksi pieni tekijä monien joukossa sivuston menestyksessä hakutuloksissa. Minimointi yksin ei takaa muutosta sijoituksessa, vaan se on yksi optimointi muiden, kuten kuvien pakkauksen ja palvelimen vastausajan, ohella.

CSS:n minimointityökalu ja CSS:n muotoilutyökalu

Minimointityökalu pakkaa koodin tuotantokäyttöä varten. Muotoilija toimii päinvastoin: se ottaa pakatun CSS:n ja muotoilee sen uudelleen sisennyksillä ja rivinvaihdoilla, jotta ihminen voi taas lukea sitä. Muotoilija ei voi palauttaa minimoinnin aikana poistettuja kommentteja tai alkuperäisiä muuttujanimiä, koska poistamisen jälkeen nämä tiedot ovat kadonneet.

Usein kysyttyä

Kuinka paljon pienemmäksi CSS muuttuu minimoinnin jälkeen? Tällä työkalulla yleensä 20 %–40 % riippuen siitä, kuinka paljon alkuperäisessä tiedostossa on kommentteja, tyhjiä rivejä ja sisennyksiä. Tiedosto, jossa on alun perin vähän muotoilua, pienenee vähemmän.

Muuttuuko sivun ulkoasu, kun CSS minimoidaan? Ei. Minimointi poistaa vain merkit, jotka selaimet jättävät huomiotta, kuten kommentit ja ylimääräiset tyhjemerkit, ja kirjoittaa muutamia samanarvoisia arvoja uudelleen (kuten #ffffff muotoon #fff). Sivun renderöity ulkoasu säilyy ennallaan.

Pitäisikö CSS minimoida kehityksen aikana? Ei. Säilytä helposti luettava ja kommentoitu versio koodin kirjoittamisen ja virheenkorjauksen aikana. Minimoi vain tuotantopalvelimelle lähetettävä kopio, yleensä koontiprosessin automaattisena vaiheena.

Voiko minimoidun CSS:n muuttaa takaisin alkuperäiseksi tiedostoksi? Muotoilija voi lisätä minimoituun CSS:ään sisennykset ja rivinvaihdot, mutta se ei voi palauttaa poistettuja kommentteja tai palauttaa kuvaavia nimiä, joita minimoidussa versiossa ei koskaan ollut. Säilytä alkuperäinen lähdetiedosto.

Muuttaako tämä työkalu rgb()-värit heksamuotoon tai yhdistääkö se päällekkäiset valitsimet? Ei. Se lyhentää heksavärejä ja poistaa tarpeettomia merkkejä, mutta ei kirjoita rgb()/hsl()-arvoja uudelleen eikä yhdistä toistuvia valitsimia. Jotkin muut minimointityökalut tekevät nämä lisävaiheet.

Onko minimointi sama asia kuin gzip-pakkaus? Ei. Minimointi poistaa tarpeettomat merkit itse lähdekoodista. Gzip- (tai Brotli-)pakkaus tehdään erillisellä algoritmilla verkkopalvelimella, kun tiedosto lähetetään. Näiden molempien käyttö tuottaa verkossa siirrettäväksi pienimmän tiedoston.