لائيٽ ۽ ڊارڪ موڊ سان سي ايس ايس اسپرائٽس ڪيئن استعمال ڪجي
ايس ايم ايس اسپرائٽس هڪ ٽيڪنڪ آهي ويب ڊولپمينٽ ۾ استعمال ٿيندڙ تعداد کي گهٽائڻ لاءِ HTTP ويب پيج پاران ڪيل درخواستون. انهن ۾ شامل آهي ڪيترن ئي ننڍڙن تصويرن کي هڪ واحد وڏي تصوير واري فائل ۾ گڏ ڪرڻ ۽ پوءِ CSS استعمال ڪندي انهي تصوير جي مخصوص حصن کي ويب پيج تي انفرادي عناصر طور ظاهر ڪرڻ لاءِ.
CSS اسپرائٽس استعمال ڪرڻ جو بنيادي فائدو اهو آهي ته اهي ويب سائيٽ لاءِ صفحي جي لوڊ وقت کي بهتر ڪرڻ ۾ مدد ڪري سگھن ٿا. هر دفعي هڪ تصوير ويب پيج تي لوڊ ٿئي ٿي، ان کي هڪ الڳ HTTP درخواست جي ضرورت آهي، جيڪا لوڊ ڪرڻ واري عمل کي سست ڪري سگهي ٿي. گھڻن تصويرن کي گڏ ڪرڻ سان ھڪڙي ھڪڙي تصوير ۾، اسان صفحي کي لوڊ ڪرڻ لاء گھربل HTTP درخواستن جو تعداد گھٽائي سگھون ٿا. اهو نتيجو ٿي سگهي ٿو هڪ تيز ۽ وڌيڪ جوابدار ويب سائيٽ، خاص طور تي سائيٽن لاءِ ڪيترن ئي ننڍڙن تصويرن جهڙوڪ آئڪن ۽ بٽڻن سان.
CSS اسپرائٽس استعمال ڪرڻ پڻ اسان کي برائوزر ڪيشنگ جو فائدو وٺڻ جي اجازت ڏئي ٿو. جڏهن هڪ صارف ويب سائيٽ جو دورو ڪري ٿو، انهن جو برائوزر پهرين درخواست کان پوء اسپرٽ تصوير کي ڪيش ڪندو. هن جو مطلب اهو آهي ته ويب پيج تي انفرادي عنصرن لاءِ ايندڙ درخواستون جيڪي استعمال ڪري رهيا آهن اسپرائٽ تصوير تمام تيز ٿي وينديون آهن ڇو ته برائوزر وٽ اڳ ۾ ئي ان جي ڪيش ۾ تصوير هوندي.
سي ايس ايس اسپرائٽس ايترو مشهور نه آهن جيترو اهي هڪ ڀيرو هئا
سي ايس ايس اسپرائٽ اڃا تائين عام طور تي سائيٽ جي رفتار کي بهتر ڪرڻ لاءِ استعمال ڪيا ويندا آهن، جيتوڻيڪ اهي شايد مشهور نه هجن جيئن اهي هڪ ڀيرو هئا. اعلي بينڊوڊٿ جي ڪري، ويب فارميٽ، تصوير سينگارمواد پهچائڻ جا نيٽ ورڪ (سي ڊي اين), سست لوڊ ڪندي، ۽ مضبوط ڪيشنگ ٽيڪنالاجيون، اسان کي ڪيتريون ئي CSS اسپرائٽس نظر نه اينديون آهن جيئن اسان ويب تي استعمال ڪندا هئاسين… جيتوڻيڪ اها اڃا تائين هڪ بهترين حڪمت عملي آهي. اهو خاص طور تي ڪارائتو آهي جيڪڏهن توهان وٽ هڪ صفحو آهي جيڪو حوالو ڏئي رهيو آهي ننڍين تصويرن جي ڪثرت.
CSS Sprite مثال
CSS اسپرائٽس کي استعمال ڪرڻ لاءِ، اسان کي CSS استعمال ڪندي اسپرائٽ تصويري فائل ۾ هر فرد جي تصوير جي پوزيشن کي بيان ڪرڻ جي ضرورت آهي. اهو عام طور تي ترتيب ڏيڻ سان ڪيو ويندو آهي background-image
۽ background-position
ويب پيج تي هر عنصر لاءِ خاصيتون جيڪي اسپرائٽ تصوير استعمال ڪن ٿيون. اسپرائٽ اندر تصوير جي x ۽ y همراهن کي بيان ڪرڻ سان، اسان انفرادي تصويرن کي صفحي تي الڳ عناصر طور ڏيکاري سگھون ٿا. ھتي ھڪڙو مثال آھي... اسان وٽ ھڪڙي تصويري فائل ۾ ٻه بٽڻ آھن:
جيڪڏهن اسان چاهيون ٿا ته تصوير کي کاٻي پاسي ڏيکاري وڃي، اسان ڊيو مهيا ڪري سگهون ٿا 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 اسپرائٽس لائيٽ ۽ ڊارڪ موڊ لاءِ
هن جو هڪ دلچسپ استعمال روشني ۽ اونداهي طريقن سان آهي. ٿي سگهي ٿو توهان وٽ هڪ لوگو يا تصوير هجي جنهن تي اونداهي متن آهي جيڪو اونداهي پس منظر تي نظر نٿو اچي. مون هي مثال هڪ بٽڻ جو ڪيو آهي جنهن ۾ لائيٽ موڊ لاءِ سفيد مرڪز ۽ ڊارڪ موڊ لاءِ اونداهي مرڪز آهي.
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، سي ايس ايس متغيرن کي سپورٽ نٿا ڪن، جيڪي مثال طور استعمال ڪيا ويا آھن مون کي روشني ۽ اونداھي طريقن جي وچ ۾ مٽائڻ لاء. هن جو مطلب اهو آهي ته توهان کي مختلف رنگن جي اسڪيمن لاء اسپرٽ تصوير جي مختلف نسخن جي وچ ۾ تبديل ڪرڻ لاء متبادل ٽيڪنالاجي استعمال ڪرڻ جي ضرورت پوندي.
هڪ ٻي حد اها آهي ته ڪجهه اي ميل ڪلائنٽ ڪجهه خاص سي ايس ايس ملڪيتن کي سپورٽ نٿا ڪن جيڪي عام طور تي سي ايس ايس اسپرائٽس ۾ استعمال ٿيندا آهن، جهڙوڪ background-position
. اهو انفرادي تصويرن کي اسپرٽ تصويري فائل ۾ پوزيشن ڪرڻ ڏکيو ڪري سگھي ٿو.