ഉള്ളടക്കം മാര്ക്കവറ്റിംഗ്

ലൈറ്റ് ആന്റ് ഡാർക്ക് മോഡിൽ CSS സ്‌പ്രൈറ്റുകൾ എങ്ങനെ ഉപയോഗിക്കാം

സി.എസ്.എസ് ഇവയുടെ എണ്ണം കുറയ്ക്കാൻ വെബ് ഡെവലപ്‌മെന്റിൽ ഉപയോഗിക്കുന്ന ഒരു സാങ്കേതികതയാണ് സ്‌പ്രൈറ്റുകൾ HTTP ഒരു വെബ് പേജ് മുഖേനയുള്ള അഭ്യർത്ഥനകൾ. അവയിൽ ഒന്നിലധികം ചെറിയ ചിത്രങ്ങൾ സംയോജിപ്പിച്ച് ഒരു വലിയ ഇമേജ് ഫയലിൽ ഉൾപ്പെടുത്തുകയും CSS ഉപയോഗിച്ച് ആ ചിത്രത്തിന്റെ പ്രത്യേക വിഭാഗങ്ങൾ വെബ് പേജിൽ വ്യക്തിഗത ഘടകങ്ങളായി പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു.

CSS സ്‌പ്രൈറ്റുകൾ ഉപയോഗിക്കുന്നതിന്റെ പ്രാഥമിക പ്രയോജനം, ഒരു വെബ്‌സൈറ്റിനായി പേജ് ലോഡ് സമയം മെച്ചപ്പെടുത്താൻ അവ സഹായിക്കും എന്നതാണ്. ഓരോ തവണയും ഒരു വെബ് പേജിൽ ഒരു ചിത്രം ലോഡ് ചെയ്യുമ്പോൾ, അതിന് ഒരു പ്രത്യേക HTTP അഭ്യർത്ഥന ആവശ്യമാണ്, അത് ലോഡിംഗ് പ്രക്രിയയെ മന്ദഗതിയിലാക്കാം. ഒന്നിലധികം ചിത്രങ്ങൾ ഒരു സ്‌പ്രൈറ്റ് ഇമേജിലേക്ക് സംയോജിപ്പിക്കുന്നതിലൂടെ, പേജ് ലോഡുചെയ്യുന്നതിന് ആവശ്യമായ HTTP അഭ്യർത്ഥനകളുടെ എണ്ണം നമുക്ക് കുറയ്ക്കാനാകും. ഇത് വേഗതയേറിയതും കൂടുതൽ പ്രതികരിക്കുന്നതുമായ വെബ്‌സൈറ്റിന് കാരണമാകും, പ്രത്യേകിച്ചും ഐക്കണുകളും ബട്ടണുകളും പോലുള്ള നിരവധി ചെറിയ ചിത്രങ്ങളുള്ള സൈറ്റുകൾക്ക്.

CSS സ്‌പ്രൈറ്റുകൾ ഉപയോഗിക്കുന്നത് ബ്രൗസർ കാഷിംഗ് പ്രയോജനപ്പെടുത്താനും ഞങ്ങളെ അനുവദിക്കുന്നു. ഒരു ഉപയോക്താവ് ഒരു വെബ്‌സൈറ്റ് സന്ദർശിക്കുമ്പോൾ, ആദ്യത്തെ അഭ്യർത്ഥനയ്ക്ക് ശേഷം അവരുടെ ബ്രൗസർ സ്‌പ്രൈറ്റ് ഇമേജ് കാഷെ ചെയ്യും. സ്‌പ്രൈറ്റ് ഇമേജ് ഉപയോഗിക്കുന്ന വെബ് പേജിലെ വ്യക്തിഗത ഘടകങ്ങൾക്കായുള്ള തുടർന്നുള്ള അഭ്യർത്ഥനകൾ ബ്രൗസറിന് ഇതിനകം തന്നെ അതിന്റെ കാഷെയിൽ ഇമേജ് ഉണ്ടായിരിക്കുമെന്നതിനാൽ ഇത് വളരെ വേഗത്തിലായിരിക്കുമെന്നാണ് ഇതിനർത്ഥം.

CSS സ്‌പ്രൈറ്റുകൾ പഴയതുപോലെ ജനപ്രിയമല്ല

സൈറ്റിന്റെ വേഗത മെച്ചപ്പെടുത്താൻ CSS സ്‌പ്രൈറ്റുകൾ ഇപ്പോഴും സാധാരണയായി ഉപയോഗിക്കുന്നു, എന്നിരുന്നാലും അവ പഴയതുപോലെ ജനപ്രിയമായിരിക്കില്ല. ഉയർന്ന ബാൻഡ്‌വിഡ്ത്ത് കാരണം, വെബ്‌ ഫോർമാറ്റുകൾ, ഇമേജ് കംപ്രഷൻ, ഉള്ളടക്ക ഡെലിവറി നെറ്റ്‌വർക്കുകൾ (CDN), അലസമായ ലോഡിംഗ്, ഒപ്പം ശക്തമായ കാഷിംഗ് സാങ്കേതികവിദ്യകൾ, ഞങ്ങൾ വെബിൽ പഴയത് പോലെ CSS സ്‌പ്രൈറ്റുകൾ കാണുന്നില്ല... ഇത് ഇപ്പോഴും ഒരു മികച്ച തന്ത്രമാണ്. നിരവധി ചെറിയ ചിത്രങ്ങൾ പരാമർശിക്കുന്ന ഒരു പേജ് നിങ്ങൾക്കുണ്ടെങ്കിൽ അത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

CSS സ്പ്രൈറ്റ് ഉദാഹരണം

CSS സ്‌പ്രൈറ്റുകൾ ഉപയോഗിക്കുന്നതിന്, CSS ഉപയോഗിച്ച് സ്‌പ്രൈറ്റ് ഇമേജ് ഫയലിനുള്ളിലെ ഓരോ ചിത്രത്തിന്റെയും സ്ഥാനം ഞങ്ങൾ നിർവചിക്കേണ്ടതുണ്ട്. ഇത് സാധാരണയായി സജ്ജീകരിച്ചാണ് ചെയ്യുന്നത് background-image ഒപ്പം background-position സ്പ്രൈറ്റ് ഇമേജ് ഉപയോഗിക്കുന്ന വെബ് പേജിലെ ഓരോ എലമെന്റിനുമുള്ള പ്രോപ്പർട്ടികൾ. സ്‌പ്രൈറ്റിനുള്ളിൽ ചിത്രത്തിന്റെ x, y കോർഡിനേറ്റുകൾ വ്യക്തമാക്കുന്നതിലൂടെ, പേജിൽ നമുക്ക് വ്യക്തിഗത ചിത്രങ്ങൾ പ്രത്യേക ഘടകങ്ങളായി പ്രദർശിപ്പിക്കാൻ കഴിയും. ഇതാ ഒരു ഉദാഹരണം... ഒരു ഇമേജ് ഫയലിൽ ഞങ്ങൾക്ക് രണ്ട് ബട്ടണുകൾ ഉണ്ട്:

CSS സ്പ്രൈറ്റ് ഉദാഹരണം

ഇടതുവശത്തുള്ള ചിത്രം പ്രദർശിപ്പിക്കണമെങ്കിൽ, നമുക്ക് ഡിവി ഉപയോഗിച്ച് നൽകാം arrow-left ക്ലാസ് എന്ന നിലയിൽ കോർഡിനേറ്റുകൾ ആ വശം മാത്രം പ്രദർശിപ്പിക്കുന്നു:

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

വലത് അമ്പടയാളം പ്രദർശിപ്പിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഞങ്ങളുടെ div-ന്റെ ക്ലാസ് ഞങ്ങൾ സജ്ജമാക്കും arrow-right.

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

ലൈറ്റ് ആൻഡ് ഡാർക്ക് മോഡിനുള്ള CSS സ്‌പ്രൈറ്റുകൾ

ലൈറ്റ്, ഡാർക്ക് മോഡുകൾ ഉപയോഗിച്ചാണ് ഇതിന്റെ രസകരമായ ഒരു ഉപയോഗം. ഇരുണ്ട പശ്ചാത്തലത്തിൽ ദൃശ്യമാകാത്ത ഇരുണ്ട ടെക്‌സ്‌റ്റുള്ള ഒരു ലോഗോയോ ചിത്രമോ നിങ്ങൾക്ക് ഉണ്ടായിരിക്കാം. ലൈറ്റ് മോഡിനായി വെളുത്ത കേന്ദ്രവും ഡാർക്ക് മോഡിന് ഇരുണ്ട കേന്ദ്രവുമുള്ള ഒരു ബട്ടണിന്റെ ഉദാഹരണമാണ് ഞാൻ ചെയ്തത്.

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. സ്പ്രൈറ്റ് ഇമേജ് ഫയലിനുള്ളിൽ വ്യക്തിഗത ഇമേജുകൾ സ്ഥാപിക്കുന്നത് ഇത് ബുദ്ധിമുട്ടാക്കും.

Douglas Karr

Douglas Karr യുടെ CMO ആണ് ഓപ്പൺ ഇൻസൈറ്റുകൾ യുടെ സ്ഥാപകനും Martech Zone. വിജയകരമായ ഡസൻ കണക്കിന് മാർടെക് സ്റ്റാർട്ടപ്പുകളെ ഡഗ്ലസ് സഹായിച്ചിട്ടുണ്ട്, മാർടെക് ഏറ്റെടുക്കലുകളിലും നിക്ഷേപങ്ങളിലും $5 ബില്ലിൽ കൂടുതൽ ശ്രദ്ധ ചെലുത്തുന്നതിൽ സഹായിച്ചിട്ടുണ്ട്, കൂടാതെ കമ്പനികളുടെ വിൽപ്പന, വിപണന തന്ത്രങ്ങൾ നടപ്പിലാക്കുന്നതിലും ഓട്ടോമേറ്റ് ചെയ്യുന്നതിലും കമ്പനികളെ തുടർന്നും സഹായിക്കുന്നു. അന്താരാഷ്ട്രതലത്തിൽ അംഗീകൃത ഡിജിറ്റൽ പരിവർത്തനവും മാർടെക് വിദഗ്ധനും സ്പീക്കറുമാണ് ഡഗ്ലസ്. ഡമ്മിയുടെ ഗൈഡിന്റെയും ബിസിനസ് ലീഡർഷിപ്പ് പുസ്തകത്തിന്റെയും പ്രസിദ്ധീകരിച്ച എഴുത്തുകാരൻ കൂടിയാണ് ഡഗ്ലസ്.

ബന്ധപ്പെട്ട ലേഖനങ്ങൾ

മുകളിലേയ്ക്ക് മടങ്ങുക ബട്ടൺ
അടയ്ക്കുക

ആഡ്ബ്ലോക്ക് കണ്ടെത്തി

Martech Zone പരസ്യ വരുമാനം, അനുബന്ധ ലിങ്കുകൾ, സ്പോൺസർഷിപ്പുകൾ എന്നിവയിലൂടെ ഞങ്ങൾ ഞങ്ങളുടെ സൈറ്റിൽ നിന്ന് ധനസമ്പാദനം നടത്തുന്നതിനാൽ ഈ ഉള്ളടക്കം നിങ്ങൾക്ക് ഒരു ചെലവും കൂടാതെ നൽകാൻ കഴിയും. നിങ്ങൾ ഞങ്ങളുടെ സൈറ്റ് കാണുമ്പോൾ നിങ്ങളുടെ പരസ്യ ബ്ലോക്കർ നീക്കം ചെയ്താൽ ഞങ്ങൾ അഭിനന്ദിക്കുന്നു.