သင်၏ဆိုက်ကို CSS Sprites ဖြင့်မြန်ဆန်စေခြင်း

ငါဒီ site မှာ page speed အကြောင်းနည်းနည်းလောက်ရေးထားတယ်။ အဲဒါကကျွန်တော်တို့ရဲ့ဖောက်သည်တွေရဲ့ site တွေလုပ်တဲ့ခွဲခြမ်းစိတ်ဖြာမှုနဲ့တိုးတက်မှုရဲ့အရေးကြီးတဲ့အစိတ်အပိုင်းတစ်ခုပါ။ အင်အားကြီးသောဆာဗာများသို့ပြောင်းရွှေ့ခြင်းနှင့်တူသောကိရိယာများအသုံးပြုခြင်းအပြင် အကြောင်းအရာပို့ဆောင်ရေးကွန်ယက်များပျှမ်းမျှ web developer များသုံးနိုင်သည့်အခြားပရိုဂရမ်းမင်းနည်းစနစ်များစွာရှိသည်။

မူရင်း Cascading စတိုင်ပုံစံ၏စံသည်ယခု ၁၅ နှစ်ကျော်ပြီဖြစ်သည်။ အကြောင်းအရာကိုဒီဇိုင်းနှင့်ကွဲပြားစေသောကြောင့် CSS ဖွံ့ဖြိုးတိုးတက်မှုအတွက်အရေးကြီးသောတိုးတက်မှုတစ်ခုဖြစ်သည်။ ဤဘလော့ဂ်နှင့်အခြားမည်သည့်အရာများကိုမဆိုကြည့်ပါ၊ ပုံစံကွဲပြားမှုအများစုသည်ပူးတွဲထားသောစတိုင်ဇယားကွက်တွင်သာရှိသည်။ Stylesheets များသည်အရေးကြီးသည်။ အဘယ်ကြောင့်ဆိုသော်၎င်းတို့သည်သင်၏ browser အတွင်းရှိ cache ထဲတွင်သိမ်းထားသောကြောင့်ဖြစ်သည်။ ရလဒ်အနေနှင့်လူများသည်သင်၏ကွန်ရက်စာမျက်နှာကိုဆက်လက်လည်ပတ်နေစဉ်တွင်သူတို့သည်စာမျက်နှာစာမျက်နှာတစ်ခုစီတိုင်းကိုစတိုင်လ်စာရွက်တစ်ခုစီကိုဒေါင်းလုပ်မလုပ်တော့ပါ။

မကြာခဏအသုံးမပြုနိုင်သော CSS ၏အစိတ်အပိုင်းတစ်ခုဖြစ်သည် CSS Sprites များ။ အသုံးပြုသူတစ် ဦး သည်သင်၏ ၀ ဘ်ဆိုဒ်သို့လည်ပတ်သောအခါ၎င်းတို့သည်စာမျက်နှာအတွက်တောင်းဆိုမှုတစ်ခုမျှသာမဟုတ်ကြောင်းသင်သတိမပြုမိပါ။ သူတို့ တောင်းဆိုမှုများစွာပြုလုပ်ပါ…စာမျက်နှာအတွက်၊ မည်သည့်စတိုင်လ်ဇယားကွက်၊ ပူးတွဲထားသော JavaScript ဖိုင်များနှင့်နောက်ပုံတစ်ခုအတွက်တောင်းဆိုချက်။ သင့်တွင်နယ်နိမိတ်များ၊ အညွှန်းဘားများ၊ နောက်ခံများ၊ ခလုတ်များစသည်တို့အတွက်ရုပ်ပုံများပါဝင်သောဆောင်ပုဒ်တစ်ခုရှိပါက… browser သည်တစ်ခုချင်းစီကိုသင်၏ web server မှတစ်ကြိမ်ချင်းတောင်းဆိုရန်လိုအပ်သည်။ ထောင်ပေါင်းများစွာသော visitors ည့်သည်များနှင့်သင့်ဆာဗာသို့တောင်းဆိုမှုများထောင်သောင်းချီ။ များပြားနိုင်သည်။

၎င်းကသင်၏ကွန်ရက်စာမျက်နှာကိုနှေးကွေးစေသည်။ က နှေးကွေးသော site သည်ထိတွေ့ဆက်ဆံမှုနှင့်စကားဝိုင်းများအပေါ်သိသိသာသာသက်ရောက်မှုရှိနိုင်သည် သင့်ရဲ့ပရိသတ်ကိုစေသည်။ Web developer များအသုံးပြုသောမဟာဗျူဟာသည်ပုံများအားလုံးကိုဖိုင်တစ်ခုတည်းထဲသို့ထည့်သည် ခွေ။ သင်၏ဖိုင်ပုံရိပ်တစ်ခုချင်းစီအတွက်တောင်းခံမည့်အစား၊ Sprite ပုံတစ်ခုတည်းအတွက်သာတောင်းဆိုရန်လိုအပ်သည်။

သငျသညျအကွောငျးကိုဖတျရှုနိုငျပါသညျ CSS Sprites သည် CSS-Tricks တွင်မည်သို့အလုပ်လုပ်သည် or Smashing Magazine ၏ CSS Sprite ပို့စ် သင်၏အကြံဥာဏ်များကိုသင်၏ဖွံ့ဖြိုးရေးအဖွဲ့သည်ထို site အတွင်းသို့ထည့်သွင်းရန်သင့်အားအကြံပေးရန်သာဖြစ်သည်။ CSS Tricks ၏နမူနာသည်တောင်းဆိုမှု ၁၀ ​​ခုပါသောပုံ ၁၀ ခုနှင့် ၂၀.၅ ကီလိုဂရမ်အထိထည့်နိုင်သည်။ တစ်ခုတည်း Sprite ၌စုဝေးသောအခါ, ကပါပဲ 1kb သည် 13kb ဖြစ်သည်! ပုံ ၉ ပုံအတွက်အသွားအပြန်အသနားခံခြင်းနှင့်တုန့်ပြန်မှုအချိန်သည်ယခုကုန်သွားပြီဖြစ်ပြီးအချက်အလက်ပမာဏကို ၃၀% ကျော်လျှော့ချနိုင်သည်။ သင်၏ဝက်ဘ်ဆိုက်ရှိ the ည့်သည်အရေအတွက်အားဖြင့်မြှောက်။ သင်အရင်းအမြစ်အချို့ကိုအမှန်တကယ်ဖယ်ရှားပစ်တော့မည်။

အဆိုပါ Apple navigation bar ဟာဥပမာကောင်းတစ်ခုပါ။ ခလုတ်တစ်ခုချင်းစီတွင်ဖော်ပြချက်အနည်းငယ်ရှိသည်။ သင်စာမျက်နှာပေါ်တွင်ရှိနေသည်ဖြစ်စေ၊ စာမျက်နှာပေါ်မှဖြစ်စေ၊ CSS သည်ခလုတ်၏ကိုသြဒီနိတ်ကိုသတ်မှတ်ပြီးအသုံးပြုသူဘရောက်ဇာအားမှန်ကန်သောအခြေအနေကိုဖော်ပြသည်။ ဤပြည်နယ်အားလုံးသည်ဂရပ်ဖစ်တစ်ခုတည်းတွင်အတူတကွပြိုကျသော်လည်းစတိုင်ဇယားတွင်ဖော်ပြထားသည့်အတိုင်းဒေသတစ်ခုချင်းစီကိုပြသထားသည်။

သင်၏ developer များသည် tools များကိုနှစ်သက်ပါက၎င်းအပါအ ၀ င်၎င်းတို့ကိုကူညီနိုင်သောတန်ချိန်များစွာရှိသည် Compass CSS မူဘောင်, တောင်းပန်ပါတယ် ASP.NET အတွက် CSS-Spriter Ruby အတွက်, CSSSprite ဇာတ်ညွှန်း Photoshop အတွက်, ရေတံခွန်, SpriteRight, SpriteCow, ZeroSprites, Project Fondue ၏ CSS Sprite Generator, Sprite မာစတာဝဘ်, ပြီးနောက် ရေတံခွန် က။

၏ screenshot Sprite မာစတာဝဘ်:

Martech Zone နောက်ခံပုံကို၎င်း၏အဓိကအကြောင်းအရာတစ်လျှောက်လုံးအသုံးမပြုပါ၊ ထို့ကြောင့်ကျွန်ုပ်တို့သည်ဤနည်းကိုယခုအချိန်တွင်အသုံးချစရာမလိုပါ။