CSS-muotoilija ja -pienentäjä

Näin muotoilet tai pienennät CSS:ää

1. Liitä tyylitiedostosi tai napsauta Avaa tiedosto ladataksesi .css-tiedoston (enintään 10 Mt).
2. Valitse Sisennys (2 välilyöntiä, 4 välilyöntiä tai sarkain) ja se, haluatko Tyhjän rivin sääntöjen väliin.
3. Napsauta Muotoile (siisti) saadaksesi luettavaa koodia tai Pienennä saadaksesi pienimmän version.
4. Pienennystä varten pidä Yhdistä säännöt pienennettäessä rastittuna parhaan tuloksen saamiseksi ja Säilytä /*! kommentit */ rastittuna, jotta lisenssiotsikot säilyvät.
5. Kopioi tai lataa tulos. Tilarivi näyttää koon ennen ja jälkeen tavuina sekä säästetyn prosenttiosuuden.

Jos aaltosulku puuttuu, työkalu pysähtyy ja kertoo, millä rivillä sulkematon { tai ylimääräinen } on, sen sijaan että tuottaisi rikkinäistä tulosta.

Siistiminen: luettava ja yhtenäinen CSS

Muotoile (siisti) käyttää js-beautifyta, jota monet koodieditorit käyttävät muotoilijana. Se asettaa jokaisen määrityksen omalle rivilleen, sisentää jokaisen säännön sisällön sekä at-sääntöjen, kuten @media ja @supports, sisällön, kirjoittaa ryhmän jokaisen valitsimen omalle rivilleen ja lisää välilyönnin jokaisen määrityksen kaksoispisteen jälkeen. Olemassa olevat tyhjät rivit säilyvät (enintään yksi peräkkäin), joten tiedostosi loogiset osiot pysyvät näkyvissä. Muotoilija ei koskaan muuta arvoja, sääntöjen järjestystä tai valitsimien merkitystä: se muuttaa vain tyhjiä merkkejä.

Tämä on hyödyllistä, kun luet verkkosivun pienennettyä CSS:ää, tarkastat työkalun tuottamaa tyylitiedostoa tai siivoat tiedoston, jota usea ihminen on muokannut eri tavoin.

Pienennys: pienempi CSS csso:lla

Pienennä käyttää csso:ta (CSS Optimizer), rakenteellista pienentäjää. Tyhjien merkkien ja kommenttien poistamisen lisäksi se kirjoittaa tyylitiedoston vastaavaan, lyhyempään muotoon:

• värit lyhenevät (#ff0000 muuttuu muotoon red, #ffffff muotoon #fff);
• yksiköt ja nollat yksinkertaistuvat (0px muuttuu muotoon 0, 0.5em muotoon .5em);
• päällekkäiset määritykset poistetaan ja lyhennetyt ominaisuudet yhdistetään, kun se on turvallista;
• Yhdistä säännöt pienennettäessä -valinnalla säännöt, joilla on samat määritykset, ryhmitellään (a{color:red} b{color:red} muuttuu muotoon a,b{color:red}) ja ohitetut määritykset pudotetaan.

Uudelleenjärjestely on turvallista tavallisille tyylitiedostoille, mutta se siirtää määrityksiä. Jos CSS:säsi nojaa hyvin tiettyyn kaskadijärjestykseen, esimerkiksi selainkikkoihin, poista valinta: silloin csso pakkaa jokaisen säännön vain paikallaan.

Kommentit poistetaan lukuun ottamatta ”tärkeitä” kommentteja, jotka alkavat merkinnällä /*! ja joita käytetään yleisesti lisensseihin. Poista Säilytä /*! kommentit */ -valinta, jos haluat poistaa nekin.

Koko ennen ja jälkeen

Tilarivi vertaa syötteen ja tuloksen kokoa UTF-8-tavuina. Siistitty koodi on yleensä alkuperäistä suurempaa. Pienennetty koodi säästää käsin kirjoitetussa CSS:ssä tyypillisesti 20–50 %. Muista, että palvelimet pakkaavat tiedostot myös gzipillä tai Brotlilla, joten siirron säästö on raakalukua pienempi, mutta pienennys lyhentää silti jäsennysaikaa ja välimuistissa olevien tiedostojen kokoa.