CSS ਬਿਊਟੀਫਾਈ ਕਰੋ _

CSS ਬਿਊਟੀਫਿਕੇਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ

ਬਿਊਟੀਫਾਇਰ ਤੁਹਾਡੀ ਸਟਾਈਲਸ਼ੀਟ ਨੂੰ ਅੱਖਰ-ਦਰ-ਅੱਖਰ ਪੜ੍ਹਦਾ ਹੈ, ਹਰ ਬਲਾਕ ਕਿੰਨੀ ਡੂੰਘਾਈ ਤੇ nested ਹੈ ਇਹ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਸ ਨੂੰ ਇਕਸਾਰ spacing ਨਾਲ ਮੁੜ ਛਾਪਦਾ ਹੈ। ਇਹ ਕਦੇ ਨਹੀਂ ਬਦਲਦਾ ਕਿ ਸਟਾਈਲ ਕੀ ਕਰਦੀਆਂ ਹਨ — ਸਿਰਫ਼ ਇਹ ਕਿ ਫਾਈਲ ਵਿੱਚ ਉਹ ਕਿਵੇਂ ਦਿਖਦੀਆਂ ਹਨ।

1. ਟੋਕਨਾਈਜ਼ ਕਰੋ. ਲਾਇਬ੍ਰੇਰੀ ਤੁਹਾਡੇ ਇਨਪੁੱਟ ਨੂੰ token ਦੀ ਇੱਕ ਧਾਰਾ ਵਿੱਚ ਸਕੈਨ ਕਰਦੀ ਹੈ: selectors, property ਨਾਮ, values, at-rules, comments, ਅਤੇ ਉਹ ਬ੍ਰੇਸ, ਕੌਲਨ, ਅਤੇ ਸੈਮੀਕੋਲਨ ਜੋ ਉਹਨਾਂ ਨੂੰ ਵੱਖ ਕਰਦੇ ਹਨ। Strings ਅਤੇ url() values ਨੂੰ ਇੱਕ ਇਕਾਈ ਵਜੋਂ ਪਛਾਣਿਆ ਜਾਂਦਾ ਹੈ, ਇਸ ਲਈ content property ਦੇ ਅੰਦਰਲੇ ਬ੍ਰੇਸ ਨੂੰ ਕਦੇ ਵੀ block delimiter ਵਜੋਂ ਗਲਤ ਨਹੀਂ ਸਮਝਿਆ ਜਾਂਦਾ।
2. Nesting ਟ੍ਰੈਕ ਕਰੋ. ਜਿਵੇਂ ਇਹ token ਧਾਰਾ ਉੱਤੇ ਚੱਲਦਾ ਹੈ, ਬਿਊਟੀਫਾਇਰ ਇੱਕ ਚਾਲੂ indent level ਰੱਖਦਾ ਹੈ। ਕੋਈ ਵੀ ਖੁੱਲ੍ਹਣ ਵਾਲਾ ਬ੍ਰੇਸ level ਨੂੰ ਡੂੰਘਾ ਧੱਕਦਾ ਹੈ, ਚਾਹੇ ਉਹ rule block ਦਾ ਹੋਵੇ, media query ਦਾ ਹੋਵੇ, ਜਾਂ keyframes block ਦਾ, ਅਤੇ ਹਰ ਬੰਦ ਹੋਣ ਵਾਲਾ ਬ੍ਰੇਸ ਉਸ ਨੂੰ ਵਾਪਸ ਪੌਪ ਕਰਦਾ ਹੈ। ਉਹ ਡੂੰਘਾਈ ਤੈਅ ਕਰਦੀ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਵਾਪਸ ਮਿਲਣ ਵਾਲੀ ਹਰ ਲਾਈਨ ਅੱਗੇ ਕਿੰਨੀਆਂ indent ਇਕਾਈਆਂ ਬੈਠਦੀਆਂ ਹਨ।
3. ਆਪਣੇ ਵਿਕਲਪ ਲਾਗੂ ਕਰੋ. ਤੁਹਾਡੀ indent ਚੋਣ (2 ਸਪੇਸ, 4 ਸਪੇਸ, ਜਾਂ ਇੱਕ ਟੈਬ) ਇੱਕ level ਦੀ ਚੌੜਾਈ ਸੈੱਟ ਕਰਦੀ ਹੈ। ਬ੍ਰੇਸ-ਸ਼ੈਲੀ ਸੈਟਿੰਗ ਤੈਅ ਕਰਦੀ ਹੈ ਕਿ ਖੁੱਲ੍ਹਣ ਵਾਲਾ ਬ੍ਰੇਸ ਆਪਣੇ ਅੱਗੇ ਵਾਲੇ selector ਨਾਲ ਚਿੰਬੜੇ ਜਾਂ ਆਪਣੀ ਵੱਖਰੀ ਲਾਈਨ ਉੱਤੇ ਉੱਤਰੇ। ਬਾਕੀ ਟੌਗਲ rule blocks ਵਿਚਕਾਰ ਇੱਕ ਖਾਲੀ ਲਾਈਨ ਜੋੜਦੇ ਹਨ ਅਤੇ ਸਮੂਹਬੱਧ selectors ਨੂੰ ਵੱਖਰੀਆਂ ਲਾਈਨਾਂ ਉੱਤੇ ਵੰਡਦੇ ਹਨ।
4. ਮੁੜ ਛਾਪੋ. ਅੰਤ ਵਿੱਚ formatter token ਨੂੰ ਉਸ indentation ਅਤੇ line breaks ਨਾਲ ਵਾਪਸ ਛਾਪਦਾ ਹੈ ਜੋ ਉਸ ਨੇ ਕੱਢੇ, ਹਰ ਲਾਈਨ ਉੱਤੇ ਇੱਕ declaration ਅਤੇ ਹਰ ਕੌਲਨ ਤੋਂ ਬਾਅਦ ਇੱਕੋ ਸਪੇਸ ਰੱਖਦਾ। ਨਤੀਜਾ ਉਹੀ ਸਟਾਈਲਸ਼ੀਟ ਹੈ, ਇਸ ਤਰ੍ਹਾਂ ਵਿਛਾਈ ਕਿ ਇੱਕ ਮਨੁੱਖ cascade ਸਕੈਨ ਕਰ ਸਕੇ।

CSS ਕਿਉਂ ਬਿਊਟੀਫਾਈ ਕਰੋ

• ਮਿਨੀਫਾਈਡ ਸਟਾਈਲਸ਼ੀਟ ਪੜ੍ਹੋ. ਉਤਪਾਦਨ CSS ਨਿਯਮਾਂ ਵਿਚਕਾਰ ਕੋਈ spacing ਤੋਂ ਬਿਨਾਂ ਇੱਕ ਲਾਈਨ ਉੱਤੇ ਭੇਜੀ ਜਾਂਦੀ ਹੈ। ਬਿਊਟੀਫਾਈ ਕਰਨ ਨਾਲ line breaks ਅਤੇ indentation ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਤਾਂ ਜੋ ਤੁਸੀਂ layout bug ਪਿੱਛੇ ਵਾਲਾ selector ਲੱਭ ਸਕੋ ਅਤੇ source map ਤੋਂ ਬਿਨਾਂ ਵੀ ਇਹ ਵੇਖ ਸਕੋ ਕਿ ਇਹ ਠੀਕ-ਠੀਕ ਕਿਹੜੇ declarations ਸੈੱਟ ਕਰਦਾ ਹੈ।
• ਬੇਮੇਲ ਫਾਈਲਾਂ ਸੁਥਰੀਆਂ ਕਰੋ. ਜਿਸ ਸਟਾਈਲਸ਼ੀਟ ਨੂੰ ਕਈ ਲੋਕਾਂ ਨੇ ਛੂਹਿਆ ਹੋਵੇ ਉਹ ਮਿਲਵੀਂ indentation ਅਤੇ ਬ੍ਰੇਸ ਸ਼ੈਲੀਆਂ ਵਿੱਚ ਭਟਕ ਜਾਂਦੀ ਹੈ। ਬਿਊਟੀਫਾਇਰ ਰਾਹੀਂ ਇੱਕ ਪਾਸ ਪੂਰੀ ਫਾਈਲ ਨੂੰ ਇੱਕੋ ਖਾਕੇ ਉੱਤੇ ਆਮ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਅਗਲਾ diff ਖਾਲੀ ਥਾਂ ਦੇ ਰੌਲੇ ਦੀ ਬਜਾਏ ਅਸਲ cascade ਤਬਦੀਲੀਆਂ ਦਿਖਾਉਂਦਾ ਹੈ।
• ਇਹ ਟੂਲ ਤੁਹਾਡੇ ਪੇਜ ਉੱਤੇ ਬੋਝ ਨਹੀਂ ਪਾਉਂਦਾ. ਜ਼ਿਆਦਾਤਰ ਔਨਲਾਈਨ formatters ਪੇਜ ਖੋਲ੍ਹਦੇ ਹੀ ਆਪਣੀ ਪੂਰੀ ਲਾਇਬ੍ਰੇਰੀ ਲੋਡ ਕਰ ਲੈਂਦੇ ਹਨ। ਇਹ js-beautify ਨੂੰ ਸਿਰਫ਼ ਉਦੋਂ lazy-load ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਬਿਊਟੀਫਾਈ ਕਲਿੱਕ ਕਰਦੇ ਹੋ ਜਾਂ Live mode ਚਾਲੂ ਕਰਦੇ ਹੋ, ਇਸ ਲਈ ਪੇਜ ਖੋਲ੍ਹਣ ਦਾ ਖਰਚ ਕੁਝ ਸੌ ਦੀ ਬਜਾਏ ਕੁਝ ਕਿਲੋਬਾਈਟ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਸ਼ੁਰੂਆਤੀ render ਤੇਜ਼ ਰਹਿੰਦਾ ਹੈ।
• ਕੁਝ ਵੀ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਨਹੀਂ ਛੱਡਦਾ. ਬਿਊਟੀਫਾਇਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਡਿਵਾਈਸ ਉੱਤੇ ਚੱਲਦਾ ਹੈ। ਤੁਹਾਡੀ CSS ਕਦੇ ਵੀ server ਉੱਤੇ upload ਨਹੀਂ ਹੁੰਦੀ, ਜੋ ਉਦੋਂ ਮਾਅਨੇ ਰੱਖਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਜਾਂਚ ਰਹੀ ਸਟਾਈਲਸ਼ੀਟ ਕਿਸੇ client ਦੀ ਹੋਵੇ, ਅੰਦਰੂਨੀ class ਨਾਮ ਰੱਖਦੀ ਹੋਵੇ, ਜਾਂ ਗੁਪਤਤਾ ਸਮਝੌਤੇ ਅਧੀਨ ਆਉਂਦੀ ਹੋਵੇ।

ਆਮ ਵਰਤੋਂ

CSS ਬਿਊਟੀਫਾਈ ਕਰਨਾ ਉਦੋਂ ਆਉਂਦਾ ਹੈ ਜਦੋਂ ਕਿਸੇ ਨੂੰ ਅਜਿਹੀ ਸਟਾਈਲਸ਼ੀਟ ਪੜ੍ਹਨੀ ਪਵੇ ਜੋ ਪੜ੍ਹਨ ਲਈ ਨਹੀਂ ਲਿਖੀ ਗਈ ਸੀ।

• ਉਤਪਾਦਨ ਡੀਬੱਗ ਕਰਨਾ: Network ਟੈਬ ਵਿੱਚੋਂ ਖਿੱਚੀ ਮਿਨੀਫਾਈਡ ਸਟਾਈਲਸ਼ੀਟ ਪੇਸਟ ਕਰੋ ਤਾਂ ਜੋ ਉਹ ਨਿਯਮ ਮਿਲੇ ਜੋ ਤੁਹਾਡੇ ਉਮੀਦ ਕੀਤੇ layout ਨੂੰ overriding ਕਰ ਰਿਹਾ ਹੈ।
• ਕੋਡ ਰਿਵਿਊ ਦੀ ਤਿਆਰੀ: pull request ਖੋਲ੍ਹਣ ਤੋਂ ਪਹਿਲਾਂ contributor ਦੀ ਬੇਮੇਲ-ਇੰਡੈਂਟ ਹੋਈ ਸਟਾਈਲਸ਼ੀਟ ਮੁੜ ਫਾਰਮੈਟ ਕਰੋ ਤਾਂ ਜੋ reviewers cascade ਤਬਦੀਲੀਆਂ ਵੇਖਣ, layout ਦਾ ਰੌਲਾ ਨਹੀਂ।
• ਸਿੱਖਣਾ ਅਤੇ ਆਡਿਟ ਕਰਨਾ: framework ਜਾਂ component-library ਸਟਾਈਲਸ਼ੀਟ ਨੂੰ expand ਕਰੋ ਤਾਂ ਜੋ ਇਸ ਦੇ selectors, media queries, ਅਤੇ custom properties ਕਿਵੇਂ ਬਣੇ ਹਨ ਇਸ ਦਾ ਅਧਿਐਨ ਹੋਵੇ।

ਇੱਕ ਕੰਮ ਕੀਤੀ ਉਦਾਹਰਣ

ਇੱਕ ਮਿਨੀਫਾਈਡ ਇੱਕ-ਲਾਈਨ ਲਓ: a{color:red;margin:0}b{padding:0}। ਇਸ ਨੂੰ ਉੱਪਰ indentation 2 ਸਪੇਸ ਅਤੇ ਬ੍ਰੇਸ ਸ਼ੈਲੀ Collapse ਸੈੱਟ ਕਰਕੇ ਪੇਸਟ ਕਰੋ, ਫਿਰ ਬਿਊਟੀਫਾਈ ਕਲਿੱਕ ਕਰੋ। ਤੁਹਾਨੂੰ ਪੜ੍ਹਨਯੋਗ blocks ਵਾਪਸ ਮਿਲਦੇ ਹਨ: a { ਆਪਣੀ ਵੱਖਰੀ ਲਾਈਨ ਉੱਤੇ, color: red; ਅਤੇ margin: 0; declarations ਹਰ ਇੱਕ ਇੱਕ level ਡੂੰਘਾ ਇੰਡੈਂਟ ਹੋਏ, ਬੰਦ ਹੋਣ ਵਾਲਾ ਬ੍ਰੇਸ selector ਦੇ ਹੇਠਾਂ ਕਤਾਰ ਵਿੱਚ, ਅਤੇ b ਨਿਯਮ ਹੇਠਾਂ ਅਨੁਸਰਣ ਕਰਦਾ। ਬ੍ਰੇਸ ਸ਼ੈਲੀ ਨੂੰ Expand ਉੱਤੇ ਬਦਲੋ ਅਤੇ ਹਰ ਖੁੱਲ੍ਹਣ ਵਾਲਾ ਬ੍ਰੇਸ ਆਪਣੀ ਵੱਖਰੀ ਲਾਈਨ ਉੱਤੇ ਉੱਤਰਦਾ ਹੈ। indentation ਨੂੰ ਟੈਬ ਉੱਤੇ ਬਦਲੋ ਅਤੇ ਹਰ level ਦੋ ਸਪੇਸ ਤੋਂ ਇੱਕ ਟੈਬ ਅੱਖਰ ਉੱਤੇ ਖਿਸਕਦਾ ਹੈ। ਸਟਾਈਲ ਇੱਕੋ ਹੀ ਹਨ; ਸਿਰਫ਼ ਖਾਕਾ ਬਦਲਦਾ ਹੈ।

FAQ

ਕੀ ਇਹ ਮੇਰੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ?

ਹਾਂ। js-beautify ਲਾਇਬ੍ਰੇਰੀ ਪਹਿਲੀ ਵਾਰ ਬਿਊਟੀਫਾਈ ਕਲਿੱਕ ਕਰਨ ਜਾਂ Live mode ਸਮਰੱਥ ਕਰਨ ਤੇ lazy-load ਹੁੰਦੀ ਹੈ, ਫਿਰ cache ਹੁੰਦੀ ਹੈ। ਤੁਹਾਡੀ CSS ਕਦੇ ਪੇਜ ਨਹੀਂ ਛੱਡਦੀ — ਕੋਈ server round-trip ਨਹੀਂ ਅਤੇ ਕੋਈ upload ਨਹੀਂ।

ਕੀ ਬਿਊਟੀਫਾਈ ਕਰਨਾ ਅਨ-ਮਿਨੀਫਾਈ ਕਰਨ ਵਾਂਗੂ ਹੈ?

ਇਹ ਪੜ੍ਹਨਯੋਗ ਫਾਰਮੈਟਿੰਗ ਵਾਪਸ ਲਿਆਉਂਦਾ ਹੈ — indentation, line breaks, ਅਤੇ spacing — ਪਰ ਇਹ ਮਿਨੀਫਿਕੇਸ਼ਨ ਨੇ ਹਟਾਈਆਂ ਟਿੱਪਣੀਆਂ ਵਾਪਸ ਨਹੀਂ ਲਿਆ ਸਕਦਾ ਜਾਂ ਅਜਿਹੀ ਕੋਈ ਬਣਤਰ ਮੁੜ ਪ੍ਰਾਪਤ ਨਹੀਂ ਕਰ ਸਕਦਾ ਜੋ ਫਾਈਲ ਵਿੱਚ ਕਦੇ ਸੀ ਹੀ ਨਹੀਂ। ਇਹ ਸਿਰਫ਼ ਮੌਜੂਦ declarations ਅਤੇ selectors ਨੂੰ ਮੁੜ ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ।

ਕੀ ਬਿਊਟੀਫਾਈ ਕਰਨ ਨਾਲ ਮੇਰੀਆਂ ਸਟਾਈਲ ਕਿਵੇਂ ਰੈਂਡਰ ਹੁੰਦੀਆਂ ਹਨ ਉਹ ਬਦਲੇਗਾ?

ਨਹੀਂ। ਬਿਊਟੀਫਿਕੇਸ਼ਨ ਸਿਰਫ਼ ਖਾਲੀ ਥਾਂ ਅਤੇ line breaks ਜੋੜਦਾ ਅਤੇ ਹਟਾਉਂਦਾ ਹੈ; cascade ਨੂੰ ਛੂਹਿਆ ਨਹੀਂ ਜਾਂਦਾ ਅਤੇ ਪੇਜ ਇੱਕੋ ਜਿਹਾ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ। Property order, specificity, ਅਤੇ values ਸਭ ਠੀਕ-ਠੀਕ ਉਸੇ ਤਰ੍ਹਾਂ ਰਹਿੰਦੇ ਹਨ ਜਿਵੇਂ ਤੁਸੀਂ ਲਿਖਿਆ ਸੀ।

ਬ੍ਰੇਸ-ਸ਼ੈਲੀ ਵਿਕਲਪਾਂ ਦਾ ਕੀ ਮਤਲਬ ਹੈ?

Collapse ਖੁੱਲ੍ਹਣ ਵਾਲੇ ਬ੍ਰੇਸ ਨੂੰ selector ਦੀ ਉਸੇ ਲਾਈਨ ਉੱਤੇ ਰੱਖਦਾ ਹੈ (a {), ਜੋ ਆਮ CSS ਰਿਵਾਜ ਹੈ। Expand ਹਰ ਖੁੱਲ੍ਹਣ ਵਾਲੇ ਬ੍ਰੇਸ ਨੂੰ selector ਦੇ ਹੇਠਾਂ ਆਪਣੀ ਵੱਖਰੀ ਲਾਈਨ ਉੱਤੇ ਉਤਾਰਦਾ ਹੈ। ਖਾਲੀ-ਲਾਈਨ ਅਤੇ ਹਰ-ਲਾਈਨ-ਉੱਤੇ-ਇੱਕ-selector ਟੌਗਲ ਨਿਯਮਾਂ ਵਿਚਕਾਰ spacing ਅਤੇ h1, h2, h3 ਵਰਗੇ ਸਮੂਹਬੱਧ selectors ਕਿਵੇਂ ਵਿਛਾਏ ਜਾਂਦੇ ਹਨ ਇਹ ਕੰਟਰੋਲ ਕਰਦੇ ਹਨ।

ਬ੍ਰਾਊਜ਼ਰ-ਸਾਈਡ CSS ਬਿਊਟੀਫਿਕੇਸ਼ਨ ਤੁਹਾਨੂੰ build step ਜਾਂ upload ਤੋਂ ਬਿਨਾਂ ਪੜ੍ਹਨਯੋਗ ਸਟਾਈਲਸ਼ੀਟ ਦਿੰਦੀ ਹੈ। ਮਿਨੀਫਾਈਡ ਜਾਂ ਗੜਬੜ ਫਾਈਲ ਪੇਸਟ ਕਰੋ, ਆਪਣੀ indentation ਅਤੇ ਬ੍ਰੇਸ ਸ਼ੈਲੀ ਚੁਣੋ, ਫਿਰ ਨਤੀਜਾ ਕਾਪੀ ਜਾਂ ਡਾਊਨਲੋਡ ਕਰੋ। ਕੁਝ ਵੀ ਤੁਹਾਡਾ ਡਿਵਾਈਸ ਨਹੀਂ ਛੱਡਦਾ, ਕੋਈ account ਨਹੀਂ, ਅਤੇ ਲਾਇਬ੍ਰੇਰੀ ਸਿਰਫ਼ ਉਦੋਂ ਲੋਡ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਕਹੋ — ਇਸ ਲਈ ਇਹ ਪੇਜ ਖੋਲ੍ਹਣਾ ਤੁਹਾਨੂੰ ਇੱਕ megabyte ਨਹੀਂ, ਕੁਝ ਕਿਲੋਬਾਈਟ ਪੈਂਦਾ ਹੈ।