इस लेख में बताया गया है कि Chrome 85 के बाद से लेकर अब तक, DevTools में सीएसएस-in-JS से जुड़ी सहायता क्या है. आम तौर पर, 'सीएसएस-इन-जेएस' से हमारा मतलब क्या है और यह सामान्य सीएसएस से किस तरह अलग है, जिसका इस्तेमाल DevTools काफ़ी लंबे समय से किया जा रहा है.
CSS-in-JS क्या है?
CSS-in-JS की परिभाषा समझ नहीं आती. मोटे तौर पर, यह JavaScript का इस्तेमाल करके, सीएसएस कोड को मैनेज करने का एक तरीका है. उदाहरण के लिए, इसका मतलब यह हो सकता है कि सीएसएस कॉन्टेंट को JavaScript का इस्तेमाल करके तय किया गया है और सीएसएस का फ़ाइनल आउटपुट ऐप्लिकेशन तुरंत जनरेट होता है.
DevTools के संदर्भ में, CSS-in-JS का मतलब है कि सीएसएस कॉन्टेंट को CSSOM एपीआई का इस्तेमाल करके, पेज में इंजेक्ट किया जाता है. सामान्य सीएसएस को <style> या <link> एलिमेंट का इस्तेमाल करके इंजेक्ट किया जाता है और इसका एक स्टैटिक सोर्स होता है. जैसे, डीओएम नोड या नेटवर्क रिसॉर्स. इसके उलट, CSS-in-JS में अक्सर एक स्टैटिक सोर्स नहीं होता. यहां एक खास मामला यह है कि <style> एलिमेंट के कॉन्टेंट को CSSOM API का इस्तेमाल करके अपडेट किया जा सकता है, जिससे सोर्स, असल सीएसएस स्टाइलशीट के साथ सिंक से बाहर हो जाता है.
अगर किसी CSS-in-JS लाइब्रेरी का इस्तेमाल किया जाता है (जैसे कि स्टाइल-कॉम्पोनेंट, इमोशन, जेएसएस), तो लाइब्रेरी, डेवलपमेंट मोड और ब्राउज़र के आधार पर हुड में CSSOM API का इस्तेमाल करके स्टाइल इंजेक्ट कर सकती है.
चलिए, कुछ उदाहरण देखते हैं कि जिस तरह CSS-in-JS लाइब्रेरी काम कर रही हैं उसी तरह CSSOM API का इस्तेमाल करके, स्टाइलशीट कैसे इंजेक्ट की जा सकती है.
// Insert new rule to an existing CSS stylesheet
const element = document.querySelector('style');
const stylesheet = element.sheet;
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');
साथ ही, पूरी तरह से नई स्टाइलशीट बनाई जा सकती है:
// Create a completely new stylesheet
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');
// Apply constructed stylesheet to the document
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
DevTools में सीएसएस सहायता
DevTools में, सीएसएस के साथ सबसे ज़्यादा इस्तेमाल की जाने वाली सुविधा स्टाइल पैनल है. स्टाइल पैनल में, यह देखा जा सकता है कि किसी एलिमेंट पर कौनसे नियम लागू होते हैं. साथ ही, नियमों में बदलाव किया जा सकता है और पेज पर रीयल टाइम में बदलावों को देखा जा सकता है.
पिछले साल से पहले, CSSOM API का इस्तेमाल करके बदले गए सीएसएस नियमों के लिए सहायता सीमित थी: आप सिर्फ़ लागू किए गए नियम देख सकते थे, लेकिन उनमें बदलाव नहीं कर सकते थे. पिछले साल हमारा मुख्य लक्ष्य, स्टाइल पैनल का इस्तेमाल करके, CSS-in-JS के नियमों में बदलाव करने की अनुमति देना था. कभी-कभी हम सीएसएस-इन-जेएस स्टाइल को "createed" भी कहते हैं, ताकि यह पता चल सके कि उन्हें वेब एपीआई का इस्तेमाल करके बनाया गया है.
DevTools में स्टाइल में बदलाव करने की सुविधा के बारे में ज़्यादा जानें.
DevTools में स्टाइल में बदलाव करने का तरीका
DevTools में कोई एलिमेंट चुनने पर, स्टाइल पैनल दिखता है. स्टाइल पैनल, एलिमेंट पर लागू होने वाले सीएसएस नियम पाने के लिए, CSS.getMatchedStylesForNode नाम का सीडीपी कमांड जारी करता है. सीडीपी का मतलब है Chrome DevTools प्रोटोकॉल. यह एक एपीआई है. इसकी मदद से, DevTools फ़्रंटएंड को उस पेज के बारे में ज़्यादा जानकारी मिलती है जिसकी जांच की गई है.
लागू किए जाने पर, CSS.getMatchedStylesForNode दस्तावेज़ में मौजूद सभी स्टाइलशीट की पहचान करता है और ब्राउज़र के सीएसएस पार्सर का इस्तेमाल करके उन्हें पार्स करता है. इसके बाद यह एक ऐसा इंडेक्स बनाता है जो हर सीएसएस नियम को स्टाइलशीट सोर्स में एक पोज़िशन से जोड़ता है.
आप पूछ सकते हैं कि सीएसएस को फिर से पार्स क्यों करना ज़रूरी है? यहां समस्या यह है कि ब्राउज़र के परफ़ॉर्मेंस की वजहों से, सीएसएस नियमों की सोर्स की स्थितियों से कोई फ़र्क़ नहीं पड़ता है. इसलिए, वह उन्हें सेव नहीं करता. हालांकि, DevTools में सोर्स की पोज़िशन का होना ज़रूरी है, ताकि सीएसएस में बदलाव करने की सुविधा काम कर सके. हम नहीं चाहते कि Chrome के नियमित उपयोगकर्ता, परफ़ॉर्मेंस पर होने वाले जुर्माने के लिए पैसे चुकाएं. हालांकि, हम चाहते हैं कि DevTools उपयोगकर्ताओं के पास सोर्स की पोज़िशन का ऐक्सेस हो. री-पार्सिंग वाला यह तरीका, इस्तेमाल के दोनों उदाहरणों को कम से कम नुकसान पहुंचाता है.
इसके बाद, CSS.getMatchedStylesForNode लागू करने पर, ब्राउज़र के स्टाइल इंजन से ऐसे सीएसएस नियम उपलब्ध कराने के लिए कहा जाता है जो दिए गए एलिमेंट से मेल खाते हों. आखिर में, यह तरीका स्टाइल इंजन से मिले नियमों को सोर्स कोड से जोड़ता है और सीएसएस नियमों के बारे में स्ट्रक्चर्ड रिस्पॉन्स देता है, ताकि DevTools यह जान सके कि नियम का कौनसा हिस्सा सिलेक्टर या प्रॉपर्टी है. इसकी मदद से, DevTools सिलेक्टर और प्रॉपर्टी में अलग-अलग बदलाव कर सकता है.
आइए, अब बदलाव करने के बारे में जानते हैं. याद रखें कि CSS.getMatchedStylesForNode हर नियम के लिए सोर्स की पोज़िशन दिखाता है? बदलाव करने के लिए यह ज़रूरी है. जब कोई नियम बदला जाता है, तो DevTools एक और सीडीपी कमांड जारी करता है. इससे पेज को असल में अपडेट किया जाता है. निर्देश में, अपडेट किए जाने वाले नियम के फ़्रैगमेंट की मूल जगह और वह नया टेक्स्ट शामिल होता है जिसके साथ फ़्रैगमेंट को अपडेट करना है.
बैकएंड पर, बदलाव करने वाले कॉल को हैंडल करते समय, DevTools टारगेट स्टाइलशीट को अपडेट करता है. यह अपडेट किए गए नियम के लिए बनाए गए स्टाइलशीट सोर्स की कॉपी को भी अपडेट करता है और सोर्स की पोज़िशन को अपडेट करता है. बदलाव करने के लिए कॉल के जवाब में, DevTools फ़्रंटएंड, अभी-अभी अपडेट किए गए टेक्स्ट फ़्रैगमेंट के लिए, अपडेट की गई पोज़िशन वापस ले लेता है.
इससे पता चलता है कि DevTools में CSS-in-JS में बदलाव करना सही तरीके से काम नहीं करता: CSS-in-JS में कहीं भी कोई असल सोर्स सेव नहीं किया गया है और सीएसएस के नियम, CSSOM डेटा स्ट्रक्चर में ब्राउज़र की मेमोरी में मौजूद होते हैं.
हमने CSS-in-JS के लिए सहायता कैसे जोड़ी है
इसलिए, CSS-in-JS नियमों में बदलाव करने की सुविधा काम करने के लिए, हमने तय किया कि सबसे अच्छा तरीका यह होगा कि बनाई गई स्टाइलशीट के लिए एक सोर्स बनाया जाए, जिसे ऊपर बताए गए मौजूदा तरीके का इस्तेमाल करके बदला जा सके.
सबसे पहले, सोर्स टेक्स्ट बनाएं. ब्राउज़र का स्टाइल इंजन, CSSStyleSheet क्लास में सीएसएस नियमों को सेव करता है. यह क्लास वही है जिसके इंस्टेंस को JavaScript से बनाया जा सकता है, जैसा कि पहले बताया जा चुका है. सोर्स टेक्स्ट बनाने का कोड इस तरह है:
String InspectorStyleSheet::CollectStyleSheetRules() {
StringBuilder builder;
for (unsigned i = 0; i < page_style_sheet_->length(); i++) {
builder.Append(page_style_sheet_->item(i)->cssText());
builder.Append('\n');
}
return builder.ToString();
}
यह CSSStyleSheet इंस्टेंस में मौजूद नियमों के ऊपर फिर से लागू होती है और इससे एक स्ट्रिंग बनाती है. InspectorStyleSheet क्लास का इंस्टेंस बनाए जाने पर, इस तरीके को शुरू किया जाता है. InspectorStyleSheet क्लास, CSSStyleSheet इंस्टेंस को रैप करती है और DevTools के लिए ज़रूरी अतिरिक्त मेटाडेटा को एक्सट्रैक्ट करती है:
void InspectorStyleSheet::UpdateText() {
String text;
bool success = InspectorStyleSheetText(&text);
if (!success)
success = InlineStyleSheetText(&text);
if (!success)
success = ResourceStyleSheetText(&text);
if (!success)
success = CSSOMStyleSheetText(&text);
if (success)
InnerSetText(text, false);
}
इस स्निपेट में, हमें CSSOMStyleSheetText दिखता है, जो CollectStyleSheetRules को अंदरूनी तौर पर कॉल करता है. अगर स्टाइलशीट इनलाइन या रिसॉर्स स्टाइलशीट नहीं है, तो CSSOMStyleSheetText को शुरू किया जाता है. इसका मतलब है कि ये दो स्निपेट पहले से ही, new CSSStyleSheet() कंस्ट्रक्टर का इस्तेमाल करके बनाई गई स्टाइलशीट में बुनियादी बदलाव करने की अनुमति देते हैं.
खास तरह का मामला ऐसे <style> टैग से जुड़ी स्टाइलशीट का होता है जिसमें CSSOM API का इस्तेमाल करके बदलाव किया गया हो. इस मामले में, स्टाइलशीट में सोर्स टेक्स्ट और ऐसे अन्य नियम शामिल होते हैं जो सोर्स में मौजूद नहीं हैं. इस मामले को हैंडल करने के लिए, हमने एक तरीका पेश किया है. इसकी मदद से, इन अतिरिक्त नियमों को सोर्स टेक्स्ट में मर्ज किया जा सकता है. यहां, क्रम अहम है, क्योंकि सीएसएस के नियम मूल सोर्स टेक्स्ट के बीच में डाले जा सकते हैं. उदाहरण के लिए, मान लें कि मूल <style> एलिमेंट में यह टेक्स्ट शामिल था:
/* comment */
.rule1 {}
.rule3 {}
फिर पेज ने JS API का इस्तेमाल करके कुछ नए नियम डाले, जिससे नियमों का यह क्रम तय हुआ: .{/4}, .{/4}, और/या इसके बाद के नियमों का क्रम मर्ज कार्रवाई के बाद, मिलने वाला सोर्स टेक्स्ट इस तरह का होना चाहिए:
.rule0 {}
/* comment */
.rule1 {}
.rule2 {}
.rule3 {}
.rule4 {}
बदलाव करने की प्रोसेस के लिए, मूल टिप्पणियों और इंडेंटेशन को सुरक्षित रखना ज़रूरी है, क्योंकि नियमों के सोर्स टेक्स्ट की स्थिति सटीक होनी चाहिए.
CSS-in-JS स्टाइलशीट के लिए एक और खास पहलू यह है कि पेज को किसी भी समय बदला जा सकता है. अगर वास्तविक CSSOM नियम टेक्स्ट वर्शन के साथ सिंक से बाहर हो जाएंगे, तो बदलाव नहीं होगा. इसके लिए, हमने एक तथाकथित जांच लॉन्च की, जिसकी मदद से ब्राउज़र किसी स्टाइलशीट में बदलाव होने पर, DevTools के बैकएंड हिस्से को सूचना दे पाएगा. इसके बाद, बदली गई स्टाइलशीट को CSS.get MatchStylesForNode को अगले कॉल के दौरान सिंक किया जाता है.
इन सभी चीज़ों के साथ, CSS-in-JS एडिटिंग पहले से ही काम करती है. हालांकि, हम यूज़र इंटरफ़ेस (यूआई) को बेहतर बनाकर यह बताना चाहते थे कि स्टाइलशीट बनाई गई है या नहीं. हमने सीडीपी के CSS.CSSStyleSheetHeader में isConstructed नाम का एक नया एट्रिब्यूट जोड़ा है. फ़्रंटएंड, इसका इस्तेमाल सीएसएस नियम के सोर्स को सही तरीके से दिखाने के लिए करता है:
मीटिंग में सामने आए नतीजे
यहां अपनी कहानी को फिर से बताने के लिए, हमने CSS-in-JS के ऐसे इस्तेमाल के उदाहरण दिए हैं जो DevTools में काम नहीं करता. हमने इस्तेमाल के इन उदाहरणों में मदद करने के बारे में जानकारी दी है. इसे लागू करने का दिलचस्प हिस्सा यह है कि हम CSSOM सीएसएस नियमों का सामान्य सोर्स टेक्स्ट बनाकर, मौजूदा फ़ंक्शन का फ़ायदा ले पाए थे. इससे, DevTools में स्टाइल में बदलाव को पूरी तरह से फिर से व्यवस्थित करने की ज़रूरत नहीं पड़ेगी.
ज़्यादा जानकारी के लिए, हमारा डिज़ाइन प्रस्ताव या Chromium ट्रैकिंग बग देखें. इसमें सभी मिलते-जुलते पैच की जानकारी दी गई है.
झलक दिखाने वाले चैनलों को डाउनलोड करना
अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome Canary, Dev या बीटा का इस्तेमाल करें. झलक दिखाने वाले इन चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, सबसे नए वेब प्लैटफ़ॉर्म एपीआई को टेस्ट किया जा सकता है और उपयोगकर्ताओं के आने से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!
Chrome DevTools टीम से संपर्क करना
पोस्ट में हुई नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी चीज़ के बारे में, नीचे दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
- DevTools में ज़्यादा विकल्प
> सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें. - @ChromeDevTool पर ट्वीट करें.
- हमारे DevTools YouTube वीडियो या DevTools सलाह YouTube वीडियो में नया क्या है पर टिप्पणी करें.