የይዘት ማርኬቲንግ

CSS Spritesን በብርሃን እና ጨለማ ሁነታ እንዴት መጠቀም እንደሚቻል

የሲ ኤስ ኤስ sprites ቁጥርን ለመቀነስ በድር ልማት ውስጥ ጥቅም ላይ የሚውል ዘዴ ነው። HTTP በድረ-ገጽ የሚቀርቡ ጥያቄዎች. ብዙ ትንንሽ ምስሎችን ወደ አንድ ትልቅ የምስል ፋይል በማጣመር እና በመቀጠል የዚያን ምስል የተወሰኑ ክፍሎችን በድረ-ገጹ ላይ እንደ ግለሰብ አካላት ለማሳየት CSS መጠቀምን ያካትታሉ።

የ CSS sprites መጠቀም ዋናው ጥቅም ለድር ጣቢያ የገጽ ጭነት ጊዜን ለማሻሻል ማገዝ ነው። አንድ ምስል በድረ-ገጽ ላይ በተጫነ ቁጥር የተለየ የኤችቲቲፒ ጥያቄ ያስፈልገዋል፣ ይህም የመጫን ሂደቱን ሊያዘገየው ይችላል። ብዙ ምስሎችን ወደ አንድ የስፕሪት ምስል በማጣመር፣ ገጹን ለመጫን የሚያስፈልጉትን የኤችቲቲፒ ጥያቄዎች ብዛት መቀነስ እንችላለን። ይህ ፈጣን እና የበለጠ ምላሽ ሰጪ ድህረ ገጽን ሊያስከትል ይችላል፣ በተለይም እንደ አዶ እና አዝራሮች ያሉ ብዙ ትናንሽ ምስሎች ላሏቸው ጣቢያዎች።

የ CSS sprites መጠቀምም የአሳሽ መሸጎጫ ተጠቃሚ እንድንሆን ያስችለናል። አንድ ተጠቃሚ ድህረ ገጽን ሲጎበኝ አሳሽቸው ከመጀመሪያው ጥያቄ በኋላ የስፕሪት ምስሉን መሸጎጫ ያደርገዋል። ይህ ማለት ስፕሪት ምስሉን እየተጠቀሙ ያሉት በድረ-ገጹ ላይ ለግለሰብ አካላት የሚቀርቡ ጥያቄዎች አሳሹ አስቀድሞ ምስሉን በውስጡ መሸጎጫ ውስጥ ስለሚኖረው በጣም ፈጣን ይሆናል።

CSS Sprites እንደበፊቱ ተወዳጅ አይደሉም

የCSS sprites አሁንም ቢሆን የጣቢያን ፍጥነት ለማሻሻል ጥቅም ላይ ይውላሉ፣ ምንም እንኳን እንደቀድሞው ታዋቂ ላይሆኑ ይችላሉ። ከፍተኛ የመተላለፊያ ይዘት ስላለው, ድር ቅርጸቶች, የምስል መጫን፣ የይዘት አቅርቦት ኔትወርኮች (CDN), ሰነፍ ጭነት, እና ጠንካራ መሸጎጫ ቴክኖሎጂዎች፣ በድር ላይ እንደበፊቱ ብዙ የሲኤስኤስ ስፕራይቶችን አናይም… ምንም እንኳን አሁንም ጥሩ ስትራቴጂ ነው። በተለይ ብዙ ትናንሽ ምስሎችን የሚያመለክት ገጽ ካለዎት በጣም ጠቃሚ ነው።

የ CSS Sprite ምሳሌ

CSS spritesን ለመጠቀም፣ CSS ን በመጠቀም በስፕሪት ምስል ፋይል ውስጥ የእያንዳንዱን ምስል አቀማመጥ መግለፅ አለብን። ይህ በተለምዶ የሚከናወነው በማቀናበር ነው። background-imagebackground-position የስፕሪት ምስልን ለሚጠቀም በድረ-ገጹ ላይ ላለው ለእያንዳንዱ አካል ንብረቶች። በስፕሪት ውስጥ የምስሉን x እና y መጋጠሚያዎች በመግለጽ ፣የተናጠል ምስሎችን በገጹ ላይ እንደ የተለየ አካላት ማሳየት እንችላለን። አንድ ምሳሌ ይኸውና... በአንድ የምስል ፋይል ውስጥ ሁለት አዝራሮች አሉን።

የ CSS Sprite ምሳሌ

በግራ በኩል ያለው ምስል እንዲታይ ከፈለግን ዲቪውን ማቅረብ እንችላለን 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 Sprites ለብርሃን እና ጨለማ ሁነታ

የዚህ አንድ አስደሳች አጠቃቀም ከብርሃን እና ጨለማ ሁነታዎች ጋር ነው። ምናልባት በጨለማ ዳራ ላይ የማይታይ ጥቁር ጽሑፍ ያለበት አርማ ወይም ምስል ሊኖርህ ይችላል። ይህንን የአዝራር ምሳሌ ያደረግሁት ለብርሃን ሁነታ ነጭ ማእከል እና ለጨለማ ሁነታ ጨለማ ማዕከል ያለው ነው።

css sprite ብርሃን ጨለማ

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);
}

በስተቀር፡ የኢሜል ደንበኞች ይህንን ላይደግፉ ይችላሉ።

እንደ Gmail ያሉ አንዳንድ የኢሜይል ደንበኞች በብርሃን እና በጨለማ ሁነታዎች መካከል ለመቀያየር ባቀረብኩት ምሳሌ ላይ ጥቅም ላይ የሚውሉትን የCSS ተለዋዋጮችን አይደግፉም። ይህ ማለት ለተለያዩ የቀለም መርሃግብሮች በተለያዩ የስፕሪት ምስል ስሪቶች መካከል ለመቀያየር አማራጭ ዘዴዎችን መጠቀም ሊኖርብዎ ይችላል።

ሌላው ገደብ አንዳንድ የኢሜይል ደንበኞች እንደ CSS sprites ውስጥ በብዛት ጥቅም ላይ የሚውሉ የተወሰኑ የ CSS ንብረቶችን አለመደገፍ ነው። background-position. ይህ ግለሰባዊ ምስሎችን በስፕሪት ምስል ፋይል ውስጥ ለማስቀመጥ አስቸጋሪ ያደርገዋል።

Douglas Karr

Douglas Karr CMO ነው። ግንዛቤዎችን ይክፈቱ እና መስራች Martech Zone. ዳግላስ በደርዘኖች የሚቆጠሩ ስኬታማ የማርቴክ ጅምሮችን ረድቷል፣ በማርቴክ ግዥዎች እና ኢንቨስትመንቶች ከ$5 ቢሊዮን በላይ ተገቢውን ትጋት በማግኘቱ እና ኩባንያዎች የሽያጭ እና የግብይት ስልቶቻቸውን እንዲተገብሩ እና በራስ ሰር እንዲሰሩ ማገዙን ቀጥሏል። ዳግላስ በአለም አቀፍ ደረጃ እውቅና ያለው ዲጂታል ለውጥ እና የማርቴክ ባለሙያ እና ተናጋሪ ነው። ዳግላስ የዱሚ መመሪያ እና የንግድ ሥራ አመራር መጽሐፍ የታተመ ደራሲ ነው።

ተዛማጅ ርዕሶች

ወደ ላይኛው አዝራር ተመለስ
ገጠመ

ማስታወቂያ እገዳ ተገኝቷል

Martech Zone ይህንን ይዘት ያለ ምንም ወጪ ሊያቀርብልዎ ይችላል ምክንያቱም ገጻችንን በማስታወቂያ ገቢ፣ በተዛማጅ ማገናኛ እና በስፖንሰርነት ገቢ ስለምንፈጥር ነው። ጣቢያችንን ሲመለከቱ የማስታወቂያ ማገጃውን ቢያነሱት እናደንቃለን።