CSS-sprites: මූලික ශිල්ප ක්රම පිළිබඳ විස්තරයක් සහ ප්රයෝජනවත් උපදෙස්

වේගවත්, ලස්සන හා කාර්යක්ෂම දෙකම සංවර්ධනය අදියරේ දී, කරන විට ඒ හා සේවාලාභී සමඟ වැඩ කිරීමට නවීන අඩවිය. නීතියක් ලෙස, සමඟ අමුත්තන් සම්පත් නිර්මාණය කරන බවට සෑම සමාගම, තම මුහුණ කිරීමට, එහි නිර්මාණය, ශෛලිය, විශ්වසනීයත්වය, වේගය හා අනෙකුත් ගුණාංග සමඟ අමුත්තන් ආකර්ශනය කර ගැනීමට උත්සාහ කරයි.

sprites ප්රයෝජනවත් ගුණ

CSS-sprites වෙබ් අඩවිය හා සමාගමේ රූපයේ ගුණාත්මක ලක්ෂණ දෙකම වැඩි දියුණු කළ හැක. එහි හරය, එය සංකීර්ණ සංවර්ධන මෙවලමක් නොවේ, නමුත් එය ඇත්තටම ක්රියාවලිය සහ සම්පත් සංවර්ධන දක්වා පැය, සහ ඔවුන්ගේ වැඩ කටයුතු වේගය.

වෙනත් දේ අතර, එය කේතය සරළ හා, එක් අර්ථයකින්, එය, නිසා ඔබ, ශෛලිය නිර්මාණය අංග සංවාදයක් එම චිත්රක අදහස් භාවිතා කළ හැකි නිසා භාවිතා CSS-sprites, සමීප ඥාතීන් ලෙස සමාන බව වෙනත් සම්පත් අතේ ගෙන යා හැකි වන අතර, මෙම ටැගය ව්යුහය, අන්තර්ගතය.

පින්තූර ගොඩක් කරන්න අඩවියේ සංවර්ධනය සාමාන්ය පාඨමාලාව. බොහෝ විට, මෙම රූප ඉතා සුළු ඉඩක් ගන්න, නමුත් සෑම විටම වෙනම ගොනු ඇත. ඕනෑම සේවාදායකය ඕනෑම මෙහෙයුම් පද්ධතියක් සඳහා ගොනුව විවෘත - A කාලය කා මෙම මෙහෙයුම, කෙසේ වෙතත්, කාලය ගොනුව 13 13 පික්සල විවෘත විට, සහ ගොනු 16 පින්තූර 52 සිට පික්සල 52 විවෘත කළ විට සම්බන්ධයෙන් සැලකිය යුතු වෙනස් නැත. පළමු අවස්ථාවේ දී, ඔබ දෙවන නඩුව රූප 16 එකම ගොනු විවෘත කිරීමේ ප්රතිඵලයක් ලෙස ලබා ගන්නා ගොනු 16 හා 16 විවෘත වී / මෙහෙයුම් කියවන්න,.

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

එහි අවාසිය

පංකා ඇති විට, ඉතා frisky භාවිතා කිරීම රෙකමදාරු කරනු CSS sprites අවශ්යයෙන්ම ප්රශ්නය හොඳින් අධ්යයනය හා පැහැදිලිව එය පැරණි තාලයේ ක්රමයක් වැඩ කිරීමට සෑම විටම ප්රායෝගික බව පෙන්නුම් කරන අය වේ.

ඇත්ත වශයෙන්ම, පින්තූර 16 එක් ගොනුවක් තිබේ නම්, ඒ වෙනුවට 16 විවෘත / කියවීමට මෙහෙයුම් වෙනුවට පින්තූරයක් ගොනු 16 එක් වනු ඇත. එහෙත් උපක්රමය සෑම බ්රවුසරය තොගයක් ඇති බව, සහ එය පමණක් අවසාන විකල්පය ලෙස යමක් පටවන වේ. මීට අමතරව, සාමාන්යයෙන් ඔබ මුලින්ම පිටුව සංචාරය කරන විට මෙම පිටුව අංග පටවා, පසුව පමණක් වෙනස් රුවා නැත.

තවත් අංගයක්. සාමාන්යයෙන්, තනි ගොනු කිරීමට තදින් ඇලී නොවේ, මෙම පින්තූරය කපා ඇත. කෙසේ හෝ එය තාක්ෂණය, එය කියන්න හොඳ වන අතර, මෙම චාරිත්රය සංවර්ධනය කර ඇත. මෙම සැකැස්මේ සිහින් ව පෙති කැපූ කෑලි: නිර්මාණ සැළැස්ම හා සැකැස්ම ඔහුගේ කෑලි භාවිතා නිර්මාණය. පානය ක්රියාකාරකම්, මුළු පිටු සැලසුම් වැඩි කරන අතර - විරුද්ධවාදීන් sprites එක් ගොනුවක් රූප කිහිපයක් අහුලා බව අප විශ්වාස කරනවා.

මෙම රැකියාව CSS-sprites වඩා වඩා හොඳ බව විශ්වාස, විශ්වාස සහ HTTP-ඉල්ලීම් සංඛ්යාව උපරිම ඵල අය සංවර්ධකයින් ඇත.

ඇඟවුම් සියලු වේලාවන් නිසැකව ම වැදගත් වේ, නමුත් වඩා වැදගත් වන දැක්ම වේ: එය සාධාරණ සීමාවන් තුළ අයදුම් කළ යුතුය.

ස්වයංකරණය සහ CSS-sprites

එය CSS sprites ජනකය ක්රියාත්මක සහ නිර්මාණ අයිතිය කොටසක් ලබා ගැනීමට කිසිදු තේරුමක් නම්, කිසිවක් හුදෙක් සාමාන්ය ක්රමය මෙම කොටස හදාගන්න වළක්වයි. සාම්ප්රදායික තාක්ෂණය එය රූප සිය ගණනක් කපා කිරීමට අවශ්ය වේ නම්, එය අවශ්යතාව පිළිබඳ ස්ප්රයිට් අපේක්ෂිත ප්රදේශයේ තෝරා එය දිස් වනු ඇත කරන ලද ජාවාස්ක්රිප්ට් කාර්යය, සංක්ෂිප්ත වශයෙන් වඩාත් සුදුසු.

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

sprites යොදා විෂය ප්රතිලාභ

CSS ක්රමලේඛන භාෂා මෙන් නොව, මෙම සියලූ ගතිකත්වයන් නීති සහ ඔවුන්ගේ ක්රියාකාරී අන්තර්ගතය (සම්මත) විසින් තීරණය කරනු නීති සාපේක්ෂව ස්ථිතික සමූහයක් වේ. , සංකීර්ණ දී sprites සලකා මෙම HTML, තැටියක CSS පුස්තකාලය ක වර්ණ තේමාවෙන් යුත් මේ-ක්රියාකාරී සැලසුම් නිර්මාණය කළ හැකිය.

උදාහරණයක් ලෙස මෙනු, නිමි අනුවාදය: සරල බහු CSS-රීති, JS-කාර්යයන් සම්බන්ධ හා HTML-divs කේත අංකය ඇතුලත්, ඔබ ප්රතිඵලයක් ලබා ගත හැක. මෙම ස්ප්රයිට් ප්රතිරූපය අන්තර්ගතය වෙනස් කිරීමෙන්, ඔබ මෙනු පෙනුම වෙනස් කළ හැක. එම ශ්රිතයේ ශරීරය නියම, ඔබ ක්රියාකාරිත්වය වෙනස් කළ හැක.

සුවිශේෂ ප්රභේද්යයක් ලබා ගන්න වස්තුවක්-අභිමුඛ වැඩසටහන් (OOP) ය. වග බලා ගන්න, එය දීප්තිමත් අදහසක් විය හැකිය, නමුත් එය වෙනත් OOP භාෂා, උප භාෂා සැබෑ පසුබිම එරෙහිව නැගී සිටීමට තරම් දීප්තිමත් වනු ඇත. එය සේවය කරන PLO පණ අසාමාන්ය ඉක්මනින් හිරු ස්ථානයක් ලබා බවට පත් විය වූ විට, එය නිශ්චිත අදහසක් සහ එහි අදහස් ප්රකාශ කිරීමේ කොන්ක්රීට් ආකෘති පත්රය, නමුත් විවිධ රුසියානු දක්නට ඇති බැවින් දැන් සංවර්ධකයින් ලෙස බොහෝ උපභාෂා සමඟ පැමිණ තිබේ, පමණක් මුල් '90 ගණන්වල දී ය.

ළදරු සෙල්ලම් භාන්ඞ - sprites ඉල්ලමක්

සතුට සහ වැඩසටහන් - නොපෑහෙන සංකල්ප, නමුත් ක්රමලේඛන කුසලතා, ක්රීඩා ලියමින් obschebytovoy (සරල ගුප්ත කේතනය) සහ නිර්මාණාත්මක (නව තාක්ෂණයන් නිර්මාණය සහ සංවර්ධනය, අදහස්) සිට කැපී පෙනෙන ලෙස වෙනස් වේ.

දෛශික ඇසුරෙන් නිර්මාණය කළ රූප නිර්මාණ සඳහා ක්රීඩාව නිර්මාණ අභියාචනා, බොහෝ විට SVG-sprites සංයෝජන + CSS-නීති පමණක් නොව ඉල්ලුම, නමුත් සැබෑ ක්රීඩාවේ වස්තුවක් (මෙම වෙබ් අඩවියේ) සංවර්ධක වස්තුව බවට පත් නිසා. විශේෂයෙන් ම, ජනප්රිය ක්රීඩාව කවුන්ටරය වර්ජනය මේ sprites, බිඳිති ඉතා අර්ථවත් සමාන පද කොන්දේසි අදාළ: පිපිරීම, ලේ, ඇස් ...

ආරම්භයේදී සඳහා "ස්ප්රයිට් CSS v34 තබා" යන වැකි ඉතා සාමාන්ය සහ අවබෝධ කරගත හැකි ය. Sprites සාරය, උපයෝගිතා භාවිතය පමණක් නොව දක්නට ලැබේ, පමණක් නොව, ඉතා පූර්ණ විශේෂාංග වන අවකාශ, දැරිය හැකි සහ පහසු පාරිභෝගික යම් රවුම තේරුම් ගැනීමට පිහිටුවා ගත්හ.

CSS-sprites: නිදර්ශන

මෙම අඩවියේ ඇති පිටු මාරු කිරීමට යම් භාෂාව සඳහා විකල්ප විවිධ භාවිතා වේ, නමුත් භාෂාව තේරීම් අයිකනයක් ලෙස ඉටු කිරීමට නම්, ස්ප්රයිට් භාවිතා විසඳුම මෙම වගේ හැකිය:

පැහැදිලි අවාසි sprites

පළමුව, එය කාලය කා හා ඉතා සුපරීක්ෂාකාරීව වේ. බොහෝ කුඩා පින්තූරයක් එකතු - කුඩා කැබලිවලට නිර්මාණය කිරීම, හා අනෙකුත් කප්පාදු කිරීමට - එය එක දෙයක්. , එම කැන්වසය මතින් යන අදහස අදාළ එම වෙබ් අඩවිය සඳහා භාවිත වන රූප සියල්ල මත තැබිය සම්පූර්ණයෙන්ම ය, නිරර්ථක ය.

CSS sprites Generator භාවිතා පවා, දුෂ්කරතා එය එම වෙබ් අඩවිය නිර්මාණය වෙනස් කිරීමට අවශ්ය වන, විශේෂයෙන්ම මග හැරිය නොහැකිය. ස්ප්රයිට් රූප දස කිහිපයක් එකතු - එය අංග රැසක් නැහැ, චිත්රක රූප ඇති, එය සාමාන්යයෙන් පමණක් තිරය මත දර්ශනය, ඒ වෙනුවට ඇති අයිතිය අයිතමය සොයා ගැනීමට මාලාවක් ලෙස කේතය තෝරා බේරා ගැනීමේ වේ.

භාවිතා ප්රතිපත්තියක් පසුබිම සමග සම්බන්ධ sprites ලෙස, එය පමණක් පසුබිම් රූපය නොව එම වෙබ් අඩවිය අංගයක් බව ඔහුගේ ප්රකාශය පහත සඳහන් සම්මත හා සංවර්ධකයන්. පිටුවෙහි ග්රැෆික් සංඝටක මූලද්රව්යයන්ට ටැගය img හැසිරවීමට යුතුය.

එය විට ප්රමාණවත් තරම් පසුබිම පොදු පසුබිම ලෙස සැලකුණු බව සරල පදනම මත එකඟ කිරීම අපහසු වේ. එය කුමක් වුවත්, හුදෙක් පසුබිම ය - පුංචි අංගයක් හෝ සමස්ත පිටුව.

මේ අතර, ග්රැෆික් අංගයක් sprites භාවිතය බරපතළ බාධාවක් නියෝජනය කළේය.

බුද්ධිමත් භාවිතය

කොන්දේසි "අන්තර්ජාල තාක්ෂණය" සහ "උසස් තාක්ෂණය" පදයක් බවට ෙලස සලකන බව කාරනය තිබිය දී ම, ඇත්තෙන්ම, එය කාලය කා හා සමහර විට ඉතා අඩු තාක්ෂණික වැඩ. සංරක්ෂිත පිටපත් නිර්මාණය අනෙකුත් එවැනි පසුබිම ලෙස සකසා අඩවි හෝ තොරතුරු පිරවීමට ක්රියාවලි, JavaScript හෝ PHP හි පිරිසිදු වැඩසටහන් තුළ මෙන්ම, අවශ්ය ක්රියාකාරිත්වය වර්ධනය තුල ඇති අවහිරතා, සාපේක්ෂව sprites විශේෂයෙන් සැරසී නැහැ.

අන්තර්ගත කළමනාකරණ පද්ධති භාවිතා බලය සහ අනාගත ඔවුන්ගේ ප්රායෝගික අයදුම් බොහෝ විට එල්ල එළඹීමේදී, සහ අතින් සම්පත් සංවර්ධනය, රීතියක් ලෙස, එක් හෝ තවත් හිමිකාර ඇල්ගොරිතමය සකස්කල මෙම 1001st කාලය අවශ්යතාව කිරීමට යොමු කරයි.

මෙම සන්දර්භය තුළ, එය නූතන මෙවලමක් සපයන භාවිතා කිරීමට හුදෙක් සාධාරණ කිරීම වැදගත් වේ. එකකට වඩා අනෙක භාවිතා කිරීමට ආසාවෙන් වෙන්න එපා, සහ අඩවි ගොඩනැගිල්ලක රන් පාලනය පහස සඳහන් එම නිසා ඔබට ඕනෑම බලාපොරොත්තු නොවූ තත්ත්වයක් නඩුවේ ඉක්මනින් විසඳිය හැකි හැකි ඉක්මනින් වැඩ සමත් කිරීමට ගැන හිතන්නේ නැහැ, සහ එය ක්රියාත්මක කරන ආකාරය අවශ්ය ඕනෑම ප්රශ්නයක්.