CSS ကို-sprite များနမူနာ: တစ်အခြေခံနည်းစနစ်၏ဖော်ပြချက်များနှင့်အသုံးဝင်သောအကြံပေးချက်များ

မြန်ဆန်ကောင်းတဲ့နှင့်အကျိုးရှိစွာနှစ်ဦးစလုံးဖွံ့ဖြိုးရေးကို၏စင်မြင့်မှာအခါတစ်ဦးကို client အတူလုပ်ကိုင်စေခြင်းခေတ်သစ် site ကို။ စည်းကမ်းအဖြစ်, အွန်လိုင်းအရင်းအမြစ်များကိုဖန်တီးသောကုမ္ပဏီ၎င်း၏ဒီဇိုင်းစတိုင်, ယုံကြည်စိတ်ချရ, အမြန်နှုန်းနှင့်အခြား attribute တွေနှင့်အတူဧည့်သည်တွေကိုဆွဲဆောင်ဖို့, ၎င်းတို့၏ကိုယ်ပိုင်မျက်နှာရှိသည်ဖို့ရှာတတ်၏။

sprite များနမူနာ၏အသုံးဝင်သောဂုဏ်သတ္တိများ

CSS ကို-sprite များနမူနာဆိုက်နှင့်ကုမ္ပဏီ၏ပုံရိပ်များ၏အရည်အသွေးလက္ခဏာများနှစ်ဦးစလုံးတိုးတက်ကောင်းမွန်လာနိုင်ပါတယ်။ ၎င်း၏အဓိကမှာကအရမ်းရှုပ်ထွေးဖှံ့ဖွိုးတိုးတ tool ကိုမဟုတ်ဘူး, ဒါပေမယ့်တကယ့်လုပ်ငန်းစဉ်များနှင့်သယံဇာတဖွံ့ဖြိုးတိုးတက်ရေးကိုတက်အမြန်နှုန်း, သူတို့၏အလုပ်၏အမြန်နှုန်း။

အခြားအမှုအရာတို့ကိုအနက်က code ကိုရိုးရှင်းစွာနှင့်တစ်ဦးအခြို့သောသဘောကြောင့်ကြောင့်, သင်စတိုင်လ်ဒီဇိုင်း element တွေကိုတွေ့ဆုံဆွေးနွေးမှုတူညီသော graphical အတွေးအခေါ်များကိုသုံးနိုင်သည်ကြောင့်အသုံးပြုသော CSS ကို-sprite များနမူနာသည်ဆွေမျိုးနီးစပ်အဖြစ်ဆင်တူသည့်အချက်ကိုမှ, အခြားအရင်းအမြစ်များကိုမှခရီးဆောင်ဖြစ်ပါသည်, အဆိုပါ tag ကို၏ဖွဲ့စည်းပုံနှင့်အကြောင်းအရာများကို။

ဓါတ်ပုံတွေအများကြီးလုပ်ဖို့ site ၏ဖွံ့ဖြိုးတိုးတက်မှု၏ပုံမှန်သင်တန်း၌တည်၏။ အလွန်မကြာခဏအဲဒီပုံရိပ်တွေကိုနည်းနည်းပဲအာကာသကိုတက်ယူပေမယ့်အမြဲသီးခြားဖိုင်ဖြစ်ကြသည်။ မည်သည့်ဆာဗာ၏ဘယ် operating system များအတွက်ဖိုင်တစ်ခုဖွင့်လှစ် - ဤစစ်ဆင်ရေးတစ်ခုအချိန်ကုန်, သို့သော်, ဖိုင်တစ်ဖိုင် 13 13 pixels ကိုအပေါ်ဖွင့်လှစ်ခဲ့သည်, ဖိုင် 52 pixels ကို 16 ဓါတ်ပုံတွေကို 52 ကနေဖွင့်လှစ်ခဲ့တာဖြစ်ပါတယ်သောအခါအချိန်လေးစားမှုနှင့်အတူသိသိသာသာကွာခြားမည်မဟုတ်။ ပထမဦးဆုံးအမှု၌, သငျသညျဒုတိယဖြစ်ရပ်တွင်အသက် 16 ပုံရိပ်တွေတစ်ဦးတည်းသာဖိုင်ရဲ့အဖွင့်၏ရလဒ်အဖြစ်ရယူကြလိမ့်မည်, 16 ဖိုင်တွေနဲ့ 16 ပွင့်လင်းကြ / စစ်ဆင်ရေးဖတ်ပါ။

သင်ဘာသာရပ်အပေါ်ဖိုင်တွေအစုတခုဖန်တီးထားလျှင် (အလျားလိုက် menu ကို, ထိုကဲ့သို့သောပုံရိပ်တွေပြင်သာပြောင်းသာပေါင်းစပ်နိုင်တွေ့ဆုံဆွေးနွေးမှုပုံစံများ, အဂဏန်းတွက်စက်ခလုတ်ပြက္ခဒိန်ဒီဇိုင်းဒြပ်စင် ... ) site မှ site ကိုမှပြောင်းရွှေ့ခဲ့သည်။

အဆင်မပြေ

ပရိတ်သတ်တွေရှိပါတယ်အခါ, သုံးစွဲဖို့အကြံပြုလွန်း frisky CSS ကို sprite များနမူနာသေချာပေါက်ဂရုတစိုက်ကိစ္စကိုလေ့လာနေနှင့်ရှင်းလင်းစွာကအဟောင်းခေတ်လမ်းလုပ်ကိုင်ဖို့အမြဲလက်တွေ့ကျတဲ့ကြောင်းပြသလျက်ရှိသည်သောသူဖြစ်ကြ၏။

16 ပုံတစျခုဖိုင်ရှိလျှင်အမှန်စင်စစ်, အစား 16 ပွင့်လင်း / စစ်ဆင်ရေးအစား 16 ပုံတစ်ပုံကိုဖိုငျတစျခုဖွစျလိမျ့မညျကိုဖတ်ပါ။ ဒါပေမယ့်လှည့်ကွက်တိုင်း browser ကိုတစ်ဦး cache ကိုရှိပါတယ်, ဒါကြောင့်သာနောက်ဆုံးအပန်းဖြေစခန်းအဖြစ်တစ်ခုခုသက်ရောက်သောကွောငျ့ဖွစျသညျ။ ထို့အပြင်ခုနှစ်, များသောအားဖြင့်စာမကျြနှာ element တွေကိုသင်ပထမဦးဆုံးစာမျက်နှာသို့သွားရောက်သည့်အခါ loaded, ပြီးတော့သာပြောင်းလဲသွားတယ် loaded နေကြသည်။

နောက်ထပ်ရှုထောင့်။ ပုံမှန်အားဖြင့်, ထိုပုံရိပ်တစ်ခုတည်းဖိုင်လျှက်ရှိကြောင်း, မဖြတ်သည်။ တစ်နည်းနည်းနဲ့ကနည်းပညာ, သူကပြောသည် သာ. ကောင်း၏, ထုံးစံတီထွင်ခဲ့သည်။ အဆိုပါအပြင်အဆင်များထုခွဲအပိုင်းပိုင်း: အဆိုပါဒီဇိုင်နာကတော့ layout ကိုများနှင့်အဆင်အပြင်ကသူ့အပိုင်းပိုင်းကိုအသုံးပြုဖန်တီးပေးပါတယ်။ , စားသုံးလှုပ်ရှားမှုစုစုပေါင်းစာမျက်နှာဒီဇိုင်းကိုတိုးပွါးရာ - ပြိုင်ဘက် sprite များနမူနာတစျခုဖိုင်ထဲမှာအများအပြားပုံရိပ်တွေတက်ကောက်နေကယုံကြည်ကြသည်။

ယုံကြည်နှင့် HTTP-တောင်းဆိုမှုများ၏နံပါတ်ပိုကောင်းအောင်သောသူတို့အား developer များကဤသိမ်းပိုက် CSS ကို-sprite များနမူနာထက်ပိုပြီးလက်တွေ့ကျကြောင်းယုံကြည်ရှိပါတယ်။

ညွှန်ပြခပ်သိမ်းသောကာလခြောအရေးကြီးလှသည်, ဒါပေမယ့်အများကြီးပိုအရေးကြီးတဲ့မြင်ကွင်းကိုဖြစ်ပါသည်: ကကျိုးကြောင်းဆီလျော်န့်အသတ်အတွင်းလျှောက်ထားရပါမည်။

အလိုအလျောက်နဲ့ CSS-Sprite

က CSS ကို Sprite မီးစက်ကို run နှင့်ဒီဇိုင်း၏ညာဘက်အစိတ်အပိုင်းတစ်ခုရဖို့အဘယ်သူမျှမသဘာဝကျပါတယ်လျှင်, ဘာမျှရိုးရိုးသာမန်လမ်း၏ဤအပိုငျးကိုတက်စေပါကာကွယ်ပေးသည်။ သမားရိုးကျနည်းပညာပုံရိပ်တွေရာပေါင်းများစွာဖြတ်ဖို့ကလိုအပ်သောစေသည်ဆိုပါကလိုအပ်ချက်များ Sprite ၏တပ်မက်လိုချင်သောအဧရိယာကနေရှေးခယျြကပြသပါလိမ့်မယ်သော JavaScript ကို-function ကို, ဝိုငျးဝနျးမှပိုကောင်းပါတယ်။

ထိုသို့နှစ်ခုသို့မဟုတ်သုံးခုဒြပ်စင်များ၏ Sprite, ဒါမှမဟုတ်တစ်ဦးတစ်ဒါဇင်နဲ့အခြား, သို့သော်, မှတ်သားရပါမည် - အားလုံးညာဘက်ပေမယ့်တဲ့အခါမှာရေးဆွဲများ၏ Sprite ရာပေါင်းများစွာအတွက်ရေးသားခြင်း JavaScript ကို-function ကိုပြဿနာများနှင့်အတူအချို့သော, သင်တန်း, ပေါ်ပေါက်မည်မဟုတ်, ဒါပေမယ့်ဘယ်လောက်အလုပ်ကများ၏ဖန်တီးမှုမှယူပါလိမ့်မယ် ထိုကဲ့သို့သောကြီးမားထို့အပြင် Sprite ... ကော်ရုပ်ပုံများကို - ဒီတစ်ခု CSS ကို Sprite မီးစက်နှင့်ထိုသို့လိုချင်သောပုံရိပ်နှင့် CSS ကို-code ကိုမှန်ကန်စေသည်သူက Sprite ၏မဲဆန္ဒနယ် element တွေကိုဘယ်လောက်လိမ့်မည်ဂရုမစိုက်ခဲ့ပါဘူး။ ဆိုက်ဒီဇိုင်းပြောင်းလဲမှုအသစ်ဒြပ်စင်ဖယ်ရှားရေးနှင့်ဖြည့်စွက် remaking တဲ့အခါမှာပွဿနာမြားပျေါပေါ။ တစ်ဦး Sprite ဖွံ့ဖြိုးဆဲ, သင်ကသုံးစွဲဖို့ဘယ်လိုအကြောင်းမထင်မမှတ်သင့်တယ်, အဲဒါကထို့နောက်ကိုပြောင်းလဲရန်မည်သို့မည်ပုံ။

sprite များနမူနာအသုံးပြုခြင်း၏ subject အကျိုးကျေးဇူး

CSS ကိုပရိုဂရမ်ဘာသာစကားတွေမတူဘဲ, ဒီအားလုံး၎င်း၏ဒိုင်းနမစ်စည်းမျဉ်းစည်းကမ်းတွေကိုနှင့်၎င်းတို့၏အလုပ်လုပ်တဲ့အကြောင်းအရာ (စံ) ကဆုံးဖြတ်စည်းမျဉ်းစည်းကမ်းတွေကိုတစ်အတော်လေးငြိမ်အစုံပါပဲ။ ရှုပ်ထွေးအတွက် sprite များနမူနာ, စဉ်းစား ယင်းက HTML, အ CSS ကို စာကြည့်တိုက်များ၏အပြင်အဆင်-functional ဖြစ်စေဒီဇိုင်းကိုဖန်တီးနိုင်ပါတယ်။

ဥပမာအားမီနူး၏, အချောဗားရှင်း: ရိုးရှင်းစွာမျိုးစုံ css-စည်းမျဉ်းစည်းကမ်းတွေ, JS-functions တွေချိတ်ဆက်နဲ့ HTML-divs ၏ကုဒ်နံပါတ်ကိုထည့်သွင်း, သင်ရလဒ်ရရှိနိုင်သည်။ အဆိုပါ Sprite ၏ပုံရိပ်များ၏ content ပြောင်းလဲနေတဲ့ဖြင့်, သင်သည် menu ကို၏အသွင်အပြင်ကိုပြောင်းလဲနိုင်ပါတယ်။ function ကို၏ကိုယ်ကိုသတ်မှတ်ခြင်း, သင်လုပ်ဆောင်နိုင်စွမ်းကိုထိန်းညှိပေးနိုင်သည်။

တစ်ဦးပိုင်ထိုက်သောမူကွဲ Get object-oriented programming (OOP) ၏။ သေချာတာပေါ့, တကတောက်ပစိတ်ကူးပါလိမ့်မယ်, ဒါပေမယ့်ဒါဟာအစစ်အမှန်သည်အခြား OOP ဘာသာစကားများ, တိုင်းရင်းသားဘာသာစကားများ၏နောက်ခံဆန့်ကျင်ထွက်ရပ်တည်ရန်လည်းတောက်ပလိမ့်မည်မဟုတ်ပေ။ ဒါဟာ PLO ပြန်လည်နှင့်ပုံမှန်မဟုတ်လျင်မြန်စွာနေရောင်ထဲမှာနေရာတစ်နေရာရဖို့ဖြစ်လာခဲ့သည်သောအခါ, တကတိကျတဲ့စိတ်ကူးနှင့်၎င်း၏ထုတ်ဖော်ပြောဆိုတဲ့ကွန်ကရစ်ပုံစံဖြစ်တယ်, ဒါပေမဲ့မတူကွဲပြားရုရှားအဲဒီမှာရှိပါတယ်အဖြစ်ယခု developer များအဖြစ်အများအပြားမျိုးကွဲများကိုထိမ်းသိမ်းအတူတက်လာကြပြီ, သာအစောပိုင်း '' 90 ၌တည်ရှိ၏။

ကစားစရာအရုပ် - sprite များနမူနာများအတွက်လူ့အဖွဲ့အစည်းတခု

စိတ်လှုပ်ရှားမှုနှင့်ပရိုဂရမ်းမင်း - သဟဇာတသဘောတရားများ, ဒါပေမယ့်ပရိုဂရမ်ကျွမ်းကျင်မှု, ဂိမ်းများရေးသားခြင်း, obschebytovoy (ရိုးရှင်းသောစာဝှက်စနစ်) နှင့်ဖန်တီးမှု (အသစ်နည်းပညာများ၏ဒီဇိုင်းနှင့်ဖွံ့ဖြိုးရေး, စိတ်ကူးများ) မှသိသိသာသာကွဲပြားခြားနားသည်။

vector ဂရပ်ဖစ်မှဂိမ်းဒီဇိုင်းအယူခံ, မကြာခဏ SVG-sprite များနမူနာများ၏ပေါင်းစပ် + CSS ကို-စည်းမျဉ်းစည်းကမ်းတွေကိုသာဝယ်လိုအား, ဒါပေမယ့်အမှန်တကယ်ဂိမ်း၏အရာဝတ္ထုမှ (ထို site ၏) ကိုဆော့ဖ်ဝဲရေးသူ၏အရာဝတ္ထုဖြစ်လာလို့ပဲ။ အထူးသဖြင့်, နာမည်ကျော်ဂိမ်းကောင်တာ Strike ဟာ sprite များနမူနာ, ရေမှုန်ရေမွှားအတော်လေးအဓိပ္ပါယ်ရှိသောနာမ်၏စည်းကမ်းချက်များလျှောက်ထား: ပေါက်ကွဲမှု, သွေး, ရှေ့တော်၌ ...

အဆိုပါထားသောစာပိုဒ်တိုများအတွက်အစပျိုးများအတွက် "ဟုအဆိုပါ Sprite css v34 သတ်မှတ်ထား" အတော်လေးပုံမှန်နှင့်နားလည်ပေးနိုင်ပါတယ်။ Sprite အနှစ်သာရအတွက်မဟုတ်ဘဲကိုသာ utility ကိုအသုံးပြုခြင်းမှာတွေ့ရှိ, ဒါပေမယ့်လည်းစားသုံးသူတစ်ဦးအခြို့သောစက်ဝိုင်းကိုနားလည်ရန်အတော်လေး Full-featured ဖြစ်သည့်နယ်ပယ်, တတ်နိုင်လွယ်ကူဖွဲ့စည်းထားပါသည်။

CSS ကို-sprite များနမူနာ: ဥပမာ

site ပေါ်တွင်စာမျက်နှာများကိုပြောင်းနေတဲ့အထူးသဖြင့်ဘာသာစကားအဘို့ options အမျိုးမျိုးကိုအသုံးပြုကြသည်, သို့သော်ဘာသာစကား selector icon တစ်ခုအဖြစ်လုပ်ဆောင်လျှင်တစ်ဦး Sprite သုံးပြီးဖြေရှင်းချက်ဤကဲ့သို့သောကြည့်ရှုစေခြင်းငှါ:

သိသာအားနည်းချက်များ sprite များနမူနာ

လူအပေါင်းတို့၏ပထမဦးစွာပြုလုပ်အချိန်ကုန်နှင့်စေ့စပ်မှုလုပ်ငန်းစဉ်ဖြစ်ပါတယ်။ အများကြီးသေးငယ်၏ရုပ်ပုံစုဆောင်းရန် - သေးငယ်တဲ့အပိုင်းပိုင်းသို့ဒီဇိုင်းနှင့်အခြားဖြတ်ဖို့ - ဒါဟာတဦးတည်းအရာဖြစ်၏။ အဆိုပါပတ္တူ၏စိတ်ကူး Apply နှင့် site ပေါ်တွင်အသုံးပြုတဲ့ပုံရိပ်တွေအားလုံးပေါ်မှာနေရာချလုံးဝအချည်းနှီးပါပဲ။

တောင်မှ CSS ကို sprite များနမူနာ Generator ကို အသုံးပြု. အခက်အခဲများကြောင့်ထို site ဒီဇိုင်းကိုပြောင်းလဲပစ်ရန်လိုအပ်ပါသည်အထူးသဖြင့်အခါ, ရှောင်ကြဉ်ရနိုင်မှာမဟုတ်ဘူး။ Sprite ပုံရိပ်တွေအနည်းငယ်သောင်းချီအတွက် Add - ကဒြပ်စင်တွေရဲ့ array ရဲ့ဂရပ်ဖစ်ဂရပ်ဖစ်ရှိသည်, ကအစားညာဘက်ကို item ကိုရှာဖွေတစ်ခုခင်းကျင်းအဖြစ်ကုဒ်ထွက် sorting ၏, များသောအားဖြင့်ကိုယ့် Screen ပေါ်မှာပြသသည်။

အသုံးပြုမယ့်မူဝါဒကနောက်ခံနဲ့ဆက်စပ် sprite များနမူနာအဖြစ်ပြုလုပ်မှသာတစ်ဦးနောက်ခံပုံနှင့်မဆိုက် element ဖြစ်ပါတယ်သူ၏ပြောဆိုချက်ကိုအောက်ပါစံများနှင့် developer များ။ စာမျက်နှာ၏ဂရပ်ဖစ်အစိတ်အပိုင်း element တွေကို tag ကို img manipulate သငျ့သညျ။

ဒါဟာလာသောအခါအလုံအလောက်နောက်ခံဘုံနောက်ခံအဖြစ်ကိုရိပ်မိသောရိုးရှင်းသောခိုင်ခိုင်လုံလုံအပေါ်သဘောတူရန်ခက်ခဲသည်။ ဒါဟာနေပါစေသောအရာကိုပဲနောက်ခံင် - တစ်သေးသေးလေးဒြပ်စင်ခြင်းသို့မဟုတ်တစ်ခုလုံးကိုစာမျက်နှာ။

ဤအတောအတွင်းအဆိုပါဂရပ်ဖစ်အစိတ်အပိုင်း sprite များနမူနာ၏အသုံးပြုမှုကိုတစ်ဦးလေးလေးနက်နက်အတားအဆီးကိုယ်စားပြုသည်။

တရားမျှတမှုအသုံးပြုမှု

စည်းကမ်းချက်များ "အင်တာနက်နည်းပညာ" နှင့် "အဆင့်မြင့်နည်းပညာ" ပြောရလျှင်ဖြစ်စဉ်းစားသည်ဆိုတဲ့အချက်ကိုနေသော်လည်းတကယ်တော့ကြောင့်အချိန်ကုန်ခြင်းနှင့်တစ်ခါတစ်ရံတွင်အလွန်နိမ့်နည်းပညာအလုပ်ဖြစ်ပါတယ်။ Sprite အထူးသဖြင့် archive ကိုမိတ္တူဖန်တီးထိုကဲ့သို့သောနောက်ခံအဖြစ်ဆိုဒ်များသို့မဟုတ်သတင်းအချက်အလက်ဖြည့်စွက်၏လုပ်ငန်းစဉ်များသတ်မှတ်ခြင်း JavaScript ကိုသို့မဟုတ် PHP ကိုဖြူစင်ပရိုဂရမ်းမင်းအတွက်အဖြစ်လိုအပ်သောလုပ်ဆောင်ချက်ကိုဖွံ့ဖြိုးတိုးတက်ရေးအတွက်အခြားပိတ်ဆို့မှုများ, နှိုင်းယှဉ်ဝတ်ဆင်ကြသည်မဟုတ်။

စည်းကမ်းအဖြစ်အကြောင်းအရာစီမံခန့်ခွဲမှုစနစ်များသုံးစွဲခြင်း၏တန်ခိုးနှင့်အလားအလာများကို၎င်းတို့၏လက်တွေ့အသုံးဝင်မကြာခဏညှိပြီးတစ်ခုလုံးကိုပြည့်ပြည့်စုံစုံနှင့်လက်စွဲစာအုပ်အရင်းအမြစ်ဖွံ့ဖြိုးရေး, တစျဦးသို့မဟုတ်အခြားတစ်ဦးတည်းပိုင် algorithm ကိုပြန်ရေးဖို့အတွက် 1001st အချိန်ဘို့လိုအပ်ကြောင်းစေပါတယ်။

ယင်းကိစ္စနှင့်စပ်လျဉ်းသောကြောင့်ခေတ်မီ tool ကိုထောက်ပံ့ပေးကြောင်းအားလုံးသုံးစွဲဖို့ရိုးရှင်းစွာကျိုးကြောင်းဆီလျော်ရန်အရေးကြီးပါသည်။ အခြားကျော်တဦးတည်းကိုအသုံးပြုရန်လည်းစိတ်အားထက်သန်ဖြစ်နှင့်အောက်ပါအတိုင်း site ကိုအဆောက်အဦထဲမှာရွှေစည်းမျဉ်းဖတ်မနေပါနဲ့: သင်ကြိုတင်မှန်းဆမမြင်နိုင်အခြေအနေကိုအမှု၌အလျင်အမြန်ဖြေရှင်းနိုင်ပါသည်နိုင်အောင်တတ်နိုင်သမျှအမြန်ဆုံးအလုပ်လွန်သွားဖို့ဘယ်လိုအကြောင်းကိုမထင်မမှတ်ရန်, ထိုသို့ execute ဖို့ဘယ်လိုလိုအပ်ပါတယ် မည်သည့်ပြဿနာ။