ਪ੍ਰਗਤੀਸ਼ੀਲ ਤਰੱਕੀ

ਵੈਬ ਬ੍ਰਾਉਜ਼ਰ ਦੇ ਨਾਲ-ਨਾਲ ਵੈੱਬਸਾਈਟ ਦੇ ਹੋਣ ਦੇ ਨੇੜੇ-ਤੇੜੇ ਰਹੇ ਹਨ ਵਾਸਤਵ ਵਿੱਚ, ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਭਵ ਵਿੱਚ ਇੱਕ ਜ਼ਰੂਰੀ ਅੰਗ ਹੁੰਦੇ ਹਨ ਜਾਂ ਲੋਕ ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਵੇਖਦੇ ਹਨ - ਪਰ ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰ ਬਰਾਬਰ ਨਹੀਂ ਬਣਦੇ ਹਨ ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸੰਭਵ ਹੈ (ਅਤੇ ਅਸਲ ਵਿੱਚ ਸੰਭਵ ਤੌਰ ਤੇ ਸੰਭਵ ਤੌਰ ਤੇ) ਤੁਹਾਡੇ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਵੈਬ ਪੇਜ ਦੇਖਣ ਵਾਲੇ ਗਾਹਕ ਜਿਨ੍ਹਾਂ ਕੋਲ ਬਹੁਤ ਪੁਰਾਣੀ ਹੈ ਅਤੇ ਉਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਗੁਆਉਣਾ ਹੈ ਜੋ ਹੋਰ ਆਧੁਨਿਕ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਲੱਭੇ ਜਾਂਦੇ ਹਨ. ਇਹ ਮਹੱਤਵਪੂਰਣ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਕਰ ਸਕਦਾ ਹੈ ਕਿਉਂਕਿ ਤੁਸੀਂ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਵਿਕਸਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ ਜੋ ਵੈਬਸਾਈਟ ਡਿਜਾਈਨ ਅਤੇ ਵਿਕਾਸ ਵਿੱਚ ਨਵੀਨਤਮ ਐਡਵਾਂਸ ਦਾ ਫਾਇਦਾ ਉਠਾਉਂਦੇ ਹਨ. ਜੇ ਕੋਈ ਉਸ ਪੁਰਾਣਾ ਬ੍ਰਾਉਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਹਾਡੀ ਸਾਈਟ ਤੇ ਆਉਂਦੀ ਹੈ, ਅਤੇ ਤੁਹਾਡੀਆਂ ਨਵੀਨਤਮ ਤਕਨੀਕੀ ਤਕਨੀਕੀਆਂ ਉਹਨਾਂ ਲਈ ਕੰਮ ਨਹੀਂ ਕਰਦੀਆਂ, ਤਾਂ ਤੁਸੀਂ ਸਮੁੱਚੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਗਰੀਬ ਅਨੁਭਵ ਨੂੰ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦੇ ਹੋ. ਪ੍ਰਗਤੀਸ਼ੀਲ ਵਾਧਾ ਵੱਖੋ ਵੱਖਰੇ ਬ੍ਰਾਉਜ਼ਰਾਂ ਲਈ ਵੈਬ ਪੰਨਾ ਡਿਜ਼ਾਈਨ ਕਰਨ ਦੀ ਇੱਕ ਰਣਨੀਤੀ ਹੈ, ਅਰਥਾਤ ਉਹ ਪੁਰਾਣੇ ਬ੍ਰਾਉਜ਼ਰ ਜਿਨ੍ਹਾਂ ਨੂੰ ਆਧੁਨਿਕ ਸਹਾਇਤਾ ਦੀ ਘਾਟ ਹੈ.

ਪ੍ਰਗਤੀਸ਼ੀਲ ਵਾਧਾ ਵੈਬ ਪੇਜਜ਼ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈ ਇਸ ਲਈ ਕਿ ਉਪਭੋਗਤਾ ਏਜੰਟ ਦਾ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਜ਼ਿਆਦਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਵੈਬ ਪੇਜ ਦੀਆਂ ਜਿੰਨੀਆਂ ਜ਼ਿਆਦਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹੋਣਗੀਆਂ. ਇਹ ਡਿਜ਼ਾਈਨ ਰਣਨੀਤੀ ਦੇ ਉਲਟ ਹੈ ਜਿਸਨੂੰ ਸੁਸ਼ੀਲ ਡਿਗਰੇਡੇਸ਼ਨ ਕਿਹਾ ਜਾਂਦਾ ਹੈ. ਇਹ ਰਣਨੀਤੀ ਪਹਿਲਾਂ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਆਧੁਨਿਕ ਬ੍ਰਾਉਜ਼ਰ ਲਈ ਪੰਨੇ ਤਿਆਰ ਕਰਦੀ ਹੈ ਅਤੇ ਫਿਰ ਇਹ ਨਿਸ਼ਚਿਤ ਕਰਦੀ ਹੈ ਕਿ ਉਹ ਘੱਟ ਕਾਰਜਕਾਰੀ ਬ੍ਰਾਉਜ਼ਰਸ ਦੇ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ - ਇਹ ਅਨੁਭਵ "ਕ੍ਰਿਪਾ ਨਾਲ degrades". ਪ੍ਰਗਤੀਸ਼ੀਲ ਵਾਧਾ ਪਹਿਲਾਂ ਘੱਟ ਸਮਰੱਥ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਉੱਥੇ ਤੋਂ ਇੱਕ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ.

ਪ੍ਰੋਗਰੈਸਿਵ ਐਨਰਜੀਮੈਂਟ ਕਿਵੇਂ ਵਰਤੋ

ਜਦੋਂ ਤੁਸੀਂ ਪ੍ਰਗਤੀਸ਼ੀਲ ਤਰੱਕੀ ਵਰਤਦੇ ਹੋਏ ਇੱਕ ਵੈਬ ਡਿਜ਼ਾਈਨ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਜੋ ਤੁਸੀਂ ਕਰੋਂਗੇ ਉਹੀ ਇੱਕ ਡਿਜ਼ਾਈਨ ਤਿਆਰ ਕਰਨਾ ਹੈ ਜੋ ਵੈੱਬ ਬਰਾਊਜ਼ਰ ਦੇ ਸਭ ਤੋਂ ਘੱਟ ਆਮ ਹਰਕਤੇ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ. ਇਸਦੇ ਮੁੱਖ ਤੇ, ਪ੍ਰਗਤੀਸ਼ੀਲ ਵਾਧਾ ਦੱਸਦਾ ਹੈ ਕਿ ਤੁਹਾਡੀ ਸਮਗਰੀ ਸਾਰੇ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰਸ ਲਈ ਉਪਲਬਧ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਨਾ ਕਿ ਕੇਵਲ ਇੱਕ ਸਬ-ਸੈਟ. ਇਸ ਲਈ ਤੁਸੀਂ ਇਹਨਾਂ ਪੁਰਾਣੇ, ਪੁਰਾਣੀ ਅਤੇ ਘੱਟ ਸਮਰੱਥ ਬ੍ਰਾਊਜ਼ਰਸ ਦੀ ਸਹਾਇਤਾ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਦੇ ਹੋ. ਜੇ ਤੁਸੀਂ ਅਜਿਹੀ ਸਾਈਟ ਬਣਾਉਂਦੇ ਹੋ ਜੋ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ ਉਨ੍ਹਾਂ ਲਈ, ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਬੇਸਲਾਈਨ ਤਿਆਰ ਕੀਤੀ ਹੈ ਜੋ ਸਾਰੇ ਮਹਿਮਾਨਾਂ ਲਈ ਘੱਟੋ ਘੱਟ ਇੱਕ ਉਪਯੋਗੀ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ

ਪਹਿਲਾਂ ਘੱਟ ਤੋਂ ਘੱਟ ਸਮਰੱਥ ਬ੍ਰਾਊਜ਼ਰ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਸਮੇਂ, ਤੁਸੀਂ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨਾ ਚਾਹੋਗੇ ਕਿ ਤੁਹਾਡੇ ਸਾਰੇ HTML ਵੈਧ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ ਅਤੇ ਅਰਥਪੂਰਨ ਤੌਰ ਤੇ ਸਹੀ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ. ਇਹ ਇਸ ਗੱਲ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਕਿ ਉਪਯੋਗਕਰਤਾਵਾਂ ਦੇ ਸਭ ਤੋਂ ਵੱਧ ਵਿਭਿੰਨ ਪ੍ਰਕਾਰ ਦੇ ਪੇਜ਼ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ.

ਯਾਦ ਰੱਖੋ ਕਿ ਵਿਜ਼ੁਅਲ ਡਿਜ਼ਾਈਨ ਸ਼ੈਲੀ ਅਤੇ ਸਮੁੱਚੇ ਪੇਜ ਲੇਆਉਟ ਨੂੰ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟਸ ਵਰਤ ਕੇ ਜੋੜਿਆ ਗਿਆ ਹੈ. ਇਹ ਅਸਲ ਵਿੱਚ ਜਿੱਥੇ ਪ੍ਰਗਤੀਸ਼ੀਲ ਵਾਧਾ ਹੁੰਦਾ ਹੈ. ਤੁਸੀਂ ਸਟਾਇਲ ਸ਼ੀਟ ਦਾ ਇਸਤੇਮਾਲ ਇੱਕ ਸਾਈਟ ਡਿਜਾਇਨ ਬਣਾਉਣ ਲਈ ਕਰੋ ਜੋ ਸਾਰੇ ਸੈਲਾਨੀ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ ਫਿਰ ਤੁਸੀਂ ਪੰਨੇ ਨੂੰ ਵਧਾਉਣ ਲਈ ਅਤਿਰਿਕਤ ਸਟਾਈਲ ਜੋੜੇ ਜਾ ਸਕਦੇ ਹੋ ਕਿਉਂਕਿ ਯੂਜ਼ਰ ਏਜੰਟ ਕਾਰਜਕੁਸ਼ਲਤਾ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ. ਹਰ ਕੋਈ ਬੇਸਲਾਇਨ ਸਟਾਈਲ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਪਰੰਤੂ ਕਿਸੇ ਵੀ ਖ਼ਬਰ ਬ੍ਰਾਉਜ਼ਰ ਲਈ ਜੋ ਵਧੇਰੇ ਤਕਨੀਕੀ ਅਤੇ ਹੋਰ ਆਧੁਨਿਕ ਸਟਾਈਲਾਂ ਦਾ ਸਮਰਥਨ ਕਰ ਸਕਦੇ ਹਨ, ਉਹ ਕੁਝ ਹੋਰ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ. ਤੁਸੀਂ ਉਹਨਾਂ ਬ੍ਰਾਉਜ਼ਰਾਂ ਲਈ ਪੰਨੇ "ਪ੍ਰਗਤੀਵਾਦੀ ਬਣਾਉ" ਜੋ ਉਹਨਾਂ ਸਟਾਈਲ ਦਾ ਸਮਰਥਨ ਕਰ ਸਕਦੇ ਹਨ

ਕੁਝ ਤਰੀਕੇ ਹਨ ਜੋ ਤੁਸੀਂ ਪ੍ਰਗਤੀਸ਼ੀਲ ਵਾਧਾ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ. ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਇਹ ਸਮਝਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਜੇਕਰ ਕੋਈ ਬ੍ਰਾਉਜ਼ਰ CSS ਦੀ ਲਾਈਨ ਨੂੰ ਨਹੀਂ ਸਮਝਦਾ ਤਾਂ ਇਹ ਇਸਨੂੰ ਅਣਡਿੱਠ ਕਰ ਦਿੰਦਾ ਹੈ! ਇਹ ਅਸਲ ਵਿੱਚ ਤੁਹਾਡੇ ਪੱਖ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਸਟਾਈਲ ਦਾ ਬੇਸਲਾਈਨ ਸਮੂਹ ਬਣਾਉਂਦੇ ਹੋ ਜੋ ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰ ਸਮਝਦੇ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਨਵੇਂ ਬ੍ਰਾਉਜ਼ਰਸ ਲਈ ਵਾਧੂ ਸਟਾਈਲ ਜੋੜ ਸਕਦੇ ਹੋ. ਜੇ ਉਹ ਸ਼ੈਲੀ ਨੂੰ ਸਮਰਥਨ ਦਿੰਦੇ ਹਨ, ਤਾਂ ਉਹ ਉਨ੍ਹਾਂ 'ਤੇ ਲਾਗੂ ਹੋਣਗੇ. ਜੇ ਨਹੀਂ, ਤਾਂ ਉਹ ਉਨ੍ਹਾਂ ਦੀ ਅਣਦੇਖੀ ਕਰਨਗੇ ਅਤੇ ਉਨ੍ਹਾਂ ਆਧਾਰਲਾਈਨ ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰਨਗੇ. ਪ੍ਰਗਤੀਸ਼ੀਲ ਵਾਧਾ ਦੇ ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਨ ਨੂੰ ਇਸ CSS ਵਿੱਚ ਦੇਖਿਆ ਜਾ ਸਕਦਾ ਹੈ:

.main-content {
ਪਿਛੋਕੜ: # 999;
ਪਿੱਠਭੂਮੀ: rgba (153,153,153, .75);
}

ਇਹ ਸਟਾਈਲ ਪਹਿਲਾਂ ਬੈਕਗਰਾਊਂਡ ਨੂੰ ਸਫੈਦ ਰੰਗ ਨਾਲ ਤਹਿ ਕਰਦਾ ਹੈ. ਦੂਜਾ ਨਿਯਮ ਪਾਰਦਰਸ਼ਕਤਾ ਦਾ ਪੱਧਰ ਸੈਟ ਕਰਨ ਲਈ RGBA ਰੰਗ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਵਰਤਦਾ ਹੈ. ਜੇਕਰ ਕੋਈ ਬ੍ਰਾਊਜ਼ਰ RGBA ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਦੂਜਾ ਸਟਾਈਲ ਦੇ ਨਾਲ ਪਹਿਲੇ ਸਟ੍ਰੈਟ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੇਗਾ. ਜੇਕਰ ਅਜਿਹਾ ਨਹੀਂ ਹੁੰਦਾ, ਤਾਂ ਸਿਰਫ ਪਹਿਲਾ ਹੀ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇਗਾ. ਤੁਸੀਂ ਇੱਕ ਬੇਸਲਾਈਨ ਰੰਗ ਸੈੱਟ ਕੀਤਾ ਹੈ ਅਤੇ ਫਿਰ ਹੋਰ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ ਵਾਧੂ ਸਟਾਈਲ ਸ਼ਾਮਿਲ ਕੀਤੀਆਂ ਹਨ

ਫੀਚਰ ਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ

ਇਕ ਹੋਰ ਤਰੀਕਾ ਜਿਸਨੂੰ ਤੁਸੀਂ "ਫੀਚਰ ਸਵਾਲ" ਦੇ ਤੌਰ ਤੇ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ ਉਸ ਨੂੰ ਵਰਤਣਾ ਹੈ. ਇਹ ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੇ ਸਮਾਨ ਹੈ , ਜੋ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਵੈਬਸਾਈਟ ਡਿਜ਼ਾਈਨ ਦਾ ਜ਼ਰੂਰੀ ਹਿੱਸਾ ਹਨ . ਜਦੋਂ ਕਿ ਕੁਝ ਸਕ੍ਰੀਨ ਆਕਾਰ ਲਈ ਮੀਡੀਆ ਕਵਿਤਾਵਾਂ ਟੈਕਸਟ ਕਰਦੇ ਹਨ, ਫੀਚਰ ਸਵਾਲ ਇਹ ਵੇਖਣ ਲਈ ਜਾਂਚ ਕਰਨਗੇ ਕਿ ਕੀ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਸਮਰਥਿਤ ਹੈ ਜਾਂ ਨਹੀਂ ਤੁਹਾਡੇ ਦੁਆਰਾ ਵਰਤੇ ਗਏ ਸੰਟੈਕਸ ਇਹ ਹੈ:

@ ਸਪੋਰਟਸ (ਡਿਸਪਲੇ: ਫੈਕਸ) {}

ਜੇਕਰ ਤੁਸੀ ਇਸ ਨਿਯਮ ਦੇ ਅੰਦਰ ਸ਼ਾਮਿਲ ਕੀਤੀਆਂ ਕੋਈ ਵੀ ਸਟਾਈਲ ਕੇਵਲ ਤਾਂ ਹੀ ਕੰਮ ਕਰੇਗਾ ਜੇ ਇਹ ਬ੍ਰਾਉਜ਼ਰ "ਫਲੈਕਸ" ਨੂੰ ਸਮਰਥਿਤ ਹੋਵੇ, ਜੋ ਕਿ ਫੈਕਸਬੌਕਸ ਲਈ ਸਟਾਈਲ ਹੈ. ਤੁਸੀਂ ਹਰੇਕ ਲਈ ਨਿਯਮ ਦੇ ਇੱਕ ਸੈੱਟ ਨੂੰ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਫਿਰ ਸਿਰਫ ਚੋਣਵੇਂ ਬ੍ਰਾਉਜ਼ਰਸ ਲਈ ਵਾਧੂ ਜੋੜਨ ਲਈ ਫੀਚਰ ਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ

ਜੈਨੀਫਰ ਕ੍ਰਿਨਿਨ ਦੁਆਰਾ ਮੂਲ ਲੇਖ. 12/13/16 ਨੂੰ ਜਰਮੀ ਗਿਰਾਰਡ ਦੁਆਰਾ ਸੰਪਾਦਿਤ