Ninawezaje kupunguza CSS mtandaoni bila kusakinisha chochote?

Bandika CSS yako kwenye CSS ya Ingizo, au dondosha faili ya .css, kisha ubofye Punguza CSS. Maoni na nafasi tupu za ziada huondolewa, na unaweza Kunakili matokeo au Kuyapakua kama styles.min.css.

Je, kipunguza CSS huhifadhi maoni ya leseni na data URI bila kuziharibu?

Ndiyo. Maoni ya kawaida hutupwa, lakini maoni ya /*! license */ huhifadhiwa. Mifuatano iliyo ndani ya nukuu, thamani za url() na data URI hutenganishwa tokeni tofauti, kwa hivyo kanuni za nafasi tupu hazizibadilishi.

Ninawezaje kubadilisha CSS iliyopunguzwa kuwa msimbo unaosomeka?

Bofya Pamba CSS badala ya Punguza CSS. Msimbo huingizwa upya kwa nafasi mbili kwa kila kiwango, na nukta pacha za kichagua kama a:hover hutofautishwa na nukta pacha za sifa. Pakua huuhifadhi kama styles.css.

Nambari ya gzip iliyo kando ya upunguzaji inamaanisha nini?

Ni makadirio ya ukubwa wa matokeo baada ya mbano wa gzip, yanayopimwa kwa CompressionStream API ya kivinjari. Kivinjari chako kisipokuwa na API hiyo, ukubwa wa gzip hauonyeshwi.

Je, CSS yangu hutumwa kwa seva ninapoipunguza?

Hapana. Upunguzaji hufanywa na kichanganuzi tokeni cha JavaScript kinachoendeshwa kwenye kivinjari chako, bila maktaba ya nje. Hakuna kinachopakiwa, kwa hivyo unaweza kuitumia kwa mitindo ya kibinafsi.

Ndiyo. Kila zana ni bure kutumia, bila akaunti na bila kadi ya mkopo. Kazi inafanyika kwenye kifaa chako badala ya seva zetu, jambo linaloiwezesha kuwa bure kutumika.

Je, inafanya kazi kwenye simu?

Ndiyo. Inafanya kazi kwenye vivinjari vya kisasa vya simu vya iOS na Android, bila kusakinisha chochote.

🗜️

Kipunguzi & Kiboresha cha CSS bila malipo

Punguza CSS kupunguza ukubwa wa faili au iboreshe CSS iliyopunguzwa kwa usomekaji. Wa haraka, kwenye kivinjari chako.

Inafanya kazi kwenye kivinjari chakoHakuna usajili, hakuna madirisha ibukiziHakuna kuingia kinachohitajikaBure milele

Inafanya kazi bila mtandao mara ikishapakia

au dondosha faili la .css hapa chini

Dondosha faili la .css hapa, au bonyeza ili kuvinjari

CSS · kuchakatwa kwenye kifaa chako

au bonyeza Ctrl+V ili kubandika kutoka ubao wa kunakili

Vinjari faili

Ingiza CSS

Matokeo ya CSS

Matokeo yataonekana hapa…

Matumizi ya kawaida

Minify CSS kwa Production DeploymentPunguza CSS file size kabla ya kukamatia kwa uzalishaji - ukurasa haraka inakamatia na gharama ya bandwidth.
Beautify Minified CSS kwa DebuggingMuundo compressed au minified CSS ndani ya code inayoweza kusomeka ili kuweza kukamatia na kukamatia fashions.
Minify CSS kwa Email TemplatesCompact CSS kwa HTML email templates mahali pa file size na inline style bloat maswali.
Minify CSS kwa WordPress ThemesPunguza ukubwa wa stylesheet wa tema ya WordPress kwa ajili ya alama za PageSpeed.
Beautify CSS kwa Code ReviewMuundo CSS file yoyote ndani ya safi indented inayoweza kusomeka code tayari kwa review na ushirikiano.

Jinsi Inavyofanya Kazi

Kifaa hiki kinatumia kichambuzi cha CSS kilichoandikwa mwenyewe, kisicho na utegemezi, kilichojengwa kikamilifu kwa JavaScript — hakuna maktaba za nje, hakuna wito wa seva. Kichambuzi kinaainisha kila herufi kama msimbo, maoni, mfuatano wa alama za nukuu, au thamani ya url() kabla ya kutumia mabadiliko yoyote, jambo linalozuia sheria za nafasi tupu kuharibu maudhui ya mfuatano, data URI, au misemo ya calc().

1
Hatua ya ugawaji
CSS ya uingizaji inachambuliwa herufi-kwa-herufi na kugawanywa kuwa vitambulisho vilivyoainishwa: sehemu za msimbo ghafi, maoni /* ... */, mifuatano ya alama za nukuu (ikihifadhi mfuatano wa kutoroka), na vizuizi vya url(...). Hii inahakikisha kwamba mabadiliko katika hatua inayofuata yanagusa sintaksia halisi ya CSS pekee — kamwe si maudhui ya herufi ya mfuatano au data URI.
2
Kupunguza au kupamba
Katika hali ya minify, maoni ya kawaida yanaondolewa (maoni ya /*! license */ yanawekwa), mfuatano wa nafasi tupu kwenye vitambulisho vya msimbo vinabanwa kuwa nafasi moja, na nafasi tupu iliyo karibu na alama za uakifishaji kuzunguka { } : ; , > ~ inaondolewa. Nafasi kuzunguka + na - zinaachwa kwa makusudi ili kuepuka kuharibu misemo ya calc(). Katika hali ya beautify, msimbo kwanza unapunguzwa kuwa msingi safi, kisha kutambulishwa upya na kuwekwa nafasi tena kwa ufuatiliaji wa kina wa nafasi mbili na utambuzi wa koloni ya tamko kutofautisha koloni za property: value na koloni za kichagua kama a:hover.
3
Makadirio ya ukubwa wa Gzip
Baada ya kutoa matokeo, CompressionStream API ya asili ya kivinjari inatumika kubana matokeo kwa gzip na kupima idadi ya baiti inayotokana. Hii inatoa makadirio halisi ya ukubwa wa uhamishaji unaolingana na kile seva ya wavuti yenye ubanaji wa gzip ingetuma kwenye mtandao.
4
Nakili au pakua
CSS iliyochakatwa inaandikwa kwenye clipboard kupitia Clipboard API, au kupakuliwa kama styles.min.css (hali ya minify) au styles.css (hali ya beautify) kwa kutumia Blob yenye aina ya MIME text/css. Asilimia ya upunguzaji wa ukubwa inaonyeshwa moja kwa moja unapoandika.

Zana Zinazohusiana

✨

Kiboresha & Kipunguzi cha SVG

Ondoa metadata, punguza nafasi, na pungua desimali ili kupunguza kwa kiasi kikubwa ukubwa wa faili ya SVG — upunguzaji wa kawaida wa 30-70%. Hakiki ya kuona inathibitisha hakuna kinachoharibiwa.

JaribuFaili ni za ndani

🎨

Kiboresha cha CSS

Panga CSS iliyobanwa kwa mpangilio wa nafasi unaolingana, au ibane. Upangaji wa sifa kwa herufi za alfabeti ni hiari, kwa tofauti zinazotabirika.

Jaribu

📋

Muundo wa JSON

Fomati, thibitisha, punguza, na uchunguze data ya JSON. Mwonekano wa mti, uangaziaji wa sintaksia, na nakala ya mbofyo mmoja.