CSS-muotoilija
Kaunista CSS puhtaalla sisennyksella, tai pienenna se kutistaaksesi tiedostokokoa. Kasittelee media-kyselyt, calc():n ja lisenssikommentit.
Liittyvat tyokalut
Nain kaytat tyokalua CSS-muotoilija
- 01
Liita CSS:si syotekenttaan.
- 02
Valitse Kaunista muotoillaksesi sen tai Pienenna pakataksesi sen.
- 03
Valitse sisennyskoko, kopioi sitten tulos.
Mitä CSS-muotoilija tekee
CSS-muotoilija selkeyttää tyylitiedoston siistillä ja yhtenäisellä sisennyksellä tai pienentää tiedostokokoa tiivistämällä sen. Valitse selkeytyksen sisennyskoko ja vaihda tiivistykseen, kun haluat mahdollisimman pienen tuloksen.
Milloin kannattaa selkeyttää ja milloin tiivistää
Luettavaa CSS-koodia on helpompi silmäillä, tarkistaa ja korjata. Kun jokainen sääntö ja määrittely sisennetään yhtenäisesti, valitsimet, sisäkkäisyys ja mediakyselyjen rakenne näkyvät heti.
Tiivistys on tarkoitettu tuotantoon. Se poistaa välilyönnit ja kommentit, joita selain ei tarvitse, joten tiedosto latautuu nopeammin. Suuressa tyylitiedostossa säästö kasvaa merkittäväksi, etenkin ennen palvelimen gzip-pakkausta.
Varovainen tiivistys calc()-lausekkeissa ja mediakyselyissä
Tiivistin toimii varovasti tärkeissä kohdissa. Se säilyttää plus- ja miinusmerkkien ympärillä olevat välit calc()-lausekkeissa, joten calc(100% - 30px) pysyy kelvollisena. Se poistaa välit vain rakenteellisten merkkien, kuten aaltosulkeiden, kaksoispisteiden ja puolipisteiden ympäriltä. Myös sisäkkäiset mediakyselyt käsitellään oikein.
Lisenssikommentit säilytetään
Muodossa /*! ... */ kirjoitetut lisenssikommentit säilytetään. Tämä on vakiintunut tapa säilyttää tekijänoikeus- ja lisenssi-ilmoitukset tiivistetyssä tuloksessa, vaikka tavalliset kommentit poistetaan.
Toimii selaimessasi
Sekä selkeytys että tiivistys tapahtuvat kokonaan selaimessasi, joten tyylitiedostosi ei poistu laitteeltasi. Työkalu muotoilee luettavuutta ja kokoa varten, mutta ei tarkista CSS-koodin oikeellisuutta.
Usein kysytyt kysymykset
Rikkooko pienentaminen calc()-lausekkeet?
Ei. Pienennin sailyttaa valilyonnit plus- ja miinusmerkkien ymparilla arvojen sisalla, joten calc(100% - 30px) pysyy kelvollisena. Se poistaa vain valilyonnit rakenteellisten merkkien kuten aaltosulkeiden, kaksoispisteiden ja puolipisteiden ymparilta.
Poistetaanko kommentit pienennettaessa?
Tavalliset kommentit poistetaan tilan saastamiseksi, mutta lisenssikommentit muodossa /*! ... */ sailytetaan, mika on vakiokaytanto tekijanoikeusilmoitusten sailyttamiseen.
Ladataanko CSS:ani minnekaan?
Ei. Seka kaunistaminen etta pienentaminen tapahtuvat kokonaan selaimessasi, joten tyylitiedostosi eivat koskaan poistu laitteeltasi.