Käyttöohje

Liitä CSS syöttökenttään, avaa .css-tiedosto tai kokeile esimerkkiä.
Valitse Kaunista, jos haluat luettavaa koodia, tai Minifioi pienintä tulosta varten.
Kaunistaessasi valitse 2 välilyöntiä, 4 välilyöntiä tai sarkaimet.
Kopioi tulos tai lataa se .css-tiedostona. Jos aaltosulkeet tai lainausmerkit ovat parittomat, virhe näyttää rivin ja sarakkeen.

Näin se toimii

Muotoilija pilkkoo tyylitiedoston ensin tokeneihin: yksi- tai kaksinkertaisilla lainausmerkeillä olevat merkkijonot, url(…)-arvot, kommentit, aaltosulkeet ja puolipisteet. Koska merkkijonot ja url()-arvot ovat yksittäisiä tokeneita, data URI:n sisällä oleva puolipiste tai content: ”{ }” -arvossa oleva aaltosulje ei koskaan sekoita rakennetta, ja niiden sisältö kopioidaan sellaisenaan.

Beautify sijoittaa valitsinlistan jokaisen valitsimen omalle rivilleen, lisää välilyönnit lapsi-, sisarus- ja vierekkäisyysyhdistäjien (>, ~, +) ympärille ja kirjoittaa jokaisen määrittelyn muodossa ”ominaisuus: arvo;” omalle rivilleen. @media-, @supports-, @layer- ja @container-lohkot sekä CSS:n natiivit sisäkkäiset rakenteet sisennetään yhden tason kutakin syvyystasoa kohden. Lohkon viimeisen määrittelyn jälkeinen puuttuva puolipiste lisätään. Kommentit säilytetään paikoillaan.

Minify poistaa kommentit (paitsi /*! … */ -lisenssimerkinnät), tiivistää tyhjätilan, poistaa välilyönnit aaltosulkeiden, kaksoispisteiden, puolipisteiden, pilkkujen ja valitsinyhdistäjien ympäriltä ja pudottaa puolipisteen ennen jokaista sulkevaa aaltosuljetta. Merkityksen muuttavat välilyönnit säilytetään: jälkeläisyhdistäjä kohdassa ”.a .b”, välilyönti kohdassa ”a :focus” ja välilyönnit arvoissa, kuten calc(100% - 2px). ”! important” normalisoidaan muotoon ”!important”.

Työkalu ei kirjoita arvoja uudelleen: värit, yksiköt ja nollat säilytetään sellaisina kuin ne on kirjoitettu, eikä sääntöjä yhdistetä tai järjestetä uudelleen. SCSS- tai Less-tiedostot, joissa on pelkkää sisäkkäisyyttä, toimivat yleensä, mutta niiden omaa syntaksia, kuten //-rivikommentteja tai mixinejä, ei ymmärretä.

Esimerkit

Minifioidun framework-tiedoston lukeminen

Liitä yksirivinen bootstrap.min.css-ote ja valitse Beautify 2 välilyönnillä nähdäksesi jokaisen säännön, media-kyselyt ja niiden sisäkkäiset säännöt erillisillä, sisennetyillä riveillä.

Käsin kirjoitetun tyylitiedoston julkaiseminen

Minifioi 12 KB:n tyylitiedosto, jossa on kommentteja ja sisennyksiä, ennen kuin lisäät sen inline-muodossa sähköpostipohjaan tai sivun head-osioon. Yhteenveto näyttää merkkimäärän ennen ja jälkeen.

Puuttuvan aaltosulkeen löytäminen

Tyylitiedosto lakkaa vaikuttamasta puolivälissä. Muotoilija ilmoittaa ”Tämä { ei koskaan sulkeudu vastaavalla }” ja näyttää sen säännön rivin, josta puuttuu sulkeva aaltosulje.

Usein kysytyt kysymykset

Onko tämän työkalun minifioima CSS turvallista käyttää tuotannossa?

Se poistaa vain kommentit ja tyhjät merkit, jotka CSS jättää huomiotta, joten säännöt toimivat samalla tavalla. Se ei tee build-työkalujen syvempiä optimointeja, kuten sääntöjen yhdistämistä tai värien lyhentämistä, joten tulos voi olla hieman suurempi kuin niiden tuottama.

Miksi välilyönti säilytetään kohdassa ”a :focus”?

Valitsimessa välilyönti on jälkeläiskombinaattori. ”a :focus” tarkoittaa linkin sisällä olevaa fokusoitua elementtiä, kun taas ”a:focus” tarkoittaa fokusoitua linkkiä. Välilyönnin poistaminen muuttaisi sitä, mitkä elementit täsmäävät.

Voiko sillä muotoilla SCSS:ää tai Lessiä?

Tavalliset sisäkkäiset säännöt muotoillaan oikein. Esikäsittelijöiden omaa syntaksia, kuten //-kommentteja, argumentillisia mixinejä tai @if-lohkoja, ei tunnisteta, joten tulos voi muotoitua oudosti – tarkista se.

Poistetaanko lisenssikommentit minifioitaessa?

Kommentit, jotka alkavat merkillä /*!, säilytetään. Tämä on tavallinen käytäntö lisenssi- ja tekijänoikeustiedoille. Kaikki muut kommentit poistetaan.

Tietosuoja

CSS käsitellään vain selaimessasi. Mitään ei ladata, tallenneta tai sisällytetä analytiikkaan.