JUANDESK
TalaanMga ToolGabayTungkol
FILEN

CSS Minifier

[ PINALIIT NA CSS ]
/*! (c) 2026 Example — licence notice, kept */ .card .title{color:#abc;margin:0 .5em;width:calc(100% - 20px)}.card>.body{padding:8px}.card::after{content:"two spaces"}
72 bytes saved — 29.8%% smaller
Bago242 B
Pagkatapos170 B
Natipid29.8%
[ ANO ANG GINAWA ]
Komentong inalis1
Komento ng lisensyang pinanatili1
Byte bago242
Byte pagkatapos170
Nothing is reordered or merged. Two rules with the same selector are left as two, and declarations keep their order — the cascade depends on it, and a minifier that reorders is rewriting your stylesheet rather than shrinking it.
Spaces inside calc, clamp, min and max were kept. They are REQUIRED there: calc(100% - 20px) is valid and calc(100%-20px) is not, because -20px would read as a signed length rather than a subtraction.
1 licence comment beginning /*! was kept. That form is the long-standing convention for a notice that must survive minification, and removing one from a stylesheet that carries a licence is the only deletion here with legal consequences.
Text inside quotes was left exactly as it is, spaces included. A minifier that squeezes whitespace everywhere changes what a content property actually renders.
[ ANO ITO ]

May tatlong lugar kung saan mahalaga ang espasyo sa CSS, at bawat isa ay paraan ng pagkasira ng stylesheet.

Ang bare space ay descendant combinator. Ang .a .b ay tumutugma sa .b sa loob ng .a; ang .a.b ay tumutugma sa elementong may dalawang klase. Ang pagtanggal ng espasyong iyon ay nagbabago kung aling elemento ang tinatamaan.

Sa loob ng panipi, ang content: "a  b" ay may dalawang espasyo na lumalabas sa pahina.

At sa calc(), kailangan ang espasyo: wasto ang calc(100% - 20px) at hindi ang calc(100%-20px), dahil mababasang may-tandang haba ang -20px at hindi pagbabawas.

Walang pinagsasama o inaayos ang pagkakasunod. Nakasalalay sa pagkakasunod ang cascade.

[ MGA TANONG ]

Bakit walang JavaScript minifier dito?

Dahil ibang antas ng problema ito. Kailangan ng tunay na parser sa pagpapaliit ng JavaScript — pagsusuri ng scope, awtomatikong paglalagay ng semicolon, pagkilala sa regular expression laban sa paghahati — at ang 95% na tama ay tahimik na sumisira sa script ng iba. Walang katumbas na bitag ang CSS: patag ang balarila, walang saysay ang espasyo maliban sa ilang malinaw na lugar, at lokal ang bawat pagbabago dito.

Bakit nanatili ang espasyo sa pagitan ng mga selector ko?

Dahil ang hubad na espasyo ay descendant combinator, at may kahulugan ito. Ang “.a .b” ay tumutugma sa .b na nasa loob ng .a; ang “.a.b” ay tumutugma sa elementong may dalawang klase. Ang pagtanggal sa espasyong iyon ay nagbabago kung aling elemento ang tinatamaan ng panuntunan — ito ang pinakamapaminsalang ginagawa ng pabayang CSS minifier. Tinatanggal ang espasyo sa paligid ng >, + at ~, dahil malinaw ang mga combinator na iyon.

Bakit hindi ginagalaw ang mga espasyo sa calc()?

Dahil kailangan sila. Wasto ang calc(100% - 20px) at hindi ang calc(100%-20px) — kapag walang espasyo, ang -20px ay nababasang haba na may tanda at hindi pagbabawas, at ibinabagsak ng browser ang buong deklarasyon. Ganoon din sa loob ng clamp, min at max.

Tatanggalin ba nito ang aking licence header?

Hindi kung nagsisimula ito sa /*! — matagal nang kumbensiyon ang anyong iyon para sa komentong kailangang makaligtas sa pagpapaliit, at ginagalang ito ng bawat minifier. Ito ang iisang pagtanggal dito na may bunga sa batas, kaya pinapanatili ito bilang default at sinasabi ng pahina kapag may pinanatili ito. Tinatanggal ang karaniwang /* na komento.

Pinagsasama ba nito ang doblehing panuntunan para makatipid pa?

Hindi, sinasadya. Nakasalalay sa pagkakasunod ang cascade — ang dalawang panuntunang may parehong selector ay ipinapatong nang sunod-sunod, at nananalo ang huling deklarasyon. Ang minifier na nagsasama o nag-aayos muli ay isinusulat na muli ang stylesheet mo at hindi pinapaliit, at hindi sulit ang dagdag na tipid sa uri ng bug na dulot nito.

Paano naman ang teksto sa content property ko?

Iniiwan itong eksaktong gaya ng dati, espasyo at lahat. Ang content: "a b" ay nagpapakita ng dalawang espasyo, kaya ang pagpiga sa espasyo sa loob ng string ay nagbabago ng lumalabas sa pahina. Hindi rin pinapaikli ang hex na kulay sa loob ng string, sa parehong dahilan.

[ ANG KOMPUTASYON ]
Anong espasyo ang nananatili
.a .bnananatili — descendant
.a > .btinatanggal — tahasan
calc(100% - 20px)nananatili — kailangan
content: "a  b"nananatili — nilalaman
[ BAKIT WALANG JAVASCRIPT MINIFIER ]

Ang pagpapaliit ng JavaScript ay nangangailangan ng tunay na parser — scope analysis, automatic semicolon insertion, ang pagkakaiba ng regex at paghahati. Ang 95% na tama doon ay tahimik na sumisira ng script. Walang ganoong bitag ang CSS.

[ SUSUNOD ]
65XML at HTML FormatterThe markup the stylesheet is for
70Colour ConverterFor the hex values inside it
43JSON FormatterMinify in the other direction too
51Bilang ng Salita at KarakterByte counts for anything else
[ MAHALAGA ]

Runs entirely in your browser; nothing is transmitted. Nothing is reordered or merged — the cascade depends on order. Licence comments beginning with an exclamation mark are kept by default. Walang ipinapadala sa mga server namin ang tina-type mo rito — sa browser mo tumatakbo nang buo ang pagkuwenta.