इस लेख में, DevTools में CSS-in-JS सहायता के बारे में बताया गया है, जो Chrome 85 के बाद से उपलब्ध है. साथ ही, इस लेख में बताया गया है कि CSS-in-JS से हमारा क्या मतलब है. साथ ही, यह भी बताया गया है कि यह सामान्य सीएसएस से कैसे अलग है, जो लंबे समय से DevTools के साथ काम कर रही है.
CSS-in-JS क्या है?
CSS-in-JS की परिभाषा को समझना मुश्किल है. आम तौर पर, यह JavaScript का इस्तेमाल करके सीएसएस कोड को मैनेज करने का तरीका है. उदाहरण के लिए, इसका मतलब यह हो सकता है कि सीएसएस कॉन्टेंट को JavaScript का इस्तेमाल करके तय किया गया है और फ़ाइनल सीएसएस आउटपुट को ऐप्लिकेशन ने तुरंत जनरेट किया है.
DevTools के लिए CSS-in-JS का मतलब है कि सीएसएस कॉन्टेंट को CSSOM API का इस्तेमाल करके, पेज में इंजेक्ट किया जाता है. सामान्य सीएसएस को <style> या <link> एलिमेंट का इस्तेमाल करके इंजेक्ट किया जाता है और इसका एक स्टैटिक सोर्स होता है (जैसे कि DOM नोड या नेटवर्क रिसॉर्स). वहीं दूसरी ओर, CSS-in-JS में अक्सर कोई स्टैटिक सोर्स नहीं होता. यहां एक खास मामला यह है कि <style> एलिमेंट के कॉन्टेंट को CSSOM API का इस्तेमाल करके अपडेट किया जा सकता है, जिसकी वजह से सोर्स, असल सीएसएस स्टाइलशीट के साथ सिंक नहीं होता.
अगर आपने किसी सीएसएस-इन-जेएस लाइब्रेरी (उदाहरण के लिए, स्टाइल-कॉम्पोनेंट, इमोशन, JSS) का इस्तेमाल किया है, तो लाइब्रेरी डेवलपमेंट के मोड और ब्राउज़र के आधार पर 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 स्टाइल को "constructed" भी कहते हैं. इससे यह पता चलता है कि उन्हें Web API का इस्तेमाल करके बनाया गया है.
आइए, 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 के लिए, सहायता कैसे जोड़ी
इसलिए, सीएसएस-इन-जेएस नियमों में बदलाव करने में मदद करने के लिए, हमने तय किया कि बेहतर बनाई गई स्टाइलशीट के लिए एक सोर्स बनाना सबसे सही रहेगा. साथ ही, ऊपर बताए गए मौजूदा तरीके का इस्तेमाल करके उनमें बदलाव किया जा सकेगा.
सबसे पहले, सोर्स टेक्स्ट बनाएं. ब्राउज़र का स्टाइल इंजन, 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 का इस्तेमाल करके, कुछ नए नियम जोड़े गए हैं और नियमों का यह क्रम बनाया गया है: .रूल0, .रूल1, .रूल2, .रूल3, .रूल4. मर्ज की कार्रवाई के बाद बनने वाला सोर्स टेक्स्ट इस तरह का होना चाहिए:
.rule0 {}
/* comment */
.rule1 {}
.rule2 {}
.rule3 {}
.rule4 {}
बदलाव करने की प्रोसेस के लिए, मूल टिप्पणियों और इंडेंट को सुरक्षित रखना ज़रूरी है. इसकी वजह यह है कि नियमों के सोर्स टेक्स्ट की पोज़िशन सटीक होनी चाहिए.
CSS-in-JS स्टाइलशीट का एक और पहलू यह है कि पेज में उन्हें किसी भी समय बदला जा सकता है. अगर असली CSSOM नियम, टेक्स्ट वर्शन के साथ सिंक से बाहर हो जाएंगे, तो बदलाव नहीं किया जा सकेगा. इसके लिए, हमने एक तथाकथित जांच की शुरुआत की है. इसकी मदद से ब्राउज़र, किसी स्टाइलशीट में बदलाव किए जाने पर DevTools के बैकएंड हिस्से को सूचना दे सकता है. इसके बाद, म्यूट की गई स्टाइलशीट को CSS.getMatchedStylesForNode के अगले कॉल के दौरान सिंक किया जाता है.
ये सभी चीज़ें लागू होने के बाद, सीएसएस-इन-जेएस एडिटिंग पहले से ही काम करती है. हालांकि, हम यूज़र इंटरफ़ेस (यूआई) में सुधार करके, यह बताना चाहते थे कि कोई स्टाइलशीट बनाई गई या नहीं. हमने सीडीपी के CSS.CSSStyleSheetHeader में isConstructed नाम का एक नया एट्रिब्यूट जोड़ा है. फ़्रंटएंड इसका इस्तेमाल करके, सीएसएस नियम के सोर्स को सही तरीके से दिखाता है:
मीटिंग में सामने आए नतीजे
यहां हमारी कहानी के बारे में फिर से बताने के लिए, हमने CSS-in-JS से जुड़े ऐसे इस्तेमाल के मामलों के बारे में बात की है जो DevTools में काम नहीं कर रहे थे. साथ ही, हमने उन इस्तेमाल के उदाहरणों को बेहतर बनाने के लिए समाधान भी बताए. लागू करने का सबसे दिलचस्प हिस्सा यह है कि हमने मौजूदा सुविधाओं का फ़ायदा लिया. इसके लिए, हमने CSSOM CSS के नियमों का सामान्य सोर्स टेक्स्ट बनाया, ताकि DevTools में स्टाइल में बदलाव करने की सुविधा को पूरी तरह से फिर से संग्रहित करने की ज़रूरत न पड़े.
ज़्यादा जानकारी के लिए, हमारे डिज़ाइन प्रपोज़ल या Chromium की ट्रैकिंग गड़बड़ी देखें. इसमें सभी मिलते-जुलते पैच के बारे में बताया गया है.
झलक दिखाने वाले चैनलों को डाउनलोड करें
Chrome Canary, Dev या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. झलक दिखाने वाले इन चैनलों की मदद से, DevTools की नई सुविधाओं को ऐक्सेस किया जा सकता है और वेब प्लैटफ़ॉर्म के बेहतरीन एपीआई की जांच की जा सकती है. साथ ही, उपयोगकर्ताओं से पहले ही अपनी साइट की समस्याओं का पता लगाया जा सकता है!
Chrome DevTools की टीम से संपर्क करना
पोस्ट में नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
- DevTools में ज़्यादा विकल्प
> सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें. - @ChromeDevTools पर ट्वीट करें.
- DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.