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

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

ഈ ടൂൾ പേജിലേക്ക് നേരിട്ട് നിർമ്മിച്ച ഒരു കൈകൊണ്ട് എഴുതിയ റിക്കേഴ്സീവ് പാഴ്സർ ഉപയോഗിച്ച് CSS ഫോർമാറ്റ് ചെയ്യുന്നു — മൂന്നാം കക്ഷി ലൈബ്രറിയില്ല, സെർവർ കോളില്ല. പാഴ്സർ നിങ്ങളുടെ CSS ക്യാരക്ടർ ബൈ ക്യാരക്ടർ നടക്കുന്നു, ലളിതമായ regex-അധിഷ്ഠിത സമീപനങ്ങളെ ആശയക്കുഴപ്പത്തിലാക്കുന്ന quoted സ്ട്രിംഗുകൾ, url() മൂല്യങ്ങൾ, nested at-rules, കമന്റുകൾ എന്നിവ ശരിയായി കൈകാര്യം ചെയ്യുന്നു.

1. 1
   ക്യാരക്ടർ-തല ടോക്കണൈസേഷൻ

   walkCss ഫംഗ്ഷൻ അസംസ്കൃത ഇൻപുട്ട് ഒരു സമയം ഒരു ക്യാരക്ടർ വീതം സ്കാൻ ചെയ്യുന്നു, quote സ്റ്റേറ്റും parenthesis ആഴവും ട്രാക്ക് ചെയ്യുന്നു, അതിനാൽ url(), സ്ട്രിംഗ് മൂല്യങ്ങൾ, അല്ലെങ്കിൽ കമന്റുകൾക്കുള്ളിലെ സെമികോളണുകളോ ബ്രെയ്സുകളോ ഒരിക്കലും ഘടനാപരമായ ഡീലിമിറ്ററുകളായി തെറ്റിദ്ധരിക്കപ്പെടില്ല.
2. 2
   ബ്ലോക്കും ഡിക്ലറേഷൻ വേർതിരിവും

   സ്കാനർ ഒരു ടോപ്പ്-ലെവൽ ഓപ്പണിംഗ് ബ്രെയ്സ് കണ്ടെത്തുമ്പോൾ, ഇത് പ്രിലൂഡ് (സെലക്ടർ അല്ലെങ്കിൽ at-rule കീവേഡ്) extract ചെയ്യുകയും ബ്ലോക്ക് ബോഡി റിക്കേഴ്സീവ് ആയി പ്രോസസ്സ് ചെയ്യുകയും ചെയ്യുന്നു — ഇതിൽ തന്നെ nested റൂളുകൾ (@media, @supports, native CSS nesting) ഒരു ആഴമേറിയ റിക്കേഴ്ഷൻ ഡെപ്ത്തിൽ കൈകാര്യം ചെയ്യപ്പെടാം.
3. 3
   പ്രോപ്പർട്ടി സോർട്ടിംഗും ഇൻഡന്റേഷനും

   ഓരോ ബ്ലോക്കിനുള്ളിലെയും ഡിക്ലറേഷനുകൾ ഒരു റണ്ണിലേക്ക് ശേഖരിക്കുന്നു, പിന്നെ തിരഞ്ഞെടുത്ത ഇൻഡന്റ് വീതി (2 അല്ലെങ്കിൽ 4 സ്പേസുകൾ) ഉപയോഗിച്ച് എഴുതുന്നതിന് മുമ്പ് ഓപ്ഷണലായി പ്രോപ്പർട്ടി പേരനുസരിച്ച് അക്ഷരമാലാ ക്രമത്തിൽ സോർട്ട് ചെയ്യുന്നു. Minify മോഡ് വൈറ്റ്‌സ്പേസ് പൂർണ്ണമായും ഒഴിവാക്കുകയും കമന്റുകൾ നീക്കം ചെയ്യുകയും ചെയ്യുന്നു.
4. 4
   തത്സമയ ബ്രൗസർ ഔട്ട്പുട്ട്

   ഒരു useMemo hook വഴി നിങ്ങൾ ടൈപ്പ് ചെയ്യുമ്പോൾ ഫലങ്ങൾ പ്രത്യക്ഷപ്പെടുന്നു — ഒന്നും എവിടെയും അയക്കപ്പെടില്ല. ഫോർമാറ്റ് ചെയ്തതോ minify ചെയ്തതോ ആയ CSS ക്ലിപ്ബോർഡിലേക്ക് പകർത്താം അല്ലെങ്കിൽ ഒരു .css ഫയലായി ഡൗൺലോഡ് ചെയ്യാം, പാനൽ ഒറിജിനലുമായി താരതമ്യം ചെയ്ത വലുപ്പ വ്യത്യാസം കാണിക്കുന്നു.

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