Kuinka pienentää CSS:ää turvallisesti

Miten se toimii

Pienennös poistaa /* kommentit */, tiivistää välilyönnit yhteen välilyöntiin, poistaa välilyönnit rakenteellisten välimerkkien ympäriltä, ​​kuten { } : ; , > ja pudottaa viimeisen puolipisteen ennen sulkevaa aaltosuljetta. Se ei nimeä uudelleen valitsimia, yhdistä sääntöjä tai järjestä sarjaa uudelleen.

• Konservatiivinen minifier: se ei poista käyttämättömiä sääntöjä tai kirjoita arvoja uudelleen. Testaa tyylisivu aina uudelleen jälkeenpäin.

Miksi sillä on merkitystä

Jokainen renderöinnin estävän CSS:n kilotavu viivästää ensimmäistä maalia. Minifikaatio on halvin käytettävissä oleva voitto käyttämättömien sääntöjen poistamisen jälkeen, ja työkaluun, joka koskettaa vain todistetusti tarpeettomia merkkejä, voidaan luottaa rakennusvaiheessa ilman, että tyylitaulukkoa määritetään uudelleen.

Toimiva esimerkki

Sääntö, joka on kirjoitettu muodossa .card { color: red; täyte: 10px 20px; } muuttuu .card{color:red;padding:10px 20px}, mikä säästää muutamia kymmeniä tavuja sääntöä kohden ja paljon enemmän todellisessa tyylitaulukossa.

Yleisiä virheitä

• Poistetaan välilyönnit + ja - ympäriltä calc():n sisällä, mitä spesifikaatio vaatii.
• Pienennetään SCSS tai LESS käännetyn CSS:n sijaan.
• Ohitetaan visuaalinen tarkistus pienentämisen jälkeen.

Käytännön vinkkejä

Pidä pienentämätön lähde versionhallinnassa ja pienennä koontitulosteena. Jos käytät mukautettuja ominaisuuksia varaosien kanssa, vertaa laskettuja tyylejä DevToolsissa ennen ja jälkeen – sarja säilyy, mutta yksi kadonnut tila voi muuttaa arvon jäsentämistä.

Kuinka käyttää sitä

1. Avaa työkalu. Kaikki toimii selaimesi välilehdessä.
2. Liitä tai kirjoita syöte ja valitse sitten haluamasi toiminto.
3. Tarkista tulos ja kopioi se yhdellä napsautuksella.

Avaa työkalu

Yleisiä kysymyksiä