Chrome 52 में सीएसएस को कंटेनमेंट

कम शब्दों में कहा जाए तो

नई सीएसएस कंटेनमेंट प्रॉपर्टी की मदद से डेवलपर, ब्राउज़र के स्टाइल, लेआउट, और पेंट का काम करने की सीमा तय कर सकते हैं.

इसमें कुछ वैल्यू होती हैं, जिसकी वजह से इसका सिंटैक्स ऐसा होता है:

    contain: none | strict | content | [ size || layout || style || paint ]

यह Chrome 52+ और Opera 40+ में है (और इसमें Firefox से सार्वजनिक समर्थन है), इसलिए इसे आज़माएं और हमें बताएं कि आप कैसे आगे बढ़ते हैं!

शामिल प्रॉपर्टी

कोई वेब ऐप्लिकेशन या जटिल साइट बनाते समय, परफ़ॉर्मेंस की सबसे बड़ी चुनौती यह होती है कि स्टाइल, लेआउट, और पेंट के असर को सीमित किया जाए. अक्सर कंप्यूटेशन के काम के लिए डीओएम के पूरे हिस्से को "स्कोप में" माना जाता है. इसका मतलब यह हो सकता है कि किसी वेब ऐप्लिकेशन में पूरी तरह से शामिल "व्यू" को आज़माना पेचीदा साबित हो सकता है: डीओएम के एक हिस्से में किए गए बदलाव से दूसरे हिस्सों पर असर पड़ सकता है. साथ ही, ब्राउज़र को यह नहीं बताया जा सकता कि कौनसा डेटा स्कोप में होना चाहिए या कौनसा स्कोप से बाहर होना चाहिए.

उदाहरण के लिए, मान लें कि आपके डीओएम का कुछ हिस्सा ऐसा दिखता है:

    <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>

हालांकि, इस मामले में पूरा डीओएम दायरे में है. इसका मतलब है कि स्टाइल, लेआउट, और पेंट की कैलकुलेशन के लिए, सभी एलिमेंट को ध्यान में रखा जाना चाहिए. भले ही, उनमें कोई बदलाव किया गया हो या नहीं. डीओएम जितना बड़ा होगा, कंप्यूटेशन का काम उतना ही ज़्यादा होगा. इसका मतलब है कि आपके ऐप्लिकेशन में ऐसा हो सकता है कि उपयोगकर्ता के इनपुट के लिए, वह काम न करे.

अच्छी बात यह है कि आधुनिक ब्राउज़र स्टाइल, लेआउट, और पेंट का काम अपने-आप सीमित करने की प्रोसेस में तेज़ी से आगे बढ़ रहे हैं. इसका मतलब यह है कि इन ब्राउज़र पर चीज़ें तेज़ी से होती जा रही हैं और आपको कुछ भी नहीं करना पड़ता.

हालांकि, इससे भी अच्छी बात यह है कि एक नई सीएसएस प्रॉपर्टी, जो डेवलपर को कंट्रोल देती है: कंटेनमेंट.

सीएसएस कंटेनमेंट एक नई प्रॉपर्टी है, जिसमें कीवर्ड में शामिल है, जो चार वैल्यू का इस्तेमाल करता है:

• 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 के बराबर है

अगर आपको एलिमेंट का साइज़ पहले से पता है या आपको इसके डाइमेंशन को रिज़र्व करना है, तो सख्त कंटेनमेंट का इस्तेमाल करना बेहतर होता है. हालांकि, इस बात का ध्यान रखें कि अगर डाइमेंशन के बिना सख्त कंटेनमेंट की घोषणा की जाती है, तो एलिमेंट को 0px x 0px बॉक्स में रेंडर किया जा सकता है.

वहीं दूसरी ओर, कॉन्टेंट को शामिल करने की सुविधा से काफ़ी सुधार किए जा सकते हैं. हालांकि, इसके लिए आपको समय-समय पर एलिमेंट के बारे में जानने या उसके डाइमेंशन तय करने की ज़रूरत नहीं होती.

इन दोनों में से, contain: content वह सुविधा है जिसका इस्तेमाल आपको डिफ़ॉल्ट रूप से करना चाहिए. अगर contain: content आपकी ज़रूरतों के हिसाब से ज़्यादा मज़बूत नहीं है, तो आपको इसे बिलकुल सख्ती से रोकना चाहिए.

हमें बताएं कि आपका काम कैसा रहा

कंटेनमेंट, ब्राउज़र को यह बताने का शानदार तरीका है कि आपको अपने पेज के अंदर किसे अलग रखना है. Chrome 52+ को आज़माएं और हमें बताएं कि आप कैसे आगे बढ़ते हैं!

काम के लिंक

• सीएसएस कंटेनमेंट की खास जानकारी
• Chrome की स्थिति में कंटेनमेंट