ආලෝකය සහ අඳුරු මාදිලිය සමඟ CSS ස්ප්රයිට් භාවිතා කරන්නේ කෙසේද
CSS ස්ප්රයිට් යනු වෙබ් සංවර්ධන ක්රියාවලියේදී සංඛ්යාව අඩු කිරීම සඳහා භාවිතා කරන තාක්ෂණයකි HTTP වෙබ් පිටුවක් මගින් කරන ලද ඉල්ලීම්. ඒවාට කුඩා පින්තූර කිහිපයක් එක් විශාල රූප ගොනුවකට ඒකාබද්ධ කිරීම සහ එම රූපයේ නිශ්චිත කොටස් වෙබ් පිටුවේ තනි අංග ලෙස පෙන්වීමට CSS භාවිතා කිරීම ඇතුළත් වේ.
CSS ස්ප්රයිට් භාවිතා කිරීමේ මූලික ප්රතිලාභය නම් වෙබ් අඩවියක් සඳහා පිටු පැටවීමේ කාලය වැඩි දියුණු කිරීමට ඔවුන්ට උපකාර කළ හැකි වීමයි. වෙබ් පිටුවක පින්තූරයක් පූරණය වන සෑම අවස්ථාවකම, එයට වෙනම HTTP ඉල්ලීමක් අවශ්ය වන අතර, එය පැටවීමේ ක්රියාවලිය මන්දගාමී කළ හැක. පින්තූර කිහිපයක් තනි ස්ප්රයිට් රූපයකට ඒකාබද්ධ කිරීමෙන්, අපට පිටුව පූරණය කිරීමට අවශ්ය HTTP ඉල්ලීම් ගණන අඩු කළ හැකිය. මෙය වේගවත් සහ වඩාත් ප්රතිචාරාත්මක වෙබ් අඩවියක් ඇති කළ හැක, විශේෂයෙන්ම අයිකන සහ බොත්තම් වැනි කුඩා රූප සහිත අඩවි සඳහා.
CSS ස්ප්රයිට් භාවිතා කිරීමෙන් බ්රව්සර් හැඹිලියේ ප්රයෝජන ගැනීමටද අපට ඉඩ සලසයි. පරිශීලකයෙකු වෙබ් අඩවියකට පිවිසෙන විට, ඔවුන්ගේ බ්රවුසරය පළමු ඉල්ලීමෙන් පසුව ස්ප්රයිට් රූපය හැඹිලිගත කරයි. මෙයින් අදහස් කරන්නේ බ්රවුසරයේ දැනටමත් රූපය එහි හැඹිලියේ ඇති බැවින් ස්ප්රයිට් රූපය භාවිතා කරන වෙබ් පිටුවේ තනි මූලද්රව්ය සඳහා වන ඉල්ලීම් වඩා වේගවත් වනු ඇති බවයි.
CSS ස්ප්රයිට් කලින් තිබුන තරම් ජනප්රිය නැහැ
CSS ස්ප්රයිට් වෙබ් අඩවි වේගය වැඩි දියුණු කිරීම සඳහා තවමත් බහුලව භාවිතා වේ, නමුත් ඒවා කලින් තිබූ තරම් ජනප්රිය නොවිය හැකිය. ඉහළ කලාප පළලක් නිසා, වෙබ් ආකෘති, රූප සම්පීඩනය, අන්තර්ගත බෙදාහැරීමේ ජාල (සීඩීඑන්), කම්මැලි පැටවීම, සහ ශක්තිමත් හැඹිලි තාක්ෂණයන්, අපි වෙබයේ වෙනදා තරම් CSS ස්ප්රයිට් දකින්නේ නැත… එය තවමත් විශිෂ්ට උපාය මාර්ගයකි. ඔබට කුඩා පින්තූර රාශියක් යොමු කරන පිටුවක් තිබේ නම් එය විශේෂයෙන් ප්රයෝජනවත් වේ.
CSS Sprite උදාහරණය
CSS ස්ප්රයිට් භාවිතා කිරීමට, අපි CSS භාවිතයෙන් ස්ප්රයිට් රූප ගොනුව තුළ එක් එක් රූපයේ පිහිටීම නිර්වචනය කළ යුතුය. මෙය සාමාන්යයෙන් සිදු කරනුයේ සැකසීමෙනි background-image
සහ background-position
ස්ප්රයිට් රූපය භාවිතා කරන වෙබ් පිටුවේ එක් එක් මූලද්රව්ය සඳහා ගුණාංග. ස්ප්රයිට් තුළ රූපයේ x සහ y ඛණ්ඩාංක නියම කිරීමෙන්, අපට පිටුවේ වෙනම මූලද්රව්ය ලෙස තනි රූප පෙන්විය හැක. මෙන්න උදාහරණයක්... අපට තනි රූප ගොනුවක බොත්තම් දෙකක් තිබේ:
වම් පැත්තේ තියෙන 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 භාවිතයෙන්, පරිශීලකයා ආලෝක ප්රකාරය හෝ අඳුරු ප්රකාරය භාවිතා කරන්නේද යන්න මත පදනම්ව මට සුදුසු රූප පසුබිම පෙන්විය හැක:
: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
. මෙය ස්ප්රයිට් රූප ගොනුව තුළ තනි රූප ස්ථානගත කිරීම අපහසු කරයි.