အလင်းနှင့်အမှောင်မုဒ်ဖြင့် CSS Sprites ကိုမည်သို့အသုံးပြုရမည်နည်း။
CSS ကို sprites အရေအတွက်ကိုလျှော့ချရန် web development တွင်အသုံးပြုသောနည်းပညာတစ်ခုဖြစ်သည်။ သည် HTTP ဝဘ်စာမျက်နှာမှ တောင်းဆိုချက်များ။ ၎င်းတို့တွင် ပုံငယ်များစွာကို ပိုကြီးသောပုံဖိုင်တစ်ခုသို့ ပေါင်းစပ်ပြီး ဝဘ်စာမျက်နှာပေါ်ရှိ သီးခြားအစိတ်အပိုင်းများအဖြစ် ထိုရုပ်ပုံ၏ သီးခြားအပိုင်းများကို ပြသရန် CSS ကို အသုံးပြုခြင်း ပါဝင်ပါသည်။
CSS sprites ကို အသုံးပြုခြင်း၏ အဓိက အကျိုးကျေးဇူးမှာ ဝဘ်ဆိုက်တစ်ခုအတွက် စာမျက်နှာတင်ချိန်ကို မြှင့်တင်ပေးနိုင်ခြင်း ဖြစ်သည်။ ဝဘ်စာမျက်နှာတစ်ခုပေါ်တွင် ပုံတစ်ခုကို တင်တိုင်း၊ ၎င်းသည် တင်ခြင်းလုပ်ငန်းစဉ်ကို နှေးကွေးစေသည့် သီးခြား HTTP တောင်းဆိုချက်တစ်ခု လိုအပ်သည်။ ပုံများစွာကို sprite ပုံတစ်ခုထဲသို့ ပေါင်းစပ်ခြင်းဖြင့် စာမျက်နှာကိုဖွင့်ရန် လိုအပ်သော HTTP တောင်းဆိုချက်အရေအတွက်ကို လျှော့ချနိုင်သည်။ ၎င်းသည် အထူးသဖြင့် အိုင်ကွန်များနှင့် ခလုတ်များကဲ့သို့ ပုံငယ်များစွာရှိသော ဝဘ်ဆိုက်များအတွက် ပိုမိုမြန်ဆန်ပြီး ပိုမိုတုံ့ပြန်မှုရှိသော ဝဘ်ဆိုက်ကို ဖြစ်ပေါ်စေနိုင်သည်။
CSS sprites ကိုအသုံးပြုခြင်းသည် browser caching ၏အားသာချက်ကိုအသုံးပြုရန်လည်းခွင့်ပြုသည်။ အသုံးပြုသူတစ်ဦးသည် ဝဘ်ဆိုက်တစ်ခုသို့ ဝင်ကြည့်သောအခါ၊ ၎င်းတို့၏ဘရောက်ဆာသည် ပထမဆုံးတောင်းဆိုချက်ပြီးနောက် sprite ပုံကို သိမ်းဆည်းမည်ဖြစ်သည်။ ဆိုလိုသည်မှာ ဘရောက်ဆာသည် ၎င်း၏ ကက်ရှ်တွင် ပုံရှိပြီးသားဖြစ်သောကြောင့် ၎င်းသည် sprite image ကိုအသုံးပြုနေသည့် ဝဘ်စာမျက်နှာရှိ အစိတ်အပိုင်းတစ်ခုချင်းစီအတွက် နောက်ဆက်တွဲတောင်းဆိုမှုများ ပိုမိုမြန်ဆန်လာမည်ဖြစ်သည်။
CSS Sprites သည် ယခင်ကကဲ့သို့ လူကြိုက်များခြင်းမရှိပါ။
CSS sprites များသည် ဆိုက်အမြန်နှုန်းကို မြှင့်တင်ရန်အတွက် အသုံးများဆဲဖြစ်သော်လည်း ၎င်းတို့သည် ယခင်ကကဲ့သို့ လူကြိုက်များခြင်းမရှိပေ။ Bandwidth မြင့်မားမှုကြောင့်၊ ဝက်ဘ် ပုံစံများ image ကိုချုံ့၊ အကြောင်းအရာပေးပို့မှုကွန်ရက်များ (CDN), ပျင်းရိတင်နှင့် ခိုင်ခံ့သော caching နည်းပညာများ၊ ဝဘ်ပေါ်တွင် CSS sprites အများအပြားကို ကျွန်ုပ်တို့ မတွေ့ရတော့ပါ။ ဗျူဟာကောင်းနေသေးသော်လည်း၊ သင့်တွင် သေးငယ်သော ပုံများစွာကို ရည်ညွှန်းသည့် စာမျက်နှာတစ်ခုရှိပါက အထူးသဖြင့် အသုံးဝင်ပါသည်။
CSS Sprite ဥပမာ
CSS sprites ကိုအသုံးပြုရန်၊ ကျွန်ုပ်တို့သည် CSS ကိုအသုံးပြု၍ sprite ရုပ်ပုံဖိုင်အတွင်း တစ်ပုံချင်းစီ၏ အနေအထားကို သတ်မှတ်ရန် လိုအပ်ပါသည်။ ၎င်းကို သတ်မှတ်ပေးခြင်းဖြင့် ပုံမှန်အားဖြင့် လုပ်ဆောင်သည်။ background-image
နှင့် background-position
sprite ပုံကို အသုံးပြုသည့် ဝဘ်စာမျက်နှာရှိ ဒြပ်စင်တစ်ခုစီအတွက် ဂုဏ်သတ္တိများ။ sprite အတွင်း ရုပ်ပုံ၏ x နှင့် y သြဒိနိတ်များကို သတ်မှတ်ခြင်းဖြင့်၊ ကျွန်ုပ်တို့သည် စာမျက်နှာပေါ်ရှိ သီးခြားဒြပ်စင်များအဖြစ် ပုံတစ်ပုံချင်းစီကို ပြသနိုင်ပါသည်။ ဥပမာတစ်ခုပါ… ကျွန်ုပ်တို့တွင် ပုံဖိုင်တစ်ခုတွင် ခလုတ်နှစ်ခုရှိသည်။
ဘယ်ဘက်မှာရှိတဲ့ပုံကို ပြချင်ရင် div နဲ့ပေးလို့ရပါတယ်။ arrow-left
class အနေဖြင့် သြဒိနိတ်များသည် ထိုဘက်တွင်သာ ဖော်ပြသည်-
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
ညာဘက်မြှားကို ပြချင်ရင်၊ ငါတို့ div အတွက် class ကို သတ်မှတ်ပေးမယ်။ arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
Light နှင့် Dark Mode အတွက် 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 variable များကို မပံ့ပိုးပါ။ ဆိုလိုသည်မှာ မတူညီသောအရောင်အစီအစဥ်များအတွက် မတူညီသော sprite ပုံ၏ ဗားရှင်းအမျိုးမျိုးကို ပြောင်းရန် အခြားနည်းလမ်းများကို အသုံးပြုရန် လိုအပ်နိုင်သည်။
အခြားကန့်သတ်ချက်မှာ အချို့သော အီးမေးလ်ကလိုင်းယင့်များသည် CSS sprites တွင် အသုံးများသော CSS ဂုဏ်သတ္တိများကို မပံ့ပိုးနိုင်သောကြောင့်၊ background-position
. ၎င်းသည် sprite ရုပ်ပုံဖိုင်အတွင်း ပုံတစ်ပုံချင်းစီကို နေရာချထားရန် ခက်ခဲစေသည်။