Chromium ने हाल ही में HTML5 से एक नई सुविधा लागू की है: स्कोप वाली स्टाइलशीट. इसे इसके नाम से भी जाना जाता है.
<style scoped>. वेब लेखक <style> एलिमेंट पर 'दायरा' एट्रिब्यूट सेट करके, स्टाइल के नियमों को सिर्फ़ पेज के किसी हिस्से पर लागू कर सकता है. यह एट्रिब्यूट, उस सबट्री के रूट एलिमेंट का डायरेक्ट चाइल्ड एलिमेंट होता है जिस पर आपको स्टाइल लागू करने हैं. यह स्टाइल को सीमित करता है, ताकि सिर्फ़ <style> एलिमेंट और उसके सभी डिसेंडेंट के पैरंट एलिमेंट पर असर पड़े.
उदाहरण
यहां एक सामान्य दस्तावेज़ दिया गया है, जिसमें स्टैंडर्ड स्टाइल का इस्तेमाल किया गया है:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
तय किए गए स्टाइल के नियम, <div> लाल रंग में और <span> हरे रंग में टेक्स्ट को कलर कर देंगे:
एक div! एक स्पैन!
एक div! एक स्पान!
एक div! एक स्पैन!
हालांकि, अगर हम <style> एलिमेंट पर scoped को सेट करते हैं:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
तो यह स्टाइल के नियमों को सीमित कर देता है, ताकि वे <div> के अंदर की चीज़ों और <style scoped> एलिमेंट के पैरंट <div> पर लागू हो जाएं. हम इसे 'स्कोप किया गया' कहते हैं और नतीजा ऐसा दिखता है:
एक div! एक स्पैन!
एक div! एक स्पैन!
एक div! अवधि खत्म!
बेशक, मार्कअप में कहीं भी ऐसा किया जा सकता है. इसलिए, अगर आपको ज़्यादा मेहनत करनी है, तो मार्कअप के अन्य दायरे वाले हिस्सों में स्टाइल को नेस्ट किया जा सकता है. ऐसा इसलिए किया जा सकता है, ताकि आप बेहतर तरीके से कंट्रोल कर सकें कि स्टाइल कहां लागू हों.
उपयोग के उदाहरण
अब यह किसलिए अच्छा है?
इसका एक सामान्य उपयोग मामला सिंडिकेटेड सामग्री है: जब आप एक वेब लेखक के रूप में किसी तृतीय पक्ष की सभी शैलियों सहित उसकी सामग्री शामिल करना चाहते हैं, लेकिन उन शैलियों को पृष्ठ के अन्य, संबंधित संबंध वाले हिस्सों को “प्रदूषित” करने का जोखिम में नहीं डालना चाहते हैं. इसका सबसे बड़ा फ़ायदा यह है कि yelp, twitter, ebay वगैरह जैसी दूसरी साइटों के कॉन्टेंट को एक ही पेज में मिला दिया जा सकता है. इसके लिए, <iframe> या बाहरी कॉन्टेंट को तुरंत एडिट करने की ज़रूरत नहीं है.
अगर आपको ऐसे कॉन्टेंट मैनेजमेंट सिस्टम (सीएमएस) का इस्तेमाल करना है जो आखिरी पेज पर एक साथ मर्ज करके तैयार किए गए सभी मार्कअप के स्निपेट भेजता है, तो इस सुविधा का इस्तेमाल करके यह पक्का किया जा सकता है कि हर स्निपेट का स्टाइल, पेज पर मौजूद किसी भी अन्य चीज़ से अलग हो. यह विकी के लिए भी उतना ही काम का हो सकता है.
अगर आप किसी पेज पर कुछ अच्छे डेमो कोड लिखना चाहते हैं, तो स्टाइल को सिर्फ़ डेमो कॉन्टेंट तक सीमित करना आसान होता है. इससे आप डेमो पर सीएसएस के साथ आसानी से काम कर सकते हैं, लेकिन इसके अलावा पेज पर मौजूद किसी भी दूसरी चीज़ पर इसका असर नहीं पड़ेगा.
इस्तेमाल का एक और उदाहरण है, एनकैप्सुलेशन: उदाहरण के लिए, अगर आपके वेब पेज में साइड मेन्यू है, तो उस मेन्यू से जुड़ी स्टाइल को मार्कअप के उस हिस्से में <style scoped> सेक्शन में रखना बेहतर होता है. पेज के दूसरे हिस्सों को रेंडर करते समय स्टाइल के इन नियमों का कोई असर नहीं होगा. इसकी वजह से वे मुख्य कॉन्टेंट से अलग दिखते हैं!
वेब कॉम्पोनेंट मॉडल को इस्तेमाल करने का एक सबसे आकर्षक उदाहरण हो सकता है. स्लाइडर, मेन्यू, तारीख चुनने वाले टूल, टैब विजेट वगैरह बनाने के लिए वेब कॉम्पोनेंट शानदार तरीका हैं. दायरे वाली स्टाइल इस्तेमाल करके, डिज़ाइनर विजेट बनाकर उसे अपनी स्टाइल के साथ पैकेज कर सकते हैं. ऐसा करके, वे अपने-आप में पूरी जानकारी देने वाली यूनिट बन सकते हैं. अन्य लोग भी इसे शानदार वेब ऐप्लिकेशन में जोड़ सकते हैं. हम वेब कॉम्पोनेंट और शैडो डीओएम के साथ <style scoped> का बहुत ज़्यादा इस्तेमाल करने वाले हैं. इन्हें chrome://flags में एक्सपेरिमेंट के तौर पर शुरू किए गए “शैडो डीओएम” फ़्लैग को सेट करके चालू किया जा सकता है. फ़िलहाल, इनलाइन स्टाइलिंग जैसे गलत तरीकों का इस्तेमाल किए बिना यह पक्का करने का कोई अच्छा तरीका नहीं है कि स्टाइल, वेब कॉम्पोनेंट तक सीमित हों. इसलिए, स्कोप वाली स्टाइल इसके लिए बिलकुल सही हैं.
पैरंट एलिमेंट को शामिल क्यों करना चाहिए?
पैरंट एलिमेंट को शामिल करना सबसे आसान तरीका है, ताकि उदाहरण के लिए, <style scoped> नियम पूरे दायरे के लिए, बैकग्राउंड का एक जैसा रंग सेट कर सकें. जिन ब्राउज़र पर अभी <style scoped> काम नहीं करता उनके लिए स्कोप वाली स्टाइल शीट को “सुरक्षा के लिए” लिखा जा सकता है. इसके लिए, नियमों को किसी आईडी या क्लास सिलेक्टर के साथ फ़ॉलबैक के तौर पर जोड़ा जाता है:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
यह ‘स्कोप’ के लागू होने पर स्टाइल के इस्तेमाल जैसा लगता है. हालांकि, सिलेक्टर के ज़्यादा जटिल होने की वजह से रन-टाइम परफ़ॉर्मेंस पर थोड़ा जुर्माना लगता है. इस तरीके की सबसे अच्छी बात यह है कि यह आकर्षक फ़ॉलबैक अप्रोच को उस दिन तक इस्तेमाल करने की अनुमति देता है, जब <style scoped> बड़े पैमाने पर काम करता हो और आईडी सिलेक्टर को हटाया न जा सके.
स्थिति
हालांकि, स्कोप वाली स्टाइल शीट को लागू करने की प्रोसेस अब भी नई है. इसलिए, वे फ़िलहाल Chrome में रन-टाइम फ़्लैग के पीछे छिपी हुई हैं. इन्हें चालू करने के लिए आपको Chrome का ऐसा वर्शन चाहिए होगा जिसका वर्शन नंबर 19 या उसके बाद वाला वर्शन हो (फ़िलहाल, Chrome कैनरी). इसके बाद chrome://flags में (आखिर की ओर) '<style scoped> चालू करें' वाली एंट्री ढूंढें. इसके बाद, 'चालू करें' पर क्लिक करें और ब्राउज़र को रीस्टार्ट करें.
फ़िलहाल, ऐसी कोई गड़बड़ी नहीं है जिसके बारे में हमें पता है. हालांकि, @keyframes और @-webkit-region के @global और स्कोप वाले वर्शन अब भी लागू किए जा रहे हैं. साथ ही, @font-face को कुछ समय के लिए अनदेखा कर दिया जाता है, क्योंकि स्पेसिफ़िकेशन के बदलने की संभावना बढ़ जाती है.
हम चाहते हैं कि इस सुविधा में दिलचस्पी रखने वाले हर व्यक्ति को आप इसे आज़माएं और हमें अपने अनुभवों के बारे में बताएं: अच्छी, बुरी, और (शायद) गड़बड़ी.