লাইট এবং ডার্ক মোড দিয়ে কিভাবে CSS Sprites ব্যবহার করবেন
সিএসএস sprites হল একটি কৌশল যা ওয়েব ডেভেলপমেন্টের সংখ্যা কমাতে ব্যবহৃত হয় HTTP- র একটি ওয়েব পেজ দ্বারা করা অনুরোধ। তারা একটি একক বৃহত্তর ইমেজ ফাইলে একাধিক ছোট ছবি একত্রিত করে এবং তারপর ওয়েব পৃষ্ঠায় পৃথক উপাদান হিসাবে সেই চিত্রের নির্দিষ্ট বিভাগগুলি প্রদর্শন করতে CSS ব্যবহার করে।
CSS sprites ব্যবহার করার প্রাথমিক সুবিধা হল যে তারা একটি ওয়েবসাইটের জন্য পৃষ্ঠা লোডের সময় উন্নত করতে সাহায্য করতে পারে। প্রতিবার একটি ওয়েব পৃষ্ঠায় একটি ছবি লোড করা হয়, এটি একটি পৃথক HTTP অনুরোধের প্রয়োজন, যা লোড প্রক্রিয়া ধীর করতে পারে. একটি একক স্প্রাইট ছবিতে একাধিক ছবি একত্রিত করে, আমরা পৃষ্ঠাটি লোড করার জন্য প্রয়োজনীয় HTTP অনুরোধের সংখ্যা কমাতে পারি। এর ফলে একটি দ্রুত এবং আরও প্রতিক্রিয়াশীল ওয়েবসাইট হতে পারে, বিশেষ করে আইকন এবং বোতামের মতো অনেক ছোট ছবি সহ সাইটগুলির জন্য৷
CSS sprites ব্যবহার করা আমাদের ব্রাউজার ক্যাশিং এর সুবিধা নিতে দেয়। যখন একজন ব্যবহারকারী একটি ওয়েবসাইট পরিদর্শন করে, তাদের ব্রাউজার প্রথম অনুরোধের পরে স্প্রাইট চিত্রটি ক্যাশে করবে। এর মানে হল যে স্প্রাইট ইমেজ ব্যবহার করা ওয়েব পৃষ্ঠায় পৃথক উপাদানগুলির জন্য পরবর্তী অনুরোধগুলি অনেক দ্রুত হবে কারণ ব্রাউজারটির ক্যাশে ইতিমধ্যেই ছবিটি থাকবে।
CSS Sprites আগের মত জনপ্রিয় নয়
CSS স্প্রাইটগুলি এখনও সাধারণত সাইটের গতি উন্নত করতে ব্যবহৃত হয়, যদিও সেগুলি আগের মতো জনপ্রিয় নাও হতে পারে৷ উচ্চ ব্যান্ডউইথের কারণে, webp বিন্যাস, ইমেজ কম্প্রেশন, বিষয়বস্তু বিতরণ নেটওয়ার্ক (যা CDN), অলস লোডিং, এবং শক্তিশালী ক্যাশিং প্রযুক্তি, আমরা ওয়েবে আগের মতো সিএসএস স্প্রিট দেখতে পাই না… যদিও এটি এখনও একটি দুর্দান্ত কৌশল। এটি বিশেষভাবে উপযোগী যদি আপনার এমন একটি পৃষ্ঠা থাকে যা অনেকগুলি ছোট চিত্রের উল্লেখ করে।
CSS স্প্রাইট উদাহরণ
CSS sprites ব্যবহার করার জন্য, আমাদের 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 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);
}
ব্যতিক্রম: ইমেল ক্লায়েন্টরা এটি সমর্থন করতে পারে না
কিছু ইমেল ক্লায়েন্ট, যেমন জিমেইল, সিএসএস ভেরিয়েবল সমর্থন করে না, যেগুলি আলো এবং অন্ধকার মোডগুলির মধ্যে পরিবর্তন করার জন্য আমি দেওয়া উদাহরণে ব্যবহার করা হয়। এর মানে হল যে আপনাকে বিভিন্ন রঙের স্কিমের জন্য স্প্রাইট ইমেজের বিভিন্ন সংস্করণের মধ্যে স্যুইচ করতে বিকল্প কৌশলগুলি ব্যবহার করতে হতে পারে।
আরেকটি সীমাবদ্ধতা হল যে কিছু ইমেল ক্লায়েন্ট নির্দিষ্ট CSS বৈশিষ্ট্যগুলিকে সমর্থন করে না যা সাধারণত CSS স্প্রাইটগুলিতে ব্যবহৃত হয়, যেমন background-position
. এটি স্প্রাইট ইমেজ ফাইলের মধ্যে পৃথক চিত্রগুলিকে অবস্থান করা কঠিন করে তুলতে পারে।