अलगाव - सीएसएस-ट्रिक्स

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

.module ( isolation: isolate; )

mix-blend-modeकिसी अन्य तत्व पर घोषित किए जाने पर इसका सबसे अधिक उपयोग किया जाता है। isolationतत्व को लागू करने वाला तत्व उस तत्व को mix-blend-modeलागू करता है ताकि वह उस अन्य तत्वों पर लागू न हो जो उसके पीछे हो सकता है।

दूसरे शब्दों में, अगर mix-blend-modeअतिव्यापी तत्वों को एक दूसरे के साथ मिश्रण करने के लिए कह रहा है, तो isolationउन तत्वों पर छूट बनाता है जहां यह लागू होता है। यह मिक्स-ब्लेंड-मोड को बंद करने का एक तरीका है, लेकिन सीधे सम्मिश्रण वाले तत्व का चयन करने की आवश्यकता के बजाय एक मूल तत्व से।

मूल्यों

• isolate: जैसा कहता है वैसा ही करता है। यह तत्व को अन्य तत्वों में सम्मिश्रण करने से बचाता है जो पृष्ठभूमि में हैं।
• auto: अलगाव को रीसेट करता है और तत्व को अपनी पृष्ठभूमि में मिश्रण करने की अनुमति देता है।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन अलगाव चा-चा-चा देखें।

एक उपयोग मामला

मारिया एंटोनियेटा पर्ना, साइटप्वाइंट के लिए लेखन, ने एक डेमो बनाया जो बिंदु घर को विशेष रूप से अच्छी तरह से चलाता है। हमने उसका डेमो समझाने में मदद करने के लिए यह ग्राफिक बनाया:

CodePen पर SitePoint (@ साइट) द्वारा मिक्स-ब्लेंड-मोड के साथ पेन टेक्स्ट / इमेज मिश्रण देखें।

जहां यह काम नहीं करता है

isolationजब background-blend-modeउपयोग किया जाता है तो आप तत्वों को अलग करने की उम्मीद कर सकते हैं , लेकिन ऐसा नहीं है। पृष्ठभूमि तत्व पहले से ही उनकी प्रकृति से अलग-थलग हैं, क्योंकि वे उस सामग्री के साथ मिश्रण नहीं करते हैं जो उनके पीछे है।

एक अन्य स्थान जहां isolationऐसा लगता है कि अमान्य है, जब इसे translateउसी तत्व के साथ संयोजन में उपयोग किया जाता है । यदि आप absoluteस्थिति और क्षैतिज रूप से स्थिति का उपयोग करके और translateएक साथ दोनों को केन्द्र में रखने का प्रयास करते हैं, तो आप इसमें टकरा सकते हैं:

.module ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); isolation: isolate; )

उपयोग के translateबिना अपने दम पर तत्व को अलग करने के लिए प्रकट होता है isolation।

सम्बंधित

• mix-blend-mode
• background-blend-mode

अधिक जानकारी

• W3C विनिर्देशन
• MDN पर अलगाव
• Codrops पर अलगाव
• SitePoint: CSS मिक्स-ब्लेंड-मोड प्रॉपर्टी को क्लोज-अप लुक

पृथक करने के लिए ब्राउज़र समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	आईई / एज	एंड्रॉयड	आईओएस
४१	7.1	३६	३०	नहीं	४१	8.4

क्या मैं मिक्स-ब्लेंड-मोड के लिए ब्राउज़र सपोर्ट ... का उपयोग कर सकता हूं

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

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
४१	32	नहीं न	। ९	टी.पी.

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

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