ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਮੋਡ ਨਾਲ CSS ਸਪ੍ਰਾਈਟਸ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ

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

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

CSS ਸਪ੍ਰਾਈਟਸ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸਾਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਕੈਚਿੰਗ ਦਾ ਲਾਭ ਲੈਣ ਦੀ ਵੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਜਦੋਂ ਕੋਈ ਉਪਭੋਗਤਾ ਕਿਸੇ ਵੈਬਸਾਈਟ 'ਤੇ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਉਨ੍ਹਾਂ ਦਾ ਬ੍ਰਾਊਜ਼ਰ ਪਹਿਲੀ ਬੇਨਤੀ ਤੋਂ ਬਾਅਦ ਸਪ੍ਰਾਈਟ ਚਿੱਤਰ ਨੂੰ ਕੈਸ਼ ਕਰੇਗਾ। ਇਸਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਵੈਬ ਪੇਜ 'ਤੇ ਵਿਅਕਤੀਗਤ ਤੱਤਾਂ ਲਈ ਅਗਲੀਆਂ ਬੇਨਤੀਆਂ ਜੋ ਸਪ੍ਰਾਈਟ ਚਿੱਤਰ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੀਆਂ ਹਨ, ਬਹੁਤ ਤੇਜ਼ ਹੋਣਗੀਆਂ ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ ਕੋਲ ਪਹਿਲਾਂ ਹੀ ਇਸ ਦੇ ਕੈਸ਼ ਵਿੱਚ ਚਿੱਤਰ ਹੋਵੇਗਾ।

CSS ਸਪ੍ਰਾਈਟਸ ਓਨੇ ਪ੍ਰਸਿੱਧ ਨਹੀਂ ਹਨ ਜਿੰਨੇ ਉਹ ਪਹਿਲਾਂ ਸਨ

CSS ਸਪ੍ਰਾਈਟਸ ਅਜੇ ਵੀ ਸਾਈਟ ਦੀ ਗਤੀ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ ਹਨ, ਹਾਲਾਂਕਿ ਉਹ ਪਹਿਲਾਂ ਵਾਂਗ ਪ੍ਰਸਿੱਧ ਨਹੀਂ ਹੋ ਸਕਦੇ ਹਨ। ਉੱਚ ਬੈਂਡਵਿਡਥ ਦੇ ਕਾਰਨ, ਵੈੱਬਪ ਫਾਰਮੈਟ, ਚਿੱਤਰ ਕੰਪਰੈਸ਼ਨ, ਸਮੱਗਰੀ ਡਿਲੀਵਰੀ ਨੈੱਟਵਰਕ (CDN), ਆਲਸੀ ਲੋਡਿੰਗਹੈ, ਅਤੇ ਮਜ਼ਬੂਤ ​​ਕੈਸ਼ਿੰਗ ਤਕਨਾਲੋਜੀਆਂ, ਸਾਨੂੰ ਵੈੱਬ 'ਤੇ ਜਿੰਨੀਆਂ CSS ਸਪ੍ਰਾਈਟਸ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੀਆਂ... ਹਾਲਾਂਕਿ ਇਹ ਅਜੇ ਵੀ ਇੱਕ ਵਧੀਆ ਰਣਨੀਤੀ ਹੈ। ਇਹ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੈ ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪੰਨਾ ਹੈ ਜੋ ਬਹੁਤ ਸਾਰੀਆਂ ਛੋਟੀਆਂ ਤਸਵੀਰਾਂ ਦਾ ਹਵਾਲਾ ਦੇ ਰਿਹਾ ਹੈ।

CSS ਸਪ੍ਰਾਈਟ ਉਦਾਹਰਨ

CSS ਸਪ੍ਰਾਈਟਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ, ਸਾਨੂੰ CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਪ੍ਰਾਈਟ ਚਿੱਤਰ ਫਾਈਲ ਦੇ ਅੰਦਰ ਹਰੇਕ ਵਿਅਕਤੀਗਤ ਚਿੱਤਰ ਦੀ ਸਥਿਤੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਸੈੱਟ ਕਰਕੇ ਕੀਤਾ ਜਾਂਦਾ ਹੈ background-image ਅਤੇ background-position ਵੈੱਬ ਪੰਨੇ 'ਤੇ ਹਰੇਕ ਤੱਤ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜੋ ਸਪ੍ਰਾਈਟ ਚਿੱਤਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਸਪ੍ਰਾਈਟ ਦੇ ਅੰਦਰ ਚਿੱਤਰ ਦੇ x ਅਤੇ y ਕੋਆਰਡੀਨੇਟਸ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਕੇ, ਅਸੀਂ ਪੰਨੇ 'ਤੇ ਵੱਖਰੇ ਤੱਤਾਂ ਵਜੋਂ ਵਿਅਕਤੀਗਤ ਚਿੱਤਰਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹਾਂ। ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ... ਸਾਡੇ ਕੋਲ ਇੱਕ ਸਿੰਗਲ ਚਿੱਤਰ ਫਾਈਲ ਵਿੱਚ ਦੋ ਬਟਨ ਹਨ:

ਜੇ ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਖੱਬੇ ਪਾਸੇ ਦੀ ਤਸਵੀਰ ਦਿਖਾਈ ਜਾਵੇ, ਤਾਂ ਅਸੀਂ ਡਿਵ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦੇ ਹਾਂ arrow-left ਕਲਾਸ ਦੇ ਤੌਰ ਤੇ ਇਸ ਲਈ ਨਿਰਦੇਸ਼ਕ ਸਿਰਫ ਉਸ ਪਾਸੇ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

ਅਤੇ ਜੇਕਰ ਅਸੀਂ ਸੱਜਾ ਤੀਰ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਤਾਂ ਅਸੀਂ ਆਪਣੇ ਡਿਵ ਲਈ ਕਲਾਸ ਨੂੰ ਸੈੱਟ ਕਰਾਂਗੇ arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਮੋਡ ਲਈ CSS ਸਪ੍ਰਾਈਟਸ

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

CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਮੈਂ ਇਸ ਅਧਾਰ 'ਤੇ ਉਚਿਤ ਚਿੱਤਰ ਬੈਕਗ੍ਰਾਉਂਡ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦਾ ਹਾਂ ਕਿ ਉਪਭੋਗਤਾ ਲਾਈਟ ਮੋਡ ਜਾਂ ਡਾਰਕ ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹੈ:

:root {
  --sprite-image: url('sprite.png');
  --sprite-width: 200px;
  --sprite-height: 400px;
  --sprite-x-light: 0;
  --sprite-y-light: 0;
  --sprite-x-dark: -200px;
  --sprite-y-dark: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sprite-x-light: 200px;
    --sprite-x-dark: 0;
  }
}

.icon {
  width: 32px;
  height: 32px;
  background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}

.icon:hover {
  background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}

ਅਪਵਾਦ: ਈਮੇਲ ਕਲਾਇੰਟਸ ਇਸਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਨ

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

ਇੱਕ ਹੋਰ ਸੀਮਾ ਇਹ ਹੈ ਕਿ ਕੁਝ ਈਮੇਲ ਕਲਾਇੰਟ ਕੁਝ ਖਾਸ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ ਜੋ ਆਮ ਤੌਰ 'ਤੇ CSS ਸਪ੍ਰਾਈਟਸ ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਜਿਵੇਂ ਕਿ background-position. ਇਹ ਸਪ੍ਰਾਈਟ ਚਿੱਤਰ ਫਾਈਲ ਦੇ ਅੰਦਰ ਵਿਅਕਤੀਗਤ ਚਿੱਤਰਾਂ ਦੀ ਸਥਿਤੀ ਨੂੰ ਮੁਸ਼ਕਲ ਬਣਾ ਸਕਦਾ ਹੈ।