CSS-pienentäjä ja -kaunistaja ilmaiseksi
Pienennä CSS tiedostokoon pienentämiseksi tai kaunista pienennetty CSS luettavuuden parantamiseksi. Välitön, selaimessasi.
Pudota .css-tiedosto tähän tai valitse klikkaamalla
CSS · käsitellään laitteellasi
tai liitä leikepöydältä painamalla Ctrl+V
Yleiset käyttötavat
- Minifoi CSS Tuotannon KäyttöönotollePienennä CSS-tiedoston kokoa ennen tuotannon käyttöönottoa - nopeampi sivun lataus ja alhaisemmat kaistanlevyn kustannukset.
- Kaunista Minifoitu CSS VirheenkorjaukseenMuotoile pakattu tai minifoitu CSS luettavaksi koodiksi, jotta voit tarkastella ja korjata tyylejä.
- Minifoi CSS SähköpostimalleillePakattu CSS HTML-sähköpostimalleille, joissa tiedoston koko ja rivinsisäisen tyylin paisunta ovat tärkeitä.
- Minifoi CSS WordPress-teemoillePienennä mukautettujen WordPress-teemojen tyylisivujen kokoa parempia PageSpeed-pisteitä varten.
- Kaunista CSS Koodin Arviointia VartenMuotoile mikä tahansa CSS-tiedosto puhtaaksi, sisennettävaksi, luettavaksi koodiksi valmiina arviointiin ja yhteistyöhön.
Miten se toimii
Tämä työkalu käyttää käsin kirjoitettua, ilman riippuvuuksia toimivaa CSS-tokenisoijaa, joka on rakennettu kokonaan JavaScriptillä — ei ulkoisia kirjastoja, ei palvelinkutsuja. Tokenisoija luokittelee jokaisen merkin koodiksi, kommentiksi, lainatuksi merkkijonoksi tai url()-arvoksi ennen minkään muunnoksen soveltamista, mikä estää välilyöntisäännöt vahingoittamasta merkkijonon sisältöä, data-URI:eja tai calc()-lausekkeita.
- 1TokenisointivaiheSyöte-CSS skannataan merkki kerrallaan ja jaetaan tyypitetyiksi tokeneiksi: raakoihin koodisegmentteihin, /* ... */-kommentteihin, lainattuihin merkkijonoihin (säilyttäen escape-sekvenssit) ja url(...)-lohkoihin. Tämä varmistaa, että seuraavan vaiheen muunnokset koskettavat vain todellista CSS-syntaksia — ei koskaan merkkijonoliteraalin tai data-URI:n sisältöä.
- 2Tiivistys tai kaunistusTiivistystilassa tavalliset kommentit poistetaan (/*! license */-kommentit säilytetään), koodisegmenttien välilyöntijaksot supistetaan yksittäisiksi väleiksi, ja välimerkkien { } : ; , > ~ ympäriltä poistetaan välilyönnit. Välilyönnit +:n ja -:n ympärillä jätetään tarkoituksella ennalleen, jotta calc()-lausekkeet eivät rikkoudu. Kaunistustilassa koodi ensin tiivistetään puhtaaksi perustaksi, sitten tokenisoidaan ja sisennetään uudelleen kahden välilyönnin syvyysseurannalla ja määrittely-kaksoispisteen tunnistuksella, jotta property: value -kaksoispisteet erotetaan valitsinkaksoispisteistä kuten a:hover.
- 3Gzip-kokoarvioTulosteen tuottamisen jälkeen selaimen natiivia CompressionStream-rajapintaa käytetään tuloksen pakkaamiseen gzipillä ja tuloksena olevan tavumäärän mittaamiseen. Tämä antaa realistisen siirtokokoarvion, joka vastaa sitä, mitä gzip-pakkausta käyttävä verkkopalvelin lähettäisi verkon yli.
- 4Kopioi tai lataaKäsitelty CSS kirjoitetaan leikepöydälle Clipboard-rajapinnan kautta, tai ladataan tiedostona styles.min.css (tiivistystila) tai styles.css (kaunistustila) käyttäen Blobia MIME-tyypillä text/css. Koon pienentymisprosentti näytetään reaaliajassa kirjoittaessasi.
Liittyvät työkalut
SVG-optimoija ja -pienentäjä
Poista metatiedot, tiivistä välilyönnit ja pyöristä desimaalit SVG-tiedostokoon merkittäväksi pienentämiseksi — tyypilliset vähennykset 30–70 %. Visuaalinen esikatselu varmistaa, ettei mitään rikkoudu.
CSS-kaunistaja
Muotoile minifioitu CSS selkeästi tasaisella sisennyksellä tai minifioi se. Valinnainen ominaisuuksien aakkosjärjestys ennustettaviin diffeihin.
JSON-muotoilu
Muotoile, validoi, minimoi ja tutki JSON-dataa. Puunäkymä, syntaksin korostus ja yhden klikkauksen kopiointi.