बहुत ज़्यादा शब्द हैं, पढ़ा नहीं गया
नई सीएसएस कंटेनमेंट प्रॉपर्टी की मदद से, डेवलपर ब्राउज़र की स्टाइल, लेआउट, और पेंट के काम को सीमित कर सकते हैं.
![सीएसएस कंटेनमेंट. पहले: लेआउट में 59.6 मि॰से॰ लगते हैं. इसके बाद: लेआउट में 0.05 मि॰से॰ का समय लगता है](https://developer.chrome.com/static/blog/css-containment/image/css-containment-before-dd44d7d4075ef.jpg?authuser=7&hl=hi)
इसमें कुछ वैल्यू होती हैं, जिनकी वजह से इसका सिंटैक्स यह होता है:
contain: none | strict | content | [ size || layout || style || paint ]
यह Chrome 52+ और Opera 40+ में उपलब्ध है (और इसमें Firefox का सार्वजनिक समर्थन उपलब्ध है), इसलिए इसे कुछ भी घुमाएं और हमें बताएं कि आप कैसे काम कर रहे हैं!
इसमें शामिल प्रॉपर्टी
वेब ऐप्लिकेशन या जटिल साइट बनाते समय, एक अहम परफ़ॉर्मेंस चुनौती होती है स्टाइल, लेआउट, और पेंट के असर को सीमित करना. अक्सर डीओएम के पूरे डेटा को कंप्यूटेशन के काम को “स्कोप में” माना जाता है. इसका मतलब यह हो सकता है कि किसी वेब ऐप्लिकेशन में अपने-आप पूरे “व्यू” को पूरा करने की कोशिश करना मुश्किल साबित हो सकता है: डीओएम के एक हिस्से में किए गए बदलाव दूसरे हिस्सों पर असर डाल सकते हैं. साथ ही, ब्राउज़र को यह बताने का कोई तरीका नहीं है कि क्या दायरे में होना चाहिए या किसे बाहर रखना चाहिए.
उदाहरण के लिए, मान लें कि आपके DOM का कुछ हिस्सा ऐसा दिखता है:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
साथ ही, एक व्यू में एक नया एलिमेंट जोड़ा जाएगा, जिससे स्टाइल, लेआउट, और पेंट ट्रिगर होगा:
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
हालांकि, इस मामले में पूरा DOM असरदार तरीके से लागू होता है. इसका मतलब है कि स्टाइल, लेआउट, और पेंट कैलकुलेशन को सभी एलिमेंट पर ध्यान देना होगा, चाहे वे बदले गए हों या नहीं. डीओएम जितना बड़ा होगा, कंप्यूटेशन उतना ही ज़्यादा काम करेगा. इसका मतलब है कि आपके ऐप्लिकेशन को उपयोगकर्ता के इनपुट के लिए जवाब नहीं देना होगा.
अच्छी खबर यह है कि मॉडर्न ब्राउज़र स्टाइल, लेआउट, और पेंट के काम को अपने-आप सीमित करने के दायरे को अपने-आप सीमित करने के बारे में काफ़ी अच्छे से तैयार हो रहे हैं. इसका मतलब है कि चीज़ें बिना कुछ किए तेज़ी से हो रही हैं.
हालांकि, सबसे अच्छी बात यह है कि एक नई सीएसएस प्रॉपर्टी का कंट्रोल डेवलपर को मिलेगा: कंटेनमेंट.
सीएसएस कंटेनमेंट एक नई प्रॉपर्टी है, जिसमें कीवर्ड में चार वैल्यू हो सकती हैं:
layout
paint
size
style
इनमें से हर वैल्यू से यह तय किया जा सकता है कि ब्राउज़र को रेंडरिंग से कितना काम करने की ज़रूरत है. चलिए, हर एक वैल्यू के बारे में ज़्यादा जानकारी देखें.
लेआउट (शामिल है: लेआउट)
ऐसा हो सकता है कि लेआउट को कंटेनमेंट करने का सबसे बड़ा फ़ायदा यह हो कि इसे contain: paint
के साथ इस्तेमाल किया जा सके.
लेआउट आम तौर पर, दस्तावेज़ के स्कोप वाला होता है. इससे, इसे आपके डीओएम के साइज़ के हिसाब से स्केल किया जाता है. इसलिए, किसी एलिमेंट की left
प्रॉपर्टी बदलने पर, हो सकता है कि डीओएम के हर एलिमेंट की जांच करनी पड़े.
यहां कंटेनमेंट को चालू करने से पूरे दस्तावेज़ के बजाय एलिमेंट की संख्या बस कुछ ही कम हो सकती है. इससे ब्राउज़र पर कई गैर-ज़रूरी काम कम हो जाते हैं और परफ़ॉर्मेंस बेहतर होती है.
पेंट (शामिल है: पेंट)
स्कोपिंग पेंट, कंटेनमेंट का एक और शानदार फ़ायदा है. कंटेनमेंट पेंट में बताए गए एलिमेंट को छोटा किया जाता है. हालांकि, इसके कुछ दूसरे खराब असर भी होते हैं:
- यह पूरी तरह से तय और तय जगह वाले एलिमेंट के लिए कंटेनिंग ब्लॉक की तरह काम करता है. इसका मतलब है कि किसी भी चाइल्ड एलिमेंट को
contain: paint
वाले एलिमेंट के आधार पर दिखाया जाता है, न कि किसी अन्य पैरंट एलिमेंट के आधार पर. जैसे- दस्तावेज़. - यह, स्टैकिंग कॉन्टेक्स्ट बन जाता है. इसका मतलब है कि
z-index
जैसी चीज़ों का एलिमेंट पर असर पड़ेगा और बच्चों को नए कॉन्टेक्स्ट के हिसाब से स्टैक कर दिया जाएगा. - यह एक नया फ़ॉर्मैट बन जाता है. इसका मतलब है कि अगर आपके पास पेंट कंटेनमेंट वाला कोई ब्लॉक लेवल एलिमेंट है, तो उसे नया इंडिपेंडेंट लेआउट एनवायरमेंट माना जाएगा. इसका मतलब है कि एलिमेंट के बाहर का लेआउट, आम तौर पर एलिमेंट के चाइल्ड पर असर नहीं डालता.
साइज़ (इसमें शामिल है: साइज़)
contain: size
का मतलब यह है कि एलिमेंट के चिल्ड्रन माता-पिता के साइज़ पर कोई असर नहीं डालते. साथ ही, इसके अनुमानित या तय किए गए डाइमेंशन ही इस्तेमाल किए जाएंगे. इसी वजह से, अगर आपने contain: size
को सेट किया, लेकिन एलिमेंट के लिए डाइमेंशन की जानकारी नहीं दी (सीधे तौर पर या फ़्लेक्सिबल प्रॉपर्टी के ज़रिए), तो यह 0 पिक्सल x 0 पिक्सल पर रेंडर होगा!
साइज़ कंटेनमेंट, बेल्ट और ब्रेसेस की मदद से साइज़ तय करने का एक तरीका है. इससे यह पक्का किया जाता है कि साइज़ के लिए आपको चाइल्ड एलिमेंट पर निर्भर न रहना पड़े. हालांकि, इससे परफ़ॉर्मेंस पर कोई खास फ़ायदा नहीं होता.
स्टाइल (शामिल है: स्टाइल)
यह अनुमान लगाना मुश्किल हो सकता है कि किसी एलिमेंट की स्टाइल को बदलने से, डीओएम ट्री पर किस तरह का असर पड़ेगा. इसका एक उदाहरण सीएसएस काउंटर में है. इसमें चाइल्ड में काउंटर को बदलने से, उस नाम की काउंटर वैल्यू पर असर पड़ सकता है जिसका इस्तेमाल दस्तावेज़ में कहीं और किया गया है. contain: style
सेट होने पर, स्टाइल में किए गए बदलाव, एलिमेंट के बाद लागू नहीं होंगे.
साफ़ तौर पर बता दें कि contain: style
से, स्कोप स्टाइलिंग की सुविधा नहीं मिलती. हालांकि, ऐसा Shadow DOM में किया जाता है. कंटेनमेंट का मतलब है, ट्री के उन हिस्सों को सीमित करना जिनके बारे में जानकारी दी गई है, जब स्टाइल में बदलाव किया जाता है, न कि उनका एलान किया जाता है.
सख्त और कॉन्टेंट को रोकना
contain: layout paint
जैसे कीवर्ड भी जोड़े जा सकते हैं. इससे सिर्फ़ वही व्यवहार किसी एलिमेंट पर लागू होंगे. हालांकि, दो अन्य वैल्यू के साथ भी काम करता है:
contain: strict
का मतलबcontain: size layout paint
के जैसा हैcontain: content
का मतलबcontain: layout paint
के जैसा है
सख्त कंटेनमेंट का इस्तेमाल करना तब सबसे अच्छा होता है, जब आपको एलिमेंट का साइज़ पहले से पता हो (या आपको उसके डाइमेंशन को रिज़र्व करना हो). हालांकि, ध्यान रखें कि अगर डाइमेंशन के बिना सख्त कंटेनमेंट का एलान किया जाता है, तो एलिमेंट को 0 पिक्सल x 0 पिक्सल वाले बॉक्स के तौर पर रेंडर किया जा सकता है.
वहीं दूसरी ओर, कॉन्टेंट को कंटेन करने से, उसके दायरे में काफ़ी सुधार होता है. हालांकि, इसके लिए आपको एलिमेंट के डाइमेंशन की जानकारी देने या उसे जानने की ज़रूरत नहीं है.
दोनों में से, contain: content
ऐसी साइट है जिसका इस्तेमाल आपको डिफ़ॉल्ट रूप से करना चाहिए. अगर contain: content
आपकी ज़रूरतों के हिसाब से काफ़ी मज़बूत नहीं है, तो आपको सख्त कंटेनमेंट को इस तरह से हल करना चाहिए कि इससे आपकी पहुंच से बचा जा सके.
हमें बताएं कि आपको किस तरह
कंटेनमेंट, ब्राउज़र को यह बताने का एक बेहतरीन तरीका है कि आपको अपने पेज में क्या अलग रखना है. Chrome 52+ में इसे आज़माएं और हमें बताएं कि आपको यह सुविधा कैसी लगी!