मोफत CSS मिनिफायर आणि ब्युटिफायर

हे कसे कार्य करते

हे साधन पूर्णपणे JavaScript मध्ये बनवलेला गराज-लिहिलेला, शून्य-अवलंबित्व CSS tokenizer वापरते — बाह्य लायब्ररी, सर्व्हर कॉल नाही. Tokenizer कोणतेही रूपांतरण लावण्याआधी प्रत्येक अक्षराला code, comment, quoted string, किंवा url() मूल्य म्हणून वर्गीकृत करतो, जे whitespace नियमांना string सामग्री, data URIs, किंवा calc() अभिव्यक्ती नष्ट करण्यापासून रोखते.

1. 1
   Tokenization पास

   इनपुट CSS अक्षरशः स्कॅन केले जाते आणि typed tokens मध्ये विभागले जाते: कच्चे code सेगमेंट्स, /* ... */ comments, quoted strings (escape sequences जपत), आणि url(...) blocks. हे सुनिश्चित करते की पुढच्या टप्प्यातील रूपांतरणे फक्त प्रत्यक्ष CSS सिंटॅक्सला स्पर्श करतात — string literal किंवा data URI च्या सामग्रीला कधीच नाही.
2. 2
   Minification किंवा beautification

   minify मोडमध्ये, सामान्य comments काढले जातात (/*! license */ comments ठेवले जातात), code tokens मधील whitespace गट एकल जागेत संकुचित होतात, आणि { } : ; , > ~ भोवतीचे विरामचिन्हे-निगडित whitespace काढले जाते. calc() अभिव्यक्ती तुटू नये म्हणून + आणि - भोवतीच्या जागा जाणीवपूर्वक तशाच ठेवल्या जातात. beautify मोडमध्ये, code आधी स्वच्छ baseline मध्ये minify केला जातो, नंतर property: value colons ला a:hover सारख्या selector colons पासून वेगळे करण्यासाठी दोन-जागा depth ट्रॅकिंग आणि declaration-colon detection ने पुन्हा tokenized आणि पुन्हा indented केला जातो.
3. 3
   Gzip आकार अंदाज

   आउटपुट तयार केल्यानंतर, निकाल gzip ने कॉम्प्रेस करण्यासाठी आणि परिणामी बाइट संख्या मोजण्यासाठी ब्राउझरचे native CompressionStream API वापरले जाते. यामुळे gzip कॉम्प्रेशन असलेला वेब सर्व्हर नेटवर्कवर काय पाठवेल याच्याशी जुळणारा वास्तववादी ट्रान्सफर-आकार अंदाज मिळतो.
4. 4
   कॉपी करा किंवा डाउनलोड करा

   प्रक्रिया केलेला CSS Clipboard API द्वारे clipboard वर लिहिला जातो, किंवा text/css MIME प्रकारासह Blob वापरून styles.min.css (minify मोड) किंवा styles.css (beautify मोड) म्हणून डाउनलोड केला जातो. तुम्ही टाइप करताच आकार-कपात टक्केवारी लाइव्ह दाखवली जाते.

संबंधित साधने