होते हैं - सीएसएस-ट्रिक्स

containसीएसएस में संपत्ति है कि तत्व और उसके वंश तक संभव हो, दस्तावेज़ पेड़ के स्वतंत्र माना जाता है ब्राउज़र को इंगित करता है। यह संभावित रूप से DOM के सीमित क्षेत्र के लिए लेआउट, शैली, पेंट, आकार, या किसी भी संयोजन में गणना के साथ प्रदर्शन लाभ प्रदान करता है और संपूर्ण पृष्ठ नहीं।

संपत्ति में पांच मानक मूल्य और दो आशुलिपिक मूल्य हैं जो मानक मूल्यों के रूपों को जोड़ते हैं। प्रत्येक मान के कुछ अद्वितीय और साझा किए गए लाभ हैं जो उन्हें लागू करने वाले तत्व के संदर्भ के आधार पर करते हैं।

इस संपत्ति का विशिष्ट उपयोग एक तत्व है जिसमें कुछ प्रकार की सामग्री होती है। एक विजेट पर विचार करें जो आने वाले डेटा को प्रस्तुत करता है जो तत्व के वंशजों के लेआउट और दृश्यों को बदलता है। विचार करने के लिए एक अन्य तत्व वह है जिसमें तृतीय-पक्ष डेटा के परिणाम शामिल हैं, जैसे कि बैनर विज्ञापन, जहां रोकथाम के लाभ हमें या तो कुछ सामग्री को चित्रित करने की प्राथमिकता देते हैं, जो सामग्री प्राप्त हुई है, उसे कैसे नौकरशाही को संभालना है या यह निर्धारित करना है कि सामग्री दिखना भी चाहिए। दूसरी ओर, ज्यादातर स्थिर साइट को पहले लेआउट के अलावा और पेज लोड पर स्क्रीन पर पेंट करने के अलावा थोड़ा लाभ मिलेगा।

वाक्य - विन्यास

div ( contain: none | strict | content | ( size || layout || style || paint ); )

div ( contain: none; /* no containment on element */ contain: layout; /* influences how element relates to other elements in the document */ contain: paint; /* influences how element is painted to screen */ contain: size; /* influences how element affects size calculations for the page */ contain: style; /* is considered at-risk for removal from spec */ 
 contain: content; /* combines layout and paint */ contain: strict; /* combines layout, paint, and size */ )

सम्पत्ति की कीमत

ख़ाका

layoutरोकथाम मूल्य ब्राउज़र उस तत्व के वंशजों में से कोई भी पृष्ठ पर अन्य तत्वों को प्रभावित सूचित, और न ही उन अन्य तत्वों का समावेश है तत्व के वंशज पर कोई असर करते हैं। यह पेज लेआउट बनाते समय ब्राउज़र को आवश्यक गणना की संख्या को कम करने की अनुमति देता है

एक और लाभ यह है कि यदि निहित तत्व ऑफ-स्क्रीन है या किसी तरह से अस्पष्ट है, तो ब्राउज़र देरी से संबंधित गणना को कम प्राथमिकता पर स्थानांतरित कर सकता है या कर सकता है। इसका एक उदाहरण एक निहित तत्व है जो ब्लॉक तत्व के अंत में नहीं है और उस ब्लॉक तत्व की शुरुआत दिखाई देती है।

एक तत्व के साथ layoutनिहित वंश के लिए एक युक्त बॉक्स बन जाता है - जैसे कि पूर्ण स्थिति वाले तत्व। तत्व पृष्ठ के संबंध में एक नया स्टैकिंग संदर्भ प्राप्त करता है और z-index संपत्ति का उपयोग किया जा सकता है। हालांकि, दिशात्मक गुण, जैसे topया left, लागू नहीं होते हैं।

भले ही निहित तत्व के वंशज पृष्ठ पर अन्य तत्वों को प्रभावित न करें, फिर भी वे अपने निहित पूर्वज तत्व को प्रभावित कर सकते हैं। उदाहरण के लिए, एक वंश परिवर्तन के लिए प्रतिक्रिया करने के लिए निहित तत्व का कारण बन सकता है। उस स्थिति में, निहित तत्व अभी भी संभावित रूप से पृष्ठ पर अन्य तत्वों को प्रभावित कर सकता है, लेकिन वंश अभी भी उन गणनाओं में शामिल नहीं होगा।

निम्नलिखित डेमो के लिए एक सरल विवरण प्रदान करता है कि क्या होता है जब layoutरोकथाम लागू किया जाता है। जब प्रत्येक शीर्ष बॉक्स पर क्लिक किया जाता है तो समतुल्य लगाया जाता है और लाल तीर उपस्थिति को बदल देगा। लाल तीर की उपस्थिति से पता चलता है कि क्या बॉक्स के वंशज लेआउट गणना के दौरान पृष्ठ पर अन्य बक्से को प्रभावित करते हैं।

रंग

paintरोकथाम मूल्य ब्राउज़र उस तत्व के वंशज में से कोई भी तत्व के बॉर्डर-बॉक्स के बाहर चित्रित किया जाएगा सूचित। यदि कोई अवरोही तत्व अपने बाउंडिंग बॉक्स के एक हिस्से को समाहित करने के लिए तैनात किया गया है, तो निहित तत्व को border-boxउस हिस्से से नहीं रंगा जाएगा। यदि कोई अवरोही तत्व पूरी तरह से निहित तत्व के बाहर स्थित है, border-boxतो यह बिल्कुल भी चित्रित नहीं है। यह overflow: hidden;तत्व पर लागू होने के समान है , लेकिन आवश्यक गणनाओं को छोड़ने या कम करने के लाभों के बिना।

एक अन्य लाभ यह है कि अगर व्यूपोर्ट के भीतर निहित तत्व किसी तरह से दिखाई नहीं देता है, तो यह पेंटिंग की गणना करते समय तत्व के वंश को छोड़ सकता है। इसका एक उदाहरण एक ऐसा तत्व है जो व्यूपोर्ट के बाईं ओर पृष्ठ पर रखा गया है। यदि निहित तत्व दिखाई नहीं देता है, तो यह गारंटी है कि इसकी सामग्री दिखाई नहीं देगी। इसलिए, उन्हें पेंट गणना में शामिल होने की आवश्यकता नहीं है।

paintसम्‍मिलन वाला एक तत्‍व भी स्‍थित वंशजों के लिए एक युक्त बक्‍सा बन जाता है - जैसे कि पूर्ण स्थिति वाले तत्‍व। तत्व पृष्ठ के संबंध में एक नया स्टैकिंग संदर्भ भी प्राप्त करता है और z-indexसंपत्ति का उपयोग किया जा सकता है। हालांकि, दिशात्मक गुण, जैसे topया left, लागू नहीं होते हैं।

एक स्क्रॉलिंग तत्व को अपने वंशजों को एक नई पेंट परत में रखने से अतिरिक्त लाभ मिल सकता है जो स्क्रॉलिंग प्रदर्शन में सहायता कर सकता है। आम तौर पर, स्क्रॉलिंग तत्व लगातार पुनरावृत्ति पैदा कर सकते हैं क्योंकि स्क्रॉलिंग के दौरान वंशज दिखाई देते हैं और गायब हो जाते हैं। रंग नियंत्रण के साथ एक स्क्रॉलिंग तत्व संभावित रूप से स्क्रॉलिंग वंश के इस निरंतर पुनरावृत्ति को छोड़ सकता है।

निम्नलिखित डेमो के लिए एक सरल विवरण प्रदान करता है कि क्या होता है जब paintरोकथाम लागू किया जाता है। बैंगनी बॉक्स पर कंटेंट को टॉगल करने के लिए कहीं भी क्लिक करें। जब हरे रंग के बक्सों में से कुछ को उपस्थिति में बदल दिया जाता है। हरे बक्से की उपस्थिति से पता चलता है कि वे कैसे चित्रित हैं या चित्रित नहीं हैं।

आकार

sizeरोकथाम मूल्य ब्राउज़र कि वंश में से कोई भी जब पेज के लिए लेआउट गणना प्रदर्शन कर विचार करने की आवश्यकता को सूचित। इसमें निहित तत्व heightऔर widthगुण होने चाहिए , या यह शून्य पिक्सेल वर्ग तक गिर जाएगा। केवल तत्व ही पृष्ठ लेआउट गणना के लिए विचार करने की आवश्यकता है क्योंकि वंश तत्व के आकार को प्रभावित नहीं कर सकता है। निहित तत्व के वंशज ऐसी गणनाओं में पूरी तरह से छोड़ दिए गए हैं; मानो उसके कोई वंशज न हों।

अनुकूलन के पूर्ण लाभों के लिए, sizeआमतौर पर कंसंट्रेशन को अन्य कंटेंट प्रकारों के साथ लागू किया जाता है।

sizeसम्‍मिलन वाला एक तत्व पृष्ठ के संबंध में एक नया स्टैकिंग संदर्भ प्राप्त करता है और z-indexसंपत्ति का उपयोग किया जा सकता है। हालांकि, दिशात्मक गुण, जैसे topया left, लागू नहीं होते हैं।

निम्नलिखित डेमो एक सरल विवरण प्रदान करता है कि क्या होता है जब sizeरोकथाम लागू होती है। बैंगनी बॉक्स पर कंटेंट को टॉगल करने के लिए कहीं भी क्लिक करें। जब रंग को लागू किया जाता है तो बैंगनी बॉक्स आकार में बदल जाता है। डिफ़ॉल्ट रूप से बैंगनी बॉक्स की ऊंचाई उसके बच्चों द्वारा परिभाषित की जाती है, लेकिन रोकथाम के साथ ऊंचाई को परिभाषित किया जाना चाहिए। एक बार रोकथाम लागू हो जाने के बाद, वंशज अब आकार से संबंधित लेआउट गणनाओं में शामिल नहीं होते हैं।

अंदाज

styleरोकथाम मूल्य ब्राउज़र कि इस तरह के काउंटर और उद्धरण के रूप में कुछ सीएसएस गुण,, निहित तत्व के दायरे वाला हो जाएगा सूचित।

counter-incrementऔर counter-setगुण निहित तत्व के उप पेड़ के दायरे वाला होना चाहिए। यदि निहित तत्व के बाहर विस्तारित किया जाता है तो एक नया काउंटर बनाया जाता है।

की सामग्री संपत्ति के मूल्यों open-quote, close-quote, no-open-quote, और no-close-quoteनिहित तत्व के उप पेड़ के दायरे वाला होना चाहिए।

इस नियंत्रण मूल्य को विनिर्देशन से हटाए जाने का जोखिम माना जाता है।

सामग्री

contentरोकथाम मूल्य दोनों लेआउट और रंग नियंत्रण मूल्यों का एक संयोजन है। यह इस तरीके से नियंत्रण लागू करने के बराबर है:

div ( contain: layout paint; )

प्रत्येक मूल्य के लिए ऊपर वर्णित सभी संभावित लाभ तब निहित तत्व के लिए उपलब्ध होंगे। पृष्ठ पर कई तत्वों के लिए व्यापक रूप से लागू करने के लिए इस रोकथाम को अपेक्षाकृत सुरक्षित माना जाएगा।

कठोर

strictरोकथाम मूल्य का एक संयोजन है layout, paintऔर sizeरोकथाम मूल्यों। यह इस तरीके से नियंत्रण लागू करने के बराबर है:

div ( contain: layout paint size; )

प्रत्येक मूल्य के लिए ऊपर वर्णित सभी संभावित लाभ तब निहित तत्व के लिए उपलब्ध होंगे।

कंसेंट वैल्यूज़ के "सबसे सख्त" होने के नाते, इस मूल्य का उपयोग सावधानीपूर्वक विचार के साथ किया जाना चाहिए। यह आयाम आवश्यकताओं के कारण होता है जो निहित तत्व पर लागू होता है। इन आवश्यकताओं के साथ, यह नियंत्रण मूल्य, रोकथाम के सबसे संभावित प्रदर्शन लाभ प्रदान करता है।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
५२	69. है	नहीं न	। ९	नहीं न

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	नहीं न