क्रोमियम ने हाल ही में 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> के अंदर मौजूद टेक्स्ट को हरे रंग में रंगा जाएगा:
a div! a span!
a div! a span!
a div! a span!
हालांकि, अगर हम <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>
तो यह स्टाइल नियमों पर पाबंदी लगाता है, ताकि वे <style scoped> एलिमेंट के पैरंट <div> और उस <div> के अंदर मौजूद किसी भी चीज़ पर लागू हों. हम इसे 'स्कोप' कहते हैं. इसका नतीजा ऐसा दिखता है:
एक div! एक span!
एक div! एक span!
एक div! एक span!
यह मार्कअप में कहीं भी किया जा सकता है. इसलिए, अगर आपको स्टाइल को ज़्यादा से ज़्यादा जगहों पर लागू करना है, तो स्कोप वाली स्टाइल को मार्कअप के दूसरे स्कोप वाले हिस्सों में नेस्ट किया जा सकता है.
उपयोग के उदाहरण
अब यह किस काम का है?
सिंडिकेट किया गया कॉन्टेंट, इसका एक सामान्य इस्तेमाल का उदाहरण है: जब वेब लेखक के तौर पर, आपको तीसरे पक्ष का कॉन्टेंट शामिल करना हो, जिसमें उसके सभी स्टाइल शामिल हों, लेकिन आपको उन स्टाइल को पेज के दूसरे हिस्सों में “दूषित” होने से बचाना हो. इस सुविधा का एक बड़ा फ़ायदा यह है कि 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 Canary का इस्तेमाल किया जा सकता है. इसके बाद, chrome://flags में जाकर (आखिर में) ‘<style scoped> चालू करें’ एंट्री ढूंढें. इसके बाद, ‘चालू करें’ पर क्लिक करें और ब्राउज़र को रीस्टार्ट करें.
फ़िलहाल, कोई गड़बड़ी नहीं मिली है. हालांकि, @global और @keyframes और @-webkit-region के स्कोप वाले वर्शन को लागू करने की प्रोसेस अब भी जारी है. साथ ही, फ़िलहाल @font-face को अनदेखा किया जा रहा है, क्योंकि इस बात की संभावना है कि स्पेसिफ़िकेशन में बदलाव हो सकता है.
हम इस सुविधा में दिलचस्पी रखने वाले सभी लोगों को इसे आज़माने के लिए कहते हैं. साथ ही, हमें अपने अनुभवों के बारे में बताएं: अच्छे, बुरे, और (शायद) गड़बड़ी वाले.