අන්තර්ගත අලෙවි

ආලෝකය සහ අඳුරු මාදිලිය සමඟ CSS ස්ප්‍රයිට් භාවිතා කරන්නේ කෙසේද

CSS ස්ප්‍රයිට් යනු වෙබ් සංවර්ධන ක්‍රියාවලියේදී සංඛ්‍යාව අඩු කිරීම සඳහා භාවිතා කරන තාක්‍ෂණයකි HTTP වෙබ් පිටුවක් මගින් කරන ලද ඉල්ලීම්. ඒවාට කුඩා පින්තූර කිහිපයක් එක් විශාල රූප ගොනුවකට ඒකාබද්ධ කිරීම සහ එම රූපයේ නිශ්චිත කොටස් වෙබ් පිටුවේ තනි අංග ලෙස පෙන්වීමට CSS භාවිතා කිරීම ඇතුළත් වේ.

CSS ස්ප්‍රයිට් භාවිතා කිරීමේ මූලික ප්‍රතිලාභය නම් වෙබ් අඩවියක් සඳහා පිටු පැටවීමේ කාලය වැඩි දියුණු කිරීමට ඔවුන්ට උපකාර කළ හැකි වීමයි. වෙබ් පිටුවක පින්තූරයක් පූරණය වන සෑම අවස්ථාවකම, එයට වෙනම HTTP ඉල්ලීමක් අවශ්‍ය වන අතර, එය පැටවීමේ ක්‍රියාවලිය මන්දගාමී කළ හැක. පින්තූර කිහිපයක් තනි ස්ප්‍රයිට් රූපයකට ඒකාබද්ධ කිරීමෙන්, අපට පිටුව පූරණය කිරීමට අවශ්‍ය HTTP ඉල්ලීම් ගණන අඩු කළ හැකිය. මෙය වේගවත් සහ වඩාත් ප්‍රතිචාරාත්මක වෙබ් අඩවියක් ඇති කළ හැක, විශේෂයෙන්ම අයිකන සහ බොත්තම් වැනි කුඩා රූප සහිත අඩවි සඳහා.

CSS ස්ප්‍රයිට් භාවිතා කිරීමෙන් බ්‍රව්සර් හැඹිලියේ ප්‍රයෝජන ගැනීමටද අපට ඉඩ සලසයි. පරිශීලකයෙකු වෙබ් අඩවියකට පිවිසෙන විට, ඔවුන්ගේ බ්‍රවුසරය පළමු ඉල්ලීමෙන් පසුව ස්ප්‍රයිට් රූපය හැඹිලිගත කරයි. මෙයින් අදහස් කරන්නේ බ්‍රවුසරයේ දැනටමත් රූපය එහි හැඹිලියේ ඇති බැවින් ස්ප්‍රයිට් රූපය භාවිතා කරන වෙබ් පිටුවේ තනි මූලද්‍රව්‍ය සඳහා වන ඉල්ලීම් වඩා වේගවත් වනු ඇති බවයි.

CSS ස්ප්‍රයිට් කලින් තිබුන තරම් ජනප්‍රිය නැහැ

CSS ස්ප්‍රයිට් වෙබ් අඩවි වේගය වැඩි දියුණු කිරීම සඳහා තවමත් බහුලව භාවිතා වේ, නමුත් ඒවා කලින් තිබූ තරම් ජනප්‍රිය නොවිය හැකිය. ඉහළ කලාප පළලක් නිසා, වෙබ් ආකෘති, රූප සම්පීඩනය, අන්තර්ගත බෙදාහැරීමේ ජාල (සීඩීඑන්), කම්මැලි පැටවීම, සහ ශක්තිමත් හැඹිලි තාක්‍ෂණයන්, අපි වෙබයේ වෙනදා තරම් CSS ස්ප්‍රයිට් දකින්නේ නැත… එය තවමත් විශිෂ්ට උපාය මාර්ගයකි. ඔබට කුඩා පින්තූර රාශියක් යොමු කරන පිටුවක් තිබේ නම් එය විශේෂයෙන් ප්‍රයෝජනවත් වේ.

CSS Sprite උදාහරණය

CSS ස්ප්‍රයිට් භාවිතා කිරීමට, අපි CSS භාවිතයෙන් ස්ප්‍රයිට් රූප ගොනුව තුළ එක් එක් රූපයේ පිහිටීම නිර්වචනය කළ යුතුය. මෙය සාමාන්‍යයෙන් සිදු කරනුයේ සැකසීමෙනි background-image සහ background-position ස්ප්‍රයිට් රූපය භාවිතා කරන වෙබ් පිටුවේ එක් එක් මූලද්‍රව්‍ය සඳහා ගුණාංග. ස්ප්‍රයිට් තුළ රූපයේ x සහ y ඛණ්ඩාංක නියම කිරීමෙන්, අපට පිටුවේ වෙනම මූලද්‍රව්‍ය ලෙස තනි රූප පෙන්විය හැක. මෙන්න උදාහරණයක්... අපට තනි රූප ගොනුවක බොත්තම් දෙකක් තිබේ:

CSS Sprite උදාහරණය

වම් පැත්තේ තියෙන image එක පෙන්නන්න ඕනේ නම්, අපිට div එක දෙන්න පුළුවන් 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 Sprites

මෙහි එක් රසවත් භාවිතයක් වන්නේ ආලෝකය සහ අඳුරු මාදිලියයි. සමහර විට ඔබට අඳුරු පසුබිමක නොපෙනෙන අඳුරු අකුරු සහිත ලාංඡනයක් හෝ රූපයක් තිබේ. මම මෙම උදාහරණය කළේ ආලෝක මාදිලිය සඳහා සුදු මධ්‍යස්ථානයක් සහ අඳුරු ප්‍රකාරය සඳහා අඳුරු මධ්‍යස්ථානයක් ඇති බොත්තමක් සඳහා ය.

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

ව්යතිරේක: ඊමේල් සේවාලාභීන් මෙයට සහාය නොදක්වයි

Gmail වැනි සමහර විද්‍යුත් තැපැල් සේවාලාභීන් CSS විචල්‍ය සඳහා සහය නොදක්වයි, ඒවා ආලෝකය සහ අඳුරු මාතයන් අතර මාරු වීමට මා ලබා දුන් උදාහරණයේ භාවිතා වේ. මෙයින් අදහස් කරන්නේ විවිධ වර්ණ පටිපාටි සඳහා ස්ප්‍රයිට් රූපයේ විවිධ අනුවාද අතර මාරු වීමට ඔබට විකල්ප ක්‍රම භාවිතා කිරීමට අවශ්‍ය විය හැකි බවයි.

තවත් සීමාවක් නම් සමහර විද්‍යුත් තැපැල් සේවාලාභීන් CSS ස්ප්‍රයිට් වල බහුලව භාවිතා වන ඇතැම් CSS ගුණාංග සඳහා සහය නොදක්වයි. background-position. මෙය ස්ප්‍රයිට් රූප ගොනුව තුළ තනි රූප ස්ථානගත කිරීම අපහසු කරයි.

Douglas Karr

Douglas Karr හි CMO වේ විවෘත INSIGHTS සහ නිර්මාතෘ Martech Zone. ඩග්ලස් සාර්ථක MarTech ආරම්භක දුසිම් ගණනකට උදව් කර ඇත, මාර්ටෙක් අත්පත් කර ගැනීම් සහ ආයෝජන සඳහා ඩොලර් 5 කට වඩා වැඩි කඩිසරකමකට සහාය වී ඇත, සහ ඔවුන්ගේ විකුණුම් සහ අලෙවිකරණ උපාය මාර්ග ක්‍රියාත්මක කිරීමට සහ ස්වයංක්‍රීය කිරීමට සමාගම්වලට දිගටම සහාය වේ. ඩග්ලස් යනු ජාත්‍යන්තරව පිළිගත් ඩිජිටල් පරිවර්තනයක් වන අතර MarTech විශේෂඥයෙකු සහ කථිකයෙකි. ඩග්ලස් ඩමිගේ මාර්ගෝපදේශකයෙකු සහ ව්‍යාපාර නායකත්ව පොතක ප්‍රකාශිත කතුවරයෙකි.

සබැඳි පුවත්

ඉහළට බොත්තම
සමීප

Adblock අනාවරණය විය

Martech Zone වෙළඳ දැන්වීම් ආදායම, අනුබද්ධ සබැඳි සහ අනුග්‍රාහකත්ව හරහා අපි අපගේ වෙබ් අඩවියෙන් මුදල් උපයන නිසා කිසිදු වියදමකින් තොරව ඔබට මෙම අන්තර්ගතය ලබා දීමට හැකි වේ. ඔබ අපගේ වෙබ් අඩවිය නරඹන විට ඔබේ දැන්වීම් අවහිර කරන්නා ඉවත් කරන්නේ නම් අපි අගය කරන්නෙමු.