ਮੁਫ਼ਤ CSS ਮਿਨੀਫਾਇਰ ਅਤੇ ਸੁੰਦਰੀਕਰਨ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਇਹ ਟੂਲ ਪੂਰੀ ਤਰ੍ਹਾਂ JavaScript ਵਿੱਚ ਬਣਿਆ ਹੱਥ ਨਾਲ ਲਿਖਿਆ, ਬਿਨਾਂ-ਨਿਰਭਰਤਾ CSS tokenizer ਵਰਤਦਾ ਹੈ — ਕੋਈ ਬਾਹਰੀ ਲਾਇਬ੍ਰੇਰੀ, ਕੋਈ ਸਰਵਰ ਕਾਲ ਨਹੀਂ। tokenizer ਕੋਈ ਵੀ ਬਦਲਾਅ ਲਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਹਰ ਅੱਖਰ ਨੂੰ code, comment, quoted string, ਜਾਂ url() ਮੁੱਲ ਵਜੋਂ ਵਰਗੀਕ੍ਰਿਤ ਕਰਦਾ ਹੈ, ਜੋ ਖ਼ਾਲੀ-ਥਾਂ ਨਿਯਮਾਂ ਨੂੰ string ਸਮੱਗਰੀ, data URIs, ਜਾਂ calc() expressions ਖ਼ਰਾਬ ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ।

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 ਵਿੱਚ ਲਗਾਤਾਰ ਖ਼ਾਲੀ ਥਾਂ ਇੱਕ ਸਪੇਸ ਵਿੱਚ ਸਮੇਟੀ ਜਾਂਦੀ ਹੈ, ਅਤੇ { } : ; , > ~ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਦੀ ਖ਼ਾਲੀ ਥਾਂ ਹਟਾਈ ਜਾਂਦੀ ਹੈ। + ਅਤੇ - ਦੇ ਆਲੇ-ਦੁਆਲੇ ਸਪੇਸਾਂ ਜਾਣਬੁੱਝ ਕੇ ਛੱਡੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਤਾਂ ਜੋ calc() expressions ਨਾ ਟੁੱਟਣ। Beautify ਮੋਡ ਵਿੱਚ, code ਪਹਿਲਾਂ ਇੱਕ ਸਾਫ਼ ਆਧਾਰ ਤੱਕ minify ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਫਿਰ ਦੋ-ਸਪੇਸ ਡੂੰਘਾਈ ਟ੍ਰੈਕਿੰਗ ਅਤੇ declaration-colon ਪਛਾਣ ਨਾਲ ਮੁੜ tokenize ਅਤੇ indent ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ property: value colons ਨੂੰ a:hover ਵਰਗੇ selector colons ਤੋਂ ਵੱਖ ਕੀਤਾ ਜਾ ਸਕੇ।
3. 3
   Gzip ਆਕਾਰ ਅੰਦਾਜ਼ਾ

   ਆਉਟਪੁੱਟ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ, ਨਤੀਜੇ ਨੂੰ gzip ਨਾਲ ਕੰਪ੍ਰੈੱਸ ਕਰਕੇ ਬਾਈਟ ਗਿਣਤੀ ਮਾਪਣ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਮੂਲ CompressionStream API ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਇੱਕ ਯਥਾਰਥਵਾਦੀ ਟ੍ਰਾਂਸਫ਼ਰ-ਆਕਾਰ ਅੰਦਾਜ਼ਾ ਦਿੰਦਾ ਹੈ ਜੋ gzip ਕੰਪ੍ਰੈਸ਼ਨ ਵਾਲੇ ਵੈੱਬ ਸਰਵਰ ਦੁਆਰਾ ਨੈੱਟਵਰਕ 'ਤੇ ਭੇਜੇ ਜਾਣ ਵਾਲੇ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ।
4. 4
   ਕਾਪੀ ਜਾਂ ਡਾਊਨਲੋਡ ਕਰੋ

   ਪ੍ਰੋਸੈਸ ਕੀਤੀ CSS Clipboard API ਰਾਹੀਂ ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਲਿਖੀ ਜਾਂਦੀ ਹੈ, ਜਾਂ MIME type text/css ਵਾਲੇ Blob ਨਾਲ styles.min.css (minify ਮੋਡ) ਜਾਂ styles.css (beautify ਮੋਡ) ਵਜੋਂ ਡਾਊਨਲੋਡ ਹੁੰਦੀ ਹੈ। ਆਕਾਰ ਘਟਣ ਦੀ ਪ੍ਰਤੀਸ਼ਤ ਟਾਈਪ ਕਰਦੇ ਹੀ ਲਾਈਵ ਦਿਸਦੀ ਹੈ।

ਸੰਬੰਧਿਤ ਟੂਲ