لائٹ اور ڈارک موڈ کے ساتھ سی ایس ایس اسپرائٹس کا استعمال کیسے کریں۔
CSS اسپرائٹس ویب ڈویلپمنٹ میں استعمال ہونے والی ایک تکنیک ہے جس کی تعداد کو کم کرنا ہے۔ HTTP ویب پیج کے ذریعے کی گئی درخواستیں ان میں متعدد چھوٹی تصاویر کو ایک بڑی تصویری فائل میں یکجا کرنا اور پھر اس تصویر کے مخصوص حصوں کو ویب صفحہ پر انفرادی عناصر کے طور پر ظاہر کرنے کے لیے CSS کا استعمال کرنا شامل ہے۔
CSS sprites کے استعمال کا بنیادی فائدہ یہ ہے کہ وہ ویب سائٹ کے لیے صفحہ لوڈ وقت کو بہتر بنانے میں مدد کر سکتے ہیں۔ جب بھی ویب صفحہ پر کوئی تصویر لوڈ کی جاتی ہے، اس کے لیے علیحدہ HTTP درخواست کی ضرورت ہوتی ہے، جو لوڈنگ کے عمل کو سست کر سکتی ہے۔ متعدد امیجز کو ایک ہی سپرائٹ امیج میں ملا کر، ہم صفحہ کو لوڈ کرنے کے لیے درکار HTTP درخواستوں کی تعداد کو کم کر سکتے ہیں۔ اس کے نتیجے میں ایک تیز اور زیادہ ذمہ دار ویب سائٹ بن سکتی ہے، خاص طور پر بہت سی چھوٹی تصاویر والی سائٹس جیسے آئیکنز اور بٹنز۔
CSS sprites کا استعمال ہمیں براؤزر کیچنگ سے فائدہ اٹھانے کی بھی اجازت دیتا ہے۔ جب کوئی صارف کسی ویب سائٹ پر جاتا ہے، تو اس کا براؤزر پہلی درخواست کے بعد اسپرائٹ امیج کو کیش کر دے گا۔ اس کا مطلب یہ ہے کہ ویب صفحہ پر انفرادی عناصر کے لیے بعد میں کی جانے والی درخواستیں جو اسپرائٹ امیج استعمال کر رہی ہیں بہت تیز ہوں گی کیونکہ براؤزر کے کیشے میں تصویر پہلے سے موجود ہوگی۔
CSS Sprites اتنے مقبول نہیں ہیں جتنے پہلے تھے۔
سی ایس ایس اسپرائٹس اب بھی عام طور پر سائٹ کی رفتار کو بہتر بنانے کے لیے استعمال کیے جاتے ہیں، حالانکہ وہ پہلے کی طرح مقبول نہیں ہو سکتے۔ ہائی بینڈوڈتھ کی وجہ سے، ویبپی فارمیٹس ، تصویر کمپریشنمواد کی ترسیل کے نیٹ ورکس (CDN), سست لوڈنگ، اور مضبوط کیشنگ ٹیکنالوجیز، ہمیں اتنے سی ایس ایس اسپرائٹس نظر نہیں آتے جتنے ہم ویب پر دیکھا کرتے تھے… حالانکہ یہ اب بھی ایک بہترین حکمت عملی ہے۔ یہ خاص طور پر مفید ہے اگر آپ کے پاس ایک صفحہ ہے جو بہت سی چھوٹی تصاویر کا حوالہ دے رہا ہے۔
سی ایس ایس سپرائٹ کی مثال
سی ایس ایس اسپرائٹس کو استعمال کرنے کے لیے، ہمیں سی ایس ایس کا استعمال کرتے ہوئے اسپرائٹ امیج فائل کے اندر ہر ایک تصویر کی پوزیشن کی وضاحت کرنی ہوگی۔ یہ عام طور پر ترتیب دے کر کیا جاتا ہے۔ background-image
اور background-position
ویب صفحہ پر ہر ایک عنصر کی خصوصیات جو اسپرائٹ امیج کا استعمال کرتی ہے۔ سپرائٹ کے اندر تصویر کے x اور y کوآرڈینیٹس کی وضاحت کرکے، ہم صفحہ پر الگ الگ عناصر کے طور پر انفرادی تصاویر کو ظاہر کر سکتے ہیں۔ یہاں ایک مثال ہے… ہمارے پاس ایک ہی تصویری فائل میں دو بٹن ہیں:
اگر ہم چاہتے ہیں کہ بائیں طرف کی تصویر دکھائی جائے، تو ہم div فراہم کر سکتے ہیں۔ 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 اسپرائٹس لائٹ اینڈ ڈارک موڈ کے لیے
اس کا ایک دلچسپ استعمال روشنی اور سیاہ موڈ کے ساتھ ہے۔ شاید آپ کے پاس کوئی لوگو یا تصویر ہے جس پر گہرا متن ہے جو سیاہ پس منظر میں نظر نہیں آتا ہے۔ میں نے یہ مثال ایک بٹن کی ہے جس میں لائٹ موڈ کے لیے ایک سفید مرکز اور ڈارک موڈ کے لیے گہرا مرکز ہے۔
سی ایس ایس کا استعمال کرتے ہوئے، میں مناسب تصویر کا پس منظر اس بنیاد پر دکھا سکتا ہوں کہ آیا صارف لائٹ موڈ استعمال کر رہا ہے یا ڈارک موڈ:
: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);
}
استثناء: ای میل کلائنٹس اس کی حمایت نہیں کرسکتے ہیں۔
کچھ ای میل کلائنٹس، جیسے جی میل، سی ایس ایس متغیرات کو سپورٹ نہیں کرتے ہیں، جو روشنی اور تاریک موڈ کے درمیان سوئچ کرنے کے لیے میں نے فراہم کردہ مثال میں استعمال کیے ہیں۔ اس کا مطلب یہ ہے کہ آپ کو مختلف رنگ سکیموں کے لیے سپرائٹ امیج کے مختلف ورژن کے درمیان سوئچ کرنے کے لیے متبادل تکنیک استعمال کرنے کی ضرورت پڑ سکتی ہے۔
ایک اور حد یہ ہے کہ کچھ ای میل کلائنٹس سی ایس ایس کی مخصوص خصوصیات کی حمایت نہیں کرتے ہیں جو عام طور پر سی ایس ایس اسپرائٹس میں استعمال ہوتی ہیں، جیسے background-position
. اس سے اسپرائٹ امیج فائل میں انفرادی تصاویر کو پوزیشن میں رکھنا مشکل ہو سکتا ہے۔