സൗജന്യ CSS മിനിഫയർ & ബ്യൂട്ടിഫയർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഈ ടൂൾ പൂർണ്ണമായും JavaScript-ൽ നിർമ്മിച്ച ഒരു കൈകൊണ്ട് എഴുതിയ, സീറോ-ഡിപെൻഡൻസി CSS ടോക്കണൈസർ ഉപയോഗിക്കുന്നു — ബാഹ്യ ലൈബ്രറികളില്ല, സെർവർ കോളുകളില്ല. ടോക്കണൈസർ ഏത് ട്രാൻസ്ഫോർമേഷനും പ്രയോഗിക്കുന്നതിന് മുമ്പ് ഓരോ ക്യാരക്ടറും കോഡ്, കമന്റ്, quoted സ്ട്രിംഗ്, അല്ലെങ്കിൽ url() മൂല്യമായി വർഗ്ഗീകരിക്കുന്നു, ഇത് വൈറ്റ്‌സ്പേസ് നിയമങ്ങൾ സ്ട്രിംഗ് ഉള്ളടക്കങ്ങളെയോ ഡാറ്റ URI-കളെയോ calc() എക്സ്പ്രഷനുകളെയോ കേടുവരുത്തുന്നത് തടയുന്നു.

1. 1
   ടോക്കണൈസേഷൻ പാസ്

   ഇൻപുട്ട് CSS ക്യാരക്ടർ-ബൈ-ക്യാരക്ടർ സ്കാൻ ചെയ്ത് ടൈപ്പ് ചെയ്ത ടോക്കണുകളായി വിഭജിക്കുന്നു: അസംസ്കൃത കോഡ് സെഗ്മെന്റുകൾ, /* ... */ കമന്റുകൾ, quoted സ്ട്രിംഗുകൾ (escape sequences സൂക്ഷിച്ചുകൊണ്ട്), url(...) ബ്ലോക്കുകൾ. ഇത് അടുത്ത ഘട്ടത്തിലെ ട്രാൻസ്ഫോർമേഷനുകൾ യഥാർത്ഥ CSS സിന്റാക്സിനെ മാത്രമേ സ്പർശിക്കൂ എന്ന് ഉറപ്പാക്കുന്നു — ഒരു സ്ട്രിംഗ് ലിറ്ററലിന്റെയോ ഡാറ്റ URI-യുടെയോ ഉള്ളടക്കങ്ങളെ ഒരിക്കലുമല്ല.
2. 2
   മിനിഫിക്കേഷൻ അല്ലെങ്കിൽ ബ്യൂട്ടിഫിക്കേഷൻ

   Minify മോഡിൽ, സാധാരണ കമന്റുകൾ ഒഴിവാക്കുന്നു (/*! license */ കമന്റുകൾ സൂക്ഷിക്കുന്നു), കോഡ് ടോക്കണുകളിലെ വൈറ്റ്‌സ്പേസ് റണ്ണുകൾ ഒറ്റ സ്പേസുകളാക്കി ചുരുക്കുന്നു, { } : ; , > ~ എന്നിവയ്ക്ക് ചുറ്റുമുള്ള വിരാമചിഹ്ന-സമീപ വൈറ്റ്‌സ്പേസ് നീക്കം ചെയ്യുന്നു. + ഉം - ഉം ചുറ്റുമുള്ള സ്പേസുകൾ calc() എക്സ്പ്രഷനുകൾ തകർക്കാതിരിക്കാൻ ബോധപൂർവ്വം അതേപടി വിടുന്നു. Beautify മോഡിൽ, കോഡ് ആദ്യം ഒരു ശുദ്ധമായ ബേസ്ലൈനിലേക്ക് minify ചെയ്യുന്നു, പിന്നെ property: value കോളണുകളെ a:hover പോലുള്ള സെലക്ടർ കോളണുകളിൽ നിന്ന് വേർതിരിക്കാൻ രണ്ട്-സ്പേസ് ഡെപ്ത്ത് ട്രാക്കിംഗും ഡിക്ലറേഷൻ-കോളൺ കണ്ടെത്തലും ഉപയോഗിച്ച് വീണ്ടും ടോക്കണൈസ് ചെയ്ത് വീണ്ടും ഇൻഡന്റ് ചെയ്യുന്നു.
3. 3
   Gzip വലുപ്പ എസ്റ്റിമേറ്റ്

   ഔട്ട്പുട്ട് നിർമ്മിച്ച ശേഷം, ബ്രൗസറിന്റെ native CompressionStream API ഫലം gzip ഉപയോഗിച്ച് കംപ്രസ്സ് ചെയ്ത് ഫലമായ ബൈറ്റ് കൗണ്ട് അളക്കാൻ ഉപയോഗിക്കുന്നു. gzip കംപ്രഷനുള്ള ഒരു വെബ് സെർവർ നെറ്റ്‌വർക്കിലൂടെ അയക്കുന്നതിനോട് പൊരുത്തപ്പെടുന്ന ഒരു യാഥാർത്ഥ്യമായ ട്രാൻസ്ഫർ-വലുപ്പ എസ്റ്റിമേറ്റ് ഇത് നൽകുന്നു.
4. 4
   പകർത്തുക അല്ലെങ്കിൽ ഡൗൺലോഡ് ചെയ്യുക

   പ്രോസസ്സ് ചെയ്ത CSS Clipboard API വഴി ക്ലിപ്ബോർഡിലേക്ക് എഴുതപ്പെടുന്നു, അല്ലെങ്കിൽ text/css MIME ടൈപ്പുള്ള ഒരു Blob ഉപയോഗിച്ച് styles.min.css (minify മോഡ്) അല്ലെങ്കിൽ styles.css (beautify മോഡ്) ആയി ഡൗൺലോഡ് ചെയ്യുന്നു. നിങ്ങൾ ടൈപ്പ് ചെയ്യുമ്പോൾ വലുപ്പ കുറവിന്റെ ശതമാനം തത്സമയം കാണിക്കുന്നു.

അനുബന്ധ ടൂളുകൾ