CSS ਬਿਊਟੀਫਾਇਰ ਅਤੇ ਮਿਨੀਫਾਇਰ

ਗੜਬੜ ਵਾਲੇ CSS ਨੂੰ ਪੜ੍ਹਨ ਲਈ ਮੁੜ-ਇੰਡੈਂਟ ਕਰੋ, ਜਾਂ ਇਸਨੂੰ ਛੋਟਾ ਕਰਨ ਲਈ ਮਿਨੀਫਾਈ ਕਰੋ — ਇੱਕ ਸੁਰੱਖਿਅਤ ਮੋਡ ਦੇ ਨਾਲ ਜੋ ਤੁਹਾਡੇ ਨਿਯਮਾਂ ਦੇ ਕ੍ਰਮ ਨੂੰ ਕਦੇ ਨਹੀਂ ਬਦਲਦਾ।

CSS ਇਨਪੁਟ

ਇੰਡੈਂਟ
ਕੰਪਰੈਸ਼ਨ
styles.css
CSS ਨੂੰ ਸੁੰਦਰ ਬਣਾਉਣ ਜਾਂ ਮਿਨੀਫਾਈ ਕਰਨ ਲਈ ਪੇਸਟ ਕਰੋ ਜਾਂ ਟਾਈਪ ਕਰੋ।

ਤੁਹਾਡਾ CSS ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਫਾਰਮੈਟ ਅਤੇ ਮਿਨੀਫਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। BroBroGo 'ਤੇ ਕੁਝ ਵੀ ਅਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ

Beautify ਅਤੇ Minify ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?

Beautify (ਸੁੰਦਰ ਬਣਾਉਣਾ) ਤੁਹਾਡੀਆਂ ਸਟਾਈਲ ਸ਼ੀਟਾਂ ਨੂੰ ਮੁੜ-ਇੰਡੈਂਟ ਕਰਦਾ ਹੈ ਅਤੇ ਸਪੇਸ ਦਿੰਦਾ ਹੈ ਤਾਂ ਜੋ ਉਹਨਾਂ ਨੂੰ ਪੜ੍ਹਨਾ ਅਤੇ ਐਡਿਟ ਕਰਨਾ ਆਸਾਨ ਹੋਵੇ। Minify (ਛੋਟਾ ਕਰਨਾ) ਇਸ ਤੋਂ ਉਲਟ ਕਰਦਾ ਹੈ — ਇਹ ਵ੍ਹਾਈਟਸਪੇਸ ਅਤੇ ਟਿੱਪਣੀਆਂ (comments) ਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਦੀ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ ਅਤੇ ਰੰਗਾਂ ਵਰਗੇ ਮੁੱਲਾਂ ਨੂੰ ਛੋਟਾ ਕਰਦਾ ਹੈ, ਤਾਂ ਜੋ ਫਾਈਲ ਛੋਟੀ ਹੋਵੇ ਅਤੇ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੋਵੇ। ਕੰਮ ਕਰਦੇ ਸਮੇਂ beautify ਦੀ ਵਰਤੋਂ ਕਰੋ, ਅਤੇ ਪਬਲਿਸ਼ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ minify ਕਰੋ।

Safe ਅਤੇ Optimized ਕੰਪਰੈਸ਼ਨ ਸੈਟਿੰਗਾਂ ਕੀ ਕਰਦੀਆਂ ਹਨ?

Safe (ਸੁਰੱਖਿਅਤ) ਮੋਡ ਸਿਰਫ਼ ਵ੍ਹਾਈਟਸਪੇਸ ਅਤੇ ਟਿੱਪਣੀਆਂ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ ਅਤੇ ਮੁੱਲਾਂ ਨੂੰ ਛੋਟਾ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਹਰ ਨਿਯਮ (rule) ਬਿਲਕੁਲ ਉੱਥੇ ਹੀ ਰਹਿੰਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਲਿਖਿਆ ਸੀ। Optimized (ਅਨੁਕੂਲਿਤ) ਇਸ ਤੋਂ ਅੱਗੇ ਜਾਂਦਾ ਹੈ ਅਤੇ ਫਾਈਲ ਨੂੰ ਹੋਰ ਛੋਟਾ ਕਰਨ ਲਈ ਡੁਪਲੀਕੇਟ ਸਿਲੈਕਟਰਾਂ ਅਤੇ ਨਿਯਮਾਂ ਨੂੰ ਆਪਸ ਵਿੱਚ ਮਿਲਾਉਂਦਾ ਹੈ — ਇਹ ਨਿਯਮਾਂ ਦੇ ਕ੍ਰਮ ਨੂੰ ਬਦਲ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਪਬਲਿਸ਼ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਵਾਰ ਜਾਂਚ ਕਰਨਾ ਠੀਕ ਰਹਿੰਦਾ ਹੈ। /*! … */ ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਟਿੱਪਣੀਆਂ ਦੋਵਾਂ ਮੋਡਾਂ ਵਿੱਚ ਬਰਕਰਾਰ ਰਹਿੰਦੀਆਂ ਹਨ।

ਕੀ ਮਿਨੀਫਾਈ ਕਰਨ ਨਾਲ ਮੇਰੇ ਪੇਜ ਦੀ ਦਿੱਖ ਬਦਲ ਜਾਵੇਗੀ?

Safe ਮੋਡ ਵਿੱਚ, ਬਿਲਕੁਲ ਨਹੀਂ — ਤੁਹਾਡੀਆਂ ਸਟਾਈਲਾਂ ਬਿਲਕੁਲ ਪਹਿਲਾਂ ਵਾਂਗ ਹੀ ਦਿਖਾਈ ਦੇਣਗੀਆਂ। ਇਹ ਵ੍ਹਾਈਟਸਪੇਸ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ, ਆਮ ਟਿੱਪਣੀਆਂ ਨੂੰ ਖਾਰਜ ਕਰਦਾ ਹੈ ਅਤੇ ਮੁੱਲਾਂ ਨੂੰ ਛੋਟੇ ਸਮਾਨ ਰੂਪਾਂ ਵਿੱਚ ਦੁਬਾਰਾ ਲਿਖਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ #ffffff ਨੂੰ #fff ਵਜੋਂ), ਅਤੇ ਇਹ ਤੁਹਾਡੇ ਵੈਂਡਰ ਪ੍ਰੀਫਿਕਸ ਜਾਂ ਆਧੁਨਿਕ ਸਿੰਟੈਕਸ ਨੂੰ ਕਦੇ ਨਹੀਂ ਬਦਲਦਾ। Optimized ਮੋਡ ਨਿਯਮਾਂ ਨੂੰ ਵੀ ਆਪਸ ਵਿੱਚ ਮਿਲਾਉਂਦਾ ਹੈ, ਜੋ ਲਗਭਗ ਹਰ ਸਟਾਈਲਸ਼ੀਟ 'ਤੇ ਇੱਕੋ ਜਿਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਪਰ ਜੇਕਰ ਤੁਹਾਡੀ ਫਾਈਲ ਨਿਯਮਾਂ ਦੇ ਕ੍ਰਮ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ, ਤਾਂ ਇਸਦੀ ਪੁਸ਼ਟੀ ਕਰਨਾ ਚੰਗਾ ਰਹੇਗਾ।

CSS ਬਿਊਟੀਫਿਕੇਸ਼ਨ ਅਤੇ ਮਿਨੀਫਿਕੇਸ਼ਨ ਦਾ ਉਦੇਸ਼

ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ CSS (Cascading Style Sheets) ਕੋਡ ਨੂੰ ਦੋ ਵੱਖ-ਵੱਖ ਰੂਪਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ: ਇੱਕ ਰੂਪ ਜੋ ਮਨੁੱਖਾਂ ਦੇ ਪੜ੍ਹਨ ਅਤੇ ਲਿਖਣ ਲਈ ਆਸਾਨ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਦੂਜਾ ਜੋ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੁਆਰਾ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਕਰਨ ਲਈ ਅਨੁਕੂਲਿਤ ਹੁੰਦਾ ਹੈ। CSS ਬਿਊਟੀਫਿਕੇਸ਼ਨ ਦਾ ਉਦੇਸ਼ ਕੋਡ ਨੂੰ ਮੁੜ-ਇੰਡੈਂਟ ਕਰਨਾ ਅਤੇ ਸਪੇਸ ਦੇਣਾ ਹੈ ਤਾਂ ਜੋ ਡਿਵੈਲਪਰ ਉਲਝੀਆਂ ਹੋਈਆਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਪੜ੍ਹ ਸਕਣ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਬਦਲ ਸਕਣ। ਇਸ ਦੇ ਉਲਟ, CSS ਮਿਨੀਫਿਕੇਸ਼ਨ ਦਾ ਉਦੇਸ਼ ਕੋਡ ਦੇ ਕਾਰਜਸ਼ੀਲ ਵਿਵਹਾਰ ਨੂੰ ਬਦਲੇ ਬਿਨਾਂ ਉਸ ਦੇ ਫਾਈਲ ਸਾਈਜ਼ ਨੂੰ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਛੋਟਾ ਕਰਨਾ ਹੈ। ਇਹ ਟੂਲ ਇਹਨਾਂ ਦੋਵਾਂ ਕੰਮਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਪੂਰਾ ਕਰਦਾ ਹੈ।

ਵ੍ਹਾਈਟਸਪੇਸ ਅਤੇ ਟਿੱਪਣੀਆਂ ਦਾ ਫਾਈਲ ਸਾਈਜ਼ 'ਤੇ ਪ੍ਰਭਾਵ

ਜਦੋਂ ਕੋਈ ਡਿਵੈਲਪਰ CSS ਲਿਖਦਾ ਹੈ, ਤਾਂ ਉਹ ਕੋਡ ਨੂੰ ਸਮਝਣ ਯੋਗ ਬਣਾਉਣ ਲਈ ਵ੍ਹਾਈਟਸਪੇਸ (ਜਿਵੇਂ ਕਿ ਸਪੇਸ, ਟੈਬਸ, ਨਵੀਆਂ ਲਾਈਨਾਂ) ਅਤੇ ਟਿੱਪਣੀਆਂ (comments) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਹਾਲਾਂਕਿ ਇਹ ਤੱਤ ਮਨੁੱਖੀ ਡਿਵੈਲਪਰਾਂ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹਨ, ਪਰ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਸਟਾਈਲ ਲਾਗੂ ਕਰਨ ਲਈ ਇਹਨਾਂ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ।

ਹਰ ਇੱਕ ਵ੍ਹਾਈਟਸਪੇਸ ਅੱਖਰ ਅਤੇ ਟਿੱਪਣੀ ਫਾਈਲ ਦੇ ਕੁੱਲ ਬਾਈਟ ਸਾਈਜ਼ ਵਿੱਚ ਵਾਧਾ ਕਰਦੀ ਹੈ। ਜਦੋਂ ਇੱਕ ਸਟਾਈਲਸ਼ੀਟ ਹਜ਼ਾਰਾਂ ਲਾਈਨਾਂ ਤੱਕ ਵੱਡੀ ਹੋ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਇਹ ਬੇਲੋੜੇ ਅੱਖਰ ਫਾਈਲ ਦੇ ਆਕਾਰ ਨੂੰ ਕਾਫ਼ੀ ਵਧਾ ਦਿੰਦੇ ਹਨ। ਮਿਨੀਫਿਕੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਦੌਰਾਨ ਇਹਨਾਂ ਵਾਧੂ ਸਪੇਸਾਂ ਅਤੇ ਟਿੱਪਣੀਆਂ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਫਾਈਲ ਦਾ ਆਕਾਰ ਘਟਦਾ ਹੈ ਅਤੇ ਪੇਜ ਲੋਡ ਹੋਣ ਦਾ ਸਮਾਂ ਤੇਜ਼ ਹੁੰਦਾ ਹੈ।

ਮਨੁੱਖੀ-ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਮਸ਼ੀਨ-ਅਨੁਕੂਲਿਤ CSS ਵਿੱਚ ਅੰਤਰ

ਮਨੁੱਖੀ-ਪੜ੍ਹਨਯੋਗ (Human-readable) CSS ਵਿੱਚ ਹਰ ਇੱਕ ਨਿਯਮ (rule) ਅਤੇ ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਵੱਖਰੀਆਂ ਲਾਈਨਾਂ 'ਤੇ ਸਹੀ ਇੰਡੈਂਟੇਸ਼ਨ ਨਾਲ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ:

body {
  background-color: #ffffff;
  margin: 0;
}

ਮਸ਼ੀਨ-ਅਨੁਕੂਲਿਤ (Machine-optimized) CSS ਵਿੱਚ ਸਾਰੀਆਂ ਬੇਲੋੜੀਆਂ ਸਪੇਸਾਂ ਨੂੰ ਖ਼ਤਮ ਕਰ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਮੁੱਲਾਂ ਨੂੰ ਛੋਟਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਉਪਰੋਕਤ ਕੋਡ ਮਿਨੀਫਾਈ ਹੋਣ ਤੋਂ ਬਾਅਦ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:

body{background-color:#fff;margin:0}

ਇੱਥੇ ਬ੍ਰਾਊਜ਼ਰ ਲਈ ਕੋਡ ਦਾ ਮਤਲਬ ਬਿਲਕੁਲ ਉਹੀ ਰਹਿੰਦਾ ਹੈ, ਪਰ ਫਾਈਲ ਵਿੱਚੋਂ ਗੈਰ-ਜ਼ਰੂਰੀ ਅੱਖਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹਟਾ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ।

ਸੁਰੱਖਿਅਤ (Safe) ਬਨਾਮ ਅਨੁਕੂਲਿਤ (Optimized) ਕੰਪਰੈਸ਼ਨ

ਇਹ ਟੂਲ ਕੰਪਰੈਸ਼ਨ ਲਈ ਦੋ ਵਿਕਲਪ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:

  1. Safe: ਇਹ ਮੋਡ ਸਿਰਫ਼ ਵ੍ਹਾਈਟਸਪੇਸ ਅਤੇ ਆਮ ਟਿੱਪਣੀਆਂ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ ਅਤੇ ਮੁੱਲਾਂ (ਜਿਵੇਂ ਕਿ ਰੰਗਾਂ) ਨੂੰ ਛੋਟਾ ਕਰਦਾ ਹੈ। ਇਸ ਮੋਡ ਵਿੱਚ, ਹਰ ਇੱਕ ਨਿਯਮ ਬਿਲਕੁਲ ਉਸੇ ਕ੍ਰਮ ਵਿੱਚ ਰਹਿੰਦਾ ਹੈ ਜਿੱਥੇ ਉਹ ਲਿਖਿਆ ਗਿਆ ਸੀ। ਵੈਂਡਰ ਪ੍ਰੀਫਿਕਸ ਅਤੇ ਆਧੁਨਿਕ ਸਿੰਟੈਕਸ ਨੂੰ ਬਿਲਕੁਲ ਨਹੀਂ ਬਦਲਿਆ ਜਾਂਦਾ।
  2. Optimized: ਇਹ ਮੋਡ ਫਾਈਲ ਦੇ ਆਕਾਰ ਨੂੰ ਹੋਰ ਵੀ ਘਟਾਉਣ ਲਈ ਡੁਪਲੀਕੇਟ ਸਿਲੈਕਟਰਾਂ ਅਤੇ ਨਿਯਮਾਂ ਨੂੰ ਆਪਸ ਵਿੱਚ ਮਿਲਾਉਂਦਾ ਹੈ। ਇਸ ਪ੍ਰਕਿਰਿਆ ਦੌਰਾਨ ਨਿਯਮਾਂ ਦਾ ਕ੍ਰਮ ਬਦਲ ਸਕਦਾ ਹੈ।

CSS ਵਿੱਚ ਨਿਯਮਾਂ ਦਾ ਕ੍ਰਮ (Source Order) ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ, ਕਿਉਂਕਿ ਬਾਅਦ ਵਿੱਚ ਲਿਖੇ ਗਏ ਨਿਯਮ ਪਹਿਲਾਂ ਵਾਲੇ ਨਿਯਮਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹਨ। ਇਸ ਲਈ, Optimized ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਇਹ ਜਾਂਚ ਕਰਨਾ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ ਕਿ ਪੇਜ ਦੀ ਦਿੱਖ ਵਿੱਚ ਕੋਈ ਅਣਚਾਹਿਆ ਬਦਲਾਅ ਨਾ ਆਇਆ ਹੋਵੇ।

ਮੁੱਲਾਂ ਨੂੰ ਛੋਟਾ ਕਰਨਾ ਅਤੇ ਵਿਸ਼ੇਸ਼ ਟਿੱਪਣੀਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣਾ

ਮਿਨੀਫਿਕੇਸ਼ਨ ਦੌਰਾਨ, ਟੂਲ ਕੁਝ ਖਾਸ CSS ਪ੍ਰਾਪਰਟੀਜ਼ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਸਭ ਤੋਂ ਛੋਟੇ ਸੰਭਵ ਰੂਪ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਛੇ ਅੱਖਰਾਂ ਵਾਲੇ ਹੈਕਸਾਡੈਸੀਮਲ ਰੰਗ ਕੋਡ #ffffff ਨੂੰ ਤਿੰਨ ਅੱਖਰਾਂ ਦੇ #fff ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ।

ਆਮ ਤੌਰ 'ਤੇ ਮਿਨੀਫਿਕੇਸ਼ਨ ਦੌਰਾਨ ਸਾਰੀਆਂ ਟਿੱਪਣੀਆਂ ਹਟਾ ਦਿੱਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਪਰ ਕੁਝ ਮਹੱਤਵਪੂਰਨ ਟਿੱਪਣੀਆਂ (ਜਿਵੇਂ ਕਿ ਲਾਇਸੈਂਸ ਜਾਣਕਾਰੀ ਜਾਂ ਕਾਪੀਰਾਈਟ) ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣਾ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ। ਇਸ ਟੂਲ ਵਿੱਚ, /*! … */ ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਕੀਤੀਆਂ ਗਈਆਂ ਵਿਸ਼ੇਸ਼ ਟਿੱਪਣੀਆਂ ਨੂੰ Safe ਅਤੇ Optimized ਦੋਵਾਂ ਕੰਪਰੈਸ਼ਨ ਸੈਟਿੰਗਾਂ ਵਿੱਚ ਬਰਕਰਾਰ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ।

ਟੂਲ ਦੀ ਵਰਤੋਂ ਅਤੇ ਸੀਮਾਵਾਂ

ਇਸ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ, ਉਪਭੋਗਤਾ "CSS ਇਨਪੁਟ" ਖੇਤਰ ਵਿੱਚ ਆਪਣਾ ਕੋਡ ਪੇਸਟ ਕਰ ਸਕਦੇ ਹਨ। ਟੂਲ ਦੀਆਂ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਨਿਯਮ ਹੇਠ ਲਿਖੇ ਅਨੁਸਾਰ ਹਨ:

  • ਅਧਿਕਤਮ ਆਕਾਰ: ਇਨਪੁਟ CSS ਦਾ ਅਧਿਕਤਮ ਆਕਾਰ 500,000 ਅੱਖਰ ਹੋ ਸਕਦਾ ਹੈ। ਜੇਕਰ ਕੋਡ ਇਸ ਸੀਮਾ ਤੋਂ ਵੱਧ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲ "ਇਹ ਸਟਾਈਲਸ਼ੀਟ ਪ੍ਰੋਸੈਸ ਕਰਨ ਲਈ ਬਹੁਤ ਵੱਡੀ ਹੈ। ਕਿਰਪਾ ਕਰਕੇ ਛੋਟੀ ਫਾਈਲ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।" ਗਲਤੀ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਹੈ।
  • ਇੰਡੈਂਟ ਵਿਕਲਪ: ਬਿਊਟੀਫਾਈ ਕਰਦੇ ਸਮੇਂ, ਉਪਭੋਗਤਾ 2 ਸਪੇਸ, 4 ਸਪੇਸ, ਜਾਂ ਟੈਬ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਇੰਡੈਂਟੇਸ਼ਨ ਚੁਣ ਸਕਦੇ ਹਨ।
  • ਆਉਟਪੁੱਟ ਅੰਕੜੇ: ਪ੍ਰੋਸੈਸਿੰਗ ਤੋਂ ਬਾਅਦ, ਟੂਲ ਨਵੇਂ ਕੋਡ ਦੀਆਂ "ਲਾਈਨਾਂ", "ਅੱਖਰ" ਅਤੇ UTF-8 ਬਾਈਟ "ਆਕਾਰ" ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਜਦੋਂ ਕੋਡ ਨੂੰ ਮਿਨੀਫਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ "ਮਿਨੀਫਾਈ ਕੀਤਾ ਗਿਆ — {pct}% ਛੋਟਾ।" ਸੁਨੇਹਾ ਵੀ ਦਿਖਾਉਂਦਾ ਹੈ।
  • ਡਾਊਨਲੋਡ ਅਤੇ ਕਾਪੀ: ਉਪਭੋਗਤਾ "ਡਾਊਨਲੋਡ ਕਰੋ" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਪ੍ਰੋਸੈਸ ਕੀਤੇ CSS ਨੂੰ styles.css ਫਾਈਲ ਵਜੋਂ ਡਾਊਨਲੋਡ ਕਰ ਸਕਦੇ ਹਨ ਜਾਂ "ਕਾਪੀ ਕਰੋ" ਬਟਨ ਰਾਹੀਂ ਇਸਨੂੰ ਕਲਿੱਪਬੋਰਡ ਵਿੱਚ ਕਾਪੀ ਕਰ ਸਕਦੇ ਹਨ।
  • ਗਲਤੀਆਂ ਦੀ ਸੰਭਾਲ: ਜੇਕਰ ਇਨਪੁਟ ਖਾਲੀ ਹੈ, ਤਾਂ ਟੂਲ "ਮਿਨੀਫਾਈ ਕਰਨ ਲਈ ਕੋਈ CSS ਨਹੀਂ ਮਿਲਿਆ — ਇਨਪੁਟ ਵਿੱਚ ਸਿੰਟੈਕਸ ਗਲਤੀਆਂ ਦੀ ਜਾਂਚ ਕਰੋ।" ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਹੈ। ਜੇਕਰ CSS ਨੂੰ ਪ੍ਰੋਸੈਸ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ, ਤਾਂ "ਇਸ CSS 'ਤੇ ਕਾਰਵਾਈ ਨਹੀਂ ਕੀਤੀ ਜਾ ਸਕੀ।" ਸੁਨੇਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।

ਨਿੱਜਤਾ ਅਤੇ ਪ੍ਰੋਸੈਸਿੰਗ

ਤੁਹਾਡਾ CSS ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਫਾਰਮੈਟ ਅਤੇ ਮਿਨੀਫਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। BroBroGo 'ਤੇ ਕੁਝ ਵੀ ਅਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ। ਸਾਰੀ ਪ੍ਰਕਿਰਿਆ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਉਪਭੋਗਤਾ ਦੇ ਸਿਸਟਮ 'ਤੇ ਹੀ ਚਲਦੀ ਹੈ।


ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ (FAQ)

Beautify ਅਤੇ Minify ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?

Beautify (ਸੁੰਦਰ ਬਣਾਉਣਾ) ਤੁਹਾਡੀਆਂ ਸਟਾਈਲ ਸ਼ੀਟਾਂ ਨੂੰ ਮੁੜ-ਇੰਡੈਂਟ ਕਰਦਾ ਹੈ ਅਤੇ ਸਪੇਸ ਦਿੰਦਾ ਹੈ ਤਾਂ ਜੋ ਉਹਨਾਂ ਨੂੰ ਪੜ੍ਹਨਾ ਅਤੇ ਐਡਿਟ ਕਰਨਾ ਆਸਾਨ ਹੋਵੇ। Minify (ਛੋਟਾ ਕਰਨਾ) ਇਸ ਤੋਂ ਉਲਟ ਕਰਦਾ ਹੈ — ਇਹ ਵ੍ਹਾਈਟਸਪੇਸ ਅਤੇ ਟਿੱਪਣੀਆਂ (comments) ਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਦੀ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ ਅਤੇ ਰੰਗਾਂ ਵਰਗੇ ਮੁੱਲਾਂ ਨੂੰ ਛੋਟਾ ਕਰਦਾ ਹੈ, ਤਾਂ ਜੋ ਫਾਈਲ ਛੋਟੀ ਹੋਵੇ ਅਤੇ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੋਵੇ। ਕੰਮ ਕਰਦੇ ਸਮੇਂ beautify ਦੀ ਵਰਤੋਂ ਕਰੋ, ਅਤੇ ਪਬਲਿਸ਼ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ minify ਕਰੋ।

Safe ਅਤੇ Optimized ਕੰਪਰੈਸ਼ਨ ਸੈਟਿੰਗਾਂ ਕੀ ਕਰਦੀਆਂ ਹਨ?

Safe (ਸੁਰੱਖਿਅਤ) ਮੋਡ ਸਿਰਫ਼ ਵ੍ਹਾਈਟਸਪੇਸ ਅਤੇ ਟਿੱਪਣੀਆਂ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ ਅਤੇ ਮੁੱਲਾਂ ਨੂੰ ਛੋਟਾ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਹਰ ਨਿਯਮ (rule) ਬਿਲਕੁਲ ਉੱਥੇ ਹੀ ਰਹਿੰਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਲਿਖਿਆ ਸੀ। Optimized (ਅਨੁਕੂਲਿਤ) ਇਸ ਤੋਂ ਅੱਗੇ ਜਾਂਦਾ ਹੈ ਅਤੇ ਫਾਈਲ ਨੂੰ ਹੋਰ ਛੋਟਾ ਕਰਨ ਲਈ ਡੁਪਲੀਕੇਟ ਸਿਲੈਕਟਰਾਂ ਅਤੇ ਨਿਯਮਾਂ ਨੂੰ ਆਪਸ ਵਿੱਚ ਮਿਲਾਉਂਦਾ ਹੈ — ਇਹ ਨਿਯਮਾਂ ਦੇ ਕ੍ਰਮ ਨੂੰ ਬਦਲ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਪਬਲਿਸ਼ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਵਾਰ ਜਾਂਚ ਕਰਨਾ ਠੀਕ ਰਹਿੰਦਾ ਹੈ। /*! … */ ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਟਿੱਪਣੀਆਂ ਦੋਵਾਂ ਮੋਡਾਂ ਵਿੱਚ ਬਰਕਰਾਰ ਰਹਿੰਦੀਆਂ ਹਨ।

ਕੀ ਮਿਨੀਫਾਈ ਕਰਨ ਨਾਲ ਮੇਰੇ ਪੇਜ ਦੀ ਦਿੱਖ ਬਦਲ ਜਾਵੇਗੀ?

Safe ਮੋਡ ਵਿੱਚ, ਬਿਲਕੁਲ ਨਹੀਂ — ਤੁਹਾਡੀਆਂ ਸਟਾਈਲਾਂ ਬਿਲਕੁਲ ਪਹਿਲਾਂ ਵਾਂਗ ਹੀ ਦਿਖਾਈ ਦੇਣਗੀਆਂ। ਇਹ ਵ੍ਹਾਈਟਸਪੇਸ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ, ਆਮ ਟਿੱਪਣੀਆਂ ਨੂੰ ਖਾਰਜ ਕਰਦਾ ਹੈ ਅਤੇ ਮੁੱਲਾਂ ਨੂੰ ਛੋਟੇ ਸਮਾਨ ਰੂਪਾਂ ਵਿੱਚ ਦੁਬਾਰਾ ਲਿਖਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ #ffffff ਨੂੰ #fff ਵਜੋਂ), ਅਤੇ ਇਹ ਤੁਹਾਡੇ ਵੈਂਡਰ ਪ੍ਰੀਫਿਕਸ ਜਾਂ ਆਧੁਨਿਕ ਸਿੰਟੈਕਸ ਨੂੰ ਕਦੇ ਨਹੀਂ ਬਦਲਦਾ। Optimized ਮੋਡ ਨਿਯਮਾਂ ਨੂੰ ਵੀ ਆਪਸ ਵਿੱਚ ਮਿਲਾਉਂਦਾ ਹੈ, ਜੋ ਲਗਭਗ ਹਰ ਸਟਾਈਲਸ਼ੀਟ 'ਤੇ ਇੱਕੋ ਜਿਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਪਰ ਜੇਕਰ ਤੁਹਾਡੀ ਫਾਈਲ ਨਿਯਮਾਂ ਦੇ ਕ੍ਰਮ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ, ਤਾਂ ਇਸਦੀ ਪੁਸ਼ਟੀ ਕਰਨਾ ਚੰਗਾ ਰਹੇਗਾ।