CSS Beautifier & Minifier

I-reindent ang magulong CSS para madaling basahin, o i-minify para sa mas maliit na file — may safe mode na hindi kailanman nagbabago sa pagkakasunod-sunod ng iyong mga rule.

CSS input

Indent
Compression
styles.css
I-paste o i-type ang CSS upang i-beautify o i-minify ito.

Ang iyong CSS ay pino-format at mini-minify sa loob ng iyong browser. Walang ina-upload sa BroBroGo.

FAQ

Ano ang pagkakaiba ng beautify at minify?

Inaayos ng Beautify ang mga indent at espasyo ng iyong mga style para madali itong basahin at i-edit. Kabaligtaran naman ang ginagawa ng Minify — inaalis nito ang mga whitespace at comment na hindi kailangan ng browser at pinapaikli ang mga value tulad ng mga kulay, para mas maliit ang file at mas mabilis mag-load. Gamitin ang Beautify habang nagtatrabaho, at Minify bago i-publish.

Ano ang ginagawa ng mga setting ng compression na Safe at Optimized?

Ang Safe ay nag-aalis lamang ng mga whitespace at comment at nagpapaikli ng mga value, habang pinapanatili ang bawat rule sa eksaktong posisyon nito. Mas agresibo naman ang Optimized dahil pinagsasama nito ang mga duplicate na selector at rule para sa mas maliit na file — maaari nitong baguhin ang pagkakasunod-sunod ng mga rule, kaya para sa mga stylesheet na umaasa sa source order, makabubuting suriin muna ito bago i-publish. Ang mga comment na may markang /*! … */ ay pinapanatili sa parehong mode.

Mababago ba ng pag-minify ang hitsura ng aking page?

Sa Safe mode, hindi — magre-render ang iyong mga style sa eksaktong parehong paraan. Pinagsasama nito ang mga whitespace, inaalis ang mga ordinaryong comment, at isinusulat muli ang mga value sa mas maikling katumbas na anyo (tulad ng #ffffff bilang #fff), at hindi nito kailanman binabago ang iyong mga vendor prefix o modernong syntax. Pinagsasama rin ng Optimized mode ang mga rule, na mukhang magkapareho sa halos lahat ng stylesheet ngunit dapat i-verify kung nakadepende ang sa iyo sa pagkakasunod-sunod ng mga rule.

Isinulat at sinuri ng editorial team ng BroBroGo.Huling na-update:

Ang Layunin ng CSS Beautifier & Minifier

Ang CSS Beautifier & Minifier ay isang tool na idinisenyo upang baguhin ang anyo ng iyong CSS code. May kakayahan itong i-reformat ang code upang mas madali itong basahin at i-edit, o kaya ay i-condense ito upang mapaliit ang laki ng file para sa mas mabilis na pag-load ng website.

Sa pamamagitan ng tool na ito, maaari mong piliin kung paano ipoproseso ang iyong CSS, at pagkatapos ay maaari mong kopyahin ang resulta o i-download ito bilang isang file. Ang tool na ito ay kapaki-pakinabang para sa mga front-end developer, mga taong nagpapanatili ng mga umiiral na stylesheet, mga user na kailangang mabilis na magbasa ng compressed CSS, mga user na gustong mag-reindent ng magugulong stylesheet upang madaling basahin, at mga user na gustong magpaliit ng mga stylesheet para sa production nang hindi nababago ang hitsura ng page.

Mga Input at Pagpipilian sa Pag-format

Upang magamit ang tool, ilalagay ang code sa CSS input. Maaari mong i-paste o i-type ang CSS dito, na may limitasyon sa laki na hanggang 500,000 character.

May dalawang pangunahing opsyon para sa pag-format ng iyong code:

  • Indent: Maaari mong piliin ang laki ng indentation gamit ang sumusunod na mga opsyon:
    • 2 spaces
    • 4 spaces
    • tab
  • Compression: Kung nais mong i-minify ang code, maaari kang pumili sa dalawang antas ng compression:
    • Safe: Ang mode na ito ay nag-aalis lamang ng mga whitespace at comment at nagpapaikli ng mga value, habang pinapanatili ang bawat rule sa eksaktong posisyon kung saan ito isinulat. Sa mode na ito, ang mga vendor prefix at modernong syntax ay hindi binabago.
    • Optimized: Pinagsasama nito ang mga duplicate na selector at rule para sa mas maliit na file, na maaaring magbago sa pagkakasunod-sunod ng mga rule.

Mga Output at Sukat ng Code

Matapos maproseso ang iyong CSS, ipapakita ng tool ang mga sumusunod na impormasyon at opsyon:

  • Mga Linya: Ang kabuuang bilang ng mga linya sa naprosesong CSS.
  • Mga Character: Ang kabuuang bilang ng mga character sa naprosesong CSS.
  • Laki (Size): Ang UTF-8 byte size ng naprosesong CSS.
  • Na-minify — mas maliit nang {pct}%: Ang indicator na ito ay lalabas kapag ang CSS ay na-minify na, na nagpapakita ng porsyento ng nabawas sa laki ng file.
  • I-download na button: Nagbibigay-daan upang i-download ang naprosesong CSS bilang isang file na may pangalang styles.css.
  • Copy button: Kinokopya ang naprosesong CSS sa iyong clipboard.

Mga Panuntunan at Espesyal na Kaso sa Pagproseso

Ang CSS Beautifier & Minifier ay sumusunod sa mga partikular na panuntunan kapag nagpoproseso ng code:

  • Pagpapanatili ng mga Comment: Ang mga comment na may markang /*! … */ ay hindi tinatanggal at pinapanatili sa parehong Safe at Optimized na compression.
  • Beautifying: Kapag ginamit ang pag-beautify, muling inaayos ng tool ang indentation at nilalagyan ng tamang espasyo ang mga style upang maging madaling basahin.
  • Minifying: Kapag nag-minify, tinatanggal ng tool ang mga whitespace at hindi importanteng comment, at pinapaikli ang mga value tulad ng mga kulay (halimbawa, ang #ffffff ay isinusulat bilang #fff).
  • Mga Error at Limitasyon:
    • Kung walang laman ang input, ipapakita ng tool ang mensaheng: "Walang nahanap na CSS para i-minify — pakisuri kung may mga error sa syntax ang input."
    • Kung ang inilagay na CSS ay hindi kayang iproseso, lalabas ang mensaheng: "Hindi ma-proseso ang CSS na ito."
    • Kung ang input ay lumampas sa 500,000 character, ipapakita ang error na: "Masyadong malaki ang stylesheet na ito para iproseso. Subukan ang mas maliit."
    • Kung ang input ay may nilalaman ngunit walang nalilikhang code ang minifier, ito ay nagpapahiwatig ng problema sa syntax ng inilagay na CSS.

Proteksyon sa Data at Privacy

Ang iyong privacy ay pinangangalagaan habang ginagamit ang tool na ito. Ang iyong CSS ay pino-format at mini-minify sa loob ng iyong browser. Walang anumang data o code ang ina-upload sa BroBroGo.

Mga Madalas Itanong (FAQ)

Ano ang pagkakaiba ng beautify at minify?

Inaayos ng Beautify ang mga indent at espasyo ng iyong mga style para madali itong basahin at i-edit. Kabaligtaran naman ang ginagawa ng Minify — inaalis nito ang mga whitespace at comment na hindi kailangan ng browser at pinapaikli ang mga value tulad ng mga kulay, para mas maliit ang file at mas mabilis mag-load. Gamitin ang Beautify habang nagtatrabaho, at Minify bago i-publish.

Ano ang ginagawa ng mga setting ng compression na Safe at Optimized?

Ang Safe ay nag-aalis lamang ng mga whitespace at comment at nagpapaikli ng mga value, habang pinapanatili ang bawat rule sa eksaktong posisyon nito. Mas agresibo naman ang Optimized dahil pinagsasama nito ang mga duplicate na selector at rule para sa mas maliit na file — maaari nitong baguhin ang pagkakasunod-sunod ng mga rule, kaya para sa mga stylesheet na umaasa sa source order, makabubuting suriin muna ito bago i-publish. Ang mga comment na may markang /*! … */ ay pinapanatili sa parehong mode.

Mababago ba ng pag-minify ang hitsura ng aking page?

Sa Safe mode, hindi — magre-render ang iyong mga style sa eksaktong parehong paraan. Pinagsasama nito ang mga whitespace, inaalis ang mga ordinaryong comment, at isinusulat muli ang mga value sa mas maikling katumbas na anyo (tulad ng #ffffff bilang #fff), at hindi nito kailanman binabago ang iyong mga vendor prefix o modernong syntax. Pinagsasama rin ng Optimized mode ang mga rule, na mukhang magkapareho sa halos lahat ng stylesheet ngunit dapat i-verify kung nakadepende ang sa iyo sa pagkakasunod-sunod ng mga rule.

HTML Beautifier & MinifierI-reindent ang magulong HTML para madaling basahin, o i-minify para sa mas mabilis na pag-load — may opsyonal na pagsusuri para sa mga sirang tag.SVG OptimizerLinisin ang SVG code at paliitin ito nang hindi binabago ang hitsura ng graphic.JavaScript Beautifier & MinifierI-reindent ang minified o obfuscated na JavaScript para mabasa mo ito, o i-minify ang sarili mong code para sa mas maliit na file.CSS clamp() CalculatorMaglagay ng sukat para sa maliliit at malalaking screen at kumuha ng fluid na clamp() value na maayos na nag-i-scale sa pagitan — para sa mga sukat ng font, padding, margin o gap.Gradient GeneratorBumuo ng linear, radial, o conic na gradient, magdagdag ng mga color stop at i-set ang direksyon, pagkatapos ay kopyahin ang CSS sa isang click lang.Box Shadow GeneratorI-drag ang mga slider para humubog ng box-shadow, magpatong ng mga layer para sa lalim, at kopyahin ang natapos na CSS agad-agad.Color ConverterMag-convert ng mga kulay sa pagitan ng HEX, RGB, HSL, HSV, CMYK, at LAB — i-edit ang kahit anong field at ang iba ay mag-a-update habang nagpapatuloy ka.JSON FormatterI-format, i-validate, at i-minify ang JSON sa isang iglap.