यह मॉडर्न वेब गाइडेंस की अर्ली प्रीव्यू है. हम लगातार नया कॉन्टेंट जोड़ रहे हैं. साथ ही, GitHub पर कॉन्टेंट में योगदान देने या सुझाव/राय देने या शिकायत करने का स्वागत करते हैं.

Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

आइकॉन इस्तेमाल और मैनेज करना

वेब सुविधाएं: SVG मास्क image-set() कंटेनर स्टाइल क्वेरी रजिस्टर की गई कस्टम प्रॉपर्टी

आइकॉन बनाने की तकनीक चुनना

आइकॉन को सेव करने और रेंडर करने के लिए, अलग-अलग विकल्प होते हैं. उदाहरण के लिए, कोई SVG स्प्राइट, सीएसएस आइकॉन सिस्टम को आइकॉन दे सकता है या <use> के साथ रेफ़रंस दिया जा सकता है.

सीएसएस आइकॉन सिस्टम: इसका इस्तेमाल तब करें, जब सीएसएस को यह चुनना हो कि कौनसा आइकॉन कब दिखाना है. एक ही रंग वाले आइकॉन के लिए मास्क का इस्तेमाल करें या सभी रंगों वाले आइकॉन के लिए बैकग्राउंड इमेज का इस्तेमाल करें.
<use> के साथ SVG: किसी सिंबल को फिर से इस्तेमाल करने के लिए, इसका इस्तेमाल करें. हालांकि, ऐसा तब करें, जब पहले से मौजूद स्टाइल के विकल्प काफ़ी हों. सीएसएस, रेफ़रंस के तौर पर दिए गए एसवीजी के कॉन्टेंट को अपनी पसंद के मुताबिक स्टाइल या ऐनिमेट नहीं कर सकती. हालांकि, अगर सिंबल को इनहेरिट की गई प्रॉपर्टी और कस्टम प्रॉपर्टी का इस्तेमाल करने के लिए डिज़ाइन किया गया है, तो उन्हें पास किया जा सकता है. उदाहरण के लिए, पाथ में fill="var(--icon-accent, currentColor)" का इस्तेमाल किया जा सकता है, ताकि सीएसएस आइकॉन के उस हिस्से को रंग दे सके.
इनलाइन एसवीजी: इसका इस्तेमाल तब करें, जब आपको एसवीजी के कॉन्टेंट को अपनी पसंद के मुताबिक स्टाइल करना हो या उसमें ऐनिमेशन जोड़ना हो.
<img> के साथ सीएसएस फ़िल्टर: आइकॉन का रंग बदलने के लिए, इसका इस्तेमाल न करें. फ़िल्टर, इमेज पर सीएसएस कलर की कोई भी वैल्यू भरोसेमंद तरीके से लागू नहीं कर सकते. इसलिए, इमेज को फिर से कलर करना मुश्किल और असुविधाजनक होता है.

यह तय करने के लिए, दो सवाल पूछें. क्या सीएसएस को आइकॉन चुनना या बदलना होगा (कॉम्पोनेंट के डिफ़ॉल्ट, स्थिति में बदलाव, थीम)? अगर हां, तो सीएसएस आइकॉन सिस्टम का इस्तेमाल करें. क्या आपको आइकॉन के अंदर मौजूद रंग के अलावा, अन्य चीज़ों को भी ऐक्सेस करना है? अगर हां और आइकॉन के सोर्स पर आपका कंट्रोल है, तो कस्टम प्रॉपर्टी का इस्तेमाल करके सिंबल डिज़ाइन करें और <use> का इस्तेमाल करें. अगर सोर्स पर आपका कंट्रोल नहीं है, तो एसवीजी को इनलाइन करें. तीसरे पक्ष के आइकॉन सेट, कस्टम प्रॉपर्टी को शायद ही कभी दिखाते हैं. इसलिए, उनके लिए <use> का इस्तेमाल करने पर, आपको रंग और कुछ अन्य चीज़ें ही मिलती हैं.

एम्बेड किए गए या रिमोट आइकॉन

सीएसएस आइकॉन सिस्टम और <use>, दोनों ही डेटा यूआरआई, किसी फ़ाइल या स्प्राइट से आइकॉन ले सकते हैं. एम्बेड करने (डेटा यूआरआई या इनलाइन एसवीजी) से अनुरोध करने की ज़रूरत नहीं पड़ती और फ़र्स्ट पेंट के साथ रेंडर होता है. हालांकि, इससे सीएसएस या एचटीएमएल का साइज़ बढ़ जाता है और इसे अलग से कैश मेमोरी में सेव नहीं किया जा सकता. इसलिए, यह हर पेज पर दिखने वाले आइकॉन के छोटे सेट के लिए सही है. अलग-अलग फ़ाइलों को अलग-अलग कैश मेमोरी में सेव किया जाता है और ज़रूरत पड़ने पर लोड किया जाता है. इसके लिए, हर फ़ाइल के लिए एक अनुरोध किया जाता है. स्प्राइट, पूरे सेट के लिए कैश मेमोरी में सेव किया जा सकने वाला एक अनुरोध है. हालांकि, यह हर आइकॉन को डाउनलोड करता है, भले ही उसका इस्तेमाल किया गया हो या नहीं. साथ ही, <use> सिर्फ़ एक ही ऑरिजिन के स्प्राइट को रेफ़र कर सकता है. कुछ मुख्य आइकॉन के लिए एंबेड करने का तरीका चुनें. वहीं, बड़े सेट के लिए स्प्राइट या अलग-अलग फ़ाइलों का इस्तेमाल करें.

अगर कोई पेज एक साथ हज़ारों आइकॉन रेंडर करता है, तो असल पेज और ऐसेट को बेंचमार्क करें. स्ट्रेस टेस्ट में, इनलाइन एसवीजी की परफ़ॉर्मेंस उस स्केल पर थोड़ी बेहतर थी. हालांकि, नतीजे ब्राउज़र और लागू करने के तरीके पर निर्भर करते हैं. Cloud Four का एसवीजी आइकॉन स्ट्रेस टेस्ट

मुख्य तरीका: सीएसएस-ड्रिवन आइकॉन इंजन

आइकॉन, डिज़ाइन टोकन होते हैं: हर आइकॉन एक कस्टम प्रॉपर्टी होता है, जिसमें एक इमेज होती है. साथ ही, कोई भी एलिमेंट --icon-start या --icon-end सेट करके, आइकॉन दिखा सकता है. इस इंजन में सीएसएस की तीन सुविधाएं शामिल हैं:

रजिस्टर की गई कस्टम प्रॉपर्टी (@property), --icon-start और --icon-end को इनहेरिट होने से रोकती हैं. इसलिए, किसी कॉम्पोनेंट पर सेट किया गया आइकॉन, उसके चाइल्ड कॉम्पोनेंट में नहीं दिखता.
कंटेनर स्टाइल क्वेरी (@container style(...)) से यह पता चलता है कि किसी एलिमेंट को आइकॉन असाइन किया गया है या नहीं. साथ ही, यह उसे रेंडर करती है. इसके लिए, क्लास या मार्कअप में कोई बदलाव नहीं करना पड़ता.
सीएसएस मास्क और currentColor, आइकॉन को ऐसे सूडो-एलिमेंट में रेंडर करते हैं जो एलिमेंट के टेक्स्ट के रंग के मुताबिक होता है. साइज़, रंग, स्पेसिंग, और वर्टिकल ऑफ़सेट को इनहेरिट की जा सकने वाली --icon-style-* प्रॉपर्टी से पढ़ा जाता है. साथ ही, इनमें सही फ़ॉलबैक होते हैं, ताकि पूरे सबट्री को पैरंट से फिर से स्टाइल किया जा सके. --icon-style- प्रीफ़िक्स, इन सेटिंग को आइकॉन टोकन से टकराने से रोकता है. ये आइकॉन टोकन भी --icon-* में मौजूद होते हैं.

आइकॉन डिज़ाइन टोकन तय करना

एसवीजी आइकॉन और किसी भी --icon-style-* ओवरराइड को फिर से इस्तेमाल की जा सकने वाली कस्टम प्रॉपर्टी के तौर पर तय करें. इसके लिए, इनलाइन एसवीजी डेटा यूआरआई या रूट-रिलेटिव यूआरएल (जैसे, url("/icons/trash.svg")) का इस्तेमाल करें. जब किसी आइकॉन को बाहरी एसवीजी फ़ाइल से लोड किया जाता है, तो रूट-रिलेटिव यूआरएल या एम्बेड किए गए डेटा यूआरआई का इस्तेमाल करें. कस्टम प्रॉपर्टी के ज़रिए इस्तेमाल किया जाने वाला रिलेटिव यूआरएल, उस स्टाइलशीट के हिसाब से रिज़ॉल्व हो सकता है जहां आइकॉन का इस्तेमाल किया गया है. ऐसा उस स्टाइलशीट के बजाय होता है जहां कस्टम प्रॉपर्टी तय की गई है. अगर वे स्टाइलशीट अलग-अलग डायरेक्ट्री में हैं, तो हो सकता है कि यूआरएल गलत फ़ाइल पर ले जाए.

आइकॉन टोकन तय करने वाली स्टाइलशीट के हिसाब से यूआरएल को बनाए रखने के लिए, रजिस्टर की गई प्रॉपर्टी का इस्तेमाल किया जाता है: रजिस्टर की गई <url> या <image> की कैलकुलेट की गई वैल्यू को उस स्टाइलशीट के हिसाब से हल किया जाता है जिसमें इसे तय किया गया है. initial-value में दिए गए यूआरएल के साथ, टोकन को <image> के तौर पर रजिस्टर करने पर भरोसा न करें. Chrome और Safari, दस्तावेज़ के हिसाब से initial-value यूआरएल को रिज़ॉल्व करते हैं. इसलिए, यह सिर्फ़ Firefox में काम करता है. Chrome, दस्तावेज़ के लिए :root पर बताई गई वैल्यू को भी हल करता है. हालांकि, ऐसा तब तक होता है, जब तक सिंटैक्स <url> से शुरू न हो.

जब रिलेटिव यूआरएल का इस्तेमाल करना ज़रूरी हो, जैसे कि अलग-अलग डायरेक्ट्री में मौजूद स्टाइलशीट, तो टोकन को <url> से शुरू होने वाले सिंटैक्स के साथ रजिस्टर करें. साथ ही, :root पर असल यूआरएल की जानकारी दें. यह हर ब्राउज़र में, एलान करने वाली स्टाइलशीट के हिसाब से रिज़ॉल्व होता है:

@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-* को छोड़कर) रजिस्टर करें. रजिस्टर की गई प्रॉपर्टी ग्लोबल होती हैं और शैडो रूट में काम नहीं करतीं. इसलिए, हो सकता है कि यह हर प्रोजेक्ट के लिए सही न हो. अगर रूट-रिलेटिव यूआरएल या डेटा यूआरआई का विकल्प उपलब्ध है, तो उनका इस्तेमाल करें. ये आसान होते हैं और हर जगह काम करते हैं.

: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 (आखिर में) सेट करके आइकॉन दिखाता है. सीएसएस के दो पीस, उस असाइनमेंट को रेंडर किए गए आइकॉन में बदल देते हैं.

सबसे पहले, @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 के ज़रिए आइकॉन से ऐक्सेस किया जा सकने वाला नाम मिलता है. इसके बारे में नीचे, सिर्फ़ आइकॉन वाले कंट्रोल सेक्शन में बताया गया है. The default empty alt keeps decorative icons hidden from assistive technology.

ट्रेलिंग आइकॉन के लिए, --icon-start और ::before के बजाय --icon-end और ::after के साथ यही पैटर्न अपनाएं. margin-inline-end के बजाय, mask: var(--icon-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>

स्थिति के हिसाब से आइकॉन बदलना

आइकॉन सिर्फ़ एक प्रॉपर्टी है. इसलिए, इसकी स्थिति में बदलाव करना, सीएसएस को बदलने जैसा ही है. दिखाने या छिपाने के लिए कोई दूसरा एलिमेंट नहीं है और टॉगल करने के लिए कोई क्लास नहीं है:

.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 का इस्तेमाल करके, आइकॉन को ऐक्सेस किया जा सकने वाला नाम दें. अगर दोनों का इस्तेमाल नहीं किया जाता है, तो सीएसएस से जनरेट किया गया आइकॉन सिर्फ़ सजावट के लिए इस्तेमाल किया जा सकता है. जानकारी देने वाले अलग-अलग आइकॉन के लिए, 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 के साथ काम करना

जब सीएसएस आइकॉन सिस्टम सही न हो, तब इनलाइन एसवीजी और <use> का इस्तेमाल एक साथ करें, न कि विकल्पों के तौर पर. जब किसी पेज पर पहली बार कोई आइकॉन दिखे, तो SVG को इनलाइन करें. साथ ही, हर बार दोहराने के लिए <use href="#id"> के साथ उसका रेफ़रंस दें. लोकल रेफ़रंस के लिए, कोई अनुरोध नहीं करना पड़ता और इसमें क्रॉस-ऑरिजिन की कोई पाबंदी नहीं होती. कई पेजों पर शेयर किए गए आइकॉन के लिए, एक बाहरी स्प्राइट (<use href="/icons.svg#id">) रिज़र्व करें.

<use> की मदद से, रेफ़रंस के तौर पर दिए गए कॉन्टेंट को शैडो ट्री में क्लोन किया जाता है. इसलिए, पेज सीएसएस इसके एलिमेंट को नहीं चुन सकती. इनहेरिटेंस का मतलब है कि पैरंट एलिमेंट की ये प्रॉपर्टी, चाइल्ड एलिमेंट में भी लागू होती हैं: color, currentColor, और कोई भी कस्टम प्रॉपर्टी. एसवीजी प्रज़ेंटेशन एट्रिब्यूट के अलावा, मॉडर्न सीएसएस कई ज्यामिति एट्रिब्यूट भी बदल सकती है. इसलिए, आपके कंट्रोल में मौजूद आइकॉन, ठीक वही हुक दिखा सकता है जिनकी आपको ज़रूरत है. उदाहरण के लिए, किसी खास पाथ पर stroke-width="var(--icon-stroke, 2)" या d: var(--icon-path, path(…)).

Safari में सीएसएस d का इस्तेमाल नहीं किया जा सकता. इसलिए, पसंद के मुताबिक बनाने की इस सुविधा का इस्तेमाल सिर्फ़ तब करें, जब आपको इस सुविधा के काम न करने से कोई समस्या न हो. अगर आपके पास आइकॉन का कंट्रोल नहीं है, तो उसे इनलाइन करें.

<use> ऐसी बातें जो आपको पता होनी चाहिए:

viewBox को <symbol> या रेफ़रंस के तौर पर दिए गए <svg> पर होना चाहिए. बाहरी <svg> रैपिंग <use> इसे रेफ़रंस से नहीं चुनता है. इसलिए, रैपर पर width और height सेट करें और सिंबल के साथ viewBox रखें.
स्टाइल, किसी भी दिशा में सीमा पार नहीं करती हैं: किसी बाहरी स्प्राइट के अंदर मौजूद <style>, पेज पर लागू नहीं होता. साथ ही, पेज की स्टाइलशीट, रेफ़रंस किए गए ट्री के अंदर लागू नहीं होती हैं. सिर्फ़ इनहेरिट की गई प्रॉपर्टी और कस्टम प्रॉपर्टी पास होती हैं.
बाहरी रेफ़रंस सिर्फ़ सेम-ऑरिजिन होते हैं; क्रॉस-ऑरिजिन स्प्राइट बिना किसी सूचना के फ़ेल हो जाते हैं.
दस्तावेज़ में इनलाइन किए गए स्प्राइट, पेज के id नेमस्पेस को शेयर करते हैं. इसलिए, टकराव से बचने के लिए नेमस्पेस सिंबल आईडी का इस्तेमाल करें.

सजावटी एसवीजी को aria-hidden="true" के साथ मार्क करें. साथ ही, सीएसएस आइकॉन सिस्टम की तरह, इसमें मौजूद कंट्रोल को ऐक्सेस किया जा सकने वाला नाम दें.

फ़ॉलबैक रणनीतियां

रजिस्टर की गई कस्टम प्रॉपर्टी

@property के बिना, --icon-start और --icon-end, इनहेरिट की जाने वाली सामान्य कस्टम प्रॉपर्टी की तरह काम करती हैं. इसलिए, किसी एलिमेंट पर सेट किया गया आइकॉन, उसके डिसेंडेंट पर भी रेंडर होगा. इसे रोकने के लिए, स्टाइल क्वेरी (@container style(--icon-start) { * { --icon-start: initial; } }) में चाइल्ड एलिमेंट की प्रॉपर्टी रीसेट करें. यही तरीका, Safari के लिए नीचे दिए गए वर्कअराउंड में इस्तेमाल किया गया है.

कंटेनर स्टाइल क्वेरी

कंटेनर स्टाइल क्वेरी के बिना ब्राउज़र के साथ काम करने के लिए, फ़ॉलबैक हुक के तौर पर क्लास या कॉम्पोनेंट सिलेक्टर का इस्तेमाल करें. कस्टम प्रॉपर्टी में आइकॉन चुनने की सुविधा चालू रखें. सिर्फ़ इनलाइन-स्टाइल सिलेक्टर का इस्तेमाल करने पर, सीएसएस नियमों के ज़रिए असाइन किए गए आइकॉन नहीं दिखते.

: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 #301609 की वजह से, आइकॉन तब तक नहीं दिखते, जब तक उपयोगकर्ता उनसे इंटरैक्ट नहीं करता. साथ ही, #320220 की वजह से भी आइकॉन की रेंडरिंग पर असर पड़ता है. नीचे दिए गए तरीके से, दोनों समस्याओं को हल किया जा सकता है:

@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;
      }
    }
  }
}

रीसेट करने से, आइकॉन की वैल्यू डिसेंडेंट तक नहीं पहुंचती. इसे लेयर में रखने से, बिना लेयर वाले आइकॉन के एलान को रीसेट करने से ज़्यादा प्राथमिकता मिलती है.