सीएसएस चुनने की स्टाइल के लिए इनहेरिटेंस में बदलाव

Stephen Chenney

पब्लिश करने की तारीख: 8 अक्टूबर, 2024

Chrome 131 से, ::selection और ::target-text pseudo-classes. ऐसा इसलिए किया गया है, ताकि इनहेरिटेंस के लिए ज़्यादा आसान मॉडल बनाया जा सके. साथ ही, इसे हाल ही में जोड़ी गई ::highlight, ::spelling-error और ::grammar-error स्यूडो-क्लास के साथ अलाइन किया जा सके. इस पोस्ट में इस बदलाव के बारे में बताया गया है. इससे ज़्यादातर साइटों पर कोई असर नहीं पड़ेगा.

चुने गए डेटा की स्टाइल

चुने हुए टेक्स्ट के लुक को बेहतर बनाने से, लोगों को कॉन्टेंट का मतलब समझाया जा सकता है, जैसे कि या टेक्स्ट को चुनने में दिक्कत. उदाहरण के लिए, GitHub में चुना गया कोड, चुनी गई डायरेक्ट्री से अलग है स्ट्रक्चर.

सीएसएस, ::selection सूडो-एलिमेंट की मदद से, चुने गए टेक्स्ट की स्टाइल तय करने की सुविधा देता है. यह सूडो-एलिमेंट, हाइलाइट करने वाले सूडो-एलिमेंट के सेट में से एक है. ये स्यूडो-एलिमेंट यह कंट्रोल करते हैं कि उपयोगकर्ता, ब्राउज़र या स्क्रिप्ट से चलने वाली अलग-अलग कार्रवाइयों के तहत टेक्स्ट कैसे दिखता है. चुनने के अलावा, स्पेलिंग को स्टाइल किया जा सकता है गड़बड़ियां (::spelling-error), व्याकरण से जुड़ी गड़बड़ियां (::grammar-error), यूआरएल से जोड़ा गया टेक्स्ट लक्ष्य (::target-text) और स्क्रिप्ट द्वारा जनरेट की गई हाइलाइट (::highlight).

सीएसएस प्रॉपर्टी के किसी भी कलेक्शन की तरह ही, साइट को डिज़ाइन करते समय इनहेरिटेंस व्यवहार को ध्यान में रखना ज़रूरी है. आम तौर पर, डेवलपर सीएसएस से प्रॉपर्टी को डीओएम एलिमेंट ट्री के ज़रिए इनहेरिट किया जाना चाहिए (उदाहरण के लिए, font) है या इनहेरिट नहीं किया गया है (उदाहरण के लिए, background).

Chrome 131 में, चुनने के तरीके में हुए बदलाव

इस दस्तावेज़ के हिस्से पर गौर करें:

p {
  color: red;
}

.blue::selection {
  color: blue;
}

<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>

फ़्रैगमेंट की स्टाइल के एलान, चुने गए टेक्स्ट का रंग बदलते हैं. इसमें एक नियम सभी एलिमेंट से मैच करता है और दूसरा नियम, क्लास "blue" से मैच करता है. Chrome 130 या उससे पहले के वर्शन में चुने जाने पर, यह नतीजा मिलता है:

Chrome 131 में चुने जाने पर, नतीजा इस तरह बदल जाता है:

क्या बदलाव हुआ है? चुनी गई प्रॉपर्टी के इनहेरिटेंस व्यवहार को, पहले से ओरिजिन एलिमेंट इनहेरिटेंस के ज़रिए लागू किया जाता रहा है. इसमें, चुने गए एलिमेंट से मैच करने वाली ::selection की प्रॉपर्टी का इस्तेमाल किया जाता है. Chrome के 130 और उससे पहले के वर्शन इस मॉडल का इस्तेमाल करते हैं. इसमें, हाइलाइट किए गए टेक्स्ट से मैच करने वाला कोई ::selection नहीं होता, क्योंकि .blue::selection सिर्फ़ "blue" क्लास वाले एलिमेंट से मैच करता है. <em> एलिमेंट में "blue" क्लास नहीं होती.

Chrome 131 में नया बिहेवियर चालू किया गया है. इसमें, ऐलिमेंट अपने पैरंट से चुनने का तरीका इनहेरिट करते हैं. पिछले उदाहरण में, <em> एलिमेंट में कोई ::selection नहीं होता खुद से मैच करती है, तो यह <p> एलिमेंट के चुने गए कलर को इनहेरिट कर लेती है. इसे सीएसएस हाइलाइट इनहेरिटेंस कहा जाता है. इसे Chrome के पुराने वर्शन में आज़माया जा सकता है. इसके लिए, chrome://flags में वेब प्लैटफ़ॉर्म की एक्सपेरिमेंटल सुविधाएं चालू करें.

ऐसी साइटें जो इनहेरिट नहीं की जाने वाली चयन प्रॉपर्टी पर निर्भर करती हैं, उनमें बदलाव दिखाई दे सकते हैं हालाँकि, गड़बड़ी की रिपोर्ट से यह पता चलता है कि इस तरह के व्यवहार के लिए कुछ मामलों में इस्तेमाल किए जाते हैं.

चुनने के लिए सीएसएस कस्टम प्रॉपर्टी अब भी काम कर रही हैं

कई साइटें सीएसएस हाइलाइट इनहेरिटेंस की नकल करती हैं. ऐसा करने के लिए, वे सीएसएस कस्टम फ़िल्टर का इस्तेमाल करती हैं प्रॉपर्टी. कस्टम प्रॉपर्टी एलिमेंट ट्री के ज़रिए इनहेरिट की जाती हैं. इससे "माता-पिता से मिली जानकारी" इस तरह के कोड स्निपेट से करेंगे:

:root {
   --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>

Chrome 130 और 131, दोनों में यह विकल्प चुनने पर यह नतीजा मिलता है:

यहां हर एलिमेंट को एलिमेंट ट्री के ज़रिए, --selection-color प्रॉपर्टी के लिए कुछ वैल्यू इनहेरिट होती है. टेक्स्ट चुनने पर, इस रंग का इस्तेमाल किया जाता है. एलिमेंट .blue क्लास और उसके डिसेंडेंट को चुनने पर, उनका रंग नीला हो जाता है. साथ ही, अन्य एलिमेंट हल्के हरे रंग के होते हैं. कई साइटें इस तकनीक का इस्तेमाल करती हैं. साथ ही, Stack Overflow पर भी इसका सुझाव दिया गया है.

काम करने की क्षमता बनाए रखने के लिए, सीएसएस हाइलाइट इनहेरिटेंस मॉडल यह बताता है कि ::selection (और अन्य सीएसएस हाइलाइट pseudo-elements) कस्टम प्रॉपर्टी को इनहेरिट करते हैं अपने मूल एलिमेंट से वैल्यू (उस एलिमेंट को जिसमें उन्हें लागू किया जा रहा है) ). इस तरीके का इस्तेमाल करने वाली साइटों पर, Chrome में होने वाले बदलावों का कोई असर नहीं होगा 131.

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

::selection के लिए यूनिवर्सल सिलेक्टर, हाइलाइट इनहेरिटेंस को बंद करते हैं

ऐसा हो सकता है कि सीएसएस कस्टम प्रॉपर्टी का इस्तेमाल न करने वाली साइटें, चुने गए टेक्स्ट का रंग सेट करने के लिए यूनिवर्सल सिलेक्टर का इस्तेमाल कर रही हों. उदाहरण के लिए, नीचे दी गई सीएसएस की तरह:

::selection /* = *::selection (universal) */ {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Chrome 130 (और उससे पहले के वर्शन) और Chrome 131 (और उसके बाद के वर्शन) दोनों में चुने जाने पर, यह नतीजा मिलता है:

सीएसएस हाइलाइट इनहेरिटेंस, फ़ोकस किए गए दूसरे टेक्स्ट को इनहेरिट नहीं करता है नीला, क्योंकि यूनिवर्सल सिलेक्टर, <em> एलिमेंट से मेल खाता है और यूनिवर्सल हाइलाइट रंग, हल्का हरा लागू करता है.

सीएसएस हाइलाइट इनहेरिटेंस का फ़ायदा पाने के लिए, यूनिवर्सल सिलेक्टर को सिर्फ़ रूट से मैच करने के लिए बदलें. इसके बाद, यह उसके वंशजों को इनहेरिट कर लेगा:

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Chrome 131 में नतीजा कुछ ऐसा दिखता है:

अगर आपकी साइट, चुने गए रंगों में बदलाव करती है, लेकिन कस्टम प्रॉपर्टी का इस्तेमाल नहीं करती है, तो हो सकता है कि आपके पास ::selection स्यूडो-एलिमेंट के लिए यूनिवर्सल सिलेक्टर हो. अच्छी बात यह है कि Chrome में इस बदलाव से आपकी साइट काम करना बंद नहीं करेगी. हालांकि, आपको हाइलाइट इनहेरिटेंस की सुविधा से मिलने वाले फ़ायदे नहीं मिलेंगे.

::target-text की स्टाइल भी बदल रही है

यहां बताए गए सभी व्यवहार और बदलाव, ::target-text स्यूडो-एलिमेंट पर भी लागू होते हैं, जैसे कि वे ::selection पर लागू होते हैं. एक से ज़्यादा मामलों में इस्तेमाल के उदाहरण किसी एक साइट पर टारगेट टेक्स्ट स्टाइलिंग सीमित है और यह सुविधा बिलकुल नई है, इसलिए, आपकी साइट के ::target-text के काम करने के तरीके में बदलाव की संभावना काफ़ी कम है.

यह बदलाव क्यों किया गया है?

जब दूसरे हाइलाइट pseudo-elements विकास के दौरान थे, तो CSS Working ग्रुप को हाइलाइट इनहेरिटेंस मॉडल की मदद से, इनहेरिटेंस लागू किया गया. ::selection स्यूडो-एलिमेंट के स्पेसिफ़िकेशन में यह तरीका पहले से ही मौजूद था, लेकिन ब्राउज़र ने इसे लागू नहीं किया था. गैर-चुनाव छद्म-एलिमेंट, हाइलाइट इनहेरिटेंस का इस्तेमाल करते हैं, जहां सूडो-एलिमेंट इनहेरिट किए जाते हैं जैसे कि वह कोई प्रॉपर्टी हो. इसका मतलब है कि एलिमेंट, हाइलाइट को इनहेरिट करते हैं अपने दस्तावेज़ के पैरंट एलिमेंट से छद्म-एलिमेंट मिलते हैं.

सभी हाइलाइट में एकरूपता बनाए रखने के लिए, सीएसएस Working ग्रुप ने ::selection के लिए, हाइलाइट इनहेरिटेंस के लिए सहायता को दोहराया और ब्राउज़र नई सुविधा को लॉन्च करने के लिए काम कर रहे हैं और मौजूदा साइटें हैं.

इसे आज़माएं

नीचे दिए गए CodePen में, इन बदलावों के बारे में बताया गया है. इसे Chrome 131 में आज़माएं.