CSS Formatter at Minifier

Paano mag-format o mag-minify ng CSS

1. I-paste ang iyong stylesheet, o i-click ang Buksan ang file para mag-load ng .css file (hanggang 10 MB).
2. Piliin ang Indentation (2 espasyo, 4 na espasyo o tab) at kung gusto mo ng Blangkong linya sa pagitan ng mga rule.
3. I-click ang I-format (beautify) para sa nababasang code, o I-minify para sa pinakamaliit na bersyon.
4. Sa minification, panatilihing naka-check ang Pagsamahin ang mga rule kapag nagmi-minify para sa pinakamahusay na resulta, at ang Panatilihin ang /! mga komento / para mapanatili ang mga license header.
5. Kopyahin o i-download ang resulta. Ipinapakita ng status line ang laki bago at pagkatapos, sa byte, at ang porsyentong natipid.

Kung may kulang na brace, titigil ang tool at sasabihin kung aling linya ang hindi naisarang { o sobrang }, sa halip na gumawa ng sirang output.

Beautify: nababasa at pare-parehong CSS

Ang I-format (beautify) ay gumagamit ng js-beautify, ang formatter na nasa maraming code editor. Inilalagay nito ang bawat declaration sa sarili nitong linya, ini-indent ang laman ng bawat rule at ng mga at-rule gaya ng @media at @supports, isinusulat ang bawat selector ng grupo sa sarili nitong linya, at nagdaragdag ng espasyo pagkatapos ng colon ng bawat declaration. Pinananatili ang mga umiiral na blangkong linya (hanggang isa lang nang sunud-sunod), kaya nananatiling kita ang mga lohikal na seksyon ng iyong file. Hindi kailanman binabago ng formatter ang mga value, ang pagkakasunod ng mga rule o ang kahulugan ng mga selector: whitespace lang ang binabago nito.

Kapaki-pakinabang ito para basahin ang minified na CSS ng isang website, suriin ang stylesheet na gawa ng isang tool, o linisin ang file na inedit ng ilang tao na magkakaiba ang gawi.

Minify: mas maliit na CSS gamit ang csso

Ang I-minify ay gumagamit ng csso (CSS Optimizer), isang structural minifier. Bukod sa pag-aalis ng whitespace at komento, isinusulat nito ang stylesheet sa katumbas ngunit mas maikling anyo:

• pinaiikli ang mga kulay (ang #ff0000 ay nagiging red, ang #ffffff ay nagiging #fff);
• pinasisimple ang mga unit at zero (ang 0px ay nagiging 0, ang 0.5em ay nagiging .5em);
• inaalis ang mga duplicate na declaration at pinagsasama ang mga shorthand property kapag ligtas;
• kapag naka-on ang Pagsamahin ang mga rule kapag nagmi-minify, pinagsasama-sama ang mga rule na magkapareho ang declaration (ang a{color:red} b{color:red} ay nagiging a,b{color:red}) at inaalis ang mga na-override na declaration.

Ligtas ang restructuring para sa mga normal na stylesheet, pero inililipat nito ang mga declaration. Kung umaasa ang iyong CSS sa napakatiyak na pagkakasunod ng cascade, halimbawa mga browser hack, alisin ang check sa opsyon: pipigain na lang ng csso ang bawat rule sa kinalalagyan nito.

Inaalis ang mga komento, maliban sa mga “mahalagang” komento na nagsisimula sa /*!, na karaniwang gamit para sa mga lisensya. Alisin ang check sa Panatilihin ang /! mga komento / para alisin din ang mga iyon.

Laki bago at pagkatapos

Inihahambing ng status line ang laki ng input at ng resulta sa UTF-8 byte. Karaniwang mas malaki ang beautified na code kaysa sa orihinal; ang minified na code ay karaniwang nakakatipid ng 20 hanggang 50% sa sulat-kamay na CSS. Tandaan na kino-compress din ng mga server ang mga file gamit ang gzip o Brotli, kaya mas maliit ang natitipid sa transfer kaysa sa raw na bilang, pero binabawasan pa rin ng minification ang oras ng pag-parse at ang laki ng mga naka-cache na file.