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.

Indent
Compression
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.

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.