আইকন ব্যবহার ও ম্যানেজ করা

আইকন টেকনিক বেছে নেওয়া

আইকন স্টোরেজ ও রেন্ডারিং আলাদা আলাদা বিকল্প। যেমন, একটি SVG স্প্রাইট CSS আইকন সিস্টেমে একটি আইকন সরবরাহ করতে পারে বা <use>-এর সাথে রেফারেন্স করা যেতে পারে।

• CSS আইকন সিস্টেম: CSS-এর কখন এবং কোন আইকন দেখানো উচিত তা বেছে নেওয়ার প্রয়োজন হলে ব্যবহার করুন। এক রঙের আইকনের জন্য মাস্ক বা সম্পূর্ণ রঙিন আইকনের জন্য ব্যাকগ্রাউন্ড ছবি ব্যবহার করুন।
• <use> সহ SVG: কোনও চিহ্নের বিল্ট-ইন স্টাইলিং বিকল্প যথেষ্ট হলে সেটি আবার ব্যবহার করতে এটি ব্যবহার করুন। CSS, রেফারেন্স করা SVG-এর কন্টেন্টকে ইচ্ছামতো স্টাইল বা অ্যানিমেট করতে পারে না, তবে সিম্বলটি ব্যবহার করার জন্য ডিজাইন করা হলে, ইনহেরিট করা প্রপার্টি এবং কাস্টম প্রপার্টি পাস করা যেতে পারে। যেমন, কোনও পাথ fill="var(--icon-accent, currentColor)" ব্যবহার করতে পারে যাতে CSS আইকনের সেই অংশকে রঙ করতে পারে।
• ইনলাইন SVG: SVG-এর কন্টেন্টের জন্য আপনার ইচ্ছামতো স্টাইলিং বা অ্যানিমেশন প্রয়োজন হলে এটি ব্যবহার করুন।
• <img> CSS ফিল্টার সহ: আইকন আবার কালার করার জন্য এটি এড়িয়ে চলুন। ফিল্টারগুলি নির্ভরযোগ্যভাবে ছবিতে একটি ইচ্ছামত CSS রঙের মান প্রয়োগ করতে পারে না, তাই পুনরায় রঙ করা কষ্টকর এবং অনমনীয়।

সিদ্ধান্ত নিতে, দুটি প্রশ্ন জিজ্ঞাসা করুন। CSS-এর কি আইকন বেছে নিতে বা অদলবদল করতে হবে (কম্পোনেন্ট ডিফল্ট, স্ট্যাটাস পরিবর্তন, থিমিং)? হ্যাঁ হলে, CSS আইকন সিস্টেম ব্যবহার করুন। রঙের বাইরে আইকনের ভিতরে পৌঁছাতে হবে? যদি হ্যাঁ হয় এবং আপনি আইকন সোর্স নিয়ন্ত্রণ করেন, তাহলে কাস্টম প্রপার্টি সহ প্রতীকটি ডিজাইন করুন এবং <use> ব্যবহার করুন; আপনি সোর্স নিয়ন্ত্রণ না করলে, SVG ইনলাইন করুন। থার্ড-পার্টি আইকন সেট কাস্টম প্রপার্টি খুব কমই দেখায়, তাই সেগুলির ক্ষেত্রে <use> আপনাকে রঙ এবং আরও কিছু তথ্য দেয়।

এম্বেড করা বা রিমোট আইকন

CSS আইকন সিস্টেম এবং <use>, দুটিই ডেটা URI, কোনও স্বতন্ত্র ফাইল বা স্প্রাইট থেকে আইকন নিতে পারে। এম্বেড করা (ডেটা URI বা ইনলাইন SVG) অনুরোধ এড়ায় এবং প্রথম পেইন্টের সাথে রেন্ডার করে, কিন্তু CSS বা HTML-কে ফুলিয়ে দেয় এবং আলাদাভাবে ক্যাশে করা যায় না, তাই এটি প্রতিটি পৃষ্ঠায় দেখানো আইকনের ছোট সেটের জন্য উপযুক্ত। প্রতিটি ফাইল আলাদাভাবে ক্যাশে করা হয় এবং প্রতিটি অনুরোধের জন্য একটি করে অনুরোধের খরচ হয়। স্প্রাইট হল সম্পূর্ণ সেটের জন্য একটি ক্যাশে করা যায় এমন অনুরোধ, তবে এটি প্রতিটি আইকন ডাউনলোড করে, তা ব্যবহার করা হোক বা না হোক এবং <use> শুধুমাত্র একই উৎস থেকে একটি স্প্রাইট রেফারেন্স করতে পারে। কয়েকটি মূল আইকনের জন্য এম্বেড করা এবং বড় সেটের জন্য স্প্রাইট বা আলাদা ফাইল ব্যবহার করা ভালো।

কোনও পৃষ্ঠা যদি একসাথে হাজার হাজার আইকন রেন্ডার করে, তাহলে আসল পৃষ্ঠা এবং অ্যাসেট বেঞ্চমার্ক করুন। স্ট্রেস টেস্টে, ইনলাইন SVG-এর পারফর্ম্যান্স সেই স্কেলে সামান্য ভালো ছিল, তবে ফলাফল ব্রাউজার এবং ইমপ্লিমেন্টেশনের উপর নির্ভর করে। Cloud Four-এর SVG আইকন স্ট্রেস টেস্ট

প্রাথমিক পদ্ধতি: CSS-চালিত আইকন ইঞ্জিন

আইকন হল ডিজাইন টোকেন: প্রতিটি আইকন হল একটি কাস্টম প্রপার্টি যাতে একটি ছবি থাকে এবং যেকোনও এলিমেন্ট --icon-start বা --icon-end সেট করে একটি আইকন দেখাতে পারে। ইঞ্জিনটি তিনটি CSS ক্ষমতাকে একত্রিত করে:

• রেজিস্টার করা কাস্টম প্রপার্টি (@property) --icon-start এবং --icon-end-কে ইনহেরিট করা থেকে আটকায়, তাই কোনও কম্পোনেন্টে সেট করা আইকন তার চাইল্ডে ক্যাসকেড করে না।
• কন্টেনার স্টাইল কোয়েরি (@container style(...)) কোনও এলিমেন্টে আইকন অ্যাসাইন করা থাকলে তা শনাক্ত করে এবং কোনও ক্লাস বা মার্কআপ পরিবর্তন ছাড়াই তা রেন্ডার করে।
• CSS মাস্ক এবং currentColor আইকনটিকে একটি ছদ্ম-এলিমেন্টে রেন্ডার করে যা এলিমেন্টের টেক্সটের রঙ অনুসরণ করে। সাইজ, রঙ, স্পেসিং এবং ভার্টিক্যাল অফসেট, উত্তরাধিকারসূত্রে প্রাপ্ত --icon-style-* প্রপার্টি থেকে সেন্সিবল ফলব্যাক সহ পড়া হয়, তাই পূর্বপুরুষ থেকে পুরো সাবট্রি রিস্টাইল করা যেতে পারে। --icon-style- প্রিফিক্স এই সেটিংসকে আইকন টোকেনের সাথে সংঘর্ষ থেকে রক্ষা করে, যা --icon-*-এর অধীনেও থাকে।

আইকন ডিজাইন টোকেন নির্ধারণ করা হচ্ছে

ইনলাইন SVG ডেটা URI বা রুট-রিলেটিভ URL (যেমন, url("/icons/trash.svg")) ব্যবহার করে SVG আইকন এবং যেকোনও --icon-style-* ওভাররাইডকে আবার ব্যবহারযোগ্য কাস্টম প্রপার্টি হিসেবে সংজ্ঞায়িত করুন। কোনও এক্সটার্নাল SVG ফাইল থেকে আইকন লোড করা হলে, রুট-রিলেটিভ URL বা এম্বেড করা ডেটা URI ব্যবহার করুন। কাস্টম প্রপার্টির মাধ্যমে ব্যবহৃত রিলেটিভ URL, কাস্টম প্রপার্টি যেখানে সংজ্ঞায়িত করা হয়েছে সেই স্টাইলশিটের পরিবর্তে, আইকন যেখানে ব্যবহার করা হয়েছে সেই স্টাইলশিটের সাপেক্ষে সমাধান করতে পারে। এইসব স্টাইলশিট আলাদা ডিরেক্টরিতে থাকলে, URL ভুল ফাইল দেখাতে পারে।

আইকন টোকেনকে সংজ্ঞায়িত করে এমন স্টাইলশিটের সাথে কোনও URL-কে সম্পর্কিত রাখতে, রেজিস্টার করা প্রপার্টি সাহায্য করে: রেজিস্টার করা <url> বা <image>-এর গণনা করা ভ্যালু, যে স্টাইলশিট এটি ঘোষণা করেছে তার সাথে মিলিয়ে সমাধান করা হয়। initial-value-এ URL-এর সাথে <image> হিসেবে টোকেন রেজিস্টার করার উপর নির্ভর করবেন না। Chrome এবং Safari ডকুমেন্টের সাথে initial-value URL সমাধান করে, তাই এটি শুধুমাত্র Firefox-এ কাজ করে। সিনট্যাক্স <url> দিয়ে শুরু না হলে, Chrome ডকুমেন্টের বিপরীতে :root-এ ঘোষণা করা ভ্যালুও সমাধান করে।

যখন রিলেটিভ URL এড়ানো যায় না, যেমন বিভিন্ন ডিরেক্টরিতে স্টাইলশিট, তখন <url> দিয়ে শুরু হওয়া সিনট্যাক্স দিয়ে টোকেন রেজিস্টার করুন এবং :root-এ আসল URL ঘোষণা করুন। এটি প্রতিটি ব্রাউজারে ডিক্লেয়ারিং স্টাইলশিটের বিরুদ্ধে সমাধান করে:

@property --icon-caret {
  /* The syntax must start with <url>. A syntax that starts with <image> resolves against the document in Chrome. */
  syntax: "<url> | <image> | none";
  inherits: true;
  initial-value: none;
}

:root {
  /* Declared here, the URL resolves against this stylesheet */
  --icon-caret: url("icons/caret.svg");
}

প্রতিটি আইকন এখন দুটি জায়গায় থাকে এবং আরও অনেক বেশি বয়লারপ্লেট আছে, তাই এটি তখনই কাজে লাগে যখন কোনও প্রোজেক্টের বিভিন্ন ডিরেক্টরিতে স্টাইলশিট এবং ম্যানেজ করা যায় এমন সংখ্যক আইকন থাকে। এক ডজন বা তার বেশি আইকন পেরিয়ে, প্রতিটি @property হাতে লেখার পরিবর্তে, একই সিনট্যাক্স ব্যবহার করে CSS.registerProperty সহ একটি স্ক্রিপ্ট থেকে --icon-* টোকেন (--icon-style-* বাদে) রেজিস্টার করুন। রেজিস্টার করা প্রপার্টি গ্লোবাল এবং শ্যাডো রুটে কাজ করে না, তাই এটি প্রতিটি প্রোজেক্টের জন্য উপযুক্ত নাও হতে পারে। রুট-রিলেটিভ URL বা ডেটা URI-এর বিকল্প থাকলে, সেগুলি আরও সহজ এবং সব জায়গায় কাজ করে।

:root {
  /* Optional: override the built-in fallbacks (1em, currentColor, 0.3em, -0.02em) */
  --icon-style-size: 1em;
  --icon-style-spacing: 0.4em;
  --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z'/%3E%3C/svg%3E");
  --icon-favorite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

টোকেন থেকে আইকন রেন্ডার করা হচ্ছে

উপরে উল্লেখ করা টোকেনগুলির মধ্যে একটিতে --icon-start (লিডিং) বা --icon-end (ট্রেলিং) সেট করার মাধ্যমে কোনও এলিমেন্ট একটি আইকন দেখায়। CSS-এর দুটি অংশ সেই অ্যাসাইনমেন্টকে রেন্ডার করা আইকনে পরিণত করে।

প্রথমে, @property-এর সাথে --icon-start ও --icon-end রেজিস্টার করুন। "*" সিনট্যাক্স যেকোনও ভ্যালু গ্রহণ করে এবং inherits: false হল গুরুত্বপূর্ণ অংশ: এটি ছাড়া, বোতামে সেট করা আইকন প্রতিটি ডিসেন্ডেন্টে ইনহেরিট হয়ে যাবে এবং তাদের প্রত্যেকটি আইকনও রেন্ডার করবে।

@property --icon-start {
  syntax: "*";
  inherits: false;
}

@property --icon-end {
  syntax: "*";
  inherits: false;
}

দ্বিতীয়ত, কোনও এলিমেন্টে প্রপার্টি সেট করা হলে, কন্টেনার স্টাইল কোয়েরি তা শনাক্ত করে এবং সিউডো-এলিমেন্টে আইকন রেন্ডার করে। যেহেতু ছদ্ম-এলিমেন্ট --icon-start ইনহেরিট করে না (এটি নন-ইনহেরিটিং হিসেবে রেজিস্টার করা হয়েছে), প্রথম ডিক্লারেশন inherit-এর সাথে স্পষ্টভাবে ভ্যালু ফরওয়ার্ড করে। বাকি ডিক্লারেশন সাইজ, মাস্কিং, অ্যালাইনমেন্ট ও স্পেসিং ম্যানেজ করে। ডিফল্ট হিসেবে currentColor দিয়ে ফিল করা হয় বলে, আইকনটি এলিমেন্টের টেক্সটের রঙ গ্রহণ করে এবং এর ট্রানজিশন অনুসরণ করে।

/* Style query for elements configuring a start icon */
@container style(--icon-start) {
  ::before {
    --icon-start: inherit; /* Forward the value inside the query block */
    content: "" / var(--icon-style-alt, "");
    display: inline-block;
    width: var(--icon-style-size, 1em);
    height: var(--icon-style-size, 1em);
    background-color: var(--icon-style-color, currentColor);
    mask: var(--icon-start) no-repeat center / contain;
    /* Center on the cap height, nudged slightly up for optical balance */
    vertical-align: calc(0.5cap - var(--icon-style-size, 1em) / 2 + var(--icon-style-voffset, -0.02em));
    flex: none;
    pointer-events: none;
    forced-color-adjust: none;
  }

  /* Automatically add spacing ONLY if the element has other text or sibling content */
  :where(:not(.icon, :empty))::before {
    margin-inline-end: var(--icon-style-spacing, 0.3em);
  }
}

প্রতিটি ঘোষণা তার নিজস্ব জায়গা করে নেয়:

• vertical-align: middle x-উচ্চতার অর্ধেক সারিবদ্ধ করে, যা বেশিরভাগ আইকন সেটের জন্য দৃশ্যত কম বসে। 0.5cap-এ কেন্দ্রবিন্দুতে রাখলে --icon-style-size-এর আকার বৃদ্ধি পাওয়ার সাথে সাথে আইকনের কেন্দ্রবিন্দু স্থির থাকে এবং ছোট নেগেটিভ --icon-style-voffset আইকনের নিচের স্পেসের চেয়ে উপরের স্পেসকে বেশি গুরুত্ব দেওয়ার জন্য চোখের দৃষ্টিকে ক্ষতিপূরণ দেয়।
• flex: none: একটি খালি ছদ্ম-এলিমেন্টের ন্যূনতম সাইজ শূন্য, তাই একটি ফ্লেক্স বোতামের ভিতরে লেবেলটি দীর্ঘ হলে এটিই প্রথম সঙ্কুচিত হয়, সম্ভাব্য কিছুই নয়। আইকনের সাইজ হল ডিজাইন সংক্রান্ত সিদ্ধান্ত, লেআউটের চাপের কারণে এটি পরিবর্তন করা উচিত নয়।
• pointer-events: none: আইকনকে ক্লিক ট্র্যাপ করা বা event.target হওয়া থেকে আটকায়।
• forced-color-adjust: none: ফোর্সড-কালার মোডে ব্রাউজার অন্যথায় background-color পরিবর্তন করে, যার ফলে মাস্ক করা আইকন অদৃশ্য হয়ে যায়। মাস্ক ফিল আগের মতোই আছে এবং currentColor এখনও জোর করে টেক্সটের রঙ অনুসরণ করে।
• content: "" / var(--icon-style-alt, ""): জেনারেট করা কন্টেন্টের জন্য বিকল্প টেক্সট, --icon-style-alt-এর মাধ্যমে আইকন থেকে অ্যাক্সেসযোগ্য নাম নেওয়ার জন্য শুধুমাত্র-আইকন কন্ট্রোলকে অনুমতি দেয় (নিচে শুধুমাত্র-আইকন কন্ট্রোল দেখুন)। ডিফল্ট খালি অল্ট, আলঙ্কারিক আইকনকে সহায়ক প্রযুক্তি থেকে লুকিয়ে রাখে।

ট্রেলিং আইকনের জন্য, --icon-start ও ::before-এর পরিবর্তে --icon-end ও ::after-এর সাথে একই প্যাটার্ন অনুসরণ করুন। mask: var(--icon-end) ব্যবহার করুন এবং margin-inline-end-এর পরিবর্তে margin-inline-start দিয়ে স্পেসিং প্রয়োগ করুন।

স্ট্যান্ড-অ্যালোন এবং শুধু আইকন আছে এমন এলিমেন্ট

স্ট্যান্ডঅ্যালোন আইকন বা শুধু আইকন আছে এমন বোতামের জন্য, সরাসরি খালি এলিমেন্টে (শুধু আইকন আছে এমন কন্ট্রোলের জন্য বোতামটি নিজেই) .icon প্রয়োগ করুন এবং --icon দিয়ে এর আইকন সেট করুন। এখানে, --icon হল উচ্চ-লেভেলের প্রপার্টি; .icon:empty নিয়ম এটিকে লিডিং আইকনের জন্য --icon-start-এ ম্যাপ করে:

.icon:empty {
  --icon-start: var(--icon);
}

ব্যবহারের উদাহরণ

স্টাইলশিটে কম্পোনেন্টের ডিফল্ট সেটিংস

কাস্টম প্রপার্টি হিসেবে আইকনের প্রধান সুবিধা হল যে তারা ক্যাসকেডে অংশগ্রহণ করে। কোনও সিলেক্টরে আইকন সেট করুন এবং প্রতিটি ম্যাচিং এলিমেন্ট সেটি পেয়ে যাবে, কোনও মার্কআপ পরিবর্তন ছাড়াই:

.button-delete {
  --icon-start: var(--icon-trash);
}

a[href^="http"]:not([href*="example.com"]) {
  --icon-end: var(--icon-external);
}

<button class="button-delete">Delete item</button>

স্ট্যাটাস অনুযায়ী আইকন পরিবর্তন করা

যেহেতু আইকনটি শুধুমাত্র একটি প্রপার্টি, তাই স্ট্যাটাস পরিবর্তন হল একটি সাধারণ CSS ওভাররাইড। দেখানো বা লুকানোর জন্য কোনও দ্বিতীয় এলিমেন্ট নেই এবং টগল করার জন্য কোনও ক্লাস নেই:

.button-expand {
  --icon-start: var(--icon-caret-right);
}

.button-expand[aria-expanded="true"] {
  --icon-start: var(--icon-caret-down);
}

প্রেজেন্টেশনের ক্ষেত্রেও একই কথা প্রযোজ্য: টুলবারের মতো কন্টেনারে --icon-style-size, --icon-style-color বা --icon-style-spacing সেট করুন এবং এর মধ্যে থাকা প্রতিটি আইকন আপডেট হয়ে যাবে।

ইনলাইন স্টাইল সহ ওয়ান-অফ আইকন

কোনও কম্পোনেন্ট রুল কভার করে না এমন এলিমেন্ট একই প্রপার্টি ইনলাইন সেট করতে পারে, যেমন <button style="--icon-start: var(--icon-trash)">। ডিফল্টের পরিবর্তে এটিকে এস্কেপ হ্যাচ হিসেবে বিবেচনা করুন: একই ধরনের এলিমেন্টে একই আইকন একাধিকবার দেখা গেলে, এটিকে স্টাইলশিট নিয়মে সরান।

শুধুমাত্র আইকন কন্ট্রোল

শুধুমাত্র আইকন আছে এমন বোতামে উপরে বর্ণিত .icon ক্লাস ও --icon ব্যবহার করা হয়। aria-label-এর মাধ্যমে বোতামটির একটি অ্যাক্সেসযোগ্য নাম দিন অথবা --icon-style-alt-এর মাধ্যমে আইকনটিকে একটি নাম দিতে দিন; দুটির কোনওটিই না থাকলে, CSS-জেনারেটেড আইকনটি আলংকারিক। স্ট্যান্ডঅ্যালোন তথ্যমূলক আইকনের জন্য, role="img" এবং aria-label সহ .icon এলিমেন্ট এক্সপোজ করুন:

.button-close {
  --icon: var(--icon-close);
  --icon-style-alt: "Close";
}

<!-- Icon-only interactive control, icon and name from the stylesheet -->
<button class="icon button-close"></button>

<!-- Icon-only interactive control, named via aria-label -->
<button class="icon" style="--icon: var(--icon-trash);" aria-label="Delete item"></button>

<!-- Standalone informative icon -->
<span class="icon" style="--icon: var(--icon-favorite);" role="img" aria-label="Favorite"></span>

সরাসরি SVG-এর সাথে কাজ করা

CSS আইকন সিস্টেম সঠিক না হলে, বিকল্প হিসেবে ব্যবহার করার পরিবর্তে ইনলাইন SVG এবং <use> একসাথে ব্যবহার করুন। কোনও পৃষ্ঠায় প্রথমবার আইকন দেখানোর সময় SVG ইনলাইন করুন এবং প্রতিবার রিপিট করার জন্য <use href="#id">-এর মাধ্যমে রেফারেন্স দিন; লোকাল রেফারেন্সের জন্য কোনও অনুরোধের প্রয়োজন হয় না এবং কোনও ক্রস-অরিজিন বিধিনিষেধ থাকে না। অনেক পৃষ্ঠা জুড়ে শেয়ার করা আইকনের জন্য একটি এক্সটার্নাল স্প্রাইট (<use href="/icons.svg#id">) রিজার্ভ করুন।

<use>-এর মাধ্যমে, রেফারেন্স করা কন্টেন্ট শ্যাডো ট্রিতে ক্লোন করা হয়, তাই পৃষ্ঠার CSS এর এলিমেন্ট বেছে নিতে পারে না। উত্তরাধিকার সূত্রে কী কী পাওয়া যায়: color, currentColor এবং যেকোনও কাস্টম প্রপার্টি। SVG প্রেজেন্টেশন অ্যাট্রিবিউট ছাড়াও, আধুনিক CSS অনেক জ্যামিতি অ্যাট্রিবিউটও পরিবর্তন করতে পারে, তাই আপনার কন্ট্রোল করা আইকন ঠিক আপনার প্রয়োজনীয় হুকগুলি দেখাতে পারে, যেমন stroke-width="var(--icon-stroke, 2)" বা এমনকি একটি নির্দিষ্ট পাথে d: var(--icon-path, path(…))।

CSS d Safari-তে কাজ করে না, তাই এই কাস্টমাইজেশন তখনই ব্যবহার করুন যখন এই সাপোর্ট গ্যাপ গ্রহণযোগ্য হবে। আপনি আইকনটি নিয়ন্ত্রণ না করলে, এটি ইনলাইন করুন।

<use>টি গুরুত্বপূর্ণ বিষয় জেনে রাখা প্রয়োজন:

• viewBox অবশ্যই <symbol> বা রেফারেন্স করা <svg>-এ থাকতে হবে; বাইরের <svg> র‍্যাপিং <use> রেফারেন্স থেকে এটি পিক-আপ করে না, তাই র‍্যাপারে width ও height সেট করুন এবং চিহ্নের সাথে viewBox রাখুন।
• স্টাইল কোনও দিকেই সীমানা অতিক্রম করে না: এক্সটার্নাল স্প্রাইটের মধ্যে <style> পৃষ্ঠায় প্রযোজ্য হয় না এবং পৃষ্ঠার স্টাইলশিট রেফারেন্স করা ট্রির মধ্যে প্রযোজ্য হয় না। শুধুমাত্র ইনহেরিট করা প্রপার্টি ও কাস্টম প্রপার্টি পাস থ্রু হয়।
• এক্সটার্নাল রেফারেন্স শুধুমাত্র একই অরিজিনের হয়; ক্রস-অরিজিন স্প্রাইট কোনও বিজ্ঞপ্তি ছাড়াই কাজ করা বন্ধ করে দেয়।
• ডকুমেন্টে ইনলাইন করা স্প্রাইট পৃষ্ঠার id নেমস্পেস শেয়ার করে, তাই নেমস্পেস সিম্বল আইডি যাতে সংঘর্ষ এড়ানো যায়।

aria-hidden="true" দিয়ে আলঙ্কারিক SVG চিহ্নিত করুন এবং CSS আইকন সিস্টেমের মতো, কন্টেনিং কন্ট্রোলকে নিজস্ব অ্যাক্সেসযোগ্য নাম দিন।

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

রেজিস্টার করা কাস্টম প্রপার্টি

@property ছাড়া, --icon-start এবং --icon-end সাধারণ ইনহেরিটিং কাস্টম প্রপার্টির মতো কাজ করে, তাই কোনও এলিমেন্টে সেট করা আইকন তার ডিসেন্ড্যান্টেও রেন্ডার হবে। স্টাইল কোয়েরির (@container style(--icon-start) { * { --icon-start: initial; } }) মধ্যে চিলড্রেনের প্রপার্টি রিসেট করে এটি প্রতিরোধ করুন, নিচে Safari-এর জন্য যে সমাধান দেওয়া হয়েছে সেটিও একই পদ্ধতি ব্যবহার করে।

কন্টেনার স্টাইল কোয়েরি

কন্টেনার স্টাইল কোয়েরি ছাড়া ব্রাউজারকে সাপোর্ট করতে, ফলব্যাক হুক হিসেবে ক্লাস বা কম্পোনেন্ট সিলেক্টর ব্যবহার করুন। কাস্টম প্রপার্টিতে আইকন বেছে নেওয়ার সুবিধা চালু রাখুন; ইনলাইন-স্টাইল সিলেক্টর একা CSS নিয়মের মাধ্যমে অ্যাসাইন করা আইকন মিস করে।

:where(.icon-start, .icon:empty)::before {
  content: image-set(linear-gradient(transparent 0 100%), var(--icon-start)) / var(--icon-style-alt, "");
  /* icon styles */
}

:where(.icon-start)::before {
  --icon-start: inherit;
}

:where(.icon:empty)::before {
  --icon-start: var(--icon);
}

:where(.icon-start:not(.icon, :empty))::before {
  margin-inline-end: var(--icon-style-spacing, 0.3em);
}

ট্রেলিং আইকনের জন্য, .icon-start, --icon-start এবং ::before-এর পরিবর্তে .icon-end, --icon-end এবং ::after-এর সাথে একই ক্লাস-হুক ফলব্যাক ব্যবহার করুন। margin-inline-end-এর পরিবর্তে margin-inline-start ব্যবহার করে খালি নয় এমন কন্টেন্টে স্পেসিং প্রয়োগ করুন।

কাস্টম প্রপার্টি সেট না করা থাকলে, এই image-set() প্যাটার্ন content-কে অবৈধ করে দেয়, তাই এটি none-এ ফিরে যায় এবং ক্লাস যোগ বা সরিয়ে না দিয়েই ছদ্ম-এলিমেন্ট অদৃশ্য হয়ে যায়। এটি ছদ্ম-এলিমেন্টের অন্যান্য স্টাইল সরিয়ে দেয় না বা অন্যান্য ::before বা ::after নিয়মের সাথে হওয়া বিরোধ প্রতিরোধ করে না, তাই এই হুকগুলি শুধুমাত্র সেখানেই ব্যবহার করুন যেখানে আইকনের জন্য সেই ছদ্ম-এলিমেন্টগুলি উপলভ্য।

Safari ব্রাউজার সংক্রান্ত সমস্যার সমাধান

Safari-তে দুটি রেন্ডারিং সংক্রান্ত সমস্যা আছে যা আইকনকে প্রভাবিত করে: WebKit #৩০১৬০৯ ব্যবহারকারীর ইন্টার‍্যাকশন না হওয়া পর্যন্ত সেগুলিকে দেখানো থেকে আটকাতে পারে এবং #৩২০২২০-ও তাদের রেন্ডারিং প্রভাবিত করে। নিচে উল্লেখ করা সমাধান দুটি সমস্যারই সমাধান করে:

@keyframes webkit-301609 {}

@supports ((-webkit-nbsp-mode: normal) or (-webkit-touch-callout: none) or (font: -apple-system-body)) and (content-visibility: auto) {
  @layer webkit-301609-fix {
    ::before, ::after {
      animation: webkit-301609 0s;
    }
  }
}

@supports কোয়েরি শুধু Safari-কে টার্গেট করে এবং @layer অ্যানিমেশন সংক্রান্ত সমস্যা কমায়।

WebKit বাগ #325900 কিছু ক্ষেত্রে --icon-start-এর সরাসরি ওভাররাইড কার্যকর হতে বাধা দিতে পারে, যেমন হোভার করার সময় আইকন পরিবর্তন করা। এটি উত্তরাধিকার সূত্রে প্রাপ্ত নয় এমন রেজিস্টার করা প্রপার্টির জন্য ওয়ার্কঅ্যারাউন্ডকে প্রভাবিত করে। Safari-র জন্য, --icon-start-কে ইনহেরিটিং হিসেবে রেজিস্টার করুন এবং স্টাইল কোয়েরির মধ্যে ডিসেন্ড্যান্টে এটি রিসেট করুন:

@supports ((-webkit-nbsp-mode: normal) or
           (-webkit-touch-callout: none) or
           (font: -apple-system-body)) and (content-visibility: auto) {
  /* Override previous declaration */
  @property --icon-start {
    syntax: "*";
    inherits: true;
  }

  @layer webkit-325900-fix {
    @container style(--icon-start) {
      * {
        --icon-start: initial;
      }
    }
  }
}

রিসেট করলে আইকন ভ্যালু ডিসেন্ড্যান্টে প্রোপাগেট করা আটকানো যায়। এটি একটি লেয়ারে রাখলে, লেয়ারবিহীন আইকন ঘোষণা রিসেটের চেয়ে বেশি অগ্রাধিকার পায়।