CSS-pienentäjä (CSS Minifier)

Liitä tyylitiedosto: työkalu poistaa välilyönnit ja kommentit, lyhentää arvoja kuten #ff0000 → red ja yhdistää päällekkäiset säännöt CSSO:n rakenteellisilla optimoinneilla.

Toimii selaimessaEi rekisteröitymistäMitään ei lähetetä

Pienennetty tulos

Näin käytät työkalua: CSS-pienentäjä

  1. Liitä CSS tai avaa .css-tiedosto.
  2. Pidä Uudelleenjärjestä päällä yhdistääksesi sääntöjä ja määrittelyjä, tai kytke se pois turvallista pelkkien välilyöntien poistoa varten.
  3. Pidä Säilytä lisenssikommentit päällä, niin /*! … */-ilmoitukset säilyvät.
  4. Vertaa alkuperäistä, pienennettyä ja gzip-pakattua kokoa.
  5. Kopioi tulos tai lataa output.min.css.

Miten CSS:n pienentäminen toimii

Tämä työkalu käyttää CSSO:ta (CSS Optimizer), joka jäsentää tyylitiedostosi syntaksipuuksi ja tulostaa sen takaisin lyhimmässä vastaavassa muodossa. Välilyöntien ja kommenttien poiston lisäksi se tekee turvallisia arvojen uudelleenkirjoituksia:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Tyhjät säännöt ja päällekkäiset määrittelyt poistetaan

Mitä ”uudelleenjärjestäminen” tekee?

Uudelleenjärjestäminen tarkastelee koko tyylitiedostoa: säännöt, joilla on samat määrittelyt, yhdistetään yhdeksi valitsinlistaksi (.a,.b{color:red}), ja toistuvat valitsimet yhdistetään. Tämä säästää oikeissa tyylitiedostoissa usein vielä 5–15 %. CSSO yhdistää vain, kun kaskadijärjestys säilyy, mutta jos luotat epätavallisiin ylikirjoituksiin, voit kytkeä sen pois puhtaasti syntaktista pienennystä varten.

Miksi pienentää CSS:ää?

CSS estää renderöinnin: selain ei voi piirtää sivua ennen kuin <head>-osion tyylitiedostot on ladattu ja jäsennetty. Pienempi CSS tarkoittaa nopeampaa First Contentful Paintia ja parempia Core Web Vitals -arvoja, mikä auttaa sekä käyttäjiä että hakusijoituksia. Yhdistä pienennys palvelimen gzip- tai Brotli-pakkaukseen parhaan tuloksen saamiseksi.

Usein kysytyt kysymykset

Onko CSS:n pienentäminen turvallista?
Kyllä. Välilyönnit ja kommentit eivät vaikuta CSS:n renderöintiin, ja CSSO:n arvojen uudelleenkirjoitukset ovat määrittelyn mukaan samanarvoisia. Uudelleenjärjestäminen säilyttää kaskadijärjestyksen; kytke se pois, jos haluat mahdollisimman varovaisen tuloksen.
Tukeeko se modernia CSS:ää, kuten custom propertyjä, sisäkkäisyyttä ja @layer-sääntöä?
Kyllä. Custom propertyt (--var), @media, @supports, @layer, @container ja grid-syntaksi säilyvät.
Voiko pienennetyn CSS:n palauttaa myöhemmin?
Pienennetyn CSS:n voi sisentää uudelleen millä tahansa muotoilijalla, mutta poistettuja kommentteja ei saa takaisin. Säilytä alkuperäinen lähdetiedosto ja käsittele pienennettyä tiedostoa käännöksen tuotoksena.
Lähetetäänkö tyylitiedostoni jonnekin?
Ei. Pienentäminen tapahtuu selaimessasi; mitään ei lähetetä palvelimelle.

Aiheeseen liittyvät työkalut

JavaScript-pienentäjä Pakkaa ja lyhennä JS Terserillä, koko- ja gzip-tilastoin. HTML-pienentäjä Poista kommentit ja tyhjätila sekä pienennä upotettu CSS/JS. SQL-muotoilija Muotoile tai pienennä SQL: PostgreSQL, MySQL, T-SQL, BigQuery ym. JSON-muotoilija Muotoile, pienennä ja validoi JSON rivi- ja saraketarkoin virhein.