Ilmainen CSS-tiivistin Verkossa
Tiivistä CSS tuotantoa varten heti — toimii selaimessa, ei latausta.
CSS-syöte
Tiivistetty CSS
Esimerkkejä CSS:n tiivistämisestä
Muotoiltu CSS on luettavaa; tiivistetty CSS on kompaktia tuotantoon. Esimerkki:
Kontti- ja painiketyylit
Muotoiltu syöte:
Tiivistetty tulos:
Käytä yllä olevaa Esimerkki-painiketta ladataksesi lisää dataa.
Mikä on CSS-tiivistin?
CSS-tiedostot käyttävät tyhjää tilaa, kommentteja ja sisennystä luettavuuteen. Tuotannossa pienemmät tiedostot latautuvat nopeammin. CSS-tiivistin poistaa turhan tyhjän tilan ja kommentit ja lyhentää arvoja turvallisesti tiedoston koon pienentämiseksi. W3C:n CSS-määrittelyt määrittelevät kielen; tiivistys säilyttää käyttäytymisen pienentäen tavuja.
Työkalu jäsentää CSS:si ja tuottaa kompaktin version. Tiivistys tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle. Tiivistetyn CSS:n muotoiluun CSS-muotoilija. Validointiin CSS-tarkistin.
Miten työkalua käytetään
Liitä tai lataa CSS
Kopioi CSS ja liitä se vasempaan editoriin. Voit myös napsauttaa Lataa ja avata .css-tiedoston. Esimerkki lataa esimerkkidataa. Virheellinen CSS näyttää virheen.
Tarkista tiivistetty tulos
Oikea paneeli näyttää kompaktin CSS:n. Tyhjä tila ja kommentit poistetaan. Tulos on kelvollista CSS:ää — käyttäytyminen säilyy. Virheellinen CSS näkyy tulosteessa virheenä.
Kopioi tai lataa
Käytä Kopioi tai Lataa tiedostona. SCSS tai Less: käänä ensin SCSS CSS:ksi tai Less CSS:ksi, sitten tiivistä.
Miten tiivistin toimii
Työkalu poistaa tyhjän tilan, rivinvaihdot ja kommentit CSS:stäsi. Arvoja voidaan lyhentää turvallisesti (esim. 0px → 0, #ffffff → #fff). Tulos pysyy kelvollisena W3C CSS -määrittelyn mukaan. Build-työkalut kuten cssnano tai PostCSS tarjoavat aggressiivisempaa optimointia; tämä työkalu antaa nopean selainpohjaisen tiivistyksen.
Milloin CSS:n tiivistäminen auttaa
Tuotantosivut hyötyvät pienemmistä CSS-tiedostoista. Tiivistys pienentää kuormaa, nopeuttaa latausta ja säästää kaistaa. Build-työkalut kuten Webpack, Vite tai Parcel tiivistävät usein automaattisesti, mutta tämä työkalu sopii kertaluonteisiin tiedostoihin, nopeisiin tarkistuksiin tai kun build-vaihetta ei ole.
Sähköpostipohjat, upotetut tyylit tai CDN:llä hostattu CSS saattavat vaatia käsityönä tiivistystä. Tyylitiedoston ajaminen täällä antaa tuotantovalmiin tuloksen. Vendor-etuliitteisiin ennen tiivistystä CSS-etuliite. Tiivistetyn CSS:n muotoiluun takaisin luettavaksi CSS-muotoilija.
Usein kysyttyä
Rikoeko tiivistys CSS:n?
Ei. Vain tyhjä tila ja kommentit poistetaan. Valitsimet, ominaisuudet ja arvot pysyvät. Tulos on kelvollista CSS:ää. Jotkut tiivistimet voivat lyhentää arvoja (esim. 0px → 0) — käyttäytyminen säilyy.
Onko datani yksityinen?
Kyllä. Tiivistys tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle.
Entä source mapit?
Työkalu ei luo source mappeja. Tuotantobuildeihin source mappeineen käytä PostCSS:ää, cssnanoa tai bundlerin tiivistintä.
Tukeeko se SCSS:ää tai Lessiä?
Työkalu tiivistää tavallista CSS:ää. SCSS:lle tai Lessille käänä ensin SCSS CSS:ksi tai Less CSS:ksi, sitten tiivistä tulos.
Kuinka paljon pienempi siitä tulee?
Tyypillisesti 20–40 % pienempi tyhjän tilan ja kommenttien mukaan. Paljon kommentoitua tai muotoiltua CSS:ää voi kutistua enemmän. Tarkka säästö riippuu syötteestäsi.
Liittyvät työkalut
CSS-määrittely: W3C CSS. Viite: MDN CSS. cssnano ja PostCSS tarjoavat edistyneempää build-aikaista tiivistystä.