রেজোলিউশন অপ্টিমাইজ করা ছদ্ম এলিমেন্ট

CSS সিউডো-এলিমেন্টে (যেমন ::before বা ::after) রেজোলিউশন-অপ্টিমাইজ করা ছবি ব্যবহার করলে, অতিরিক্ত DOM নোড দিয়ে আপনার HTML-কে বিশৃঙ্খল না করেই আপনি আলঙ্কারিক আইকন বা স্ট্রাকচারাল গ্রাফিক্স যোগ করতে পারবেন। image-set() CSS ফাংশনের সাথে সিউডো-এলিমেন্ট একত্রিত করে, আপনি ব্রাউজারকে একাধিক ফর্ম্যাট (যেমন AVIF বা WebP) এবং রেজোলিউশন (যেমন 1x এবং 2x) প্রদান করতে পারেন। ব্রাউজার অটোমেটিক ব্যবহারকারীর ডিভাইসের ক্ষমতার জন্য সবচেয়ে উপযুক্ত ছবি বেছে নেবে।

প্রয়োগ

আপনি সরাসরি কোনও ছদ্ম-এলিমেন্টের content প্রপার্টির মধ্যে অথবা এর background-image প্রপার্টির মধ্যে (content: "" সেট করার সময়) image-set() ফাংশন ব্যবহার করতে পারবেন। মনে রাখবেন, type()-এর মাধ্যমে ছবির ফর্ম্যাট এবং রেজোলিউশন (যেমন 1x বা 2x) দুটিই প্রদান করলে সবচেয়ে ভালো ফলাফল পাওয়া যায়, তবে এই দুটি আর্গুমেন্টই ঐচ্ছিক।

.icon-button::before {
  /* Using image-set directly in the content property */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.webp") type("image/webp") 1x,
    url("icon-2x.webp") type("image/webp") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
  
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

ফলব্যাক স্ট্র্যাটেজি

পুরনো ব্রাউজার যেগুলি image-set() ফাংশন সমর্থন করে না, সেগুলির জন্য আপনাকে image-set() নিয়মের আগে একটি স্ট্যান্ডার্ড ইমেজ ডিক্লারেশন অবশ্যই প্রদান করতে হবে। এই প্রোগ্রেসিভ এনহ্যান্সমেন্ট স্ট্র্যাটেজি CSS-এর ক্যাসকেডিং প্রকৃতির উপর নির্ভর করে: কাজ করে না এমন নিয়ম উপেক্ষা করা হয়।

.icon-button::before {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  content: url("icon.png");
  
  /* Modern browsers will apply this and override the fallback */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
}