प्रयोग के तौर पर उपलब्ध नई सुविधा - स्कोप वाली स्टाइलशीट

एलेक्स डैनिलो
Twitter

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 को कुछ समय के लिए अनदेखा कर दिया गया है, क्योंकि इस बात की संभावना है कि खास जानकारी बदल जाए.

हम चाहते हैं कि इस सुविधा में दिलचस्पी रखने वाले सभी लोग इसे आज़माएं और हमें अपने अनुभव बताएं: अच्छा, बुरा, और (शायद) बगी.