ਮੁਫ਼ਤ CSS ਸੁੰਦਰੀਕਰਨ

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

ਇਹ ਟੂਲ ਪੰਨੇ ਵਿੱਚ ਹੀ ਬਣੇ ਹੱਥ ਨਾਲ ਲਿਖੇ recursive parser ਨਾਲ CSS ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ — ਕੋਈ ਤੀਜੀ-ਧਿਰ ਲਾਇਬ੍ਰੇਰੀ, ਕੋਈ ਸਰਵਰ ਕਾਲ ਨਹੀਂ। parser ਤੁਹਾਡੀ CSS ਨੂੰ ਅੱਖਰ-ਦਰ-ਅੱਖਰ ਪੜ੍ਹਦਾ ਹੈ, quoted strings, url() ਮੁੱਲ, nested at-rules, ਅਤੇ comments ਨੂੰ ਸਹੀ ਸੰਭਾਲਦਾ ਹੈ ਜੋ ਸਰਲ regex-ਅਧਾਰਿਤ ਤਰੀਕਿਆਂ ਨੂੰ ਉਲਝਾ ਦੇਣਗੇ।

1. 1
   ਅੱਖਰ-ਪੱਧਰੀ tokenization

   walkCss function ਕੱਚੇ ਇਨਪੁੱਟ ਨੂੰ ਇੱਕ-ਇੱਕ ਅੱਖਰ ਕਰਕੇ ਸਕੈਨ ਕਰਦਾ ਹੈ, quote ਸਥਿਤੀ ਅਤੇ ਬ੍ਰੈਕਟ ਡੂੰਘਾਈ ਟ੍ਰੈਕ ਕਰਦੇ ਹੋਏ ਤਾਂ ਜੋ url(), string ਮੁੱਲਾਂ, ਜਾਂ comments ਅੰਦਰਲੇ ਸੈਮੀਕੋਲਨ ਜਾਂ braces ਕਦੇ ਬਣਤਰੀ ਵਿਭਾਜਕ ਨਾ ਸਮਝੇ ਜਾਣ।
2. 2
   Block ਅਤੇ declaration ਵੱਖਰੇ ਕਰਨਾ

   ਜਦੋਂ ਸਕੈਨਰ ਨੂੰ ਉੱਪਰਲੇ-ਪੱਧਰ ਦਾ ਖੁੱਲ੍ਹਦਾ brace ਮਿਲਦਾ ਹੈ, ਇਹ prelude (selector ਜਾਂ at-rule keyword) ਕੱਢਦਾ ਹੈ ਅਤੇ block body ਨੂੰ recursively ਪ੍ਰੋਸੈਸ ਕਰਦਾ ਹੈ — ਜਿਸ ਵਿੱਚ ਖੁਦ nested rules (@media, @supports, native CSS nesting) ਹੋ ਸਕਦੇ ਹਨ ਜੋ ਡੂੰਘੀ recursion 'ਤੇ ਸੰਭਾਲੇ ਜਾਂਦੇ ਹਨ।
3. 3
   Property ਛਾਂਟੀ ਅਤੇ indentation

   ਹਰ block ਅੰਦਰਲੇ declarations ਇਕੱਠੇ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਫਿਰ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ property ਨਾਮ ਮੁਤਾਬਕ ਵਰਣਮਾਲਾ ਕ੍ਰਮ ਵਿੱਚ ਛਾਂਟ ਕੇ ਚੁਣੀ indent ਚੌੜਾਈ (2 ਜਾਂ 4 ਸਪੇਸਾਂ) ਨਾਲ ਲਿਖੇ ਜਾਂਦੇ ਹਨ। Minify ਮੋਡ ਖ਼ਾਲੀ ਥਾਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡਦਾ ਹੈ ਅਤੇ comments ਹਟਾਉਂਦਾ ਹੈ।
4. 4
   ਤੁਰੰਤ ਬ੍ਰਾਊਜ਼ਰ-ਅੰਦਰ ਆਉਟਪੁੱਟ

   ਨਤੀਜੇ useMemo hook ਰਾਹੀਂ ਟਾਈਪ ਕਰਦੇ ਹੀ ਦਿਸਦੇ ਹਨ — ਕੁਝ ਵੀ ਕਿਤੇ ਨਹੀਂ ਭੇਜਿਆ ਜਾਂਦਾ। ਫਾਰਮੈਟ ਕੀਤੀ ਜਾਂ minified CSS ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਜਾਂ .css ਫ਼ਾਈਲ ਵਜੋਂ ਡਾਊਨਲੋਡ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ, ਅਤੇ ਪੈਨਲ ਅਸਲ ਦੇ ਮੁਕਾਬਲੇ ਆਕਾਰ ਦਾ ਫ਼ਰਕ ਦਿਖਾਉਂਦਾ ਹੈ।

ਸੰਬੰਧਿਤ ਟੂਲ